JQuery - Creating, calling function?

JavaScript
1

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.


  $(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


 $(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


 <li><a href="#" id="plane" onclick="slideContent(#planes)">Planes</a></li>

Where am I going wrong? Is it possible to do this ?

2

That’s worked

Thanks for all you help.

3

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

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

with

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

What is the # now doing in the following line all of a sudden?


var scrollPosition = [COLOR="Red"]#[/COLOR]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:

$(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.

5

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.


<!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>
6

You need to replace

var divPos = $('#content div').position();

with

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.

7

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/


<!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>