JQuery Show/Hide - Values for Css Display Affecting Layout

JQuery uses the Css Display value under the hood of the simple show() and hide() functions. The following Html includes three buttons each wrapped in a span tag, and all three span tags placed in a parent div container. On page load the span tags are hidden using JQuery hide() and at some point later on they are displayed using the show() function. The Html is now in the following state with the span tag having received the style value display:block.

<div style="text-align:right; width:100%;"> <span style="display:block"> <input type="button" value="Button1" /> </span> <span style="display:block"> <input type="button" value="Button2" /> </span> <span style="display:block"> <input type="button" value="Button3" /> </span> </div>

In Firefox (3.5) the span elements appear stacked vertically on top of each other, whereas in IE they appear inline. I would have expected the latter in both browsers because I thought that the default layout for span tags was inline.

If I manually change the style from display:block. to display:inline. it looks correct in Firefox. Essentially, when showing an element JQuery is using a value for display that is not always valid. Adding display:block. is enough to show the element but not enough to show it with the inline layout I require.

So, to my questions...

  1. Is this a known issue with JQuery? I am using JQuery 1.2.6.
  2. Has anyone experienced this problem before, and how did you get around it?

-------------Problems Reply------------

Thanks everyone for your suggestions. At first it seemed from the responses that using the show/hide functions would not be possible if I wanted a value of Display other than block.

However, I then noticed that when the span tags were in the hidden state JQuery had added an attribute called oldBlock to each of them. I then realised that this was for temporary storage of the Display Css value when the element is hidden so that the appropriate value can be reinstated when the eleements are shown again.

All I therefore have to do it ensure I set the appropriate value for display before I hide the elements.

Initial state...

<div style="text-align:right; width:100%;">
<span style="display:inline">
<input type="button" value="Button1" />
</span>
...
</div>

Calling .hide() takes us to this state...

<div style="text-align:right; width:100%;">
<span style="display:none" oldBlock="inline">
<input type="button" value="Button1" />
</span>
...
</div>

Calling show() brings us back to this state...

<div style="text-align:right; width:100%;">
<span style="display:inline">
<input type="button" value="Button1" />
</span>
...
</div>

The main problem was that I was NOT giving the span elements a value for Display in my initial state. They would therefore implicitally receive the Browser default, which appears to be inline as I expected. However JQuery will only use the oldBlock attribute if you explicitally set the value for Display before you call the hide function. If there is no oldBlock attribute the show function uses the default value of block.

Thanks again for your suggestions.

Instead of using show/hide use addClass/removeClass and have the style you wish to be applied set up using the class.

.hidden
{
display: none;
}

.inline
{
display: inline;
}

.block
{
display: block;
}

Sample usage:

$('.menuitem').hover(
function() {
$(this).parent()
.find('span')
.removeClass('inline block')
.addClass('hidden');
$(this).addClass('inline');
},
function() {
$(this).addClass('inline');
}
});

I haven't had this problem, but if you need to, you can explicitly set css properties like this:

$(this).show('fast').css("display","inline");

I haven't had this specific problem, but for more control use .toggleClass()

Category:jquery Views:0 Time:2009-11-16

