www.webdeveloper.com
Results 1 to 2 of 2

Thread: JQuery - Create + calling functions

  1. #1
    Join Date
    Feb 2009
    Posts
    124

    JQuery - Create + calling functions

    Hi all

    http://www.ttmt.org.uk/forum/portfolio_1/#

    I have this simple photo gallery where the different sections scroll in after clicking the navigation. Everything is working fine but I wanted to create a function for the scrolling thats done with jQuery.

    At the moment I have 3 separate functions for the 3 buttons, they are all doing the same thing apart from the positions of the scroling.

    Code:
      $(function(){
          var $content = $('#content');
          $('#flora').click(function() {
            var floraPos = $('#content #flowers').position();
            var scrollPosition = $content.scrollTop() + floraPos.top;
            $('#content').animate({scrollTop: scrollPosition}, 500);
          });
          $('#beach').click(function() {
            var beachPos = $('#content #beach').position();
            var scrollPosition = $content.scrollTop() + beachPos.top;
            $('#content').animate({scrollTop: scrollPosition}, 500);
          });
          $('#plane').click(function() {
            var planePos = $('#content #planes').position();
            var scrollPosition = $content.scrollTop() + planePos.top;
            $('#content').animate({scrollTop: scrollPosition}, 500);
          });
        })
    I tried doing it like this - passing in the div

    Code:
     $(function(){	  
          function slideContent(div){
            var $content = $('#content');
            var divPos = $('#content div').position();
            var scrollPosition = #content.scrollTop()+divPos.top;
            $('#content').animate({scrollTop: scrollPosition}, 500);
          }
        })
    and calling it like this

    Code:
     <li><a href="#" id="plane" onclick="slideContent(#planes)">Planes</a></li>
    Where am I going wrong? Is it possible to do this ?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
          function slideContent(elm){
            var $content = $('#content');
            var divPos = $(elm).position();
            var scrollPosition = $content.scrollTop()+divPos.top;
            $('#content').animate({scrollTop: scrollPosition}, 500);
          }
    Code:
    <a href="#" id="plane" onclick="slideContent(document.getElementById('planes'))">Planes</a>
    At least 98% of internet users' DNA is identical to that of chimpanzees

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