функции в javascript
как реализовать , вызов функции при смене класса active у ссылки ?
пример кода html <ul class="onepage-pagination"> <li><a data-index="1" href="#1" [B]class="active"[/B]></a></li> <li><a data-index="2" href="#2" class=""></a></li> <li><a data-index="3" href="#3" class=""></a></li> <li><a data-index="4" href="#4" class=""></a></li> </ul> |
zub_samata,
а кто меняет тот пусть и вызывает |
не понял) могли бы вы разъяснить поподробнее или на примере показать, был бы Вам очень признателен !
|
zub_samata,
покажите каким образом меняется класс? |
я делал по вот этому туториалу ту самую вещь что там указана в демке ) ну если сказать точнее копи паст ...
там при смене с боку имеется индикатор , который указывает на каком мы сейчас находимся , каждая из них ссылка , и если мы находимся на первой дивке активна первая ссылка ей присваивается класс active ) я просто новичок в js так что за глупости которые тут напишу строго не судите |
zub_samata,
в самом плагине есть возможность установить нужную вам функцию которая сработает до перемещения параметр beforeMove или после параметр afterMove: |
zub_samata,
версия только новая это поддерживает Цитата:
|
Для IE 11+ и ост. браузеров:
var target = document.querySelector('#some-id');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// ...
});
});
var config = { attributes: true };
observer.observe(target, config);
Для IE 9+, FF, Opera var target = document.querySelector('#some-id');
target.addEventListener("DOMAttrModified", function (ev) {
// ...
}, false);
Подробнее - https://developer.mozilla.org/en-US/...tationObserver, https://developer.mozilla.org/en-US/...utation_events |
если честно не очень понятно )
|
zub_samata,
что именно непонятно? что вы хотите сделать перед сменой класса? |
суть проблемы в том что бы создать менюшку которая, при нахождении в первой секции подключалась бы к одному классу css, при нахождении в другой секции к другому классу css
|
Цитата:
<div class="section-1">
<ul class="onepage-pagination">
<li>
<a data-index="1" href="#1" [B]class="onepage-pagination__item active"[/B]></a>
</li>
<li>
<a data-index="2" href="#2" class="onepage-pagination__item"></a>
</li>
</ul>
</div>
<div class="section-2">
<ul class="onepage-pagination">
<li>
<a data-index="1" href="#1" [B]class="onepage-pagination__item active"[/B]></a>
</li>
<li>
<a data-index="2" href="#2" class="onepage-pagination__item"></a>
</li>
</ul>
</div>
Код:
.section-1 .onepage-pagination { |
zub_samata,
предположим верхняя ссылка примера ниже это меню, предположим есть три класса меняют цвет текста, предположим что нечто чудесным образом меняет цвет меню при клике на пагинатор справа ... жаль что чудеса не бесплатны, но можно http://learn.javascript.ru/play/JyKv6b |
разве это чудо?) да и к тому же код никто не просил) мне бы просто указать направление в котором нужно двигаться) просто предыдущие ваши подсказки я не понял )
|
zub_samata,
в самом плагине есть всё что вам нужно это параметр afterMove -- ставьте в эту функцию всё что хотите изменить при смене класса -- на код что я дал выше можно необращать внимания - я там внёс свою функцию которая срабатывает на нажатия элементов пагинатора. можно взять как образец смены класса -- делайте пример - информации более чем предостаточно - сделайте ужо чего-нибудь - тогда можно будет сказать почему оно у вас неработает ))) |
<script type="text/javascript">
$(function (){
$(".main").onepage_scroll(
{
afterMove: Function(index){
index=$("p").attr("data-index");
if (index=="1")
$('#menu').removeClass('on_top');
else
$('#menu').addClass('on_top');
}
}
);
});
</script>
вот мой код по которому я пытался изменить верхнюю менюшку <div id="menu" class="on_top">elements of menu</div> типо менюшка которая должна меняться <style type="text/css">
body {
margin:0;
padding:0;
}
#menu {
height: 30px;
width:300px;
border: 1px solid #666;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
background: #999;
margin: 0px 50px;
position:fixed;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}
#menu:hover, #menu.on_top {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE 5.5+*/
-moz-opacity: 1; /* Mozilla 1.6 и ниже */
-khtml-opacity: 1; /* Konqueror 3.1, Safari 1.1 */
opacity: 1; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}
#content {
border: 1px solid #F00;
height:5000px;
padding: 40px;
}
</style>
код css который я пытаюсь подключить или отключить при определенных условиях спасибо за Ваше терпение ) |
zub_samata,
зачем нужна строка 6 ? и Function с f |
в строке 6 я пытался вытащить data-index действующей секции
но вы знаете кажется я начинаю по немного понимать а чем вы хотели сказать мне в начале вот мой новый код основанный на вашем старом я только заменил paginationClick на beforeMove ) <script>
$(document).ready(function () {
var cls = ["yellow", "red", "green"];
$(".main").onepage_scroll({
sectionContainer: "section",
loop: true,
responsiveFallback: 600,
beforeMove: function(i) {
$(".menu").removeClass(cls.join(" ")).addClass(cls[i])
}
})
});
</script>
все работает одна проблема при прокрутке в обратном порядке он выдает не то что нужно. ну тоесть не то что было |
zub_samata,
так у вас должно быть $(document).ready(function(){
$(".main").onepage_scroll({
sectionContainer: "section",
responsiveFallback: 600,
loop: true,
afterMove: function(index){
if (index=="1")
$('#menu').removeClass('on_top');
else
$('#menu').addClass('on_top');
}
});
});
afterMove: function(index) здесь индекс куда пришли beforeMove: function(i) здесь индекс откуда хотим уйти индексы в плагине с 1 а не с нуля |
а как он в таком случае будет определять что index секции равен 1 или 2 или 3?
и еще один вопрос а как объеденить paginationClick и afterMove ?) просто если вот так то все ломается ) <script>
$(document).ready(function () {
var cls = ["yellow", "red", "green"];
$(".main").onepage_scroll({
sectionContainer: "section",
loop: true,
responsiveFallback: 600,
beforeMove: function(i) {
$(".menu").removeClass(cls.join(" ")).addClass(cls[i])
}
paginationClick: function(i){
$(".menu").removeClass(cls.join(" ")).addClass(cls[i])
}
})
});
</script>
|
zub_samata, забудьте о paginationClick смотрите что я вам написал выше и берите скрипт тут https://github.com/peachananr/onepage-scroll
сутки назад автор исправил некоторые ошибки в своём плагине комплект можно скачать по ссылке https://github.com/peachananr/onepag...ive/master.zip |
Господи, зачем юзать какие то плагины, подобного эффекта можно добится всего лишь сменой CSS класса на родителе при событии onscroll, который будет менять позицию прокручиваемого блока и стиль паганатора, а вы из пушки по воробьям.
|
Цитата:
|
Цитата:
на пагинаторы повесить обработчики, думаю, труда не составит |
Цитата:
|
Danxil,
добавил параметр loop http://learn.javascript.ru/play/imQOdc когда он true -- скролинг вниз колёсиком после последнего слайда появляется 1 и колёсико вверх после 1 появляется последний -- когда false прокрутка останавливается на конечных слайдах. |
Цитата:
|
Danxil,
Цитата:
для firefox - непонимает он window.addEventListener('mousewheel', whell); ещё var wheelDirection = (event.detail<0) ? 1 : (event.wheelDelta>0) ? 1 : -1; вместо event.wheelDelta>0 ну и до кучи префиксы для transition ... :victory: http://learn.javascript.ru/play/D4Fzdc |
Цитата:
|
| Часовой пояс GMT +3, время: 22:39. |