Автор Тема: Highlight на активно меню с JS  (Прочетена 4448 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

crasyfish

  • Newbie
  • *
  • Благодарности
  • -Казани: 1
  • -Получени: 0
  • Публикации: 7
Highlight на активно меню с JS
« -: 29 Юни 2012, 16:57:56 »
Здравейте,
Обръщам се за помощ. Опитвам се да използвам готов скрипт (http://www.scriptiny.com/2008/05/sliding-javascript-menu-highlight-1kb/), чрез който да маркирам активните менюта. В оригинал скрипта използва onmouseover събитието за да премести плъзгащата се лента върху таба, който е на фокус. Промених това събитие на onclick, така че когато е кликнато дадено меню да бъде осветено. Ето и самия скрипт:

Код: Javascript
  1. var menuSlider=function(){
  2.         var m,e,g,s,q,i; e=[]; q=8; i=8;
  3.         return{
  4.                 init:function(j,k){
  5.                         m=document.getElementById(j); e=m.getElementsByTagName('li');
  6.                         var i,l,w,p; i=0; l=e.length;
  7.                         for(i;i<l;i++){
  8.                                 var c,v; c=e[i]; v=c.value; if(v=='current_page_item'){s=c; w=c.offsetWidth; p=c.offsetLeft}
  9.                                 c.onclick=function(){menuSlider.mo(this)}; //c.onmouseout=function(){menuSlider.mo(s)};
  10.                                
  11.                         }
  12.                         g=document.createElement('div');
  13. g.setAttribute('id',k);
  14. m.parentNode.appendChild(g); g.style.width=w+'px'; g.style.left=p+'px';
  15.                 },
  16.                 mo:function(d){
  17.                         clearInterval(m.tm);
  18.                         var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
  19.                         m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
  20.                 },
  21.                 mv:function(el,ew){
  22.                         var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
  23.                         if(l!=el||w!=ew){
  24.                                 if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}
  25.                                 if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+'px'}
  26.                         }else{clearInterval(m.tm)}
  27. }};}();

Използвам wordpress. Функцията я викам от бодито <body onload="menuSlider('dropmenu', 'slide')"> Проблема ми е, че когато кликна на произволно меню, слайдера се зарежда , застава под менюто и в следващия момент изчезва, след като вече се е заредила страницата. Ето и сайта в който се опитвам да използвам въпросния скрипт p.
Публикувал съм питането си и в друг форум. Надявам се да не е проблем.
Благодаря предварително!

edit: Borovaka: Използвай [ code  ] таг
« Последна редакция: 01 Юли 2012, 00:44:32 от borovaka »

borovaka

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 1
  • -Получени: 48
  • Публикации: 906
Re: Highlight на активно меню с JS
« Отговор #1 -: 29 Юни 2012, 17:45:59 »
Защо я зареждаш по този начин? Зареди я в <script> в края на body-то. Така ще се изпълнява след, цялостното зареждане на страницата.
Та извода е прост: "Колкото по-големи ла*ната - толкова по-малка щетата! ... моралната де, не материалната"

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 191
  • Публикации: 3624
Re: Highlight на активно меню с JS
« Отговор #2 -: 29 Юни 2012, 18:53:04 »
Да ти кажа кода си работи правилно спрямо това което е подадено.
Мисля, че трябва да ползваш Ajax за да зареждаш само съдържанието, в противен случай ти винаги ще зареждаш целият html document, който пък променя поведението на скрипта.
Още нещо, при мен underline елемента не излиза съвсем коректно под менютата..
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

MrCroZer

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 11
  • -Получени: 17
  • Публикации: 411
Re: Highlight на активно меню с JS
« Отговор #3 -: 29 Юни 2012, 20:27:30 »
Код: Javascript
  1. var menuSlider=function(){
  2.         var m,e,g,s,q,i; e=[]; q=8; i=8;
  3.         return{
  4.                 init:function(j,k){
  5.                         m=document.getElementById(j); e=m.getElementsByTagName('li');
  6.                         var i,l,w,p; i=0; l=e.length;
  7.                         for(i;i<l;i++){
  8.                                 var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
  9.                                 c.onclick=function(t){t.preventDefault();menuSlider.mo(this)}; //c.onmouseout=function(){menuSlider.mo(s)};
  10.                         }
  11.                         g=document.getElementById(k); g.style.width=w+'px'; g.style.left=p+'px';
  12.                 },
  13.                 mo:function(d){
  14.                         clearInterval(m.tm);
  15.                         var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
  16.                         m.tm=setInterval(function(){menuSlider.mv(el,ew,d)},i);
  17.                 },
  18.                 mv:function(el,ew,d){
  19.                         var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
  20.                         if(l!=el||w!=ew){
  21.                                 if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}
  22.                                 if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+'px'}
  23.                         }else{clearInterval(m.tm);window.location.href = d.children[0].attributes[0].value;}
  24.                        
  25. }};}();


