SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery - Creating, calling function ?

    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
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,070
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    You need to replace

    Code JavaScript:
    var divPos = $('#content div').position();
    with

    Code JavaScript:
    var divPos = $('#content ' + div).position();

    And put single quotes in the onclick of the elements: onclick="slideContent('#planes')"

    Please note that HTML's onclick is not the best way to attach an event to an element since HTML should only concern itself with the markup of the text, not with javascript behaviors.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ScallioXTX,

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

    I tried your suggestions but it's still not working

    Please note that HTML's onclick is not the best way to attach an event to an element since HTML should only concern itself with the markup of the text, not with javascript behaviors.
    What is the best way to attach an event to an HTML element

    Thanks in advance for any help.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
    	<script type="text/javascript" >
    	/*
    	  $(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);
          });
        })
        */
            
        $(function(){	  
          function slideContent(div){
            var $content = $('#content');
            var divPos = $('#content ' + div).position();
            var scrollPosition = #content.scrollTop()+divPos.top;
            $('#content').animate({scrollTop: scrollPosition}, 500);
          };
        })
        
    	</script>
    	
      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
    
        div#wrap{
          width:600px;
          margin:50px auto;
        }
    
        div#header{
          text-align:center;
          margin-bottom:30px;
        }
    
        div#header h1{
          font:bold 2em/1em Helvetica;
          color:gray;
          border-bottom:1px dotted gray;
          padding-bottom:10px;
        }
    
        div#header a{
          font:bold 1em Helvetica;
          color:gray;
          text-decoration:none;
          padding:.7em;
        }
    
        div#header a:hover{
          color:#00CED1;
        }
    
        div#header li.it a{
          font-style:italic;
        }
    
        div#header li.it a:hover{
          color:black;
        }
    
        div#header ul{
          padding-top:10px;
        }
        
        div#flowers,
        div#beach,
        div#planes{
          float:left;
          width:600px;
        }
        
        div#header ul,
        div#flowers ul,
        div#beach ul,
        div#planes ul{
          list-style:none;
        }
    
        div#header ul li,
        div#flowers ul li,
        div#beach ul li,
        div#planes ul li{
          display:inline;
        }
        div#content{
          width:600px;
          height:550px;
          overflow:hidden;
          position:relative;
        }
    
        div#flowers,
        div#beach,
        div#planes{
          min-height:600px;
        }
        
        div#planes img{
          height:100px;
          width:auto;
        }
      </style>
    </head>
    
    <body>
      <div id="wrap">
        <div id="header">
          <h1>Portfolio</h1>
          
          <ul>
            <li><a href="#" id="flora">Flora</a></li>
            <li><a href="#" id="beach">Beach</a></li>
            <li><a href="#" id="plane" onclick="slideContent('#planes')">Planes</a></li>
          </ul>
          
        </div><!-- #header -->
        <div id="content">
          <div id="flowers">
            <ul>
              <li><a href="#"><img src="images/flora/01_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/02_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/03_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/04_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/05_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/06_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/07_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/08_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/09_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/10_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/11_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/12_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/13_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/14_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/15_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/16_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/17_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/18_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/19_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/20_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/21_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/22_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/23_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/24_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/25_th.jpg" alt="" /></a></li>
            </ul>
          </div>
          <div id="beach">
            <ul>
              <li><a href="#"><img src="images/beach/01_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/02_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/03_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/04_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/05_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/06_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/07_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/08_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/09_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/10_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/11_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/12_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/13_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/14_th.jpg" alt="" /></a></li>
            </ul>
          </div><!-- #photo1 -->
          <div id="planes">
            <ul>
              <li><a href="#"><img src="images/plane/01_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/02_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/03_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/04_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/05_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/06_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/07_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/08_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/09_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/10_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/11_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/12_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/13_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/14_th.jpg" alt="" /></a></li>
            </ul>
          </div><!-- #photo1 -->
          
        </div><!-- #content -->
      </div><!-- #wrap -->
    
    </body>
    </html>

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,070
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    What is the # now doing in the following line all of a sudden?

    Code:
    var scrollPosition = #content.scrollTop()+divPos.top;
    In your previous post that was a $ and with $ it should work, because you have a variable called $content, but there is no such thing as #content

    As for how to bind it, given your mark up I would do the following:

    Code JavaScript:
    $(function(){	  
          function slideContent(div){
            var $content = $('#content');
            var divPos = $('#content ' + div).position();
            var scrollPosition = #content.scrollTop()+divPos.top;
            $('#content').animate({scrollTop: scrollPosition}, 500);
          };
          $('#plane').click(function() { slideContent('#planes'); });
        })

    Also, inline javascript and CSS is fine while building the page, but when you go live I'd recommend to move the CSS into an external stylesheet, and put the javascript in .js files as well.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know how the # got in there, I've been trying to get this working all afternoon - must of been a typo

    I corrected the # with the $ but still no success.

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

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
    	<script type="text/javascript" >
            
        $(function(){	  
          function slideContent(div){
            var $content = $('#content');
            var divPos = $('#content ' + div).position();
            var scrollPosition = $content.scrollTop()+divPos.top;
            $('#content').animate({scrollTop: scrollPosition}, 500);
          };
        })
        
    	</script>
    	
    	<link rel="stylesheet" href="css/master.css" type="text/css" >
    </head>
    
    <body>
      <div id="wrap">
        <div id="header">
          <h1>Portfolio</h1>
          
          <ul>
            <li><a href="#" id="flora">Flora</a></li>
            <li><a href="#" id="beach">Beach</a></li>
            <li><a href="#" id="plane" onclick="slideContent('#planes')">Planes</a></li>
          </ul>
          
        </div><!-- #header -->
        <div id="content">
          <div id="flowers">
            <ul>
              <li><a href="#"><img src="images/flora/01_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/02_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/03_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/04_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/05_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/06_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/07_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/08_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/09_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/10_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/11_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/12_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/13_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/14_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/15_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/16_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/17_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/18_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/19_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/20_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/21_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/22_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/23_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/24_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/flora/25_th.jpg" alt="" /></a></li>
            </ul>
          </div>
          <div id="beach">
            <ul>
              <li><a href="#"><img src="images/beach/01_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/02_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/03_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/04_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/05_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/06_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/07_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/08_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/09_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/10_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/11_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/12_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/13_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/beach/14_th.jpg" alt="" /></a></li>
            </ul>
          </div><!-- #photo1 -->
          <div id="planes">
            <ul>
              <li><a href="#"><img src="images/plane/01_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/02_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/03_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/04_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/05_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/06_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/07_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/08_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/09_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/10_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/11_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/12_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/13_th.jpg" alt="" /></a></li>
              <li><a href="#"><img src="images/plane/14_th.jpg" alt="" /></a></li>
            </ul>
          </div><!-- #photo1 -->
        </div><!-- #content -->
      </div><!-- #wrap -->
    
    </body>
    </html>

  6. #6
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,070
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    The function can't be found because it's defined in the jQuery(document).ready( fn ) alias $() and is thus not defined in the window object.

    Replace

    Code JavaScript:
    $(function(){
       function slideContent(div){
          var $content = $('#content');
          var divPos = $('#content ' + div).position();
          var scrollPosition = $content.scrollTop()+divPos.top;
          $('#content').animate({scrollTop: scrollPosition}, 500);
       };
    })
    with

    Code JavaScript:
    function slideContent(div){
       var $content = $('#content');
       var divPos = $('#content ' + div).position();
       var scrollPosition = $content.scrollTop()+divPos.top;
       $('#content').animate({scrollTop: scrollPosition}, 500);
    }
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  7. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's worked

    Thanks for all you help.


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
  •