SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Location
    Portugal
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Move div with Jquery

    I use this script to create a simple horizontal animate scroll. But i need move div #logo with the body....

    I try
    Code JavaScript:
     $('#logo').animate({left:"+="+500},1000);
    but donīt work.....

    Code JavaScript:
    $(document).ready(function() {
     var margin = 0;
     var width  = $('body').width();
     
       $('#next').click(function(event) {
            event.preventDefault();
    	margin +=width;
            $('html, body').stop().animate({scrollLeft:"+="+500},1000);
    		$("#prev a").css('visibility','visible');
        });
        $('#prev').click(function(event) {
    	event.preventDefault();
    	margin -=width;
            $('html, body').stop().animate({scrollLeft:"-="+500},1000);
    	if(margin<100){$("#prev a").css('visibility','hidden');}
        });
    });

    Anyone can help me??

  2. #2
    SitePoint Addict bsmbahamas's Avatar
    Join Date
    Sep 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a wild guess but i think this line:

    $('#logo').animate({left:"+="+500},1000);

    should be written as:

    $('#logo').animate({left:"+=500"},1000);

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Location
    Portugal
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried $('#logo').animate({left:"+=500"},1000); but did not work

  4. #4
    SitePoint Addict bsmbahamas's Avatar
    Join Date
    Sep 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    with this html code i am able to animate the #logo div...

    make sure you are including the jquery code, and i think you also
    need to specify the #logo div as position:relative or position:absolute before
    jquery would be able to move the element.

    hope this helps

    Code:
    <!DOCTYPE html>
    <head>
    <style type="text/css">
    #logo { 
    position: relative;
    }
    </style>
    </head>
    <body>
    <div id="logo">logo</div>
    
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script>
    $(document).ready(function(){
      $('#logo').animate({left:"+=500"},1000);
    });
    </script>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Apr 2011
    Location
    Portugal
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you are right, the code work. The div #logo was float:left, changing to position:relative the code works...

    Thanks

  6. #6
    SitePoint Addict bsmbahamas's Avatar
    Join Date
    Sep 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no prob, glad i could be of assistance.


Tags for this Thread

Bookmarks

Posting Permissions

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