Autor Zpráva
Prochy
Profil
Dobrý večer,

chtěl bych se zeptat, jak by se dalo udělat něco jako je na této stránce (jde o zobrazování aktivní kotvy v odkazech na kotvu). Přesně mě nenapadá, jak by se to dalo udělat. Přemýšlel jsem, jestli jde např. pomocí jQuery zjistit v jakém divu se aktuálně nacházím. Další věc, co mě leda tak napadlo, bylo zjišťovat na jaké výšce sem.

Potřeboval bych trochu nakopnout. Předem děkuji za odpovědi.
Str4wberry
Profil
K nakopnutí bych doporučil se podívat na offsetTop a scrollTop.
ShiraNai7
Profil
Prochy:

Existují na to javascriptové "knihovny", viz např. Scrollspy u Twitter Bootstrapu.

Také jsem si před nějakou dobou napsal vlastní jQuery plugin, který řeší čistě nalezení aktivní "sekce" na stránce. Co se s na základě této informace stane, záleží na fantazii programátora.

Pro více info a ukázku: http://lib.shira.cz/scrollwatch/
Chamurappi
Profil
Reaguji na Prochyho:
Je to celkem trivialita, která jQuery k ničemu nepotřebuje, a stačí na ni skript kratší, než ShiraNaiho7 plugin. Hledej getBoundingClientRect, to je metoda, která zjišťuje přímo pozici elementu vzhledem k obrazovce.
Prochy
Profil
Děkuji za odpověď,

tak jsem dal na Chamurappiho radu a pustil jsem se do vlastního JS řešení pomocí toho getBoundingClientRect. Na to, že nejsem v JS úplnej profík, tak mi to i relativně funguje, což se divím. Problém je v tom, že v IE když se snažim získat adresy, odkazu z hlavní nabídky, tak u IE mi to vezme příkaz links[i].attributes['href'].value kompletní cestu s http, kdežto opera, firefox i chrome mi vezme pouze relativní cestu toho odkazu, což je pro mě vyhovující, tak mě zajímalo, jak toho docílit i u IE? Napadlo mě to regulárem odstranit, ale nepodařilo se mi najít funkci, která vrátí adresový řádek.

Můj dosavadní skript:
    <script type="text/javascript">
    //Zjišťuje absolutní pozici umístěných kotev
    function getPositionAnchors(links){
      positionAnchors = new Array();
      for(var i = 0; i<links.length;i++){
          positionAnchors[i]=Math.abs(document.getElementById(links[i].attributes['href'].
            value.replace(/#/g,'')).getBoundingClientRect().top);                                                                      
      }
      return positionAnchors;
    }    
    //zjistí minimum z pole
    Array.prototype.min = function() {
      return Math.min.apply(null, this)
    }  
    //zjistí, která kotva je nejlbíž od horního okraje stránky
    function activeAnchors(links){
      topPositionAnchors = getPositionAnchors(links);
      min = Math.min.apply(null, topPositionAnchors);                                             
      for(var i=0; i<topPositionAnchors.length; i++){
        if(min==topPositionAnchors[i]){
          links[i].className = "active";                        
        }             
        else 
         links[i].className = "";    
        }
    }    
    window.onload = function (oEvent){         
      var links = document.getElementById("links").getElementsByTagName("a");
      var topPositionAnchors = new Array();
      activeAnchors(links);                                 
      window.onscroll = function (oEvent) {
            activeAnchors(links);    
      }
    }

Prosím buďte shovívavý, v JS dělám jen, když to je nutné. Jestli to je úplně chybný postup, tak budu rád, když mi to řeknete. :-)

Předem děkuji za odpověď
Chamurappi
Profil
Reaguji na Prochyho:
links[i].attributes['href'].value
Zapomeň na luštění atributů.
Hash z odkazu jde zjistit stejně jako hash z location (což je objekt, ve kterém je adresa stávající stránky), v tvém případě tedy links[i].hash.

Prosím buďte shovívavý, v JS dělám jen, když to je nutné.
Na to, že se s JS moc nekamarádíš, to vůbec není špatné.
Mimochodem, používej var.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: