jquery - cant get jrumble to work -- causing other script to not function (conflicts) -
i'm trying jrumble work. here jsfiddle:
here html:
<!doctype html> <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script> <meta charset="utf-8"> <title></title> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <script>jquery.noconflict();</script> <script> $(document).ready(function(){ $('#mainnav').jrumble(); $('#mainnav').hover(function () { $(this).trigger('startrumble'); }, function () { $(this).trigger('stoprumble'); }); }); </script> <body> <!--start top --> <div id="top"> <div class="wrap"> <h1 div = "headers"></h1> <!--start navigation --> <ul id="mainnav"> <li><a href="#top"><img src="images/fork.png">home</a></li> <li><a href="#aboutportfolio"><img src="images/spooon.png">my works</a></li> <li><a href="#aboutme"><img src="images/knife.png">about me</a></li> <li><a href="#contactme"><img src="images/rollingpin.png">let's talk!</a></li> </ul> </div> <!--end navigation --> <img id="backgroundroll" class="clear" alt="" src=""> </div> <!--end top --> <!--start portfolio --> <div id="aboutportfolio" class="clear"> <div class ="wrap"> <h2>portfolio</h2> <div id="works"> <!--workbox 1 start --> <div class="workbox bordered"> <div class="inwrap"> <div class="imagebox"> <ul> <li title="screenshot1" style="display: block;"> <a class="screenshot" href="" rel=</a> </li> </ul> </div> <div class ="discriptionsbox"> <div> <strong>client: development group</strong> small-business, start-up consulting firm. </div> <div> <p>bootstrap template</p> <p>extras: javascript</p> <p>cms: phpmyadmin</p> </div> <a class="worklink" href="http://www.mhd.org.pl"></a> </div> </div> </div> <!--workbox 2 start --> <div class="workbox bordered"> <div class="inwrap"> <div class="imagebox"> <ul> <li title="screenshot1" style="display: block;"> <a class="screenshot" href="" rel=</a> </li> </ul> </div> <div class ="discriptionsbox"> <div> <strong>client:</strong> custom designed blog purpose of writing cinema. </div> <div> <p>how: hand-coded based on custom specs client</p> <p>extras: jquery, javascript plug in</p> <p>cms: myphpadmin</p> </div> <a class="worklink" href="http://www.mhd.org.pl"></a> </div> </div> </div> <!--workbox 3 start --> <div class="workbox bordered"> <div class="inwrap"> <div class="imagebox"> <ul> <li title="screenshot1" style="display: block;"> <a class="screenshot" href="" rel=</a> </li> </ul> </div> <div class ="discriptionsbox"> <div> <strong>client:</strong> discription here. </div> <div> <p>.</p> <p> </p> <p>.</p> </div> <a class="worklink" href="http://www.mhd.org.pl"></a> </div> </div> </div> </div> </div> </div> <!--end portfolio --> <!--start me --> <div id ="aboutme" class="clear"> <div class="wrap"> <h2>about me</h2> <div id="aboutdescription"> <p>.</p> <p></p> <p</p> <p> <a href="http://" rel="follow">more</a></p> <p class="bigger">.</p> <img id="photo" alt="" src="http://www."> <div id="aboutlinks"> <h3></h3> <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </div> </div> </div> </div> <!--end me --> <!--start contact me --> <div id = "contactme"> <div class="wrap"> <h2>contact</h2> <div id="contactdescription"> <p>.</p> <div id ="contactform"> </div> </div> </div> <!--end contact me --> <!--start footer --> <div id="footer" class="wrap"> <img alt="" src=""> <p> copyright © 2013 firm technology solutions, llc. <a href="http://validator.w3.org/check?uri=referer">valid html 4.01 strict</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer">css</a> </p> </div> <!--end footer --> <script> $(document).ready(function(){ $('a[href^="#"]').on('click',function (e) { e.preventdefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrolltop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; }); }); }); </script> </body> </html> </body> </html> additionally i'm having problem other script smooth-scroll plug in. working fine until attempted add 1 in. added no-conflicts + wrapping in doc.ready() brackets.
could use more jquery savvy individual thanks!
p.s know won't work ab/fixed divs without being inside wrapper. relative.
when use jquery in no conflict mode, should use "jquery" prefix instead of "$". try this:
jquery(document).ready(function(){ jquery('#mainnav').jrumble(); jquery('#mainnav').hover(function () { jquery(this).trigger('startrumble'); }, function () { jquery(this).trigger('stoprumble'); }); }); edit: add working jsfiddle
Comments
Post a Comment