Променил съм 2 неща, 1-во съм задал preventDefault() за да не се изпълнява зареждането на нова страница при onclick, след това по долу, можеш да видиш, window.location.href = d.children[0].attributes[0].value; , така пак зарежда страницата на която си натиснал, но по този начин плъзгането (анимацията на ефекта при натискане) е цяла. Идеята ти може да не е такава - което се разбира по долу в поста ти , но можеш да я пригодиш като замениш кода   window.location.href = d.children[0].attributes[0].value; с това което искаш да става при натискане.

crasyfish

  • Newbie
  • *
  • Благодарности
  • -Казани: 1
  • -Получени: 0
  • Публикации: 7
Re: Highlight на активно меню с JS
« Отговор #4 -: 30 Юни 2012, 08:38:59 »
Много ви благодара за отговорите!
borovaka, направих това което каза. Извиках функцията в края на бодито:
Код: Javascript
  1. <script>
  2. window.onload=menuSlider.init('dropmenu','slide');
  3. </script>
Много се надявах да заработи по този начин. За съжаление не се получи нищо. Слайдера продължи да си работи по-същия начин.

Цитат
в противен случай ти винаги ще зареждаш целият html document, който пък променя поведението на скрипта.
jazzman, точно от това се опасявах. За съжаление не съм наясно с Ajax. Underline елемента наистина не излиза коректно на всички браузъри. Но това ще го коригирам накрая, ако въобще заработи.

MrCroZer, за съжаление и със твоите корекции, не настъпи промяна. Дори в момента скрипта е със твоите промени.

Благодаря ви отново.
« Последна редакция: 01 Юли 2012, 00:43:52 от borovaka »

crasyfish

  • Newbie
  • *
  • Благодарности
  • -Казани: 1
  • -Получени: 0
  • Публикации: 7
Re: Highlight на активно меню с JS
« Отговор #5 -: 30 Юни 2012, 09:31:51 »
MrCroZer, за съжаление и със твоите корекции, не настъпи промяна. Дори в момента скрипта е със твоите промени.

Упс, всъщност не е вярно това което съм казал. Сработи. Само, че не редиректва към страницата която съм кликнал. Но въпреки това след като отиде на друга страница, този маркер няма ли да изчезне пак. Идеята ми е underline елемента да остане под менюто, за да е ясно къде се намираме. Но искам това да се случва само за top level менютата.

MrCroZer

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 11
  • -Получени: 17
  • Публикации: 411
Re: Highlight на активно меню с JS
« Отговор #6 -: 30 Юни 2012, 11:41:04 »
Е то вече това ти е от html, като си в новата страница задаваш на линка да ти бъде  value="1",
Това ти е по подразбиране.
Код: HTML
  1. <div class="menu">
  2. <ul id="menu">
  3. <li><a href="#">JavaScript</a></li>
  4. <li><a href="#">Graphic Design</a></li>
  5. <li><a href="#">HTML</a></li>
  6. <li value="1"><a href="#">User Interface</a></li>
  7. <li><a href="#">CSS</a></li>
  8. </ul>
  9. <div id="slide"></div>
  10. </div>

Като тук ти е зададено value="1" на User Interface, това означава че това ще ти е селектираният бутон, просто в новата страница задаваш на друг бутон value="1"

crasyfish

  • Newbie
  • *
  • Благодарности
  • -Казани: 1
  • -Получени: 0
  • Публикации: 7
Re: Highlight на активно меню с JS
« Отговор #7 -: 30 Юни 2012, 14:56:54 »
Ами изпитвам затруднение да задам някакви стойности на менютата, зареждат се динамично от следната функция:

Код: Javascript
  1. <?php
  2. wp_page_menu('show_home=0&sort_column=menu_order&exclude=51, post_title&link_before=&link_after=');
  3. ?>

Опитах да направя всички менюта статични, за да мога да им задавам стойности, но така и не успях да ги накрам да се покажат.
« Последна редакция: 01 Юли 2012, 00:44:04 от borovaka »

MrCroZer

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 11
  • -Получени: 17
  • Публикации: 411
Re: Highlight на активно меню с JS
« Отговор #8 -: 30 Юни 2012, 18:20:12 »
//Off

Имаш си лс

MrCroZer

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 11
  • -Получени: 17
  • Публикации: 411
Re: Highlight на активно меню с JS
« Отговор #9 -: 30 Юни 2012, 23:08:42 »
там където ти е кода с менюто правиш проверка с $_GET

<li <?php if($_GET['page_id'] == 41) { echo "value='1'"; } ?>>

Примерно, зависи от страницата, това го правиш в li elementite

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 191
  • Публикации: 3624
