Hello,

I've been working on a site recently and I had to make sure one of the images would slide up after having clicked on a button. This all works fine, but after it did slide up, my site layout began to mess itself up.

Basically, after the function had done it's job, the navigation menu messes up. And apparently, this is because it all moves to an absolute position of 0px from top after the image is 'gone'. Any idea how to fix this, or how to specifically keep a space between the top and the hidden image after the function is done?

Here's my code for the function:

$(document).ready(function() {
              $('#startBtn').click(function() {
                   if ($('#bannerBags').is(":hidden"))
                   {
                        $('#bannerBags').slideDown("slow");
                   } else {
                        $('#bannerBags').slideUp("slow");
                   }
                   return false;
              });
});

And here is the link to the site in-case it's needed: http://www.webzhopz.eu

Click on the "Start" button, and you'll notice what I mean. Please do not view the site in IE, as I haven't continued working on that at the moment; stylesheets for that are to be added still.

Any help would be greatly appreciated!

<script type="text/javascript">
 $(document).ready(function() {
     $('#startBtn').click(function() {
       $('#bannerBags').toggle("slow");
       return;
     });
   });
</script>
 
......
 
<div id="bannerBags" style="display:block; clear: both;"><div id="start"><a id="startBtn" title="Minimize header image" href="#">Start</a></div></div>

try again.

Hello Sean,

Thanks for the quick reply. But unfortunately, that did not work. It still pops up to the top, behind the site's logo.

EDIT:

I have fixed the issue of having the page messed up. I've changed it to:

{literal}
<script type="text/javascript">
$(document).ready(function() {
            $('#startBtn').click(function() {
                $('#bannerBags').slideUp('slow', function() {
                    // Finished.
                });
            });
});
</script>
{/literal}

And set the position of the logo itself (above the bag banner) to relative, along with a clear:both;.

However, if you look at the site again (click here) you'll notice that when you click on it the first time, it behaves very oddly. It's as if it doesn't finish the process; you'd have to click a second time for it to do it's thing properly.

The banner image also pops to the right when it's processed. Any idea how to keep it in place, whilst it slides up?

An acquaintance was kind enough to fix said issue after noticing it himself as well. The issue was moreso related to the CSS and HTML than the jQuery function itself.

Both the menu and header image were in need of a clear:both; attribute. The menu's location had been changed as well, and an empty div with a clear attribute was added as well, to prevent the flicker.

As for the "having to click twice to minimize header" issue: I've resolved it by replacing the hash symbol (#) in the href attribute to the self.scrollTo(0,0); method.