JQuery Show/Hide - Values for Css Display Affecting Layout

Question

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?

Answer 1

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');
      }
});

Answer 2

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

Answer 3

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");

Answer 4

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.