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

[Javascript]Evidenziare voce di men¨ selezionata

  1. #1
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71
    Like Inviati  
    0
    Like Ricevuti  
    0
    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 Topo di biblioteca Ultimo blog: [VB2010] ComboBox ed Enumeratori
    Post
    2,140
    Blogs
    1
    Like Inviati  
    0
    Like Ricevuti  
    0
    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?
    ℹ️ Leggi di pi¨ su bumm ...

  3. #3
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71
    Like Inviati  
    0
    Like Ricevuti  
    0
    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 Amanuense
    Post
    4,130
    Like Inviati  
    0
    Like Ricevuti  
    0
    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
    ℹ️ Leggi di pi¨ su bottomap ...

  5. #5
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71
    Like Inviati  
    0
    Like Ricevuti  
    0
    ..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 Amanuense
    Post
    4,130
    Like Inviati  
    0
    Like Ricevuti  
    0
    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
    ℹ️ Leggi di pi¨ su bottomap ...

  7. #7
    L'avatar di bumm
    bumm non Ŕ in linea Topo di biblioteca Ultimo blog: [VB2010] ComboBox ed Enumeratori
    Post
    2,140
    Blogs
    1
    Like Inviati  
    0
    Like Ricevuti  
    0
    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 
    ℹ️ Leggi di pi¨ su bumm ...

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

  9. #9
    L'avatar di bottomap
    bottomap non Ŕ in linea Amanuense
    Post
    4,130
    Like Inviati  
    0
    Like Ricevuti  
    0
    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:
    <!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 
    ℹ️ Leggi di pi¨ su bottomap ...

  10. #10
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71
    Like Inviati  
    0
    Like Ricevuti  
    0
    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

Potrebbero interessarti anche ...

  1. [javascript] Evidenziare voce del menu relativa alla pagina selezionata
    Da PavlovTheDog nel forum HTML, CSS e JavaScript
    Risposte: 5
    Ultimo Post: 25-04-2018, 08:12
  2. Voce di Men¨
    Da Lavez84 nel forum Visual Basic 6
    Risposte: 4
    Ultimo Post: 08-07-2009, 17:49
  3. MonthCalendar evidenziare una data selezionata
    Da UbySoft71 nel forum Visual Basic .Net
    Risposte: 3
    Ultimo Post: 24-08-2008, 11:40
  4. Risposte: 7
    Ultimo Post: 19-07-2007, 18:36
  5. Creare voce menu'
    Da Orso 33 nel forum Microsoft Word
    Risposte: 2
    Ultimo Post: 31-07-2006, 08:24