Databases
StackOverflow2013
Postsdbo
PONivo Slider breaks after I navigate away and back to home page while using Ajax
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONivo Slider breaks after I navigate away and back to home page while using Ajax
    text
    copied!<p>I'm using a Nivo Slider in a website that uses Ajax to load its content. It saves the user from loading new pages every time they click on a link.</p> <p>My problem is that when I load the home page initially, the slider works fine; but if I navigate away from that page then back to it, it just has the loading gif on a loop. Can anyone help?</p> <p>My <code>index.php</code> is this:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;I.C.T - St. Patrick's Academy, Lisburn&lt;/title&gt; &lt;script type="text/javascript" src="assets/js/jqmin.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="assets/css/style.css" media="all" /&gt; &lt;script type="text/javascript" src="assets/js/js.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="assets/css/nivo.css" media="all" /&gt; &lt;script type="text/javascript" src="assets/js/sliderpack.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="assets/js/slide.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrap"&gt; &lt;div id="head"&gt; &lt;div id="links"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="includes/home.php" class="left"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="includes/about.php"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="includes/contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="includes/learn.php" class="right"&gt;Learn&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;img src="assets/images/logo.png" alt="logo" /&gt; &lt;/div&gt; &lt;div id="screen"&gt; &lt;div id="pad"&gt;&lt;/div&gt; &lt;div id="cont_wrap"&gt; &lt;div id="cont"&gt; &lt;h2&gt;Home&lt;/h2&gt; &lt;div class="slider-wrapper"&gt; &lt;div id="slider" class="nivoSlider"&gt; &lt;img src="assets/images/slide1.jpg" alt="1" /&gt; &lt;img src="assets/images/slide2.jpg" alt="2" /&gt; &lt;img src="assets/images/slide3.jpg" alt="3" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="foot"&gt; &lt;p align="center"&gt;&lt;i&gt;Copyright 2013 - Finbar Maginn - St. Patrick's Academy, Lisburn&lt;/i&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>(Note that my Nivo Slider initialization is inside <code>slide.js</code> and looks like this:)</p> <pre><code>$(window).load(function() { $('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown' slices: 16, // For slice animations boxCols: 6, // For box animations boxRows: 3, // For box animations animSpeed: 1000, // Slide transition speed pauseTime: 5000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: false, // Next &amp; Prev navigation controlNav: false, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav pauseOnHover: false, // Stop animation while hovering manualAdvance: false, // Force manual transitions prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text randomStart: false, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </code></pre> <p>The Ajax jQuery file I'm using is this:</p> <pre><code>$(document).ready(function() { var hash = window.location.hash.substr(1); var href = $('#links li a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-3)){ var toLoad = hash+'.php #cont'; $('#cont').load(toLoad) } }); $('#links li a').click(function(){ var toLoad = $(this).attr('href')+' #cont'; $('#cont').fadeOut('fast',loadContent); $('#load').remove(); $('#wrap').append('&lt;span id="load"&gt;LOADING...&lt;/span&gt;'); $('#load').fadeIn('fast'); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); function loadContent() { $('#cont').load(toLoad,'',showNewContent()); } function showNewContent() { $('#cont').fadeIn('fast',hideLoader('fast')); } function hideLoader() { $('#load').fadeOut('fast'); } return false; }); }); </code></pre> <p>And here is my CSS:</p> <pre><code>body { font-size:95%; font-family:georgia; line-height:1.576; } h2 { padding:0; margin:0; } #wrap { margin:0 auto; width:784px; } #head { width:100%; height:175px; } #links { width:300px; height:30px; padding:140px 0 0 0; float:right; text-align:right; } #links ul { margin:0; padding:0; } #links ul li { display:inline; margin:0 -2px 0 -2px; } #links ul li a { font-size:1em; -webkit-transition: 0.1s; -moz-transition: 0.1s; -ms-transition: 0.1s; -o-transition: 0.1s; text-decoration:none; color:black; background:-webkit-linear-gradient(bottom, white, #74b998); background:-o-linear-gradient(bottom, white, #74b998); background:-ms-linear-gradient(bottom, white, #74b998); background:-moz-linear-gradient(bottom, white, #74b998); padding:3px 5px 3px 5px; } #links ul li a:hover { background:-webkit-linear-gradient(top, white, #74b998); background:-o-linear-gradient(top, white, #74b998); background:-ms-linear-gradient(top, white, #74b998); background:-moz-linear-gradient(top, white, #74b998); padding:7px 5px 7px 5px; } .left { border-bottom-left-radius:10px; -webkit-border-bottom-left-radius:10px; -moz-border-bottom-left-radius:10px; -ms-border-bottom-left-radius:10px; -o-border-bottom-left-radius:10px; border-top-left-radius:10px; -webkit-border-top-left-radius:10px; -moz-border-top-left-radius:10px; -ms-border-top-left-radius:10px; -o-border-top-left-radius:10px; } .right { border-bottom-right-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-bottom-right-radius:10px; -ms-border-bottom-right-radius:10px; -o-border-bottom-right-radius:10px; border-top-right-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-top-right-radius:10px; -ms-border-top-right-radius:10px; -o-border-top-right-radius:10px; } .radius { border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; } #screen { width:100%; height:480px; background-image:url(../images/bckgrnd.png); } #pad { width:100%; height:29px; } #cont_wrap { overflow:auto; margin:0 auto; width:724px; height:335px; padding: 0 0 0 6px; } #load { display: none; position: absolute; top: 150px; left: 950px; text-indent: -9999em; width: 16px; height: 16px; background: url(../images/load.gif) no-repeat; } #cont { } #foot { width: 100%; font-size:90%; color:gray; } #slider { margin: 0 auto; width: 700px; height: 273px; } .nivoSlider { position: relative; background: url(../images/load.gif) no-repeat 50% 50%; } .nivoSlider img { position: absolute; top: 0px; left: 0px; display: none; } .nivoSlider a { border: 0; display: block; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload