Ok guys, so I have javascript on my application.html.erb page. The page functions as a container for other downloadable html pages. This problem is that my javascript seems to override any link_to and / or href paths on the page or any html pages loaded inside the container. There is quite a lot of javascript, but I believe that I have highlighted the problem, and the problem is the following javascript. All javascript is listed below. When I comment on the javascript out problem, the links work correctly again, but of course the divs are not hiding, which is the problem. Can anyone tell me why the code is causing the problem? And what could be the solution in javascript?
Problem:
/* Wheel */ $('#wheel').hide(); $('#wheelartist').hide(); $('#wheel-link').on('click', function( e ){ var pageID = $("div.page:visible"); var $this = $(this); //alert("Visible: " + pageID); $(pageID).fadeTo(300, 0.1,function(){ if ( $this.hasClass('artist') ) { $("#wheelartist").fadeIn(300); } else { $("#wheel").fadeIn(300); } }); //$("#libPage").fadeIn("slow"); e.preventDefault(); }); $('*').on('click', function( e ){ var pageID = $("div.page:visible"); if ($("#wheel, #wheelartist").is(':visible')) { $("#wheel, #wheelartist").fadeOut(300, function(){ $(pageID).fadeTo(300, 1.0); }); } e.preventDefault(); });
All javascript:
<script> $(function() { $('body').keyup(function(event) { $('div.popup').hide(); $('div.popup:nth-child('+(event.which-47)+')').show(); switch(event.which) { case 56: $('div.popup.friendPics div.friendPicsCont').slimScroll({ height: '370px', width: '350px', position: 'right', railVisible: false, alwaysVisible: true, railColor: '#4f4c6a', opacity: .7, color: '#4f4c6a' }); break; } }); $('#searchBox').focus(function () { if ($(this).val() == $(this).attr("title")) { $(this).val(""); } }).blur(function () { if ($(this).val() == "") { $(this).val($(this).attr("title")); } }); $('#marqueeBlock div.marquee.headline, #adBlock div.marquee.ad').marquee({ speed: 18000, gap: 50, delayBeforeStart: 0, direction: 'left', duplicated: true, pauseOnHover: true }); $('#chatbox').keypress(function(e) { if(e.which == 13) { $(this).val(""); var chatbox = $('aside#chat .convo'); $(chatbox)/('<span>Seth:</span><p>Waddup bro!</p>'); setTimeout(function() { $(chatbox).append('<span>Josh:</span><p>Yoo!<br>Whats up?</p>'); }, 3000); setTimeout(function() { $(chatbox).append('<span>Seth:</span> <p>Chillin dude<br>wbu?</p>'); }, 6000); setTimeout(function() { $(chatbox).append('<span>Josh:</span><p>Not too much man, just downloading some new tunes.</p>').scrollTop($(chatbox)[0].scrollHeight); }, 9000); setTimeout(function() { $(chatbox).append('<span>Seth:</span><p>Dope. Who??</p>').scrollTop($(chatbox)[0].scrollHeight); }, 12000); setTimeout(function() { $(chatbox).append('<span>Josh:</span><p>The new Wolfgang Gartner album :)</p>').scrollTop($(chatbox)[0].scrollHeight); }, 15000); setTimeout(function() { $(chatbox).append('<span>Seth:</span><p>OMG YES!</p>').scrollTop($(chatbox)[0].scrollHeight); }, 18000); setTimeout(function() { $(chatbox).append('<span>Josh:</span><p>Yea, its going down.</p>').scrollTop($(chatbox)[0].scrollHeight); }, 21000); } }); var wrap = $('content'); wrap.load('register_temp/'); $('#profileHome-link').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#home' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#adBlock div.marquee.ad a').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#sponsorAdPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('.music-search-bar a').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#music-search' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#userLibrary .albumPic a').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#artistProfile' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circle a#homebuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#home' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circle a#searchbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#musicSearch' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circle a#prefbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#prefPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circle a#pointsbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#pointsPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circle a#contestsbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#contestsPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circle a#cartbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#artistMerch' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circle a#directorybuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#directoryPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circle a#msgsbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#msgsPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#homebuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#home' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#searchbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#musicSearch' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#prefbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#prefPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#pointsbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#pointsPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#contestsbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#contestsPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#cartbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#artistMerch' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#directorybuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#directoryPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#msgsbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#msgsPage' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#mapbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#artistCareerMap' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#profitsbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#artistProfits' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); $('#circleartist a#statsbuttonLink').on('click', function( e ) { var href = $(this).attr('href'); wrap.load( href + '#artistStats' ) .hide().delay(100).fadeIn(500); e.preventDefault(); }); function grow(elem){ elem.animate({"width" : "+=7", "height":"+=7"}, 200); } function shrink(elem){ elem.animate({"width" : "-=7", "height":"-=7"}, 200); } $('.circle img, .circleartist img').mouseenter(function(){grow($(this));}).mouseleave(function(){shrink($(this));}); $("img#homebutton").click(function(){ $("#wheel, #wheelartist").fadeOut("slow"); }); $("img#msgsButton").click(function(){ $("#wheel, #wheelartist").fadeOut("slow"); }); $("img#directoryButton").click(function(){ $("#wheel, #wheelartist").fadeOut("slow"); }); $("img#cartButton").click(function(){ $("#wheel, #wheelartist").fadeOut("slow"); }); $("img#contestsButton").click(function(){ $("#wheel, #wheelartist").fadeOut("slow"); }); $("img#pointsButton").click(function(){ $("#wheel, #wheelartist").fadeOut("slow"); }); $("img#prefButton").click(function(){ $("#wheel, #wheelartist").fadeOut("slow"); }); $("img#searchButton").click(function(){ $("#wheel, #wheelartist").fadeOut("slow"); }); $("img#mapButton").click(function(){ $("#wheelartist").fadeOut("slow"); }); $("img#profitsButton").click(function(){ $("#wheelartist").fadeOut("slow"); }); $("img#statsButton").click(function(){ $("#wheelartist").fadeOut("slow"); }); $('#search-suggestions').on('click', function( e ){ $('#search-suggestions').toggle(); $('#searchBox').val('Search Friends, Artists, and Songs'); }); $('#libPage').hide(); $('#openLib, #home a.libraryButton, #profile a.libraryButton').on('click', function( e ){ var pageID = $("div.page:visible"); $(pageID).fadeTo(300, 0.05,function(){ $("#libPage").fadeIn(300); }); e.preventDefault(); }); $('#userLibrary a, #userLibrary .libraryCloseX a').on('click', function( e ){ var pageID = $("div.page:visible"); $("#libPage").fadeOut(300, function(){ $(pageID).fadeTo(300, 1.0); }); e.preventDefault(); }); $('.libraryScroll1').slimScroll({ height: '380px', width: '650px', position: 'right', railVisible: true, alwaysVisible: true, </script>
Application.html.erb (with modified code for reading):
<!DOCTYPE html> <html> <head> <title>Atmosphere</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body leftmargin="auto" topmargin="auto" marginwidth="auto" marginheight="auto"> <div id="wrapper"> <a class="logout" href="viewmore/">View More</a> <img class="atmov1_img" src="/assets/Atmov1_4.png"> <div class="fade-slider-edges"> </div> <div class="fade-slider-edges2"> </div> <div id="container2"> <div id="marqueeBlock"> </div> </div> <div class="advanced-slider" id="carousel"> <ul class="slides"> </ul> </div> <a id="ui-carousel-next"><span>next</span></a> <a id="ui-carousel-prev"><span>prev</span></a> </div> <form name="simple_bar" class="search" method="get" action=""> <input class="submit" type="submit" value="" > <input id="searchBox" type="search" name="" value="Search Friends, Artists, and Songs" title="Search Friends, Artists, and Songs" size="27" maxlength="50" onFocus="if(this.value=='Search Friends, Artists, and Songs')this.value='';jQuery('#search-suggestions').toggle();"> <div id="search-suggestions"> <table> </table> </div> </form> <form name="simple_bar" class="searchLibrary" method="get" action=""> <input type="search" name="" value="Library" size="9" maxlength="30"> <input class="submit" type="submit" value="" > </form> <aside style="left: 10px;"> <div class="advanced-slider" id="library"> <ul class="slides"> <li class="slide"> <div class="html"> </div> </li> <li class="slide"> <div class="html"> </div> </li> <li class="slide"> <div class="html"> </div> </li> </ul> </div> <a id="openLib" class="libraryLink hvr-wobble-horizontal" href=""> </a> <ul class="library-stats"> </ul> </aside> <content class="loadContent"> <ul> <li><%= link_to "login", hud_login_path %></li> <li><%= link_to "register", hud_register_path %></li> </ul> <%= yield %> </content> <aside id="chat"> <div class="convo"> </div> </aside> <a id="wheel-link" href=""> <img class="logo-left hvr-grow" src="/assets/atmosphere-logo.png" alt=""> </a> <a id="profileHome-link" href="homepage_splash/1"> <img class="half-circles hvr-grow" src="/assets/icons/home.png" alt=""> </a> <div class="adsLeft"> <div class="bottomLeftAds" id="responsive-slider"> <ul class="slides"> </ul> <a class="createAnAd" href="" ></a> </div> </div> <div class="playerBG"> <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <ul class="jp-controls"> <a class="musicNote hvr-grow" href=""> </a> <a class="radioTower hvr-grow" href=""> </a> <div id="cp_container_1" class="cp-container jp-container" style="z-index:9990;"> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/colorpicker/colorpicker-min.js"></script> <div id="sm2-container"> </div> <div class="sm2-inline-list"> <div class="ui360 ui360-vis"> </div> </div> </div> </ul> <div style="text-align:center; width:600px; margin-left:auto; margin-right:auto;"> </div> </div> <div class="jp-no-solution"> </div> </div> </div> </div> <div class="radio"> <img class="image" src="/assets/radio-widget.png" alt=""/> </div> <form name="simple_bar" class="searchFriends" method="get" action=""> <input type="search" name="" value="friends" size="9" maxlength="30"> <input class="submit" type="submit" value="" > </form> <div class="chatBox"> <ul> </ul> <div style="float:left; margin-right:10px;"> <textarea id="chatbox" name="chatbox"></textarea> </div> <div class="friendList"> <ul> </ul> </div> <span class="friendsToggle"> <a href="">◀ </a> Joshua Richard<a href=""> ▶</a></span> </div> <div class="live-listening"> <img class="image" src="/assets/live-listening.png" alt=""/> </div> <div id="libPage" style="position:absolute; top:161px; left:252px; z-index:999999;"> <div id="userLibrary"> <span style="display:block;text-align:center;margin-bottom:4px;">My Atmosphere Library</span> <div class="librarybox1"> <div class="libraryScroll1"> <div class="albumPic"> <p><a href="artist_profile/">Adele</a></p> <strong> 21 (2011) </strong> <a href="artist_profile/"><img src="/assets/albums/adele21.png" alt="" /></a> </div> <ul> </ul> <div class="albumPic"> <p><a href=""></a></p> <a href="artist_profile/"><img src="/assets/albums/aesoprockLaborDays.jpg" alt="" /></a> </div> <ul> </ul> </div> </div> <div class="librarybox2"> <label>Playlist <a href="">+</a></label> <ul> </ul> <label></label> </div> <div class="myLabNav"> <img src="/assets/other_images/shuggleIcon.png"/> <img src="/assets/other_images/rewindOne.png"/> <img src="/assets/other_images/rewindAll.png"/> <a class="sinkWithAtmosphere" href="" >Sync with The Atmosphere</a> </div> <div class="libraryCloseX"><a href=""><img src="/assets/closeX.png"/></a></div> </div> </div> <div id="wheel" style="position:absolute; top:131px; left:577px; z-index:999999;"> <div id="circle" class="circle"> <a id="homebuttonLink" href="userprofile/profile/0/"><img id="homebutton" title="Home" src="/assets/icons/user.png" alt=""></a> <a id="msgsbuttonLink" href="messages/"><img id="msgsButton" title="Messages" src="/assets/icons/mail.png" alt=""></a> <a id="directorybuttonLink" href="directory/"><img id="directoryButton" title="Directory" src="/assets/icons/book.png" alt=""></a> <a id="cartbuttonLink" href="shopping_cart/"><img id="cartButton" class="shopingCart" title="Shopping Cart" src="/assets/icons/shopping.png" alt=""></a> <a id="contestsbuttonLink" href="contests_list/"><img id="contestsButton" class="planet" title="Planet" src="/assets/icons/planet.png" alt=""></a> <a id="pointsbuttonLink" href="points/"><img id="pointsButton" class="awards" title="Awards" src="/assets/icons/awards.png" alt=""></a> <a id="prefbuttonLink" href="preferences/"><img id="prefButton" class="tools" title="Tools" src="/assets/icons/tools.png" alt=""></a> <a id="searchbuttonLink" href="search/"><img id="searchButton" class="headphones" title="Search" src="/assets/icons/music.png" alt=""></a> </div> </div> <div id="wheelartist" style="position:absolute; top:131px; left:536px; z-index:999999;"> <div id="circleartist" class="circleartist"> <a id="homebuttonLink" href="artist_profile/"><img id="homebutton" title="Home" src="/assets/icons/user.png" alt=""></a> <a id="msgsbuttonLink" href="messages/"><img id="msgsButton" title="Messages" src="/assets/icons/mail.png" alt=""></a> <a id="directorybuttonLink" href="directory/"><img id="directoryButton" title="Directory" src="/assets/icons/book.png" alt=""></a> <a id="cartbuttonLink" href="shopping_cart/"><img id="cartButton" class="shopingCart" title="Shopping Cart" src="/assets/icons/shopping.png" alt=""></a> <a id="contestsbuttonLink" href="contests_list/"><img id="contestsButton" class="planet" title="Planet" src="/assets/icons/planet.png" alt=""></a> <a id="pointsbuttonLink" href="points/"><img id="pointsButton" class="awards" title="Awards" src="/assets/icons/awards.png" alt=""></a> <a id="prefbuttonLink" href="preferences/"><img id="prefButton" class="tools" title="Tools" src="/assets/icons/tools.png" alt=""></a> <a id="searchbuttonLink" href="search/"><img id="searchButton" class="headphones" title="Search" src="/assets/icons/music.png" alt=""></a> <a id="mapbuttonLink" href="artist_careermap/"><img id="mapButton" title="Career Map" src="/assets/icons/map.png" alt=""></a> <a id="profitsbuttonLink" href="artist_profits/"><img id="profitsButton" title="Profits" src="/assets/icons/profits.png" alt=""></a> <a id="statsbuttonLink" href="artist_stats/"><img id="statsButton" title="Stats" src="/assets/icons/stats.png" alt=""></a> </div> </div> </div> <form id="logintype" class="logintype"> <input type="hidden" name="logintype" id="logintypeemail" value="" /> </form> </body> </HTML>