i trying use sidr website i'm building.
the website consists of 1 long page scrollable. contains 3 anchor divs , loads on second anchor can scroll both , down. far works, when try implement sidr menus (i need 3 different texts show, text 1 opens button in anchor div 1, etc.) can't simplest version work, not when copy sample code website.
this have now;
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>konijntjes test</title> <script> $(document).ready(function() { $('#menu1').sidr({ name: 'menu1', side: 'left' // default }); $('#menu2').sidr({ name: 'menu2', side: 'right' }); $('#menu3').sidr({ name: 'menu3', side: 'left' }); }); </script> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css"> </head> <body onload="movewindow()"> <!-- include jquery --> <script src="javascripts/jquery.js"></script> <!-- include sidr js --> <script src="javascripts/sidr/jquery.sidr.min.js"></script> <script type="text/javascript" language="javascript"> function movewindow (){window.location.hash="mylocation";} </script> <div class="container"> <!--- page 2 ---> <div class="page2"> <h1>deel 2</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. aliquam aliquet diam @ erat aliquet malesuada. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <a id="menu1" href="#menu1">menu 1</a> <div id="sidr 2"> <!-- content --> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas se</p> </div> </div> <!--- page 1 ---> <a name="mylocation"><div class="page1"><div class="pagecontainer"> <h1>this should beginning.</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. aliquam aliquet diam @ erat aliquet malesuada. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. aliquam aliquet diam @ erat aliquet malesuada. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <a id="menu2" href="#menu2">menu 2</a> <div id="sidr 1"> <!-- content --> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas se</p> </div> </div> </div> </div></a> <!--- page 3 ---> <div class="page3"> <h1>deel 3</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. aliquam aliquet diam @ erat aliquet malesuada. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <a id="menu3" href="#menu3">menu 3</a> <div id="sidr 3"> <!-- content --> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas se</p> </div> </div> </div> </div> </body> </html> and css have, plus sidr css in document.
body { font-family: verdana; line-height: 1.2em; font-size:1.1em; } p { width: 100%; } .container { margin: 0px auto; width: 800px; } h1 { padding-bottom: 2em; } .pagecontainer { padding-top:9.8em; padding-bottom:10.2em; } .page1 { padding-top:2em; } .page2 { padding-top:2em; } .page3 { padding-top:2em; padding-bottom: 3em; } what doing wrong? i'm new javascript i'm not sure if loaded scripts in right places.
you closing many div elements (3 closing tags 2 opening tags), @ 2 different places. also, script tags parsed in order put them, means if call .sidr() function before loading fonction's code, won't work !
you targetting .sidr() menu elements wrong way: tell link menu itself! here how initiate .sidr() properly:
$('#mylink').sidr({ name: 'thetargettedcontainerwhichwillbecomethehiddensidrmenu', side: 'left' /* pretty self explanatory */ }); live demo
html
<!doctype html> <html> <head> <title>konijntjes test</title> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css"> <!-- include jquery --> <script src="javascripts/jquery.js"></script> <!-- include sidr js --> <script src="javascripts/sidr/jquery.sidr.min.js"></script> <script type="text/javascript"> function movewindow() { window.location.hash = "mylocation"; } </script> <script> $(document).ready(function() { $('#menu1').sidr({ name: 'page1', side: 'left' // default }); $('#menu2').sidr({ name: 'page2', side: 'right' }); $('#menu3').sidr({ name: 'page3', side: 'left' }); }); </script> </head> <body onload="movewindow()"> <div class="container"> <!-- page 2 --> <div class="page2"> <h1>deel 2</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. aliquam aliquet diam @ erat aliquet malesuada. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <a id="menu1" href="#menu1">menu 1</a> <div id="sidr 2"> <!-- content --> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas se</p> </div> </div> <!--- page 1 --> <a name="mylocation"> <div class="page1"> <div class="pagecontainer"> <h1>this should beginning.</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. aliquam aliquet diam @ erat aliquet malesuada. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. aliquam aliquet diam @ erat aliquet malesuada. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <a id="menu2" href="#menu2">menu 2</a> <div id="sidr 1"> <!-- content --> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas se</p> </div> </div> </div> </a> <!-- page 3 --> <div class="page3"> <h1>deel 3</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas sed arcu ac ante convallis aliquam eu nec libero. interdum et malesuada fames ac ante ipsum primis in faucibus. donec euismod odio erat, suscipit elit luctus sed. aliquam aliquet diam @ erat aliquet malesuada. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <a id="menu3" href="#menu3">menu 3</a> <div id="sidr 3"> <!-- content --> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris gravida aliquam odio. duis elementum nisl vel libero molestie, in varius nisi venenatis. maecenas se</p> </div> </div> </div> </body> </html> 
Comments
Post a Comment