Related post

  • jQuery .filter is working with .css(display) but not with .css(background-color) 2014-12-29

    I have an issue where .filter() works with .css('display') but not .css('background-color'). Below is the code that doesn't work (i.e. highlighted.length = 0): $(document).keydown(function(e){ var keyCode = e.keyCode; var $listUnit = $(".list-unit");

  • Jquery .show() and .hide() or even .css({"display":"none"}); not working in firefox? 2010-04-15

    For some odd reason the part where objects are shown and hidden in my script doesn't seem to be working. I'm not sure if its the fact firefox doesn't like that or whether its the function-based code I have (to save duplicating lines of code)? There i

  • jQuery hide().fadeIn() adds style="display:block" 2011-07-13

    I'm using the following line of code to fade in the new row in the table: $('table tr:last').after($(data.row).hide().fadeIn('fast')); This row (tr) when faded in has the style of display:block assgined to it - and that screws things up in some of th

  • Using jquery to hide and show php dynamicly created content "Search Results" 2011-03-30

    I have a table that displays my search results, and pending if a user has a function open I want to only display 5 results per row, and the same if they have it closed I want to show 7 results. This is working fine, but the issue I am having is when

  • jQuery Show/Hide on Checkbox Not Working 2011-11-16

    This is driving me crazy and must be simple. Basically, I've got a little jQuery function that shows/hides a DIV when it's checked/unchecked. Works fine in FF and Chrome, but doesn't work in IE7. When I check the box in IE7, nothing happens. Any idea

  • jquery .attr('alt','logo').css('display','none') not working ! 2010-04-29

    I have the three following lines and the first two line gets all the images on the document and hides all, but then when I add the third line shows all the images. What I need its to hide only the images with the attribute alt=minimize and alt=maximi

  • How to change css display none or block property using Jquery? 2010-08-27

    How to change css display none or block property using Jquery? --------------Solutions------------- The correct way to do this is to use show and hide: $('#id').hide(); $('#id').show(); An alternate way is to use the jQuery css method: $("#id").css("

  • JQuery - Trouble with .css('display') property 2010-12-21

    // CSS #popupUser{width:180px; height:180px; position:absolute; background:#FFFFFF; border:#000000 2px solid; display:none;} .viewUser{width:173px; float:left; padding:10px; margin-left:20px; margin-bottom:20px; border:#000000 1px solid;} // HTML + J

  • Jquery DIV.css display none but show one div inside that div 2011-02-16

    I have a div container that contains receptacle inputs for a form at the top. So I want the div hidden, id $('#sources').css('display','none') However there is one div inside all of that which I want shown. Due to the irritating source files in a ser

  • jQuery -use hide/show to toggle content so that some displays when javascript is enabled and other content when its *disabled*? 2011-08-08

    I'm trying to use jQuery to hide content with class no_js, and show content with class js. I use this for buttons on a form; when Javascript is enabled, I show the type="button" that binds onclick to a Javascript function, and when Javascript is disa

  • jQuery css display problem with I.E 2011-08-29

    I have this code to display->block or none when click one of them: $('#kktekcekimid').click(function(){ $('#efthavale').css('display','none'); $('#kapida').css('display','none'); $('#kredikarti').css('display','block'); $('#kredikartitaksit').css(

  • Jquery show & hide not working but native change to style.display does work 2013-01-05

    Why does toggling display between block/none work but jQuery show/hide does not? Javascript: <div style="width: 100px; height: 100px; background-color: red;" onmouseover="document.getElementById('div1').style.display = 'block';" onmouseout="docume

  • JQuery - Detect support for CSS 'display: table-row-group' 2010-09-08

    So, Internet Explorer <= 8 does not accept the standard table-row and table-row-group values for the CSS display property (amongst others). I'm reticent to use JQuery's browser detection features as these have been deprecated. How can I detect tab

  • JQuery Change CSS Display not working 2010-12-01

    I have this working on chrome and firefox basically when the user clicks on a sub image it changes the main image by altering it's display property from hide to show. Here's my img elements. <img id="lg1" src="http... <img id="lg2" style="displ

  • CSS Display/Hide Methods 2011-04-11

    I just fixed this issue but I am still puzzled on why I was having trouble. When trying to hide a div I tried to use this code: <div id = myDiv></div> function MyFunction(){ $('#myDiv').css("display", "none"); } That code would not work w

  • td colspan does not work while using jquery show/hide() 2009-05-19

    I have a table of content <table> <thead> <tr> <th>First Name </th> <th>Last Name </th> <th>Description</th> </tr> </thead> <tbody> <tr class="odd"> <td>John</td

  • Jquery Div Hide on click 2009-07-07

    I using coda slider in my page. View it here: http://www.ndoherty.com/demos/coda-slider/1.1.1/ Each tab causes the pane to shift the content inside it when it is clicked. I want something ELSE to happen on click. When a tab is clicked, I want an imag

  • jQuery show/hide/toggle works, but doesn't stay as it should - it reverts to original state 2009-07-16

    I am try to show/hide answers to FAQ questions using jQuery. The idea is that all the questions are listed and only when a user wants to see the answer they click the question (which looks like a link) and then the answer becomes visible. It kind of

  • Use jQuery to hide a DIV when the user clicks outside of it 2009-09-10

    I am using this code: $('body').click(function() { $('.form_wrapper').hide(); }); $('.form_wrapper').click(function(event){ event.stopPropagation(); }); And this HTML: <div class="form_wrapper"> <a class="agree" href="javascript:;">I Agre

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.153 (s). 11 q(s)