Search Results

Search found 3629 results on 146 pages for 'nested divs'.

Page 66/146 | < Previous Page | 62 63 64 65 66 67 68 69 70 71 72 73  | Next Page >

  • Determining which form input failed validation?

    - by Alastair Pitts
    I am designing a creation wizard in ASP.NET MVC 1 and instead of posting back each step, I'm using javascript to toggle the display of the different steps divs. This is a quick sample of the code, just to explain. <% using (Html.BeginForm()) {%> <fieldset> <legend>Fields</legend> <div id="wizardStep1"> <% Html.RenderPartial("CreateStep1", Model); %> </div> <div id="wizardStep2"> <% Html.RenderPartial("CreateStep2", Model); %> </div> <div id="wizardStep3"> <% Html.RenderPartial("CreateStep3", Model); %> </div> </fieldset> <% } %> I have javascript that just toggles the visibility of the divs, with each partial view containing a different section of the input form (which is pretty large by itself) My question is, if the form fails validation and I reload the page with the validation errors, is there a way for me to determine which div contains the error? Either in javascript or other? Failing that, is there a good client-side validation library for MVC 1? Ideally I'd love to move to MVC2 and the client side validation built into that, but I am required to use MVC1

    Read the article

  • How to preload images using jquery for carousel?

    - by Pandiya Chendur
    I used jquery stepcarousel plugin and it works fine... But how to preload images that is used by the plugin... I am using this, <div id="mygallery" class="stepcarousel"> <div class="belt"> <div class="panel"> <img src="Images/img1.jpg" /> </div> <div class="panel"> <img src="Images/img2.jpg" /> </div> </div> </div> <script type="text/javascript"> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: { enable: true, moveby: 1, pause: 3000 }, panelbehavior: { speed: 500, wraparound: false, persist: true }, defaultbuttons: { enable: true, moveby: 1, leftnav: ['Images/lft_arrow.jpg', -5, 220], rightnav: ['Images/rit_arrow.jpg', -5, 220] }, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file'] }) </script> How to preload images used by mygallery div such that i can avoid flickering.....

    Read the article

  • How to create a jpeg using set of div with backgrounds - PHP/jQuery

    - by Dasun
    The final output of the image looks like this below. If you look into html parts, It's create using different divs as below. All the div are placed one on one using CSS and making the position to absolute. <div id="tproduct" class="timage" style="z-index: 30; background-image: url('main-mask.png') ;"></div> <div id="tdesign1" class="timage" style="z-index: 20; background-image: url('design1.png');"></div> <div id="tdesign2" class="timage" style="z-index: 20; background-image: url('design2.png');"></div> <div id="tmaincolor" class="timage" style="background-color:blue;"></div> <div id="tembellishment" class="timage" style="z-index: 10; background-image: url('flower.png');"></div> If we look at separately it will look like this below. etc My question is how can I create a single image using above set of divs and images? I can use PHP or jQuery? I only want the steps or guidance how it should be done. Thanks

    Read the article

  • regex php: find everything in div

    - by Fifth-Edition
    I'm trying to find eveything inside a div using regexp. I'm aware that there probably is a smarter way to do this - but I've chosen regexp. so currently my regexp pattern looks like this: $gallery_pattern = '/([\s\S]*)<\/div/'; And it does the trick - somewhat. the problem is if i have two divs after each other - like this. <div class="gallery">text to extract here</div> <div class="gallery">text to extract from here as well</div> I want to extract the information from both divs, but my problem, when testing, is that im not getting the text in between as a result but instead: "text to extract here text to extract from here as well" So . to sum up. It skips the first end of the div. and continues on to the next. The text inside the div can contain "<", "/" and linebreaks. just so you know! Does anyone have a simple solution to this problem? Im still a regexp novice.

    Read the article

  • Dragging a copy of all selected elements from a select box--possible?

    - by Sean
    I have a picklist web interface: a pair of select elements with a pair of buttons (a left-pointing arrow and a right-pointing arrow) between them. Users can move items between the two columns by, eg, selecting one of options in the left column and clicking on the right-pointing arrow. Now I have an enhancement request: someone wants to be able to drag-and-drop items between the two columns instead of clicking a button. The problem with my initial two-select-box setup is that as soon as I click one of the highlighted options to initiate a drag, all of the other selected options are deselected. Using jQuery, I've attached mousedown event handlers to both the select boxes and each individual option that just call preventDefault() on the event object, but this isn't sufficient. On Firefox 3 the clicked-on option loses focus immediately, but all other options are still deseleted, and on IE6 (which I regrettably still have to support) it makes no difference at all. So I thought I could maybe create a reasonable facsimile of a select box using list elements or divs or something. I can create something reasonable-looking that works on Firefox, but on IE6, if I shift-click on an element of my pseudo-select object (in order to select a range of options), IE selects all of the text between where I click and the last place I clicked. Again, I've attached preventDefault-ing mousedown, mouseup, and click handlers to all of the elements involved, but it doesn't help. I've even tried overlaying transparent divs over both my original select boxes and my pseudo-select objects, thinking to intercept mouse clicks and manage the selections manually, but I can't make it work on IE. If I use a select box, I can't prevent clicks from changing the selection, and if I use text that just looks like a select element, I can't prevent it from selecting a range of text on a shift-click. Is there some general solution, or am I just out of luck?

    Read the article

  • AJAX.NET __doPostBack changes other content

    - by Raul
    Hi. I have an application where a javascript reads the GPS location of the device and sends it to serverside script like this: f() { var initialLocation= Someshit(); document.getElementById('<% = text.ClientID %>').value=initialLocation; var button = document.getElementById('<% = Button4.ClientID %>'); button.click(); } And i have some AJAX.NET code: <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button4" runat="server" Text="PlaceHolder" onclick="Button4_Click"/> <asp:TextBox ID="text" runat="server"></asp:TextBox> </ContentTemplate> </asp:UpdatePanel> And a bit further down <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <div> <some divs and asp:gridviews and god knows what > </div> <ContentTemplate> </asp:UpdatePanel> The problem is that the the last divs inner content changes when the event of UpdatePanel1 has finished. Why is that? I don't want the content outside of UpdatePanel1 to be changed whenever UpdatePanel1 is doing its thing. Please help.

    Read the article

  • Super simple CSS tooltip in a table, why is it not displaying and can I make it work?

    - by Kyle Sevenoaks
    Hi, I have been trying to implement many different tooltips on this page for my client, he's adamant that we have a picture of the product show up when you hover over the product name in the order page. I decided to use the super simple CSS tooltip, it's very easy to implement and does exactly what we want. It works on a dynamic page, the others I tried didn't. I have made an example here: CSS tooltip in table example. This page used to be displayed using divs, I have since changed it to a table, as it's tabular data and easier to work with. It worked fine when it used divs, now it's in a table, it won't display the span on hover. My questions are: Why is it not working? How can I make it work? If not, does anyone know another super easy to implement tooltip that can work properly on a dynamic page? Here's the DIV tooltip for reference: DIV display tooltip. Edit: Just noticed it kinda half works in IE8. Thanks.

    Read the article

  • Help me understand dynamic layouts in Sinatra

    - by thermans
    Help me understand this; I'm learning Sinatra (and Rails for that matter, er, and Ruby). Say I'm doing a search app. The search form is laid out in one div, and the results will be laid out in another. The search form is rendered into the div by a previous view (maybe from a login form). I want to process the form params, perform the search, and render the results into the results div. If I have a single "yield" in the layout and render the divs from different views, the results div erases the search div when it renders. If I define the divs in the default layout, then just render the content, obviously the layout will be messed up: there would have to be two "yields" and I don't think Sinatra supports passing blocks in to yields. I tried foca's sinatra-content-for plugin, and that seems closer to what I need. But I can't figure out where to place the "yield_content" statements. If I have this haml in my layout: #search -# search form = yield_content :search #results -# search results = yield_content :results ... this in my search view: - content_for :search do %form{:method => "post"... etc. ... and this in the results view: - content_for :results do %table{:class => 'results'... etc. This sort of works but when I render the results view, the search div is emptied out. I would like to have it remain. Am I doing something wrong? How should I set this up?

    Read the article

  • CSS ] how to automatically resize the wrapper div.

    - by Phrixus
    Hi, I've been struggling with this problem.. There is a wrapper div and it contains 3 vertical column divs with full of texts, and this wrapper div has red background color so that it can be a background of the entire texts. <div id="content_wrapper"> <div id="cside_a"> // massive texts goes here </div> ... // two more columns go here. </div> And here is the CSS code for them. #content_wrapper { background-color:#DB0A00; background-repeat:no-repeat; min-height:400px; } #cside_a, #cside_b, #cside_c { float: left; width: 33%; } And this code gives me a background that covers only 400px height box.. My expectation was the wrapper div automatically resizes depending on the size of the divs in it. Somehow putting "overflow:hidden" with wrapper CSS code makes everything work fine. I have no idea why "overflow:hidden" works.. shouldn't this hide all the overflowed texts..? Could anyone explain me why? Is is the correct way to do it anyway?

    Read the article

  • jQuery attribute question

    - by Nick Simone
    I'm trying to select a series of divs one at a time. I'm sure theres a better way to do this, but I gave them all unique rels and I'm using the rels to select them one at a time. I want to move them over the width of the div, then animate it dropping down the screen. What I have is: $(document).ready(function(){ var totalbricks = 7; var index = 2; $(".brick").animate({top:"600px"}); while(index < totalbricks) { var postion = 45*index; $(".brick[rel='+index+']").css('left', postion+'px'); $(".brick[rel='+index+']").animate({top:"600px"}); index++; } }); All the divs are in a container div. Jquery docs say, 'Variables can be used using the following syntax: [name='" +MyVar+ "']' What am I doing wrong? Here is the HTML that is being used by the jQuery <body> <div id="container"> <div id="canvas"> <div class="brick" rel="1"> </div> <div class="brick" rel="2"> </div> <div class="brick" rel="3"> </div> <div class="brick" rel="4"> </div> <div class="brick" rel="5"> </div> <div class="brick" rel="6"> </div> <div class="brick" rel="7"> </div> </div> </div> </body>

    Read the article

  • jquery clone only once

    - by tsiger
    I have a series of divs like this: <div id="available-posts"> <div class="post" id="unique_id"> <a href="#" class="addme">Add</a> Some text </div> <div class="post" id="unique_id"> <a href="#" class="addme">Add</a> Some text </div> </div> The unique_id is a different number for each of the divs. Now i have a new empty div like this <div class="related-posts"></div> And i clone items in there. The thing is that i want to check if an item is already cloned. If it is i want to stop it from being cloned again. This is how i clone items: // clone it $('.addme').live('click', function() { $(this).parents('div.thepost').clone().fadeIn('normal').appendTo('#related-posts').find('a.addme').html('Remove').removeClass('addme').addClass('removeme'); return false; }); // remove it $('.removeme').live('click', function() { $(this).parents('div.thepost').fadeOut('normal', function() {$(this).remove(); }); return false; }); In other words i want the cloned list to contain only unique items. Not for example 2 clones of the same post. *edit: i am using live coz the first list (available posts) is populated through an AJAX call.

    Read the article

  • Modularizing web applications

    - by Matt
    Hey all, I was wondering how big companies tend to modularize components on their page. Facebook is a good example: There's a team working on Search that has its own CSS, javascript, html, etc.. There's a team working on the news feed that has its own CSS, javascript, html, etc... ... And the list goes on They cannot all be aware of what everyone is naming their div tags and whatnot, so what's the controller(?) doing to hook all these components in on the final page?? Note: This doesn't just apply to facebook - any company that has separate teams working on separate components has some logic that helps them out. EDIT: Thanks all for the responses, unfortunately I still haven't really found what I'm looking for - when you check out the source code (granted its minified), the divs have UIDs, my guess is that there is a compilation process that runs through and makes each of the components unique, renaming divs and css rules.. any ideas? EDIT 2: Thanks all for contributing your thoughts - the bounty went to the highest upvoted answer. The question was designed to be vague- I think it led to a really interesting discussion. As I improve my build process, I will contribute my own thoughts and experiences. Thanks all! Matt Mueller

    Read the article

  • Adding jQuery event handler to expand div when a link is clicked

    - by hollyb
    I'm using a bit of jQuery to expand/hide some divs. I need to add an event handler so that when a link is clicked, it opens a corrisponding div. Each toggled div will have a unique class assigned to it. I am looking for some advice about how to build the event handler. The jQuery $(document).ready(function(){ $(".toggle_container:not(:first)").hide(); $(".toggle_container:first").show(); $("h6.trigger:first").addClass("active"); $("h6.trigger").click(function(){ $(this).toggleClass("active"); $(this).next(".toggle_container").slideToggle(300); }); The css: // uses a background image with an on (+) and off (-) state stacked on top of each other h6.trigger { background: url(buttonBG.gif) no-repeat;height: 46px;line-height: 46px;width: 300px;font-size: 2em;font-weight: normal;} h6.trigger a {color: #fff;text-decoration: none; display: block;} h6.active {background-position: left bottom;} .toggle_container { overflow: hidden; } .toggle_container .block {padding: 20px;} The html has a list of links, such as: <a href="#">One</a> <a href="#">Two</a> and the coorisponding divs to open: <h6 class="trigger">Container one</h6> <div class="toggle_container"> div one </div> <h6 class="trigger">Container two</h6> <div class="toggle_container Open"> div one </div> As I mentioned, I will be assigning a unique class to facilitate this. Any advice? Thanks! To clarify, i'm looking for some advice to build an event handler to toggle open a specific div when a link is clicked from a different part of the page, from a nav for instance.

    Read the article

  • jQuery toggling div visibility

    - by Eef
    I have a HTML document with the below setup: <div class="main-div" style="padding: 5px; border: 1px solid green;"> <div class="first-div" style="width: 200px; height: 200px; padding: 5px; border: 1px solid purple"> First Div <a href="#" class="control">Control</a> </div> <div class="second-div hidden" style="width: 200px; height: 200px; padding: 5px; border: 1px solid red;"> Second Div <a href="#" class="control">Control</a> </div> </div> I also have a CSS class setup called hidden with display setup to none. I have jQuery setup like so: $('.control').click(function(){ var master = $(this).parent().parent(); var first_div = $(master).find(".first-div"); var second_div = $(master).find(".second-div"); $(first_div).toggleClass("hidden") $(second_div).toggleClass("hidden") }); This setup toggles the visibility of the divs, click the control button it hides one div and show the other. However this just hides and shows each div in a flash. I am looking to add some animation to the transitioning of the divs, maybe have one slide up and the other slide down when the 'control' is clicked and vice versa but I am unable to achieve this. Could anyone help out and give some advice on how to do this? Cheer Eef

    Read the article

  • jQuery sliding animation not working

    - by Jake Zeitz
    I have three divs stacked on each other but offset so that a part of each div is visible. When one of the bottom divs is clicked I want the top div to animate out and back into the stack at the bottom, then the div that is clicked will appear at the top. So far I only have the code for when the middle div is clicked, but I cannot get it to work properly. What am I doing wrong? (I also realize that the code I wrote is probably terrible, this is the first jQuery code I have written.) The css is very very simple: .first { z-index: 3; } .second { z-index: 2; } .third { z-index: 1; } The basic html is this: <div class="first"></div> <div class="second"></div> <div class="third"></div> Here is my code: $("div.second").click(function () { $("div.first").animate({ left: "-=200px"}, {duration: "fast", complete: function () { $("div.first").removeClass("first").addClass("third").animate({left: "+=350px", top: "+=60px"}, "fast"); } }); $("div.second").animate({ left: "-=24px", top: "-=30px"}, {duration: "fast", complete: function () { $("div.second").removeClass("second").addClass("first"); } }); $("div.third").animate({ left: "-=24px", top: "-=30px"}, {duration: "fast", complete: function () { $("div.third").removeClass("third").addClass("second"); } }); }); I can get the div.first to move to the side and back. But now I can't get the classes to stay changed. What keeps happening is the div.second will remove it's class and add .first in the animation, but when the animation is complete, it acts like it still has a class of .second.

    Read the article

  • Floated element not included in parent, causing margin-bottom problems

    - by Christian Mann
    Right, so I've got a section of a page: <div class="article"> <div class="author"> <img src="images/officers/john_q_public_thm.jpg" /> <span class="name">John Q. Public</span> <span class="position">President</span> </div> <abbr class="postdate"> <span class="month m-01">Jan</span> <span class="day d-31">31</span> <span class="year y-2009">2009</span> </abbr> <div class="content"> <h2 class="title">Article Title</h2> <p>Pellentesque habitant morbi...facilisis luctus, metus</p> <p>Pellentesque habitant morbi...facilisis luctus, metus</p> </div> </div> <div class="article">...</div> <div class="article">...</div> The author and abbr divs are floated to the left. Each one of these article divs needs to be separated from its siblings by 5px or so. However, the author div is extending beyond the technical "height" of the div. The margin-bottom is doing nothing, as the space is being taken up by the floated author. This is somewhat difficult to envision, so I've placed it on my web server Is there any way to force the parent to be at least as tall as all of the floated elements within? If anyone figures out what I'm saying, thanks.

    Read the article

  • Is it possible to guarantee a unique id for multiple items using the same id variable at a point in

    - by Scarface
    First of all, do not be overwhelmed by the long code, I just put it for reference...I have a function that preg_replaces content and puts it in a jquery dialog box with a matching open-link. For example, if there is a paragraph with two matches, they will be put inside two divs, and a jquery dialog function will be echoed twice; one for each div. While this works for one match, if there are multiple matches, it does not. I am not sure how to distribute unique ids at a point in time for each of the divs and matching dialog open-scripts. Keep in mind, I removed the preg replace function since it kind of complicates the problem. If anyone has any ideas, they will be greatly appreciated. <?php $id=uniqid(); $id2=uniqid(); echo "<div id=\"$id2\"> </div>"; ?> $.ui.dialog.defaults.bgiframe = true; $(function() { $("<?php echo"#$id2"; ?>").dialog({hide: 'clip', modal: true ,width: 600,height: 350,position: 'center', show: 'clip',stack: true,title: 'title', minHeight: 25, minWidth: 100, autoOpen: false}); $('<?php echo"#$id"; ?>').click(function() { $('<?php echo"#$id2"; ?>').dialog('open'); }) .hover( function(){ $(this).addClass("ui-state-hover"); }, function(){ $(this).removeClass("ui-state-hover"); } ).mousedown(function(){ $(this).addClass("ui-state-active"); }) .mouseup(function(){ $(this).removeClass("ui-state-active"); }); });

    Read the article

  • Dojo StackContainer children are not resizing on browser maximise/restore

    - by Andy
    Hi. I have the following nested layout in a dojo 1.4 app: BorderContainer 1 -- Stack Container 1 ----BorderContainer 2 ----BorderContainer 3 The StackContainer is sized with width and height 100%. When I resize the browser window using maximise/restore, the StackContainer correctly resizes to the center region of it's parent BorderContainer. The problem I have is that the StackContainer children (BorderContainer 2 and 3) do not get resized to the StackContainer's contentBox. Is there something special you have to do to force a resize of StackContainer children? I have tried calling StackContainer1.resize() but this makes no difference. Thanks in advance. Additional information: Thanks for the reply peller. The widget hierachy that contains the StackContainer is actually a custom widget, so the StackContainer is not actually in a BorderContainer directly, but has its height and width explicitly set to 100%. This works and the StackContainer is resized correctly on browser maximise. The direct children of the stackcontainer are BorderContainers and it is these BorderContainers that do not get resized when the StackContainer is resized. One point to note is that when the StackContainer is created in markup, the stackcontainer children are empty divs. These divs are then used as placeholders for custom widget creation, e.g. var widget = new com.company.widget(params, placeholderDiv); where placeholderDiv is a direct child of the StackContainer in markup. Should I be adding the programatically created 'widget' to the stackcontainer using addChild instead?

    Read the article

  • ASPX page renders differently when reached on intranet vs. internet?

    - by MattSlay
    This is so odd to me.. I have IIS 5 running on XP and it's hosting a small ASP.Net app for our LAN that we can access by using the computer name, virtual directory, and page name (http://matt/smallapp/customers.aspx), but you can also hit that IIS server and page from the internet because I have a public IP that my firewall routes to the "Matt" computer (like http://213.202.3.88/smallapp/customers.aspx [just a made-up IP]). Don't worry, I have Windows domain authentication is in place to protect the app from anonymous users. So all the abovea parts works fine. But what's weird is that the Border of the divs on the page are rendered much thicker when you access the page from the intranet, versus the internet, (I'm using IE8) and also, some of the div layout (stretching and such) acts differently. Why would it render different in the same browser based on whether it was reached from the LAN vs. the internet? It does NOT do this in FireFox. So it must be just an IE8 thing. All the CSS for the divs is right in the HTML page, so I do not think it is a caching matter of a CSS file. Notice how the borders are different in these two images: Internet: http://twitpic.com/hxx91 . Lan: http://twitpic.com/hxxtv

    Read the article

  • Location of Embedly (JQuery-Preview) Results

    - by user749798
    Embedly/Jquery-Preview has been fantastic. However, I'm trying to change the location of the preview result, and having trouble. Right now, the result appears right below the input field...but I'd rather have it in a separate part of the page. Is there a way to do this? I've tried changing the location of the selector and loading divs, but that hasn't helped. It seems to ignore those divs and put it right below the submit button. Below is my code: <form accept-charset="UTF-8" action="private" class="new_comment" data-remote="true" id="new_comment" method="post"> <input class="photo_comm" id="comment_comment" name="comment[comment]" placeholder="add a comment or link..." size="30" type="text" /><span type="text" id="counter">1000</span> <input class="btn btn-primary btn-mini" data-disable-with="Submitting..." name="commit" type="submit" value="Post" /> </form> <!-- Placeholder that tells Preview where to put the loading icon--> <div class="loading"> <img src='http://embedly.github.com/jquery-preview/images/loading-rectangle.gif'> </div> <!-- Placeholder that tells Preview where to put the selector--> <div class="selector"></div> $('#comment_comment').preview({ key:'60f1dcdf3258476794784148a6eb65e7', // Sign up for a key: http://embed.ly/pricing selector : {type:'rich'}, preview : { submit : function(e, data){ e.preventDefault(); $.ajax({ dataType: 'script', url: this.form.attr('action'), type: 'POST', data: data }); }, }, autoplay : 0, maxwidth : 400, display : {display : 'rich'} });

    Read the article

  • How to paginate json data?

    - by Pandiya Chendur
    I used json data and iterated div elements to get my result.... function Iteratejsondata(HfJsonValue) { //var jsonObj = eval('(' + HfJsonValue + ')'); var jsonObj = JSON.parse(HfJsonValue); for (var i = jsonObj.Table.length - 1; i >= 0; i--) { var employee = jsonObj.Table[i]; $('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>').insertAfter('#ResultsDiv'); } $(".resultsdiv:even").addClass("resultseven"); $(".resultsdiv").hover(function() { $(this).addClass("resultshover"); }, function() { $(this).removeClass("resultshover"); }); } I get 22 records in total... Now i want to paginate these divs (i.e) 5 divs per page... Any suggestion...

    Read the article

  • jQuery slideDown + CSS Floats

    - by danilo
    I'm using a HTML Table with several rows. Every second row - containing details about the preceding row - is hidden using CSS. When clicking the first row, the second row gets showed using jQuery show(). This is quite nice, but I would prefer the slideDown-Effect. The problem is, inside the details row, there are two floating DIVs, one floating on the left, and one on the right. Now if i slideDown the previously hidden row, the contained DIVs behave strange and "jump around". See this animated gif to understand what I mean: http://ich-wars-nicht.ch/tmp/lunapic_127365879362365_.gif The markup: <tr class="row-vm"> <td>...</td> ... </tr> <tr class="row-details"> <td colspan="8"> <div class="vmdetail-left"> ... </div> <div class="vmdetail-right"> ... </div> </td> </tr> The CSS: .table-vmlist tr.row-details { display: none; } div.vmdetail-left { float: left; width: 50%; } div.vmdetail-right { float: right; width: 50%; } And the jQuery code: if ($(this).next().css('display') == 'none') { // Show details //$(this).next().show(); $(this).next().slideDown(); } else { // Hide details //$(this).next().hide(); $(this).next().slideUp(); } Is there a way to fix this behavior, and to implement a nice slideDown-effect?

    Read the article

  • Is there a way to have the equivalent of multiple :before and :after pseudo-elements in CSS?

    - by Sergey Basharov
    Currently I have this markup that represents an icon container and some elements styled with CSS inside it that in the end show as graphic icon. <div class="icon"> <div class="icon-element1"></div> <div class="icon-element2"></div> <div class="icon-element3"></div> </div> The number of the child elements can be different depending on the complexity of the icon. What I want is to somehow move as much as possible to CSS stylesheet, so that ideally I would have only <div class="icon"></div> and the rest would just render from CSS styles, something close in concept to :before/:after, a kind of virtual divs. I don't want to use JavaScript to add the elements dynamically. It would be possible to do this if we had multiple :before/:after. Here is an example of an icon I get by using the markup from above: As you can see, there are 3 child elements representing gray case, white screen and turquoise button. Please advise, how I can simplify this markup so that not to have to put all the divs each time I want this icon to be shown.

    Read the article

  • The Impossible Layout?

    - by Kyle K
    I'm beginning to think this is impossible, but thought I'd ask you guys. Basically it's a 2 column layout, but the "business" wants the following: -Always take up the entire browser window -Accommodate resizing of browser window -Left column will be fixed width, but that width should be flexible from page-to-page. -Left column has a region at the top with fixed height. -Left column has a bottom region. It should take up the remaining vertical space of browser window. If content is very large, it will have a scroll bar just for that region. -Right column should take up remaining horizontal space of browser window. -Right column has a region at the top with fixed height. -Right column has a bottom region. It should take up the remaining vertical space of browser window. If content is very large, it will have a scroll bar just for that region. I've tried everything...divs, floated, absolutely positioned, tables, divs in tables... Is this even possible? Here's an image of what it should look like: http://imgur.com/zk1jP.png

    Read the article

  • CSS:Hover's problem with text that is hidden because of overflow:hidden ?

    - by Michael Harringon
    In my application i have lots of divs containing text. All divs have overflow set to hidden so that the user does not see the text if the container is not large enough to contain the writing. If the user wants to see the hidden text they are supposed to mouse over the "box". The box then expands and shows the text. Sounds simple enough, right? Well i am having problems and the solution i tried did not work. The problem is that when the user mouses over the box, the text does indeed appears but stays really narrow and comes out of the bottom box, the sameway it would if overflow was set to visible. below is the standard css applied to the div box: .newevent { overflow: hidden; z-index: 0; } I Tried to fix this by setting a hover trigger, when it is activated the box widens, i thought that this would then mean there would be more space to display the text, below is the hover effect: .newevent div:hover { width: 200px; padding: 50px; background-color:#D4D4D4; border: medium red dashed; overflow: visible; z-index: 1; } How do i go about "redrawing" the text when it is hovered over, so that the text can use the new widened area rather than behaving as it is still in a narrow box.

    Read the article

< Previous Page | 62 63 64 65 66 67 68 69 70 71 72 73  | Next Page >