Have I missed something? ScrollTo issue...
Hi There,
I am trying to make a simple scroll to bit of navigation on my website, I have followed this tutorial to the T, and yet there is no scrolling animation present on my site.
I have set the 'Options' link up to link to div "title" which holds the 'key advantages' text-where the mud starts.
I am just trying to link the 'options' link with the bullet point (left hand side, below the large logo) as a test before I implement scrollto to any of the links at the top right hand side of the screen-so please just ignore those links.
Here is my site as it stands at the moment...
If anyone could tell me what I am doing wrong, I would greatly appreciate it-it should be so simple, so I'm sure I am just overlooking something basic here!
Many Thanks to anyone who takes the time to read this/helps me!...
Source code:
//-->
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/jquery.min.js'>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/init.js'></script>
<script type="text/javascript" src="js/slide_1.js"></script>
<script type="text/javascript" src="js/slide_2.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColLiqCtrHdr" onload="MM_preloadImages('nav/navigation_r2_c2_f2.png','nav/navigation_r2_c3_f2.png','nav/navigation_r2_c4_f2.png','nav/navigation_r2_c5_f2.png','nav/navigation_r2_c6_f2.png','nav/navigation_r2_c7_f2.png')">
<div id="container">
<div id="header">
- <div id="logo">
<img src="images/logo.png" alt="Virtual Curtain - Gas Migration Solutions" /></div>
<!-- end #header --></div>
<li><a title="$.scrollTo( '#title', 800, {easing:'elasout'} );" href="#title">Options</a></li>
<div id="mainContent">
<div class="text_hold">
<div id="intro">The Virtual Curtain System</div>
<div id="intro_2">No-dig Geosynthetic Gas Interception, Dilution & Liquid Dispersal</div>
</div>
<div class="right_text"><div id="intro_3">The SEL Virtual Curtain Gas Migration System is the ideal solution to intercept migrating gases. The unique patented system uses the forced dilution principle using passive ventilation techniques which attracts and diltues ground borne gases to acceptable levels.</div>
<div id="intro_4">The system has been used on numerous development sites and sites determined under Part II of the Environmental Protection Act (1990). It has a proven track record over 10 years of use with several sites being monitored to demonstrate the effectiveness <br/>of the barrier.</div>
</div>
<div id="ani_top"><img src="images/vid_top.png" width="445" height="13" /></div>
<div id="ani">
<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
<script type="text/javascript">
AC_FL_RunContent( 'id','player','name','player','width','410','height','278','src','player','allowscriptaccess','always','allowfullscreen','true','flashvars','file=vc_i.flv.flv&image=images/preview.png','movie','player' ); //end AC code
</script><noscript><object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="410" height="278">
<param name="movie" value="player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=vc_i.flv.flv&image=images/preview.png" />
<embed
type="application/x-shockwave-flash"
id="player2"
name="player2"
src="player.swf"
width="410"
height="278"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=vc_i.flv&image=images/preview.png"
/>
</object></noscript>
<!-- END OF THE PLAYER EMBEDDING -->
</div>
<div id="ani_bot"><img src="images/vid_bot.png" /></div>
<div id="flash1">
---------------------
</div>
<!-- end #mainContent --></div>
<!-- end #container --></div>
<div class="body_2">
<div id="grass_hor" class="body_2">
<div id="grass_centre"></div>
</div>
<div id="container_2">
<div class="slider_hold">
<div id="title">Key Advantages</div>
<div class="hold_slide">
<ul id="toolbar">
<li id="new-tab" class="active"><a href="#new-pane" onclick="ScrollSection('new-pane', 'scroller', 'new-pane'); return false" title=">Health and Safety</a></li>
<li id="sites-tab" class="inactive"><a href="#sites-pane" onclick="ScrollSection('sites-pane', 'scroller', 'new-pane'); return false" title="Sites">Engineering and Environmental</a></li>
<li id="files-tab" class="inactive"><" onclick="ScrollSection('files-pane', 'scroller', 'new-pane'); return false" title="Files">Financial</a></li>
<li id="editor-tab" class="inactive"><a href="#editor-pane" onclick="ScrollSection('editor-pane', 'scroller', 'new-pane'); return false" title="Editor">Sustainibilty</a></li>
</ul>
<div class="paper_top"></div>
<div class="paper">
<!-- The Incredible Horizontal-Scrolling Content Box by Panic, Inc. -->
<div class="paper_bot"></div>
</div>
</div>
<!-- end #main_content_2 --></div>
<!-- end #container2 --></div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
</body>
</html>