- 0
-
Similar Content
-
By Vitalya T
Добрый день. Хочу совместить 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/
-
By npofopr
Как сделать, чтобы draggable элемент падал всегда в конец списка?
Вот например, код из примера http://jsfiddle.net/npofopr/TmX7h/
Элемент в конец конечно падает, но всё же его можно протиснуть и между строчками. Можно ли как-то отправлять его в конец, при любых случаях?
Здесь все как то очень просто получается http://jsfiddle.net/npofopr/8snSf/1476/ и все работает. Но у себя тоже самое не получается повторить. Еще и по 2 штуки добавляет.
//offtop: а у вас работают уведомления о новых, созданных темах?
-
By deadrash
Доброго дня! Помощи прошу я по порьбе с 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
-
By cyklop77
в jquery ui есть возможность преобразовать радиокнопки в меню, у которого крайние кнопки закруглены. помогите пожалуйста применить эту же технику к <a> или <li>
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
VeniVidiVici
Не получается сделать одну вещицу((
Использую jquery ui плагины (Draggable и Sortable) для перемещения блоков .
Суть:
Есть блок (id="draggable"), который можно клонировать и перетягивать в ячейки таблицы.
Важно, чтобы в 1 ячейку можно было перенести только 1 блок(т.е. в пустую ячейку). С этим проблем нет.
Блоки, которые уже находятся в ячейках таблицы, тоже можно переносить в пустые ячейки... но к сожалению, они добавляются и в занятые ячейки(такого быть не должно)((
Никак не могу исправить эту проблему, помогите пожалуйста, 3 день мучаюсь
Вот код
Edited by VeniVidiViciLink to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.