Discussione chiusa
Pagina 1 di 2 12 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14

Discussione: [Javascript]Evidenziare voce di men¨ selezionata

  1. #1
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71

    [Javascript]Evidenziare voce di men¨ selezionata

    Ciao a tutti,
    ho un problema con l'html e css.
    Ho una pagina in cui c'Ŕ un menu orizzontale fatto con css.
    Tutti gli effetti funzianano bene..
    Il problema Ŕ che i link puntano ad un iframe interno alla pagina (target="frame..")
    che quindi sarÓ l'unica cosa ad essere caricata di volta in volta.
    Vorrei che la voce del men¨ cliccata rimanga evidenziata. E' possibile?
    Grazie!

  2. #2
    L'avatar di bumm
    bumm non Ŕ in linea Very Important Person Ultimo blog: [VB2010] ComboBox ed Enumeratori
    Luogo
    Bologna
    Post
    2,142
    Blogs
    1
    Il problema Ŕ che i link puntano ad un iframe interno alla pagina (target="frame..")
    che quindi sarÓ l'unica cosa ad essere caricata di volta in volta.
    Vorrei che la voce del men¨ cliccata rimanga evidenziata. E' possibile?
    Quindi la devi evidenziare finchÚ non premi un altro elemento del menu? o su qualche altro evento?
    Inoltre posta il codice qui. Se sappiamo come fatto il tuo menu, come possiamo aiutarti?
    "HeloWorld.exe" 17 errors, 31 warnings.

    Non mi mandate le richieste di aiuto via PM! Non vi risponder˛! Tutte le domande fateli sul forum!

  3. #3
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71
    Il codice Ŕ quello di un normalissimo men¨ fatto con CSS quindi:
    codice HTML:
    <ul id="menutab" >
    	<li ><a href="/pag1.html" target="iframe">VOCE1</a></li>
        <li ><a href="/pag2.html" target="iframe">VOCE2</a></li>
        <li><a href="/pag3.html" target="iframe">VOCE3</a></li>
        <li><a href="/pag4.html" target="iframe">VOCE4</a></li>
    </ul>
    <iframe src="origine.html" width="100%" height="700" scrolling="no" frameborder="0" id="iframe" name="iframe"></iframe>
    con stile quasi essenziale...
    codice HTML:
    <style>
    #menutab {
    	position:relative;
    	width:270px;
    	font-size: 20px;
    	font-family: arial, helvetica, sans-serif;
    	margin: 0 auto;
    	text-align:center;
    }
    #menutab ul {margin: 0 auto; padding: 0}
    #menutab li {display: inline; margin:0; padding: 0}
    #menutab a:link, #menutab a:visited {display: block; text-align: left; text-decoration: none; background: #DEDCDC; color: #05181E; border:0px solid #666; float:left;}
    #menutab a:hover {background: #FFF; color: #41545F; border-color: #41545F; padding-left: 0;}
    #menutab li.active a {
    	   color: #0F0;
    	   text-decoration:none;
       }
    </style>
    Il problema da risolvere Ŕ questo:
    Una volta che clicco sulla voce di men¨ VOCE1 e quindi nel iframe viene caricata la pagina pag1.html, la voce rimanga evidenziata per far capire quale pagina Ŕ mostrata. E cosý via per tutte le altre pagine...

  4. #4
    L'avatar di bottomap
    bottomap non Ŕ in linea Moderatore Globale
    Post
    4,130
    Ciao,

    Per "evidenziata" immagino tu intenda l'applicazione dell'ultimo style all'li selezionato. Non Ŕ complicatissimo, anche se richiede un po'di interazione tra javascript e DOM.

    Devi semplicemente collegare all'handler onclick delle singole voci una funzione opportuna che:
    - Toglie l'eventuale attributo class a tutti i tag <li>.
    - Aggiunge class="active" all'li su cui si Ŕ cliccato.
    Visto che non hai alcun id, devi lavorare con parent e childNodes e la funzione potrebbe essere un po'intricata, ad ogni modo dovrebbe funzionare senza problemi con l'approccio descritto.

    Ciaociao


    Venite a farmi un saluto su http://www.bottomap.com/

    - Come porre domande in modo intelligente
    - Hai mai dato un'occhiata al
    Regolamento del Forum? Se la risposta Ŕ no, sarebbe proprio l'ora di farlo...
    - Il Crossposting Ŕ vietato dalla Netiquette.

    "Solo Puffin ti darÓ forza e grinta a volontÓ" - Charlie O'Brian
    "I gatti sono animali verso cui ho il massimo rispetto. I gatti e i non conformisti mi sembrano davvero i soli esseri in questo mondo che abbiano una coscienza pratica e attiva" - Jerome K. Jerome
    "Dun Dun DUNNN!" - Capitan Caos
    (per chiunque se lo fosse mai chiesto, il nick Bottomap Ŕ volutamente sgrammaticato)

  5. #5
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71
    ..Non sarÓ complicato.. ma la tua risposta mi ha fatto cadere le braccia!
    DOM? What's DOM??
    Per tutto il resto non ho le conoscenze adatte.. pensavo che con il CSS si potesse risolvere..o al massimo due righe di Javascript..Non Ŕ cosi??!!??

  6. #6
    L'avatar di bottomap
    bottomap non Ŕ in linea Moderatore Globale
    Post
    4,130
    Ciao,

    Niente di trascendentale... il DOM Ŕ il Document Object Model, ossia l'albero che sottende la pagina html. Interagire con il DOM significa interagire con gli elementi che compongono l'albero della pagina. Quando una funzione javascript usa una scrittura del tipo "... document.getElemetById('elemento').childNodes[0].value= ..." si dice che interagisce con il DOM.
    L'elemento document (o meglio l'elemento window di cui document Ŕ diretto discendente) Ŕ la radice dell'albero.

    In sostanza qualsiasi funzione Javascript che interagisce con il contenuto della pagina accede al DOM. Niente di pi¨ complicato... la funzione javascript pu˛ richiedere qualcosa di pi¨ (ma anche non molto di pi¨) di un paio di righe.
    Come poi ti consiglieranno a breve, framework appositi tipo jQuery possono facilitarti un poco il compito evitando buona parte del lavoro. Purtroppo per quanto riguarda questi framework non ti saprei dare indicazioni troppo precise, per cui meglio aspettare l'intervento di bumm.

    Ciaociao


    Venite a farmi un saluto su http://www.bottomap.com/

    - Come porre domande in modo intelligente
    - Hai mai dato un'occhiata al
    Regolamento del Forum? Se la risposta Ŕ no, sarebbe proprio l'ora di farlo...
    - Il Crossposting Ŕ vietato dalla Netiquette.

    "Solo Puffin ti darÓ forza e grinta a volontÓ" - Charlie O'Brian
    "I gatti sono animali verso cui ho il massimo rispetto. I gatti e i non conformisti mi sembrano davvero i soli esseri in questo mondo che abbiano una coscienza pratica e attiva" - Jerome K. Jerome
    "Dun Dun DUNNN!" - Capitan Caos
    (per chiunque se lo fosse mai chiesto, il nick Bottomap Ŕ volutamente sgrammaticato)

  7. #7
    L'avatar di bumm
    bumm non Ŕ in linea Very Important Person Ultimo blog: [VB2010] ComboBox ed Enumeratori
    Luogo
    Bologna
    Post
    2,142
    Blogs
    1
    Come poi ti consiglieranno a breve, framework appositi tipo jQuery possono facilitarti un poco il compito evitando buona parte del lavoro. Purtroppo per quanto riguarda questi framework non ti saprei dare indicazioni troppo precise, per cui meglio aspettare l'intervento di bumm.
    Eccomi!
    codice HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
      
    	<style type="text/css">
    #menutab {
    	position:relative;
    	width:270px;
    	font-size: 20px;
    	font-family: arial, helvetica, sans-serif;
    	margin: 0 auto;
    	text-align:center;
    }
    #menutab ul {margin: 0 auto; padding: 0}
    #menutab li {display: inline; margin:0; padding: 0}
    .selected {background-color: #00FF00;}
    .entered {background-color: #CCFFCC;}
    </style>
    <script type="text/javascript">
            //viene eseguito quando il documento Ŕ stato caricato completamente
    	$(document).ready(function(){
    		//eventi per cambiare lo stile on mouse enter
    		$('#menutab > li').bind('mouseenter mouseleave', function() {
    			$(this).toggleClass('entered');
    		});
    	});
    	//attivazione del menu
    	function setActiveMenu(mnuId){
    		$('#menutab > li').removeClass('selected');
    		$('#' + mnuId).addClass('selected');
    		return true;
    	}
    </script>
    	</head>
    	<body>
    	<ul id="menutab" >
    		<li id="li1" onclick="setActiveMenu('li1')"><a onclick="setActiveMenu('li1')" href="http://www.google.it" target="iframe">GOOGLE</a></li>
    		<li id="li2" onclick="setActiveMenu('li2')"><a onclick="setActiveMenu('li2')" href="http://www.yahoo.it" target="iframe">YAHOO</a></li>
    		<li id="li3" onclick="setActiveMenu('li3')"><a onclick="setActiveMenu('li3')" href="http://www.rambler.ru" target="iframe">RAMBLER</a></li>
    		<li id="li4" onclick="setActiveMenu('li4')"><a onclick="setActiveMenu('li4')" href="http://www.masterdrive.it" target="iframe">MASTERDRIVE</a></li>
    	</ul>
    <iframe src="origine.html" width="100%" height="700" scrolling="no" frameborder="0" id="iframe" name="iframe"></iframe>
    	</body>
    </html>
    Ultima modifica di bumm; 07-12-2010 11:09 
    "HeloWorld.exe" 17 errors, 31 warnings.

    Non mi mandate le richieste di aiuto via PM! Non vi risponder˛! Tutte le domande fateli sul forum!

  8. #8
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71
    MITICO BUMM!!! 1000 punti!
    Grazie infinite!!!
    Grazie anche a bottomap per la didattica!

  9. #9
    L'avatar di bottomap
    bottomap non Ŕ in linea Moderatore Globale
    Post
    4,130
    Per completezza posto anche la soluzione senza jQuery... in questo caso non Ŕ molto pi¨ lunga (ma sicuramente un po'meno elegante), dal momento che ci si pu˛ attacare agli id dei singoli li. Non Ŕ presente l'effetto .entered in questo caso:
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <style type="text/css">
    #menutab {
    	position:relative;
    	width:270px;
    	font-size: 20px;
    	font-family: arial, helvetica, sans-serif;
    	margin: 0 auto;
    	text-align:center;
    }
    #menutab ul {margin: 0 auto; padding: 0}
    #menutab li {display: inline; margin:0; padding: 0}
    .selected {background-color: #00FF00;}
    </style>
    <script type="text/javascript">
    
    	//attivazione del menu
    	function setActiveMenu(mnuId){
    	  var ul=document.getElementById("menutab");
    	  var lis=ul.getElementsByTagName("LI");	  
    	  for(var i=0; i<lis.length; i++){
    	     if(lis[i].id==mnuId)lis[i].className="selected";
    	     else lis[i].className="";
              }
              return true;
    	}
    </script>
    	</head>
    	<body>
    	<ul id="menutab" >
    		<li id="li1" onclick="setActiveMenu('li1')"><a href="http://www.google.it" target="iframe">GOOGLE</a></li>
    		<li id="li2" onclick="setActiveMenu('li2')"><a href="http://www.yahoo.it" target="iframe">YAHOO</a></li>
    		<li id="li3" onclick="setActiveMenu('li3')"><a href="http://www.rambler.ru" target="iframe">RAMBLER</a></li>
    		<li id="li4" onclick="setActiveMenu('li4')"><a href="http://www.masterdrive.it" target="iframe">MASTERDRIVE</a></li>
    	</ul>
    <iframe src="origine.html" width="100%" height="700" scrolling="no" frameborder="0" id="iframe" name="iframe"></iframe>
    	</body>
    </html>
    Ultima modifica di bottomap; 07-12-2010 11:58 


    Venite a farmi un saluto su http://www.bottomap.com/

    - Come porre domande in modo intelligente
    - Hai mai dato un'occhiata al
    Regolamento del Forum? Se la risposta Ŕ no, sarebbe proprio l'ora di farlo...
    - Il Crossposting Ŕ vietato dalla Netiquette.

    "Solo Puffin ti darÓ forza e grinta a volontÓ" - Charlie O'Brian
    "I gatti sono animali verso cui ho il massimo rispetto. I gatti e i non conformisti mi sembrano davvero i soli esseri in questo mondo che abbiano una coscienza pratica e attiva" - Jerome K. Jerome
    "Dun Dun DUNNN!" - Capitan Caos
    (per chiunque se lo fosse mai chiesto, il nick Bottomap Ŕ volutamente sgrammaticato)

  10. #10
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71
    a questo punto una domanda (sicuramente di rapida e semplice risposta):
    Se quando carico la pagina la prima volta (e quindi anche la pagina dentro il frame che sarÓ origine.html) voglio giÓ evidenziare dove mi trovo (quindi la voce del men¨ ORIGINE, per esempio),
    cosa devo settare nell' iframe?

Discussione chiusa
Pagina 1 di 2 12 ultimoultimo

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi