Using jquery slideToggle, how can I implement it so it doens't dirsupt the layout

JavaScript
1

Hello all.
Created a main tester page.
http://www.danielamorescalchi.com/coreCorp/index.php#
at the bottom right corner i put in a button (orange w/star(for now)) so if the user clicks on it the footer comes up.
works but it disrupts the rest of the layout.
How do I change this so the footer slides up w/out everything else moving?
I thought at first of changing the height of the core of the page and the position of the wrap’s background image (no dice)
or giving the footer a dif z-index. (doubt it)

Can you folks advise on how to fix it or point me to a good tutorial?
Thx
D

2

You might be able to try setting the background-attachment property for the background-image on the #wrap div. This is positioned to the bottom of #wrap at the moment, if it were set to fixed it shouldn’t move when the footer is expanded.

e.g.


#wrap {
  background-image: url('img/oilPlat02.png');
  background-repeat: no-repeat;
  background-position: bottom left;
[COLOR=#ff0000]  background-attachment: fixed;[/COLOR]
}

The other solution would be to move the Footer and the Div containing the menu below the #wrap div

e.g.


<div id="wrap">
  <!-- all your stuff -->
</div>

<div>
  <a id="toggle" ...>...</a>
  <div> <!-- menu --> </div>
</div>

<footer> 
  <!-- footer -->
</footer>
3

Thank you for the advice.
Will go try it out and report!
Have a great day.