Re: Highlight на активно меню с JS
« Отговор #10 -: 01 Юли 2012, 00:43:41 »
Ами щом бяхгаш от ajax (не знам поради каква причина), би могъл да го направиш с чисто php.
Да речем, когато кликнеш в/у даден линк от главното меню и той отговаря на определено условие зададено от теб и този линк стане активен и да се добавя css class, който да зарежда underscore елемента. Обаче как става това при готови CMS не съм наясно и нямам желание да знам ;)
Един съвет от мен:
Ако искаш да се занимаваш с програмиране и да се научиш да програмираш (колкото Господ ти е дал, разбира се), изхвърли всички CMS и почни от нулата, иначе много има да се блъскаш по форуми и в мрежата и накрая пак нищо няма да знаеш и ще чакаш някой някъде да е постнал евентуалено правилен отговор за твоя проблем...
 
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

crasyfish

  • Newbie
  • *
  • Благодарности
  • -Казани: 1
  • -Получени: 0
  • Публикации: 7
Re: Highlight на активно меню с JS
« Отговор #11 -: 01 Юли 2012, 14:58:07 »
там където ти е кода с менюто правиш проверка с $_GET

<li <?php if($_GET['page_id'] == 41) { echo "value='1'"; } ?>>

Примерно, зависи от страницата, това го правиш в li elementite

Проблема е, че менютата се генерират динамично. За това не мога да я направя тази проверка за всеки отделен li елемент. Поне не по този начин. Иначе в wordpress има удобна функция, is_page(41),  която върши подобно нещо, което казваш да направя.

crasyfish

  • Newbie
  • *
  • Благодарности
  • -Казани: 1
  • -Получени: 0
  • Публикации: 7
Re: Highlight на активно меню с JS
« Отговор #12 -: 01 Юли 2012, 15:15:10 »
Ами щом бяхгаш от ajax (не знам поради каква причина), би могъл да го направиш с чисто php.
Да речем, когато кликнеш в/у даден линк от главното меню и той отговаря на определено условие зададено от теб и този линк стане активен и да се добавя css class, който да зарежда underscore елемента. Обаче как става това при готови CMS не съм наясно и нямам желание да знам ;)
Един съвет от мен:
Ако искаш да се занимаваш с програмиране и да се научиш да програмираш (колкото Господ ти е дал, разбира се), изхвърли всички CMS и почни от нулата, иначе много има да се блъскаш по форуми и в мрежата и накрая пак нищо няма да знаеш и ще чакаш някой някъде да е постнал евентуалено правилен отговор за твоя проблем...

Не че бягам(от Ajax), но не го познавам. Между другото ме амбицира и попрочетох снощи, основни неща. Специално за wordpress, нещата са доста улеснени и все едно ти си създаваш нещата. Благодаря ти за съвета, по принцип започнах от нулата, просто с javascript и php не се чувствам в познати води, все още. Но тренирам.
Благодаря за услията да ми помогнете. За случая смятам, че трябва просто скрипта да се зарежда след като страницата се е заредила. Пробвах няколко неща които открих в нета, a и това което ме посъветва borovaka. Другото което пробвах е това:
<script>
if (window.attachEvent) {window.attachEvent('onload', menuSlider.init('dropmenu','slide'));}
else if (window.addEventListener) {window.addEventListener('load', menuSlider.init('dropmenu','slide'), false);}
else {document.addEventListener('load', menuSlider.init('dropmenu','slide'), false);}
</script>
Но пак изчезва underscore-а.

MrCroZer

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 11
  • -Получени: 17
  • Публикации: 411
Re: Highlight на активно меню с JS
« Отговор #13 -: 01 Юли 2012, 15:57:30 »
Не е динамично зареждането, от сега мога да ти кажа.

Има ли я темата в нета ? Дай линк ако я има .
Ако пък не, зависи от темата, но можеш да погледнеш в loop файлът.

crasyfish

  • Newbie
  • *
  • Благодарности
  • -Казани: 1
  • -Получени: 0
  • Публикации: 7
Re: Highlight на активно меню с JS
« Отговор #14 -: 01 Юли 2012, 18:11:13 »
Има я темата, но няма да мога да намеря линка. Могa да ти дам credentials в админ панела, за да се увериш.
Ето част от header.php, където може да видиш къде точно се зареждат менютата.


 <div class="logo">
   
    <h1 onclick="location.href='<?php echo get_option('home'); ?>/'">
   
      <?php bloginfo('name'); ?>
    </h1>
   
  </div>
  <div class="main-menu">
   
    <?php get_search_form(); ?>
    <div class="container">
      <div id="dropmenu">
   <?php
      

            wp_page_menu('show_home=0&sort_column=menu_order&exclude=51, 156 post_title&link_before=&link_after=');

         ?>

   <div id="slide"><!-- --></div>
      </div>
    </div>
  </div>
</div>