Gå til innhold

Scopeproblematikk/hvordan nulle ut title tooltip?

Haraldson

Av Haraldson
i Programmering og webutvikling

Anbefalte innlegg

Haraldson

Haraldson

Skrevet
Skrevet

Har følgende script, som henter ut title-tekstene i en meny og viser disse i en paragraf et annet sted på siden. Kan ses live på Leveld Teaterlag.no.

 

function showDesc() {
// Kompatibilitetstest - støtter nettleseren metodene?
if ( !document.getElementById ) return false;
if ( !document.getElementsByTagName ) return false;
if ( !document.createElement ) return false;
if ( !document.createTextNode ) return false;

// Kompatibilitetstest - er alle elementene tilstede?
if ( !document.getElementById("main-menu") ) return false;
if ( !document.getElementById("header") ) return false;

// Lager referanser til elementene i HTML-en
var menu = document.getElementById("main-menu");
var menulinks = new Array();
menulinks = menu.getElementsByTagName("a");
var header = document.getElementById("header");

for ( var i = 0; i < menulinks.length; i++ ) {
 
 menulinks[i].onmouseover = function() {
 	var para = document.createElement("p");
 	var helptext = document.createTextNode( this.getAttribute("title") );
 	para.id = "menu-help";
 	
 	header.appendChild( para );
 	para.appendChild( helptext );
 }
 
 menulinks[i].onmouseout = function() {
 	var para = document.getElementById("menu-help");
 	header.removeChild( para );
 }  
}
}

addLoadEvent(showDesc);

 

 

Problemene er

a) Jeg ønsker å skjule tooltip'en med tekst fra title-attributten til #main-menu a med JS. Dette vet jeg ikke hvordan jeg gjør på andre måter enn å sette this.title = "";. Dette er lite holdbart, da mouseoveren ikke fungerer mer enn en gang for hvert menypunkt før neste reload av siden.

 

b) Overnevnte problem oppstår på mange måter fordi jeg ikke skjønner meg helt på javascript og scope i events. Jeg hadde før et array kalt 'titles', som jeg med en for-loop populerte med alle titlene i menyen på forhånd. Oppdaget fort at jeg ikke hadde tilgang til dette arrayet inni eventene. Hadde jeg hatt tilgang til det, kunne jeg også ha satt title til "" på onmouseover og resatt til original verdi på onmouseout. Noen som kan hjelpe meg her?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Peter

Peter

Skrevet
Skrevet (endret)

Såvidt jeg kan se, så setter du jo tittelen fra link-elementet inn i para ved onmouseover, da kan du vel bare sette tittelen på linkelementet til verdien av para før du fjerner para ved onmouseout?

 

Ellers kan du jo bruke en global variabel til å holde tittelen?

 

var tmptitle = '';

 

onmouseover()

{

tmptitle = this.title;

}

 

onmouseout()

{

this.title = tmptitle;

}

Endret av Nazgul
Lenke til kommentar
luxus

luxus

Skrevet
Skrevet

En enda snedigere løsning er å bruke outer-functions til å holde på tittelen din. Løsningen min er som følger:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 <head>
   <title>Testside</title>
 </head>
 <body>
   <ul id="meny">
     <li><a href="#" title="Teste litt">En test</a></li>
     <li><a href="#" title="Rosa elefant">En test</a></li>
     <li><a href="#" title="Litt mer testing">En test</a></li>
     <li><a href="#" title="Og enda mer">En test</a></li>
     <li><a href="#" title="Fin tittel!">En test</a></li>
   </ul>
   <p id="titlePlaceholder"></p>

   <script type="text/javascript">
<!--

/**
*  
*/
var init = function() {
 var menuElements = document.getElementsByTagName("A");
 var i;
 var placeHolder = document.getElementById("titlePlaceholder");

 // Looper over menyelementene
 for ( i = 0; i < menuElements.length; i++ )   {

   /**
    * Setter onmouseover funksjonen via en ytre funksjon.
    * Den ytre anonyme funksjonen vil leve så lenge den indre (den som blir returnert),
    * lever. Den ytre holder på tittel og en referanse til p-elementet der tittelen skal inn.
    * Den ytre funksjonen blir eksekvert med en gang koden blir lest inn.
    */
   menuElements[i].onmouseover = (function(title, p) {
     // Returnerer funksjonen som faktisk blir lagt på onmouseover..
     return function() {
       // p og title har den indre funksjonen tilgang til 
       //selv om disse altså ligger i den ytre funksjonen
       p.innerHTML = title;
     };
   })(menuElements[i].title, placeHolder); // Sender inn tittel og p-elementet til ytre

   /**
    * Samme taktikk som onmouseover. Trenger vel strengt tatt ikke dette, 
    * kunne også ha hentet ut p-elementet
    * med en getElementById, men det er ikke like gøy;-)
    */
   menuElements[i].onmouseout = (function(p) {
     return function() {
       p.innerHTML = "";
     };
   })(placeHolder);

   /**
    * Fjerner menyelementet sin tittel. 
    * Denne ligger nå i den ytre funksjonen til onmouseover, så vi trenger den ikke lengre
    * (og du ville jo ha den vekk så
    * tooltipen ikke skulle komme.)
    */
   menuElements[i].title = "";
 }
}

window.onload = init();
//-->
   </script>
 </body>
</html>

 

Denne løsningen leker med javascirpt sine fine scope (som forøvrig er ganske forskjellig fra PHP osv). Jeg lærte meg ganske mye gøy om javascript ved å se på Crockford sine "undervisnings"-filmer. Du finner de nederst til venstre på denne sinde: http://javascript.crockford.com/. Om ikke jeg husker feil dekker filmen "Video: Advanced JavaScript" det jeg har gjort her :-)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...