Слайдер и "поиск" по его контенту конфликтуют: после работы с поиском слайдер всегда перестает пролистываться, замирает
HTML:
<!--SEARCH-->
<div id="srch"><input id="spterm" type="text" name="spterm" placeholder="Search..."><div id="spresult"> </div>
<div id="slider"> <!-- SLIDER -->
<div id="slider_box" title="nearest events"> <!-- slider_box-->
<ul>
<li id="img_09" class="showbox slideincrease content" title="make Bet on this event (K=10000)"><br><br><br><h3 class="head1">Not for these only do I pray, but for those also who believe in me through their word</h3>
<span class = "explain"> <br>that they may all be one; even as you, Father, are in me, and I in you, that they also may be one in us; that the world may believe that you sent me</span> <br>(Gospel acc. to John 17:20)</li>
<li id="img_091" class="showbox slideincrease content" title="make Bet on this event (K=10000)"><br><h3 class="head1">Purge out the old yeast, that you may be a new lump, even as you are unleavened. For indeed Christ, our Passover, has been sacrificed in our place.</h3>
<span class = "explain"> <br>who was delivered up for our trespasses, and was raised for our justification</span> <br>(1-st Paul's Letter to Corinthians, 5:7)<br>(Paul's Letter to Romans 4:25)</li>
<li id="img_092" class="showbox slideincrease content" title="make Bet on this event (K=10000)"><br><br><br><h3 class="head1">For Yahweh will pass through to strike the Egyptians; and when he sees the blood on the lintel, and on the two doorposts, Yahweh will pass over the door, and will not allow the destroyer to come in to your houses to strike you</h3>
<span class = "explain"></span><br>(Exodus, 12:23)</li>
<li id="img_1" class="showbox slideincrease content" title="make Bet on this event (K=1.7)"><br><br><br><br><h3 class="head1">"Juventus" - "Barcelona": who will make the first step to the semifinal? </h3>
<span class = "explain"> <br> Today at 21: 45Champions League </span> <br> <br>In modern history, the teams played with each other quite seldom, the final confrontation was the final of the season 2014/15, when the victory went to the Catalans. Will Juventus at this time stop the Spanish grandee?</li>
<li id="img_2" class="showbox slideincrease" title="make Bet on this event (K=1.1)"><h3 class="head1">England, Premier League</h3> <br><span class="explain">the start of the match 15.30</span><br><br>Chelsi quickly rushes to the championship, but after yesterday's defeat Tottenham "retirees" can further break away from pursuers. However, to beat Burnley in his lair - not an easy task. "Bordeaux" not lose</li>
<li id="img_3" class="showbox slideincrease" title="make Bet on this event (K=1.2)"><h3 class="head1">Sassuolo - Chievo: victory Sassuolo, kf. 1.80</h3><span class="explain">Match starts today at 13:30</span> Sassuolo close to their optimal form. Of 4 recent games in the series "A" "green and black" won 3 and one team, which by that time could not overpower wards Eusebio Di Francesco, was Juventus that great shame can not be called. In today's meeting Chievo vs Sassuolo is going to win. And the chance to do so from the owners certainly will. The main thing - do not miss them.</li>
<li id="img_4" class="showbox slideincrease">Forgive please Lord my God</li>
<li id="img_5" class="showbox slideincrease">article3</li>
<li id="img_6" class="showbox slideincrease">article4</li>
<li id="img_7" class="showbox slideincrease">article5</li>
<li id="img_8" class="showbox slideincrease">article6</li>
<li id="img_9" class="showbox slideincrease">article7</li>
<li id="img_10" class="showbox slideincrease">article8</li>
<li id="img_11" class="showbox slideincrease">last article</li>
</ul>
</div> <!-- end of slider_box-->
CSS:
#spterm{
border-radius:5px;
font: 600 0.8em/2 comic sans ms, verdana, sans serif;
height:20px;
width:150px;
}
#spresult{
display: flex;
flex-direction: row;
justify-content: center;
}
JS:
/*search*/
jQuery(document).ready(function(){
var minlen = 3;
var paddingtop = 30; // отступ сверху при прокрутке
var scrollspeed = 200; // время прокрутки
var keyint = 1000; // интервал между нажатиями клавиш
var term = '';
var n = 0;
var time_keyup = 0;
var time_search = 0;
jQuery('body').delegate('#spgo', 'click', function(){
jQuery('body,html').animate({scrollTop: jQuery('span.highlight:first').offset().top-paddingtop}, scrollspeed); // переход к первому фрагменту
});
function dosearch() {
term = jQuery('#spterm').val();
jQuery('span.highlight').each(function(){ //удаляем старую подсветку
jQuery(this).after(jQuery(this).html()).remove();
});
var t = '';
jQuery('div.content').each(function(){ // в селекторе задаем область поиска
jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '<span class="highlight">$&</span>')); // выделяем найденные фрагменты
n = jQuery('span.highlight').length; // количество найденных фрагментов
console.log('n = '+n);
if (n==0)
jQuery('#spresult').html('Ничего не найдено');
else
jQuery('#spresult').html(' Results: '+n+'. <span class="splink" id="spgo">Перейти</span>');
if (n>1) // если больше одного фрагмента, то добавляем переход между ними
{
var i = 0;
jQuery('span.highlight').each(function(i){
jQuery(this).attr('n', i++); });
jQuery('span.highlight').not(':last').attr({title: 'Нажмите, чтобы перейти к следующему фрагменту'}).click(function(){ // всем фрагментам, кроме последнего, добавляем подсказку
jQuery('body,html').animate({scrollTop: jQuery('span.highlight:gt('+jQuery(this).attr('n') +'):first').offset().top-paddingtop}, scrollspeed); // переход к следующему фрагменту
});
jQuery('span.highlight:last').attr({title: 'Нажмите, чтобы вернуться к форме поиска'}).click(function(){
jQuery('body,html').animate({scrollTop: jQuery('#spterm').offset().top-paddingtop}, scrollspeed); // переход к форме поиска
});
}
});
}
jQuery('#spterm').keyup(function(){
var d1 = new Date();
time_keyup = d1.getTime();
if (jQuery('#spterm').val()!=term) // проверяем, изменилась ли строка
if (jQuery('#spterm').val().length>=minlen) { // проверяем длину строки
setTimeout(function(){ // ждем следующего нажатия
var d2 = new Date();
time_search = d2.getTime();
if (time_search-time_keyup>=keyint) // проверяем интервал между нажатиями
dosearch(); // если все в порядке, приступаем к поиску
}, keyint);
}
else
jQuery('#spresult').html(' '); // если строка короткая, убираем текст из DIVа с результатом
});
if (window.location.hash!="")
{
var t = window.location.hash.substr(1, 50); // вырезаем текст
jQuery('#spterm').val(t).keyup(); // вставляем его в форму поиска
jQuery('#spgo').click(); // переходим к первому фрагменту
}
});
/*slider*/
function Slider(width_li,margin_right_li,col_view_img){
var step=width_li+margin_right_li,
slider_box_with=col_view_img*step-margin_right_li,
$col_img=$("#slider_box>ul>li").length,
col_main_left=0,
max_col_main_left=$col_img*step;
$("#slider_box").width(slider_box_with);
$("#slider_box>ul>li").width(width_li).css("marg in-right",margin_right_li);
$("#left_nav").click(function(){
if(-col_main_left==max_col_main_left-col_view_img*step){
col_main_left=0;
} else{
col_main_left=col_main_left-step;
}
$("#slider_box>ul").css("margin-left",col_main_left+"px");
});
$("#right_nav").click(function(){
if(col_main_left==0){
col_main_left=-max_col_main_left+col_view_img*step;
} else{
col_main_left=col_main_left+step;
}
$("#slider_box>ul").css("margin-left",col_main_left+"px");
});
}
$(Slider(200,10,3));
