jQuery/CSS related problem

Question

Hi

I am new to jQuery, and this is the page I'm currently developing.

http://90.230.237.71/gandhi.html (Hope that works now :P)

I'm testing your tips on page gandhi2.html

When I hit "Show/hide gallery" all the images are first opened vertically, and later they are corrected to their horizontal placement, that's the problem. They should be horizontal right away! I don't know if this is due to jQuerys slideDown or entirely CSS-related, but the code is all there for you.

Initally, the images are set to display: none, perhaps they then are invisibly stored vertically. Then slideDown is performed and last, the CSS-attributes are changed to "display: inline". Perhaps I need to change execution order of slideDown and setting the CSS-attributes... but how?

I NEED HELP... for many reasons, but I only want you to help me with this one ;)

And also, please actually look at the code before making any assumptions. It's all there in the code.

EDIT

Has got it working by changing one line in jQuery. Line 5738 I changed from this.elem.style.display = "block"; to this.elem.style.display = "inline-block";

Do I need to use my own modified version of jQuery or can I simply override that value from my html-page? Perhaps I should start a new thread for that question...

Answer 1

They are showing horizontally to me when I hit the "Show/hide gallery" link. Also, try hiding with jquery in ready handler rather than using display:none in CSS so that jquery remembers their initial display settings eg block, etc.

$(function()){
  $('.gallery_container img').hide();
};

Answer 2

slideDown sets the display CSS property to block; which you seem to have realised, as you change it to inline in your slideDown callback.

Instead of animating each image individually, you should wrap them in a block level element (the ul.navlist?), and slideDown() that instead.

Answer 3

In your stylesheet, try setting the li elements to display: inline-block. Then at the start of your jQuery, use $(/*li elements*/).hide().

EDIT:

Found the problem: http://dev.jquery.com/browser/trunk/jquery/src/fx.js#L269

EDIT 2:

Fixed: http://www.jsfiddle.net/aUAAm/