www.webdeveloper.com
Results 1 to 3 of 3

Thread: .animate function help please

  1. #1
    Join Date
    Aug 2012
    Posts
    3

    .animate function help please

    Hello,

    I would like to include the .animate function into the code below but I am struggling with the implementation and would need a little help please:


    Here is the code that will get the id element of my div and automatically goes to them when I click on the corresponding button:
    <script type="text/javascript">
    var $fixedElement = $('#content'); //replace it with your "fixed" element

    $fixedElement.css({ "position": "relative" });
    window.scroll(0, 0);
    $fixedElement.css({ "position": "fixed" });
    </script>

    Here is the animate function:
    .animate({scrollTop:$(this.hash).offset().top}, 500);

    I cannot work out how to add them together , should it be something like:

    <script type="text/javascript">
    var $fixedElement = $('#content'); //replace it with your "fixed" element
    $('#content').animate({scrollTop:$(this.hash).offset().top}, 500);
    $fixedElement.css({ "position": "relative" });
    window.scroll(0, 0);
    $fixedElement.css({ "position": "fixed" });
    </script>

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    The solution to your problem is on the What are you trying to achieve and not How to achieve it. If we understand the problem then we can help you find the solution otherwise I can just blindly look at your code and suggest some syntax corrections.

    $(this) instead of $(this.hash) to refer to the current element ('#content')
    I can only guess the "hash" pertains to the hash value of the url or the href attribute in an anchor.

    Here is a thought:

    $('a [href=^"#"]').click(function(){
    var $hash=$(this).attr('href');

    $('#content').animate({scrollTop:$($hash).offset().top}, 500, function(){
    $(this).css({ "position": "relative" });
    window.scroll(0, 0);
    $(this).css({ "position": "fixed" });
    });

    });


    Of course I am just speculating at this point until I fully understand your problem.

  3. #3
    Join Date
    Aug 2012
    Posts
    3
    Hi HolyHttp,

    Thank you so much for the reply:-)

    My apology for not explaining the problem properly.

    I have a page with tick boxes, about 125 of them using a form made via jotform.
    Each tick box has a picture with a product. To help people scrolling the page faster, I have created a floating bottom bar with categories.

    On a desktop or laptop, when I click on a category, the page rolls down very well, but on the ipad, the page rolls down when clicking on the first button then it freezes, the user must move the page with the finger of at least 1 px in order to unlock the roll on effect when pressing another button. It is apparently a known problem in the iPad browser.

    Some had suggested to create a roll on effect and have another code that moves the page up and down or 1 px after the roll on.

    What would be your suggestion please? I am not too good with javascript, this is the reason why I cannot go on my own and invent something without a little help.

    If you type:
    "scrollTop not working on the ipad" in Google you will find a lot of people with the same problem, some say they have found solutions but I cannot always work them out...


    Thank you so much,


    Ben

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles