21 мая
3 апреля
Как доработать возврат на начало
Уважаемые, кто подскажет, как доработать уже готовый код, что бы был возврат к первому товару, без клика на "далее". т.е. если товаров 7, отображается по очереди 1 2 3 4 5 6 7 далее сразу за 7 следует 1.
код:
(function($){
$.fn.carousel = function(config) {
var defaults = {
slider: '.slider',
slide: '.slide',
prevSlide: '.prev',
nextSlide: '.next',
speed: 500
},
opt = $.extend(defaults, config),
dStyle = document.body.style,
transitionSupport = dStyle.webkitTransition !== undefined ||
dStyle.MozTransition !== undefined ||
dStyle.msTransition !== undefined ||
dStyle.OTransition !== undefined ||
dStyle.transition !== undefined;
$(opt.prevSlide).addClass('disabled');
function moveNext($slider) {
var leftmargin = $slider.attr('style').match(/margin\-left:(.*[0-9])/i) && parseInt(RegExp.$1),
$slide = $slider.find(opt.slide);
if (!$slider.is(":animated") && (-leftmargin) != (($slide.length - 1) * 100)) {
leftmargin -= 100;
if(transitionSupport) {
$slider.css('marginLeft', leftmargin + "%");
} else {
$slider.animate({ marginLeft: leftmargin + "%" }, opt.speed);
}
if((-leftmargin) == ($slide.length - 1) * 100) {
return false;
}
}
}
function movePrev($slider) {
var leftmargin = $slider.attr('style').match(/margin\-left:(.*[0-9])/i) && parseInt(RegExp.$1);
if(!$slider.is(":animated") && (leftmargin != 0)) {
leftmargin += 100;
if(transitionSupport) {
$slider.css('marginLeft', leftmargin + "%");
} else {
$slider.animate({ marginLeft: leftmargin + "%" }, opt.speed);
}
if(leftmargin == 0) {
return false;
}
}
}
$(opt.nextSlide + ',' + opt.prevSlide).click(function(e) {
var $el = $(this),
link = $el.attr('href'),
$target = $(opt.slider).filter(link);
$(opt.nextSlide).each(function() {
if($(this)[0] == $el[0]) {
if(moveNext($target) === false) {
$el.addClass('disabled');
};
$(opt.prevSlide).filter(function() {
return this.getAttribute('href') === link;
}).removeClass('disabled');
}
});
$(opt.prevSlide).each(function() {
if($(this)[0] == $el[0]) {
if(movePrev($target) === false) {
$el.addClass('disabled');
};
$(opt.nextSlide).filter(function() {
return this.getAttribute('href') === link;
}).removeClass('disabled');
}
});
e.preventDefault();
});
//swipes trigger move left/right
$(this).live( "swipe", function(e, ui){
(ui.direction === "left" ? moveNext : movePrev)($(this).find( opt.slider ));
});
return this.each(function() {
var $wrap = $(this),
$slider = $wrap.find(opt.slider),
$slide = $wrap.find(opt.slide),
slidenum = $slide.length,
speed = opt.speed / 300;
$wrap.css({
overflow: "hidden"
});
$slider.css({
marginLeft: "0px",
float: "left",
width: 32 * slidenum + "%",
"-webkit-transition": "margin-left " + speed + "s ease",
"-moz-transition": "margin-left " + speed + "s ease",
"-ms-transition": "margin-left " + speed + "s ease",
"-o-transition": "margin-left " + speed + "s ease",
"transition": "margin-left " + speed + "s ease"
});
$slide.css({
float: "left",
width: (100 / slidenum) + "%"
});
});
};
//modified swipe events from jQuery Mobile
// also handles swipeleft, swiperight
$.event.special.swipe = {
setup: function() {
var $el = $(this);
$el
.bind("touchstart", function(e) {
var data = e.originalEvent.touches ? e.originalEvent.touches[0] : e,
start = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ],
origin: $(e.target)
},
stop;
function moveHandler(e) {
if(!start) {
return;
}
var data = e.originalEvent.touches ? e.originalEvent.touches[0] : e;
stop = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ]
};
// prevent scrolling
if (Math.abs(start.coords[0] - stop.coords[0]) > 10) {
e.preventDefault();
}
}
$el
.bind("touchmove", moveHandler)
.one("touchend", function(e) {
$el.unbind("touchmove", moveHandler);
if (start && stop) {
if (stop.time - start.time < 1000 &&
Math.abs(start.coords[0] - stop.coords[0]) > 30 &&
Math.abs(start.coords[1] - stop.coords[1]) < 75) {
var left = start.coords[0] > stop.coords[0];
start.origin
.trigger("swipe", {direction: left ? "left" : "right"})
.trigger(left ? "swipeleft" : "swiperight" );
}
}
start = stop = undefined;
});
});
}
};
})(jQuery);
код:
(function($){
$.fn.carousel = function(config) {
var defaults = {
slider: '.slider',
slide: '.slide',
prevSlide: '.prev',
nextSlide: '.next',
speed: 500
},
opt = $.extend(defaults, config),
dStyle = document.body.style,
transitionSupport = dStyle.webkitTransition !== undefined ||
dStyle.MozTransition !== undefined ||
dStyle.msTransition !== undefined ||
dStyle.OTransition !== undefined ||
dStyle.transition !== undefined;
$(opt.prevSlide).addClass('disabled');
function moveNext($slider) {
var leftmargin = $slider.attr('style').match(/margin\-left:(.*[0-9])/i) && parseInt(RegExp.$1),
$slide = $slider.find(opt.slide);
if (!$slider.is(":animated") && (-leftmargin) != (($slide.length - 1) * 100)) {
leftmargin -= 100;
if(transitionSupport) {
$slider.css('marginLeft', leftmargin + "%");
} else {
$slider.animate({ marginLeft: leftmargin + "%" }, opt.speed);
}
if((-leftmargin) == ($slide.length - 1) * 100) {
return false;
}
}
}
function movePrev($slider) {
var leftmargin = $slider.attr('style').match(/margin\-left:(.*[0-9])/i) && parseInt(RegExp.$1);
if(!$slider.is(":animated") && (leftmargin != 0)) {
leftmargin += 100;
if(transitionSupport) {
$slider.css('marginLeft', leftmargin + "%");
} else {
$slider.animate({ marginLeft: leftmargin + "%" }, opt.speed);
}
if(leftmargin == 0) {
return false;
}
}
}
$(opt.nextSlide + ',' + opt.prevSlide).click(function(e) {
var $el = $(this),
link = $el.attr('href'),
$target = $(opt.slider).filter(link);
$(opt.nextSlide).each(function() {
if($(this)[0] == $el[0]) {
if(moveNext($target) === false) {
$el.addClass('disabled');
};
$(opt.prevSlide).filter(function() {
return this.getAttribute('href') === link;
}).removeClass('disabled');
}
});
$(opt.prevSlide).each(function() {
if($(this)[0] == $el[0]) {
if(movePrev($target) === false) {
$el.addClass('disabled');
};
$(opt.nextSlide).filter(function() {
return this.getAttribute('href') === link;
}).removeClass('disabled');
}
});
e.preventDefault();
});
//swipes trigger move left/right
$(this).live( "swipe", function(e, ui){
(ui.direction === "left" ? moveNext : movePrev)($(this).find( opt.slider ));
});
return this.each(function() {
var $wrap = $(this),
$slider = $wrap.find(opt.slider),
$slide = $wrap.find(opt.slide),
slidenum = $slide.length,
speed = opt.speed / 300;
$wrap.css({
overflow: "hidden"
});
$slider.css({
marginLeft: "0px",
float: "left",
width: 32 * slidenum + "%",
"-webkit-transition": "margin-left " + speed + "s ease",
"-moz-transition": "margin-left " + speed + "s ease",
"-ms-transition": "margin-left " + speed + "s ease",
"-o-transition": "margin-left " + speed + "s ease",
"transition": "margin-left " + speed + "s ease"
});
$slide.css({
float: "left",
width: (100 / slidenum) + "%"
});
});
};
//modified swipe events from jQuery Mobile
// also handles swipeleft, swiperight
$.event.special.swipe = {
setup: function() {
var $el = $(this);
$el
.bind("touchstart", function(e) {
var data = e.originalEvent.touches ? e.originalEvent.touches[0] : e,
start = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ],
origin: $(e.target)
},
stop;
function moveHandler(e) {
if(!start) {
return;
}
var data = e.originalEvent.touches ? e.originalEvent.touches[0] : e;
stop = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ]
};
// prevent scrolling
if (Math.abs(start.coords[0] - stop.coords[0]) > 10) {
e.preventDefault();
}
}
$el
.bind("touchmove", moveHandler)
.one("touchend", function(e) {
$el.unbind("touchmove", moveHandler);
if (start && stop) {
if (stop.time - start.time < 1000 &&
Math.abs(start.coords[0] - stop.coords[0]) > 30 &&
Math.abs(start.coords[1] - stop.coords[1]) < 75) {
var left = start.coords[0] > stop.coords[0];
start.origin
.trigger("swipe", {direction: left ? "left" : "right"})
.trigger(left ? "swipeleft" : "swiperight" );
}
}
start = stop = undefined;
});
});
}
};
})(jQuery);
26 марта
jQuery - выбрать элементы первой строки
Эге-гей, привет!
есть много div-ов фиксированной ширины, у них float: left; доходят они до правого края страницы и переходят на новую строку и так далее... нужно выбрать элементы первой получившейся строки
подскажите, пожалуйста, как это сделать
есть много div-ов фиксированной ширины, у них float: left; доходят они до правого края страницы и переходят на новую строку и так далее... нужно выбрать элементы первой получившейся строки
подскажите, пожалуйста, как это сделать
10 марта
Google maps api, расстановка маркера вручную
Добрый день. Есть скрипт (www.index01d.com/cc2m/q9itfh) выполняющий следующее: можно расставлять маркеры по средством click,и передвигать их.
Подскажите, как сделать ограничение на количество расставляемых маркеров. Необходимо ставить всего один маркер. И как можно при перемещении данного маркера, получать его новые координаты.
Заранее благодарю.
Подскажите, как сделать ограничение на количество расставляемых маркеров. Необходимо ставить всего один маркер. И как можно при перемещении данного маркера, получать его новые координаты.
Заранее благодарю.
29 февраля
Rotation brouser problem
I want a documentation for the jquery.ui.rotation.zip plugins
16 февраля
несколько domready, или domready в цикле
Здравствуйте.
У меня проблемка.
есть код:
(цикл 3 категории) {
< div id='album_carousel>
-< a href='javascript:void(0);' onClick='moveRight();this.blur()'>
-(цикл картинок) {
--< div id='thumb>< img />< /div>
-}
-< a href='javascript:void(0);' onClick='moveRight();this.blur()'> >> < /a>
< /div>
}
Тоесть, выводятся картинки слайдером, но они принадлежат своим категориям.
Если просто из одной категории выводить картинки, то слайдер работает.
Если же проставить div для еще одной категории (вывожу их, категории, в цикле),
то после первой - все последующие слайдеры не работают.
Искал в Поисковике "mootools эффект к нескольким объектам с одинаковым id" -нашел дин результат на Гугле, но у меня не получилось.
Вот сам код для js, где $current_index - это в php назначается номер текущей картинки:
var current_id = 0;
var myFx;
window.addEvent('domready', function() {
myFx = new Fx.Scroll('album_carousel');
current_id = parseInt({/literal}{math equation="x" x=$current_index}{literal});
var position = $('thumb'+current_id).getPosition($('album_carousel'));
myFx.set(position.x, position.y);
});
function moveLeft() {
if($('thumb'+(current_id-1))) {
myFx.toElement('thumb'+(current_id-1));
myFx.toLeft();
current_id = parseInt(current_id-1);
}
}
function moveRight() {
if($('thumb'+(current_id))) {
myFx.toElement('thumb'+(current_id+1));
myFx.toRight();
current_id = parseInt(current_id+1);
}
}
Тоесть, получается, что domready не "обнуляется", тк.ск.
Пробовал по способу
http://otvety.google.ru/otvety/thread?tid=3062a7b6e0f3b677 - когда js выведен за главный цикл
А также пробовал ставить код скрипта js в главный цикл, и назначать/прибавлять к названиям переменных (thumb, myFx, position...) - айдишки категории., чтобы все переменные были уникальными - но все-равно работают только первые картинки на эффект слайдера.
Как сделать, чтобы небыло конфликта для window.addEvent('domready') ???
СПСБ.
У меня проблемка.
есть код:
(цикл 3 категории) {
< div id='album_carousel>
-< a href='javascript:void(0);' onClick='moveRight();this.blur()'>
-(цикл картинок) {
--< div id='thumb>< img />< /div>
-}
-< a href='javascript:void(0);' onClick='moveRight();this.blur()'> >> < /a>
< /div>
}
Тоесть, выводятся картинки слайдером, но они принадлежат своим категориям.
Если просто из одной категории выводить картинки, то слайдер работает.
Если же проставить div для еще одной категории (вывожу их, категории, в цикле),
то после первой - все последующие слайдеры не работают.
Искал в Поисковике "mootools эффект к нескольким объектам с одинаковым id" -нашел дин результат на Гугле, но у меня не получилось.
Вот сам код для js, где $current_index - это в php назначается номер текущей картинки:
var current_id = 0;
var myFx;
window.addEvent('domready', function() {
myFx = new Fx.Scroll('album_carousel');
current_id = parseInt({/literal}{math equation="x" x=$current_index}{literal});
var position = $('thumb'+current_id).getPosition($('album_carousel'));
myFx.set(position.x, position.y);
});
function moveLeft() {
if($('thumb'+(current_id-1))) {
myFx.toElement('thumb'+(current_id-1));
myFx.toLeft();
current_id = parseInt(current_id-1);
}
}
function moveRight() {
if($('thumb'+(current_id))) {
myFx.toElement('thumb'+(current_id+1));
myFx.toRight();
current_id = parseInt(current_id+1);
}
}
Тоесть, получается, что domready не "обнуляется", тк.ск.
Пробовал по способу
http://otvety.google.ru/otvety/thread?tid=3062a7b6e0f3b677 - когда js выведен за главный цикл
А также пробовал ставить код скрипта js в главный цикл, и назначать/прибавлять к названиям переменных (thumb, myFx, position...) - айдишки категории., чтобы все переменные были уникальными - но все-равно работают только первые картинки на эффект слайдера.
Как сделать, чтобы небыло конфликта для window.addEvent('domready') ???
СПСБ.
14 января
Сумасшедшие слайдеры в Google Chrome
Здравствуйте.
Столкнулся с такой проблемой. Когда страница со слайдером открыта, он ведёт себя нормально. Но когда переключаешься на другую вкладку и через некоторое время возвращаешься назад, слайдер начинает дико переключаться, показывая все слайды, которые я пропустил, пока меня на странице не было. В том же Firefox данной проблемы нет.
Помогите понять, отчего это и как это исправить.
Столкнулся с такой проблемой. Когда страница со слайдером открыта, он ведёт себя нормально. Но когда переключаешься на другую вкладку и через некоторое время возвращаешься назад, слайдер начинает дико переключаться, показывая все слайды, которые я пропустил, пока меня на странице не было. В том же Firefox данной проблемы нет.
Помогите понять, отчего это и как это исправить.
18 декабря 2011
kml и кластеризация
Можно ли как то произвести кластеризацию маркеров, которые добалены на карту посредством КМЛ файла в API v2.
12 декабря 2011
Определение отступа элемена до нижней части экрана
Доброго времени суток. Решил написать минимальный скрипт всплывающих подсказок на jQuery, который выводит необходимую информацию при наведении курсора на специальные элементы. Во время написания задался вопросом по определению расстояния специального элемента до нижней или верхней части экрана браузера, и сравнения её с высокой блока подсказки.
Подразумевается использования отдельных параметров места отображения всплывающей подсказки, исходя из условия, что подсказка, которая по обычному появляется "над" элементом вызова, в случаях, если размер подсказки имеет больший размер нежели размер места видимой области окна браузера, данный блок следует размещать уже "под" элементом вызова.
Подскажите пожалуйста как "достучаться" до этого свойства и реализовать поставленную задачу. Заранее благодарен.
З.Ы. без использования дополнительных библиотек и готовых плагинов...
Подразумевается использования отдельных параметров места отображения всплывающей подсказки, исходя из условия, что подсказка, которая по обычному появляется "над" элементом вызова, в случаях, если размер подсказки имеет больший размер нежели размер места видимой области окна браузера, данный блок следует размещать уже "под" элементом вызова.
Подскажите пожалуйста как "достучаться" до этого свойства и реализовать поставленную задачу. Заранее благодарен.
З.Ы. без использования дополнительных библиотек и готовых плагинов...
5 декабря 2011
WYSIWYG отправка содержимого на сервер
Только что написал свой WYSIWIG. Предназначен он не для меня, а для пользователей, т.е. введенные данные будут отправлены на сервер для сохранения в базе данных. На сервере я обычно обрабатываю данные html_special_chars и mysql_real_escape_string чтобы продвинутые пользователи не смогли внести свою лепту в дизайн сайта и во избежании sql инъекций. Но в WYSIWYG используются некоторые тэги, которые я хочу сохранить. Остальные тэги (типа и прочие нежелательные) надо отбросить. Никто не знает, есть ли в php готовая функция для этого, или может кто знает как помочь?
29 ноября 2011
Трабл с маркерами в гугл-картах
Добрый день, не подскажете ли сколько будет стоить написание Вами программы для гугл-карт, чтобы отображалось число маркеров на карте до 1000 штук одновременно? 8-929-984-59-16 Андрей
например как здесь - http://vremenno.net/js/google-maps-and-too-many-markers/
например как здесь - http://vremenno.net/js/google-maps-and-too-many-markers/