ansaurus

Question

jQuery show() method resets "li" entries to display:block

Answer 1

+2 A:

When you do .hide(), your li elements get display:hide, so .show() sets them to display:block because the previous display property value has been lost. So you have two alternatives:

Remove Revealed-like classes from the li and put them in the ul or other container element that is able to get display set to block or
Instead of .show(), try using something like .css({display:'list-item'})

I'd probably go with the second one.

If you want to achieve a .show("normal")-like effect, you can do something like

// assume the following var
var yourstuff = $(/* the stuff you're hiding */);

// instead of just calling .hide(), store width and height first
yourstuff.each(function() {
  $(this).data('orig_w',$(this).width())
         .data('orig_h',$(this).height())
}).hide()

// then, instead of resetting 'display', animate the stuff
yourstuff.css({display:'list-item', overflow: 'hidden', width:0, height: 0;})
  .animate({width: yourstuff.data('orig_w'), height: yourstuff.data('orig_h')},
     "normal", //speed
     "linear", //easing
     function() { // in the end, reset 'overflow' to show the bullet
       yourstuff.css('overflow', 'none');
     })

I hope the above snippet to be enough to give you an idea of what to do.

Miguel Ventura 2009-11-25 00:27:33

IIRC, this is a known bug and should be fixed in one of the next versions of jQuery.

keithjgrant 2009-11-25 00:29:23

Miguel: I'd like to get the animation effect that I get with .show("normal") though :(. I'll see if I can put the Revealed stuff on the ul though.

Larry Osterman 2009-11-25 00:48:13

edited answer to provide way to better emulate .show() with the animation thingy

Miguel Ventura 2009-11-25 10:55:04

Thanks Miguel, that helps a lot.

Larry Osterman 2009-11-25 16:52:22

Answer 2

+1 A:

@Larry & @Miguel:

I've just tested this with a simple script that hide()s and show()s my <li>s, and they were set back to "list-item". Actually, if you look at jQuery's source code, on the show() method, you will see:

jQuery.fn.extend({
show: function(speed,callback){
/* ... */
var old = jQuery.data(this[i], "olddisplay");
/* ... */
jQuery.data(this[i], "olddisplay", display);

And if you look at the hide() method, you will that it actually saves the value o display before setting it to none:

var old = jQuery.data(this[i], "olddisplay");
if ( !old && old !== "none" )
    jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "display"));

The code I used to test it with Firebug:

<script type="text/javascript">
 $(function() {
  $("li").click(function() {
  $("li").hide();
  $("li").show();})
 });
</script>

<body>
 <ul>
  <li>foo</li>
  <li>foo</li>
 </ul>
</body>

Are you sure you can confirm the problem you are talking about? Maybe there's something important I didn't get, or that you didn't tell us.

Good luck!

Bruno Reis 2009-11-25 00:37:11

The display is being set to "block" in show - the code "if ( display === "none" ) display = "block"; is executing. I believe that the code at this location should be the code you described above (jQuery.data(this...).

Larry Osterman 2009-11-25 00:47:26

You could try setting some breakpoints on jQuery to see exactly what is going on. Try that! It is rather interesting.

Bruno Reis 2009-11-25 00:53:36

@Larry: actually that line you highlighted is unimportant. The display style of the `li` elements in the code I've shown you is set about 10 lines before what you hightlighted: `var old = jQuery.data(this[i], "olddisplay"); this[i].style.display = old || "";` After this, IF it couldn't reset the display to the `olddisplay` value, THEN it will set it to block, as the code you've highlighted. Not in the case of the code I've shown you...

Bruno Reis 2009-11-25 01:01:50

Bruno: I've put breakpoints in the code you which resets the style back to the old value. It doesn't get executed. I don't know why it doesn't get executed but it doesn't. For your example, you might try issueing the call to hide() in the ready handler and then the show() in the click handler. You're also not using an animation on your call to show() - try it with "show(normal)" (with a timeout jQuery executes a totally different path).

Larry Osterman 2009-11-25 01:44:02

Oh, I see. Well, at least your problem is solved and we know what caused it! God luck!

Bruno Reis 2009-11-25 09:04:27

ansaurus

tags:

views:

answers:

jQuery show() method resets "li" entries to display:block

related questions