Report

Добрый день. Хочу совместить Jquery UI slider и ajax галерею.
Проблема в том, что при изменении рейнджа больше чем на один шаг, изображения не проматываются адекватно. При изменении диапазона на один шаг, скрипт работает нормально.
Видео:
http://screencast.com/t/loDxRlNEncq
Сэмпл кода в котором это обрабатывается:
var ScrollToright= function (Steps){ console.log ("Steps!!!!!!!!! "+Steps); th.find('li').stop(true, true) var next_li = th.find('li.showed:last').next() if(next_li.length!=1) return; var all_li = th.find('li.showed:not(:first)') var first_li = th.find('li.showed:first'); var additionalCollection = th.find('li.showed:first'); var trueIndexli = th.find('li.showed:first').index()-1; var next_li_add; console.log ("trueIndexli "+trueIndexli); /*for ( var i = 0; i < Steps; i++ ) { additionalCollection = additionalCollection.add(th.find('li.showed').eq(i)); }*/ for ( var i = 0; i < Steps; i++ ) { trueIndexli= trueIndexli+i; additionalCollection = additionalCollection.add(th.find('li').eq(trueIndexli)); } //additionalCollection.css('background','red'); //th.find('li.showed').eq(0).css('background','red'); //console.log("additionalCollection "+additionalCollection); //additionalCollection.css('background','red'); if (Steps>1){ first_li = additionalCollection; all_li = th.find('li').not(additionalCollection); next_li_add = additionalCollection.last().next(); next_li = next_li_add; } if (Steps>4) { all_li = additionalCollection.nextAll(); } next_li.addClass('showed').css('opacity', '0') var left = $(first_li).width()+20 first_li.animate( { 'left': '-'+left+'px', 'opacity': '0' }, __this__.speed, function(){ __this__.normalize($(this)) $(this).removeClass('showed'); __this__.check_nav(th) __this__.check_count(th); } ); all_li.animate( { 'left': '-'+left+'px' }, __this__.speed, function(){ __this__.normalize($(this)) } ); next_li.animate( { 'left': '-'+left+'px', 'opacity': '1' }, __this__.speed, function(){ __this__.normalize($(this)) } ); __this__.ajax_li(th, "right") //PUSH BACK totalCountinThisLoad= th.find("li").size(); if (totalCountinThisLoad > newcount1) newcount1 += totalCountinThisLoad-newcount; totalCountShow=th.find("li.showed").size(); totalCountLeft=totalCountinThisLoad-totalCountShow; // if (totalCountShow>5) totalCountShow = 5; totalCountLeft=totalCountinThisLoad-totalCountShow; Maxrange=(totalCountinThisLoad-totalCountShow+1)*10; $( ".slider1" ).slider( "option", "max", Maxrange); $( ".slider1" ).slider("value", $( ".slider1" ).slider("value") + Steps); if ( ( $( ".slider1" ).slider("value") == $( ".slider1" ).slider( "option", "max") ) && ( th.find('li.showed:last').nextAll("li").size()>0) ) { var remain = th.find('li.showed:last').nextAll("li").size(); $( ".slider1" ).slider("value", $( ".slider1" ).slider("value") - (remain*10) ); } }var ScrollToLeft = function(Steps) { var stepback = Math.abs(Steps); console.log ("Steps!!!!!!!!! "+stepback); th.find('li').stop(true, true) var next_li = th.find('li.showed:first').prev() if(next_li.length!=1) return; var last_li = th.find('li.showed:last') var additionalCollection = th.find('li.showed:last'); var trueindex = last_li.index(); var totalShowed = th.find('li.showed').length-1; //th.find('li.showed').eq(totalShowed).css('background','black'); console.log("totalShowed "+totalShowed); console.log("trueindex "+trueindex); for ( var i = 0; i <stepback; i++ ) { if (i<=4){ totalShowed = totalShowed-i; additionalCollection = additionalCollection.add(th.find('li.showed').eq(totalShowed)); } } if (stepback>1) last_li = additionalCollection; //additionalCollection.css('background','green'); var left = $(last_li).width()+20 var all_li = th.find('li.showed:not(:last)') next_li.addClass('showed').css('opacity', '0').css('left','-'+left+'px') all_li.css('left','-'+left+'px') last_li.css('left','-'+left+'px') last_li.animate( { 'left': 0+'px', 'opacity': '0' }, __this__.speed, function(){ __this__.normalize($(this)) $(this).removeClass('showed'); __this__.check_nav(th) __this__.check_count(th); } ); all_li.animate( { 'left': 0+'px' }, __this__.speed, function(){ __this__.normalize($(this))} ); next_li.animate( { 'left': 0+'px', 'opacity': '1' }, __this__.speed, function(){ __this__.normalize($(this))} ); __this__.ajax_li(th, "left") //PUSH BACK $( ".slider1" ).slider("value", $( ".slider1" ).slider("value") - 10); totalCountinThisLoad= th.find("li").size(); if (totalCountinThisLoad > newcount) newcount += totalCountinThisLoad-newcount; totalCountShow=th.find("li.showed").size(); totalCountLeft=totalCountinThisLoad-totalCountShow; totalCountLeft=totalCountinThisLoad-totalCountShow; $( ".slider1" ).slider( "option", "max", Maxrange); Prevli = th.find('li.showed:first').prevAll("li").size(); if ( ( $( ".slider1" ).slider("value") == 0 ) && ( th.find('li.showed:first').prevAll("li").size()>0 ) ) { $( ".slider1" ).slider("value", $( ".slider1" ).slider("value") + Prevli*10); }}th.find( ".slider1" ).bind( "slide", function(event, ui){ totalCountinThisLoad= th.find("li").size(); if (totalCountinThisLoad > newcount) newcount += totalCountinThisLoad-newcount; totalCountShow=th.find("li.showed").size(); totalCountLeft=totalCountinThisLoad-totalCountShow; totalCountLeft=totalCountinThisLoad-totalCountShow; Maxrange=(totalCountinThisLoad-totalCountShow+1)*10; $( ".slider1" ).slider( "option", "max", Maxrange); deltaValueStep = (ui.value-ValueOldOnSlide)/10; //console.log("deltaValueSte "+deltaValueStep); if ( ui.value>ValueOldOnSlide){ // console.log("step"+step); //console.log("Its scroll down") ScrollToright(deltaValueStep); } if ( ui.value<ValueOldOnSlide){ //console.log("Its scroll up") ScrollToLeft(deltaValueStep); } }); Скрипт целиком: http://pastebin.com/LdqPPS7K
 
 
 
 
Ссылка на сайт, где можно попробовать, как работает скрипт: http://testing.site-services.ru/

Как сделать, чтобы draggable элемент падал всегда в конец списка?
Вот например, код из примера http://jsfiddle.net/npofopr/TmX7h/
Элемент в конец конечно падает, но всё же его можно протиснуть и между строчками. Можно ли как-то отправлять его в конец, при любых случаях?
Здесь все как то очень просто получается http://jsfiddle.net/npofopr/8snSf/1476/ и все работает. Но у себя тоже самое не получается повторить. Еще и по 2 штуки добавляет.
//offtop: а у вас работают уведомления о новых, созданных темах?

Доброго дня! Помощи прошу я по порьбе с ie проклятущем.
В общем, использую jQuery ui .placeholder() и всё замечательно, но вот ослик думает что плейсехолдер - это значения полей, во первых он отправляет плейсехолдер при сабминте, а во вторых Javascript который используется на страничке и получает значения полей, получает как значения этот самый плейсехолдер.
В общем мне нужен совет как бороться с ie. В общем то придумать можно много чего, но мне интересно, может есть какой вменяемый вариант.
Или может быть я просто неправильно использую jQuery ui .placeholder ? Что-то мне чуйка подсказывает что не должно быть такой проблемы, это же всётаки jQuery, он должен сам понимать как бороться с ie.
Посмотреть можно тут: http://taxibezprobok.myjino.ru/zakaz-online.html
Сам placeholder находится тут: http://taxibezprobok.myjino.ru/js/order/sets.js

в jquery ui есть возможность преобразовать радиокнопки в меню, у которого крайние кнопки закруглены. помогите пожалуйста применить эту же технику к <a> или <li>