Results 1 to 3 of 3

Thread: Callback not working - jQuery

  1. #1
    Join Date
    Aug 2010
    Posts
    86
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Callback not working - jQuery

    Good morning,

    I'm setting up a webpage which will have a text box float across the page from one side to the other and when it disappears it should float across again. The problem I'm having is that it only floats across once and doesn't appear again.

    I must be missing something blindingly obvious but I just can't see it after a couple of hours of trying everything I could think of. I've set up a speeded up version on jsfiddle here http://jsfiddle.net/tonybabb/97rm8rkg/.

    Once I get this working my next task will be to make the moving box appear at random positions on either the left or right side of the page and float to the other side of the page. The box will contain a randomly selected paragraph, which I was thinking could be held in a js array, there will be about 50 paragraphs to choose from. Is jQuery the right tool to use for this or should I be doing it some other way?

    I'd really appreciate some direction on this.

    Thank you,

    Tony Babb

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    Your script doesn't tell the element to float back once it has reached the right side of the page. Here's a possible solution:
    Code:
    <!doctype html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    
    <title>Move it</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style>
    .to-move {
    width: 400px;
    height:70px;
    left: -400px;
    top:100px;
    position:absolute;
    opacity: 0.6; 
    }
    .link-spanner{
      position:absolute; 
      width:100%;
      height:100%;
      top:0;
      left: 0;
      z-index: 1;
    }
    </style>
    
    
    <script>
    function move_it()
    {
    if($('.to-move').css({left: '-400px'}))
    {$('.to-move').animate({left: '100%', top: '500px'}, 10000)}
    if($('.to-move').css({left: '100%'}))
    {$('.to-move').animate({left: '-400px', top: '100px'}, 10000)}
    }
    
    $(document).ready(function(){
    move_it()
    setInterval("move_it()",500)
    });
    </script>
    
    </head>
    
    <body>
    
    <div class="to-move">
       <h3>Some text, click on text to go to Sales page</h3>
    <a href="store.php"><span class="link-spanner"></span></a>
    </div>  
    
    </body>
    
    </html>

  3. The Following User Says Thank You to molendijk For This Useful Post:

    tonybabb (02-01-2015)

  4. #3
    Join Date
    Aug 2010
    Posts
    86
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Aaah, of course, I should have thought of that, thank you. When I tried it in the jsfiddle I found it worked but only forward and back once. After digging around a bit I found that replacing
    Code:
    setInterval("move_it()",500)
    with
    Code:
    setInterval(move_it,500)
    fixed the problem.

    Thanks again for your time.

    Tony

Similar Threads

  1. Resolved Help with callback functions
    By FrickenTrevor in forum JavaScript
    Replies: 4
    Last Post: 11-19-2014, 09:24 AM
  2. Resolved jQuery .post multiple callback
    By ggalan in forum JavaScript
    Replies: 1
    Last Post: 12-07-2011, 02:37 AM
  3. jQuery Multi Level CSS Menu #2 not working in IE6 using jQuery 1.4.x
    By Rikko in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-28-2010, 10:57 PM
  4. jquery callback href
    By ggalan in forum JavaScript
    Replies: 3
    Last Post: 12-15-2010, 02:07 AM
  5. jquery callback infinite call
    By jayapalchandran in forum JavaScript
    Replies: 0
    Last Post: 02-25-2010, 08:26 AM

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
  •