0

I have an image in my html with a class of "stretch".

Currently, with css, this image re-sizes as the window re-sizes to be 100% of the screen width. I would also like it to move upwards as the window is being re-sized.

I'm assuming this can be done with jQuery but I am not quite sure. Basically the "top" css value just needs to change as the screen width does.

Here is the css that is currently re-sizing it:

.stretch {
width: 100%;
height: auto;
min-height: 420px;
position: absolute;
top: -200px;
}

Thanks,

Wade

Wade D Ouellet
  • 681
  • 3
  • 21
  • 36

2 Answers2

3
var origWidth;
$(document).ready(function() {
    origWidth = $(window).width();  //store the window's width when the document loads
});

$(window).resize(function() {
    var curWidth = $(window).width(); //store the window's current width
    var delta = (curWidth- origWidth);
    $(".stretch").offset({top:($(".stretch").offset().top + delta)});
    origWidth = curWidth;
});
b_d
  • 777
  • 2
  • 7
  • 18
  • So no matter which way you re-size the window the image will move up? I'm gonna try this out but I actually need the image to move up if the window is made bigger and I need it to move down if the window is made smaller. – Wade D Ouellet May 23 '10 at 04:33
  • Oh and it also shouldn't apply to the height value, only the width of the window resize. – Wade D Ouellet May 23 '10 at 04:33
  • Hopefully this is more useful. – b_d May 23 '10 at 13:44
  • Unfortunately it's acting pretty sketchy. It needs to be the same position every time the screen is re-sized to 1024 and the same other position every time it's at 1280 etc. Right now it'll start out at a certain position on 1920, I'll re-size it to 1280 then bring it back to 1920 and it'll be a different spot than before. The point of this si that there's a point of interest or focus in the image that always needs to stay present as the screen is re-sized and the image expands. Would you like me to provide a link to where I have it? – Wade D Ouellet May 23 '10 at 18:45
  • This should do what you want, I tested it out. – b_d May 23 '10 at 21:05
  • very close. It seems to move up as the window gets smaller and moves down as it gets bigger. Just needs to do the opposite. Thanks for all your help so far. – Wade D Ouellet May 23 '10 at 21:13
  • change var delta = (curWidth- origWidth); to var delta = origWidth - curWidth; – b_d May 23 '10 at 21:22
  • Thanks for your help. Unfortunately there is a still a problem that is preventing em from using it. Everything is dependent on what size your screen starts at. So if you start at 1024 and size to 1280, it's different than starting at 1280. – Wade D Ouellet May 24 '10 at 22:39
  • Hey thanks. I'm just heading to bed but ya, I will probably will toss you an email tomorrow and provide as much detail as I can. Would be nice to get it working for sure. Thanks again for all your help, I'll talk to you tomorrow. – Wade D Ouellet May 26 '10 at 08:10
0

Use a relative top value (percent, etc.).

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210