Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts

    jQuery .animate a div on page width

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

    I have this code
    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...

    Code:
    $('#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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    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"});
    });

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts
    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)...

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



    Kind regards,
    paffley
    Last edited by paffley; 02-01-2013 at 05:10 PM. Reason: more info

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Code:
    <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.
    Last edited by sunfighter; 02-01-2013 at 08:33 PM.

  • #5
    New Coder
    Join Date
    Sep 2010
    Posts
    88
    Thanks
    24
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •