rjk
rjk

Reputation: 49

how move a single div offscreen

i have 2 overlapping divs like so:

div.back {
    background:url(brick.png);
    background-attachment:fixed;
    background-position:right top;
    background-repeat:no-repeat;
    height:765px;
    z-index:200;
}
div.flash {
    margin-top:-765px;
    z-index:201;
}

what i need to do is set the 'back' div offscreen for a time and then move it back. i tried moving it using a bunch of different jquery methods but for some reason they move all of the divs instead of the one with the specified id.

so how do i move just the bottom one offscreen without affecting the top one? it doesn't need to be animated at all; i just need it set aside until needed. (and "hide" won't work because it messes up my flash, so omit that from your suggestions if you don't mind. :)

thanks.

Upvotes: 2

Views: 3157

Answers (3)

rjk
rjk

Reputation: 49

i ended up solving it; instead of trying to move the topmost div i changed the code to alter the margin-top property of the lowest div instead of the highest one; that was able to leave the highest level one onscreen. i still don't know why attempting to change margin-top of the topmost div would affect all the others but it seems to.

Upvotes: 0

yingted
yingted

Reputation: 10554

hide sets the display style to none if fx is off, otherwise it animates the opacity you could try:

  • disabling fx
  • setting display to none by yourself
  • setting visibility to hidden by yourself
  • setting opacity to 0 with jquery
  • setting position to absolute, left to -1000, top to -1000, width and height to 100 using jquery or by yourself
  • putting the div somewhere else, and using remove and appendTo to move it using jquery (if it's just an image)

Upvotes: 0

standup75
standup75

Reputation: 4814

would $("div.back").hide() do the trick?

Upvotes: 1

Related Questions