Full Screen Sliding Site, Lavalamp doesn't work

Question

I am using a full screen sliding website (fss slider) with a lavalamp function (spasticNav) for the nav bar. In each slide I have placed the same menu, with a class of "current" for the that pages li item. However, the javascript for the lavalamp only works on the first slide. Admittedly I am a beginner at javascript. I have researched and tried 50 different ways to fix this, but can't get it to work right.

I believe that possible avenues for fixing this are 1. having only one menu outside of the slider. However, when I try this the links to the slides don't work. OR 2. changing the active class and binding. My attempts at this have led to the lavalamp going crazy, viewing all li items as active OR 3. using callbacks

Any ideas or help would really be appreciated! Thank you

Here is the basic HTML

<script type="text/javascript" src="js/jquery.fss-1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script> 
<script type="text/javascript">
        $(function() {
            $(".slider").fss();
            $('.lava').spasticNav();
        });
</script></head>

<body>    
<!-- Slider starts -->
<div class="slider">
<div class="slides">
<!--Page 1 -->
<div id="one" class="slide">
<div class="inner-wrapper">
<div class="header" id="containerb">            
<ul class="top-menu lava">
<li class="selected"><a href="#one" class="special-anchor">One</a></li>
 <li><a href="#two" class="special-anchor">Two</a></li>
 <li><a href="#three" class="special-anchor">Three</a></li>
 <li><a href="#four" class="special-anchor">Four</a></li>
 <li><a href="#five" class="special-anchor">Five</a></li>
</ul>           
</div> 

<section id="content" class="container clearfix">
<p>some content</p> 
</section>

</div>
</div>                

<!-- Page 2 -->                
<div id="two" class="slide">
<div class="inner-wrapper">
<div class="header" id="containerb">              
<ul class="top-menu lava">
<li><a href="#one" class="special-anchor">One</a></li>
 <li><a href="#two" class="special-anchor">Two</a></li>
 <li><a href="#three" class="special-anchor">Three</a></li>
 <li><a href="#four" class="special-anchor">Four</a></li>
 <li><a href="#five" class="special-anchor">Five</a></li>
</ul>           
</div> 

<section id="content" class="container clearfix">
<p>some content</p>
</section>

</div>
</div>

<!-- Page 3 -->              
<div id="three" class="slide">
<div class="inner-wrapper">
<div class="header" id="containerb">                                
<ul class="top-menu lava">
<li><a href="#one" class="special-anchor">One</a></li>
 <li><a href="#two" class="special-anchor">Two</a></li>
 <li><a href="#three" class="special-anchor">Three</a></li>
 <li><a href="#four" class="special-anchor">Four</a></li>
 <li><a href="#five" class="special-anchor">Five</a></li>
</ul>                          
</div> 

<section id="content" class="container clearfix">
<p>some content</p>
</section>

</div>
</div>

...pages 4 and 5

The javascript for the lavalamp feature is

(function($) {
  $.fn.spasticNav = function(options) {  
    options = $.extend({  
      overlap : 8,  
      speed : 500,  
      reset : 1500,  
      color : '#007194',  
      easing : 'easeOutExpo'  
    }, options);    

    return this.each(function() {
      var lava = $(this),  
      currentPageItem = $('.selected', lava),  
      blob,  //blob is the box hovering over the selected li
      reset;

      $('<li class="blob"></li>').css({  
        width : currentPageItem.outerWidth(),  
        height : currentPageItem.outerHeight() + options.overlap,  
        left : currentPageItem.position().left,  
        top : currentPageItem.position().top - options.overlap / 2,  
        backgroundColor : options.color  
      }).appendTo('.lava'); 

      blob = $('.blob', lava);

      $('li', lava).hover(function() {    
        clearTimeout(reset);  
        blob.animate({  
          left : $(this).position().left,  
          width : $(this).width()  
        }, {  
          duration : options.speed,  
          easing : options.easing,  
          queue : false  
        });  
      }, function() {  
        // mouse out
        blob.stop().animate ({
          left : $(this).position().left,
          width : $(this).width
        }, options.speed);

        reset = setTimeout(function() {  
          blob.animate({  
            width : currentPageItem.outerWidth(),  
            left : currentPageItem.position().left  
          }, options.speed)  
        }, options.reset);  
      });
    });
  }; 
})(jQuery);

score 0 · Answer 1 · answered Jun 15 '13 at 16:27

0

Try to wrap the call to spasticNav() in a jquery ajaxComplete callback:

# First time
$('.lava').spasticNav();

# On each slide
$(document).ajaxComplete(function() {
  $('.lava').spasticNav();
});

answered Jun 15 '13 at 16:27

jokklan

3,520
17
37

Thanks Jokklan, I tried the AJAX suggestion, still no luck. If I do it in HTML (all slides on one page) I think that I need to write a code for changing the ".selected" menu item and using callbacks. I'll see what I can come up with. Thanks again – Ryan Wegner Jun 15 '13 at 19:16
1

Ok, I've looked around. I found the best solution to this problem (given that sliding websites have so many problems with JS) is to simply use CSS for the lavalamp. See this [link](http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/) – Ryan Wegner Jun 16 '13 at 19:47

Full Screen Sliding Site, Lavalamp doesn't work

1 Answers1