Hjælp til Jquery .scrollTo
Hej!Jeg kan ikke få Jquery.scrollTo til at virke.
Kan nogen hjælpe mig igang, vil jeg være meget taknemmelig!
Mit testscript følger i bunden.
Jeg har sat en div op, hvori jeg har placeret en række float:left div's ("sider") som jeg gerne vil scrolle imellem via den række links/menupunkter som jeg har placeret over container-div'en.
Indtil videre har jeg prøvet at implementere .scrollTo på det link der hedder "please go scrolling".
Men jeg magter det vist bare ikke. Mit javascript kendskab er vist for svagt. :P
Her kommer hele HTML dokumentet:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Include jQuery (ScrollTo Requirement) -->
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
<!-- Include jQuery ScrollTo -->
<script type="text/javascript" src="scripts/jquery.scrollto.min.js"></script>
<style>
#testjquery_test, #sagsstyring { height: 524px; margin: 0 auto; margin-top: 2px; clear: both }
#projekt_textbox { width: 740px; height: 474px; padding-top: 50px; float: left }
#slider { width: 740px; position: relative }
#subnavigation { width: 740px; height: 40px; font: normal 9pt "Calibri Bold", "Helvetica Neue", Helvetica, Verdana, sans-serif; position: relative; display: block }
li.subnav { float: left;padding-right:8px; }
li.topnav { float: right }
.scroll { height: 375px; width: 700px; overflow-x: hidden; border-style:solid; }
#scrollContainer { height: 375px; width: 4700px }
div.panel { height: 375px; width: 700px; float:left }
</style>
</head>
<body>
<div id="jquery_test">
<div id="projekt_textbox">
<a href="#projektoversigt" style='text-decoration:none;'>
<h6>test</h6>
</a>
<div id="slider">
<div id="subnavigation">
<ul class="subnav">
<li class="subnav"><a href="#test_projektoversigt">Projektoversigt</a></li>
<li class="subnav"><a onclick="$('#scrollContainer').scrollTo('#test_scrollhertil');" href="#">please go scrolling!</a></li>
<li class="subnav"><a href="#test_kalender">Kalender</a></li>
<li class="subnav"><a href="#test_projekt">Projekt</a></li>
<li class="subnav"><a href="#test_medarbejder">Medarbejder</a></li>
<li class="subnav"><a href="#test_teknik">teknik</a></li>
</ul>
</div>
<div class="scroll">
<div id="scrollContainer">
<div class="panel" id="test_projektoversigt">
<h7>Projektoversigt</h7>
<br/><br/>
<span class="projekttext">
her står der noget et eller andet
</span>
</div>
<div class="panel" id="test_scrollhertil">
<h7>Medarbejderoversigt</h7>
<br><br>
<span class="projekttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>
<div class="panel" id="test_kalender">
<h7>Kalender</h7>
<br><br>
<span class="projekttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>
<div class="panel" id="test_projekt">
<h7>Projekt</h7>
<br><br>
<span class="projekttext">heja
på daja<br><br>
akakakak!
</span>
</div>
<div class="panel" id="test_medarbejder">
<h7>Medarbejder</h7>
<br><br>
<span class="projekttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>
<div class="panel" id="test_teknik">
<h7>Teknik</h7>
<br><br>
<span class="projekttext">Og man kan endda sætte billeder ind.. <br>hvis man vil
</span>
</div>
</div>
</div>
</div>
halløj
</div>
</div>
</body>
</html>
