전체 화면 슬라이딩 사이트, Lavalamp가 작동하지 않습니다.

탐색 모음에 대해 lavalamp 기능 (spasticNav)이있는 전체 화면 슬라이딩 웹 사이트 (fss 슬라이더)를 사용하고 있습니다. 각 슬라이드에서 동일한 메뉴를 배치했으며 그 페이지에 대해 "현재"클래스가 있습니다. 그러나, lavalamp에 대한 javascript는 첫 번째 슬라이드에서만 작동합니다. 틀림없이 나는 초보자입니다. 나는이 문제를 해결하기 위해 50 가지의 다른 방법을 연구하고 시도했지만 제대로 작동하지는 못합니다.전체 화면 슬라이딩 사이트, Lavalamp가 작동하지 않습니다.

나는 이것을 고칠 수있는 방법이 입니다. 1. 슬라이더 바깥쪽에 단 하나의 메뉴 만 가지고 있다고 믿습니다. 그러나 이것을 시도하면 슬라이드 링크가 작동하지 않습니다. 또는 2. 활성 클래스 및 바인딩 변경. 이것에 대한 나의 시도는 lavalamp가 미쳐서 모든 li 항목을 활성화 된 것으로 보았습니다. 또는 3. 콜백 사용

모든 아이디어 나 도움이 정말 감사하겠습니다! 여기

기본적인 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>

... 페이지 4, 5

lavalamp 기능에 대한 자바 스크립트 당신을 감사하는 것은 spasticNav()에 전화를 감싸는

(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);

출처

2013-06-15 Ryan Wegner

시도이다 jquery에서 ajaxComplete 콜백 :

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

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

출처

2013-06-15 16:27:38 jokklan

감사합니다. Jokklan, 나는 AJAX 제안을 시도했지만 여전히 운이 없습니다. HTML (한 페이지에있는 모든 슬라이드)에서 ".selected"메뉴 항목을 변경하고 콜백을 사용하는 코드를 작성해야한다고 생각합니다. 내가 무엇을 생각해 낼지 알게 될거야. 다시 한 번 감사드립니다 –

네, 둘러 보았습니다. 이 문제에 대한 최상의 해결책을 찾았습니다. 슬라이딩 웹 사이트는 JS에 많은 문제가 있습니다. 단순히 lavalamp에 CSS를 사용하는 것입니다. 이 [링크] (http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/)를 참조하십시오. –

전체 화면 슬라이딩 사이트, Lavalamp가 작동하지 않습니다.

답변

관련 문제