jQuery .animate a div on page width

[paffley]

Hi guys, I'm a little stuck on this one and need some help if possible...

I have this code

$('#object').toggle($(this).width() >= 800);

The above code works fine and makes the #object div hide when page width gets to 800...

This is the part I'm stuck with below...

I'm trying to get the #object div to move position by -100px when the page width gets to 800, but its not working and I'm not sure I've got the 'top' part correct...

$('#object).animate({top:"-100px"}).width() >= 800);

Also, is there anything in the css style positioning I need to change?


Any help with this is hugely appreciated,


Kind regards,
paffley

[sunfighter]

In order for top to animate. The div has to be position:absolute; Then:

$(window).resize(function() {
if($(window).width() >= 800)
$("#object").animate({top:"-100px"});
});

[paffley]

Hi Sunfighter,

Thanks for the heads up...

The code works fine when the browser is restored down, but not when it hits 800px...

this is what happens...
lets say I have at full screen, the #object is at the natural position, then when I restore down the browser window width, the #object moves to -100px no matter what the window size width is.

I need it to only move position when the browser window is restored down to 800px width.

then also, for it to move back to its natural position if the browser window is more than 800px width.


Hope I've explained correctly


This is the code ive been using for the #object to hide/show depending on browser window width (this works fine for show/hide)...

    $(function() { 
        $(window).bind("resize", function() { 
            $('#object').toggle($(this).width() >= 800);   
        }).trigger("resize"); 
    });

Kind regards,
paffley

[sunfighter]

<script type="text/javascript">
	$(window).resize(function() {
	if($(window).width() <= 800){
		$("#object").animate({top:"-100px"});
	}
	if($(window).width() >= 800){
		$("#object").animate({top:"0px"});   // OR what it was set at originally 
	}
});
</script>

Think this is what you want.

[paffley]

Hi again sunfighter,

Thanks for the replies...

I've tryd your method but i'm still getting the same problem, it keeps repositioning on any reduced window width instead of when the width hits 800, also it does not go back to the original position.


Kind regards,
paffley

[sunfighter]

If you think you can hit 800px moving the width you have better control then I do.
Try using a button that will set the width to 800 and animate the #object to accomplish this.