Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   функции в javascript (https://javascript.ru/forum/misc/44603-funkcii-v-javascript.html)

zub_samata 26.01.2014 11:43

суть проблемы в том что бы создать менюшку которая, при нахождении в первой секции подключалась бы к одному классу css, при нахождении в другой секции к другому классу css

Danxil 26.01.2014 13:11

Цитата:

Сообщение от zub_samata (Сообщение 294134)
суть проблемы в том что бы создать менюшку которая, при нахождении в первой секции подключалась бы к одному классу 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 {
  стили
}
.section-1 .onepage-pagination__item {
  стили
}

.section-2 .onepage-pagination {
  стили
}
.section-2 .onepage-pagination__item {
  стили
}


рони 26.01.2014 13:26

zub_samata,
предположим верхняя ссылка примера ниже это меню, предположим есть три класса меняют цвет текста, предположим что нечто чудесным образом меняет цвет меню при клике на пагинатор справа ... жаль что чудеса не бесплатны, но можно спи.... скопировать. :lol:
http://learn.javascript.ru/play/JyKv6b

zub_samata 26.01.2014 17:33

разве это чудо?) да и к тому же код никто не просил) мне бы просто указать направление в котором нужно двигаться) просто предыдущие ваши подсказки я не понял )

рони 26.01.2014 17:43

zub_samata,
в самом плагине есть всё что вам нужно это параметр afterMove -- ставьте в эту функцию всё что хотите изменить при смене класса -- на код что я дал выше можно необращать внимания - я там внёс свою функцию которая срабатывает на нажатия элементов пагинатора.
можно взять как образец смены класса -- делайте пример - информации более чем предостаточно - сделайте ужо чего-нибудь - тогда можно будет сказать почему оно у вас неработает )))

zub_samata 27.01.2014 09:43

<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 который я пытаюсь подключить или отключить при определенных условиях

спасибо за Ваше терпение )

рони 27.01.2014 10:03

zub_samata,
зачем нужна строка 6 ? и Function с f

zub_samata 27.01.2014 10:35

в строке 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>


все работает одна проблема при прокрутке в обратном порядке он выдает не то что нужно. ну тоесть не то что было

рони 27.01.2014 10:41

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 а не с нуля

zub_samata 27.01.2014 10:44

а как он в таком случае будет определять что 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>


Часовой пояс GMT +3, время: 18:42.