September 16, 201213 yr Hey guys! I picked up some material on Javascript and JQuery about a week ago and decided to mess around with some features that inspired me to learn the language. The page is www.ydyn.net/sbl I am trying to implement a scrollable menu from... http://jquerytools.org/demos/scrollable/home.html The navigation button on the left named 'tools' is considered the 'intro button' and it has a corresponding tab that should appear when the website loads. The 'intro button' is identified as 't0' The intro tab does not appear when the website loads and the navigation button doesn't work either. I thought it may have something to do with the '!important' rule located in the #t0.active style. When I navigate between the tabs, t0 loads and remains in an active state and can't be interacted with. More than anything I would love to understand what the issue is. I attempted this with the intention of doing something wrong and wanted to play detective however...I believe I am a little ahead of myself in this instance. I left all the code displayed in the site source for any one that's willing to help. I would greatly appreciate any words that can be offered by some of the veteran JS/JQuery coders out there! Thanks in advance everyone!
September 16, 201213 yr There is a working demo here http://jquerytools.org/demos/scrollable/home.htm compare your html with this see if this helps
September 16, 201213 yr here you go <!DOCTYPE html> <html> <!-- This is a jQuery Tools standalone demo. Feel free to copy/paste. http://flowplayer.org/tools/demos/ Do *not* reference CSS files and images from flowplayer.org when in production Enjoy! --> <head> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> <!-- standalone page styling (can be removed) --> <style> img { border: 0; } #scroll { position: relative; height:; overflow: hidden; border: 1px solid #ddd; width: 948px; padding: 15px; height: 473px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #tools { width: 9999em; position: absolute; height: 400px; } .tool { float: left; width: 1000px; height: 340px; text-align: center; } .details { font-size: 18px; color: #555; margin-top: -20px; background-color: transparent; padding: 5px 148px; } #thumbs { background: url(/media/img/demo-navi.jpg) no-repeat; height: 90px; position: absolute; top: 425px; width: 990px; left: -8px; } .t { padding: 0 !important; border: 0 !important; } .t a { background: transparent url(http://jquerytools.org/media/img/demo-navi.jpg) no-repeat scroll -21px -90px; margin-left: 11px; display: block; width: 99px; float: left; height: 90px; cursor: pointer; } .t a.active { cursor: default !important; } .navi { margin-left: 314px; _margin-left: 304px; } /* CSS sprite for the navigation */ #t0 { margin-left: 20px; _margin-left: 10px; } #t0.active { background-position: -21px 0 !important; } #t0:hover { background-position: -21px -180px; } #t0:active { background-position: -21px -270px; } #t1 { background-position: -325px -90px; } #t1:hover { background-position: -325px -180px; } #t1:active { background-position: -325px -270px; } #t1.active { background-position: -325px 0 !important; } #t2 { background-position: -435px -90px; } #t2:hover { background-position: -435px -180px; } #t2:active { background-position: -435px -270px; } #t2.active { background-position: -435px 0 !important; } #t3 { background-position: -545px -90px; } #t3:hover { background-position: -545px -180px; } #t3:active { background-position: -545px -270px; } #t3.active { background-position: -545px 0 !important; } #t4 { background-position: -655px -90px; } #t4:hover { background-position: -655px -180px; } #t4:active { background-position: -655px -270px; } #t4.active { background-position: -655px 0 !important; } #t5 { background-position: -765px -90px; } #t5:hover { background-position: -765px -180px; } #t5:active { background-position: -765px -270px; } #t5.active { background-position: -765px 0 !important; } #t6 { background-position: -875px -90px; } #t6:hover { background-position: -875px -180px; } #t6:active { background-position: -875px -270px; } #t6.active { background-position: -875px 0 !important; } </style> </head> <body> <!-- root element for everything --> <div id="scroll"> <!-- scrollable items --> <div id="tools"> <!-- empty slot --> <div class="tool"> </div> <!-- tabs --> <div class="tool"> <div class="details"> <strong>Tabs</strong> is the most popular Javascript tool on the web. Tabs, horizontal tabs and accordions, finally done the right way. </div> </div> <!-- tooltip --> <div class="tool"> <div class="details"> <strong>Tooltip</strong> helps you to build easier user interfaces. Big or small. Pluggable effects. Yet another crucial tool. </div> </div> <!-- overlay --> <div class="tool"> <div class="details"> <strong>Overlay</strong> is a significant part of the Javascript/Web 2.0 landscape. This tool handles them all: commercial overlays, modal dialogs and slideshows. </div> </div> <!-- scrollable --> <div class="tool"> <div class="details"> <strong>Scrollable</strong> is the most successful tool in this library. Any size and shape. Infinite loops and more. </div> </div> <!-- FORM --> <div class="tool"> <div class="details"> <strong>FORM</strong> is a collection of essential form building tools. Validation, range- and date inputs for humans. New wave form development is here. </div> </div> <!-- toolbox --> <div class="tool"> <div class="details"> <strong>TOOLBOX</strong> is a set of small niceties. Take control of the mousewheel and your browser's back button. Embed Flash and place masks over your document. </div> </div> <%--}}}--%> </div> <!-- intro "page" --> <div id="intro" class="tool"> <div class="details"> <strong>jQuery Tools</strong> is a collection of the most important user-interface components for modern websites. Used by large sites all over the world. </div> </div> <!-- required for IE6/IE7 --> <br clear="all" /> <!-- thumbnails --> <div id="thumbs" class="t"> <!-- intro page navi button --> <a id="t0" class="active"></a> <!-- scrollable navigator root element --> <div class="navi"> <a style="display:none"></a> <a id="t1"></a> <a id="t2"></a> <a id="t3"></a> <a id="t4"></a> <a id="t5"></a> <a id="t6"></a> </div> </div> </div> <script> // initialize scrollable and return the programming API var api = $("#scroll").scrollable({ items: '#tools' // use the navigator plugin }).navigator().data("scrollable"); // this callback does the special handling of our "intro page" api.onBeforeSeek(function(e, i) { // when on the first item: hide the intro if (i) { $("#intro").fadeOut("slow"); // dirty hack for IE7-. cannot explain if ($.browser.msie && $.browser.version < { $("#intro").hide(); } // otherwise show the intro } else { $("#intro").fadeIn(1000); } // toggle activity for the intro thumbnail $("#t0").toggleClass("active", i == 0); }); // a dedicated click event for the intro thumbnail $("#t0").click(function() { // seek to the beginning (the hidden first item) $("#scroll").scrollable().begin(); }); </script> </body> </html>
September 16, 201213 yr Author There is a working demo here http://jquerytools.org/demos/scrollable/home.htm compare your html with this see if this helps Thanks for the response. I've been running up and down the stand alone trying to figure it out but I can't seem to find it. Is there something that stands out to you that I might be overlooking?
Create an account or sign in to comment