dhtml e javascript

  • Creatore Discussione Creatore Discussione calcas2
  • Data di inizio Data di inizio
C

calcas2

Nuovo Utente
27 Ago 2009
20
0
0
Prendendo in considerazione l'esempio fatto proprio nell'articolo di mr.webmaster, viene indicato nell'area della pagina dedicata al contenuto il seguente codice
Codice: 
<div id="PG_1">
    Homepage ...
</div>
<div id="PG_2">
    Servizi ...
</div>
<div id="PG_3">
    Portfolio ...
</div>
<div id="PG_4">
    Preventivi ...
</div>
<div id="PG_5">
    Contatti ...
</div>

Poi, il codice CSS:
Codice: 
<style type="text/css">
#PG_1
{
    visibility: visible;
    position: absolute;
}
#PG_2, #PG_3, #PG_4, #PG_5
{
    visibility: hidden;
    position: relative;
}
</style>

La funzione menu:
Codice: 
<script type="text/javascript">
function Menu(ID)
{
    var i = 1;
    var max_link = 5;
    for (i=1; i<max_link+1; i++)
    {
        if (ID == i)
        {
            document.getElementById("PG_" + ID).style.visibility = "visible";
            document.getElementById("PG_" + ID).style.position = "relative";
        }
        else
        {
            document.getElementById("PG_" + i).style.visibility = "hidden";
            document.getElementById("PG_" + i).style.position = "absolute";
        }
    }
}
</script>

ed infine, nell'area della pagina destinata a rimanere invariata e sempre visibile, la sezione dedicata al menu:
Codice: 
<div>
    <a href="javascript:Menu(1)">Homepage</a> |
    <a href="javascript:Menu(2)">Servizi</a> |
    <a href="javascript:Menu(3)">Portfolio</a> |
    <a href="javascript:Menu(4)">Preventivi</a> |
    <a href="javascript:Menu(5)">Contatti</a>
</div>

Ora, volevo sapere se era possibile, nell'area destinata a rimanere invariata, inserire sotto al menu un text form con relativo button che al visualizzarsi di ciascuna delle sezioni del corpo pagina rimaste nascoste (PG_1. 2, 3, 4, 5) rinvii ad una funzione diversa.
Io pensavo, nella mia scarsa esperienza e competenza, di poter risolvere così:
nella sezione in cui è presente il menu aggiungere il semplice text form con relativo bottone:
Codice: 
<form name="search">
<input type="text" class="text" name="query" size=100 value="">
<input type="submit" value="Modifica" onClick="prova()">
</form>

e poi nello script javascript la seguente funzione a cui rinvia il bottone:
Codice: 
<script language="JavaScript" type="text/javascript">
function prova()
{
var Variante = PG_1
var Variante2 = PG_2

        if (Variante = "visible") 
        {
window.open("http://www.youtube.com/results?search_query="+document.search.query.value); 
}
        
		else if (Variante2 = "visible") {
		window.open("http://www.blinkx.com/wall?query="+document.search.query.value);
		}
		
		}
		

</script>

Tuttavia non ho il risultato sperato giacché esegue sempre e solo la prima istruzione (cioè window.open("http://www.youtube.com/results?search_query="+document.search.query.value);)
Dove sbaglio?
grazie a tutti in anticipo
 
max_400 ha scritto:
quando si esegue un confronto ci vuole un doppio ==

Codice: 
var Variante = PG_1
var Variante2 = PG_2

        if (Variante = "visible")
....

in

if (Variante == "visible")

buon lavoro !
ciao
Clicca per allargare...

Ti tingrazio per l'indicazione. In realtà è la prima cosa che avevo messo (==) ma non so perché ho notato che se metto il doppio == non mi funziona neppure la prima istruzione della funzione (cioè praticamente il bottone è senza alcuna funzione)..invece con il solo "=" almeno la prima parte della istruzione funziona (cioè:
if (Variante = "visible")
{
window.open("http://www.youtube.com/results?search_query="+document.search.query.value);
}
Mentre, muovendomi da una sezione visibile all'altra non mi funzionano le altre e mi rimane funzionante solo quella sopra indicata...
Qualcuno sa dirmi come risolverlo?
grazie mille
 
calcas2 ha scritto:
Ti tingrazio per l'indicazione. In realtà è la prima cosa che avevo messo (==) ma non so perché ho notato che se metto il doppio == non mi funziona neppure la prima istruzione della funzione (cioè praticamente il bottone è senza alcuna funzione)..invece con il solo "=" almeno la prima parte della istruzione funziona (cioè:
if (Variante = "visible")
{
window.open("http://www.youtube.com/results?search_query="+document.search.query.value);
}
Mentre, muovendomi da una sezione visibile all'altra non mi funzionano le altre e mi rimane funzionante solo quella sopra indicata...
Qualcuno sa dirmi come risolverlo?
grazie mille
Clicca per allargare...

Ho provato tutte le combinazioni possibili nella funzione ma niente, nessun risultato sperato...
 
Ciao,
io proverei una soluzione del genere:

Codice: 
<script type="text/javascript">
    function Menu(ID)
    {
        var i = 1;
        var max_link = 5;
        for (i=1; i<max_link+1; i++)
        {
            if (ID == i)
            {
                document.getElementById("PG_" + ID).style.visibility = "visible";
                document.getElementById("PG_" + ID).style.position = "relative";
                
                // assegnamo ad un input hidden del form il nome del div che prendera la visibilita
                document.getElementById("i").value = "PG_" + ID;
            }
            else
            {
                document.getElementById("PG_" + i).style.visibility = "hidden";
                document.getElementById("PG_" + i).style.position = "absolute";
            }
        }
    }
    function prova()
    {
        // recuperiamo il valore dell'input hidden
        var Variante = document.getElementById('i').value;     
        var link;
        
        // in base al valore apriamo una pagina o facciamo qualsiasi altra cosa
        switch(Variante) {
            case "PG_1":
                link = "http://www.youtube.com/results?search_query=" + document.forms[0].query.value;
                break;
            case "PG_2":
                link = "http://www.blinkx.com/wall?query=" + document.forms[0].query.value
                break;
            default:
                break;
        }   
        window.open(link); 
    }

</script>

<!-- return false al form per non inviare il post -->
<form method='post' onsubmit="javascript:return false">
    <!-- creiamo l'input hidden -->
    <input type="hidden" id="i" name="i" value="PG_1"/>
    <!-- diamogli un id  -->
    <input type="text" class="text" id="query" name="query" size=100 value="">
    <input type="submit" value="Modifica" onClick="prova()">
</form>

Ti posto solo cio che ho modificato

Indubbiamente si puo fare di meglio ma mi sono divertito a pensarci

buon lavoro
 
criric ha scritto:
Ciao,
io proverei una soluzione del genere:

Codice: 
<script type="text/javascript">
    function Menu(ID)
    {
        var i = 1;
        var max_link = 5;
        for (i=1; i<max_link+1; i++)
        {
            if (ID == i)
            {
                document.getElementById("PG_" + ID).style.visibility = "visible";
                document.getElementById("PG_" + ID).style.position = "relative";
                
                // assegnamo ad un input hidden del form il nome del div che prendera la visibilita
                document.getElementById("i").value = "PG_" + ID;
            }
            else
            {
                document.getElementById("PG_" + i).style.visibility = "hidden";
                document.getElementById("PG_" + i).style.position = "absolute";
            }
        }
    }
    function prova()
    {
        // recuperiamo il valore dell'input hidden
        var Variante = document.getElementById('i').value;     
        var link;
        
        // in base al valore apriamo una pagina o facciamo qualsiasi altra cosa
        switch(Variante) {
            case "PG_1":
                link = "http://www.youtube.com/results?search_query=" + document.forms[0].query.value;
                break;
            case "PG_2":
                link = "http://www.blinkx.com/wall?query=" + document.forms[0].query.value
                break;
            default:
                break;
        }   
        window.open(link); 
    }

</script>

<!-- return false al form per non inviare il post -->
<form method='post' onsubmit="javascript:return false">
    <!-- creiamo l'input hidden -->
    <input type="hidden" id="i" name="i" value="PG_1"/>
    <!-- diamogli un id  -->
    <input type="text" class="text" id="query" name="query" size=100 value="">
    <input type="submit" value="Modifica" onClick="prova()">
</form>

Ti posto solo cio che ho modificato

Indubbiamente si puo fare di meglio ma mi sono divertito a pensarci

buon lavoro
Clicca per allargare...

Ti ringrazio tanto per i tuoi preziosi suggerimenti e onestamente le tue spiegazioni e i tuoi ragionamenti sono tutti logici..purtroppo però il problema persiste in quanto anche visualizzando un'altra sezione della pagina continua a funzionare sempre e solo la prima istruzione (cioè: http://www.youtube.com/results?search_query=" + document.forms[0].query.value) e mai l'altra..
Onestamente non so cosa pensare!
Grazie mille lo stssso, nella speranza che qualcuno sappia risolvere questo problema!
 
Strano, a me in locale funzionava

cmq è molto utile mettere degli alert all'interno del codice javascript

del tipo

Codice: 
alert(Variante)

in modo da capire dove si blocca lo script

al massimo posta anche il codice modificato a volte basta sbagliare una virgola che non funziona piu niente
 
Questo è il codice, a me provandolo in locale mi provoca quel problema

Codice: 
<style type="text/css">

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

</style>


<style type="text/css">
#PG_1
{
    visibility: visible;
    position: absolute;
}
#PG_2, #PG_3, #PG_4, #PG_5
{
    visibility: hidden;
    position: relative;
}
</style>

<script type="text/javascript">
function Menu(ID)
{
    var i = 1;
    var max_link = 5;
    for (i=1; i<max_link+1; i++)
    {
        if (ID == i)
        {
            document.getElementById("PG_" + ID).style.visibility = "visible";
            document.getElementById("PG_" + ID).style.position = "relative";
        }
        else
        {
            document.getElementById("PG_" + i).style.visibility = "hidden";
            document.getElementById("PG_" + i).style.position = "absolute";
        }
    }
}


    function prova()
    {
        // recuperiamo il valore dell'input hidden
        var Variante = document.getElementById('i').value;     
        var link;
        
        // in base al valore apriamo una pagina o facciamo qualsiasi altra cosa
        switch(Variante) {
            case "PG_1":
                link = "http://www.youtube.com/results?search_query=" + document.forms[0].query.value;
                break;
            case "PG_2":
                link = "http://www.blinkx.com/wall?query=" + document.forms[0].query.value
                break;
            default:
                break;
        }   
        window.open(link); 
    }

</script>




<div>
<ul class="basictab">
<li class="selected"><a href="javascript:Menu(1)">Homepage</a></li>
<li><a href="javascript:Menu(2)">Servizi</a></li>
<li><a href="javascript:Menu(3)">Portfolio</a></li>
<li><a href="javascript:Menu(4)">Preventivi</a></li>
<li><a href="javascript:Menu(5)">Contatti</a></li>
</ul>
</br>
</br>
</br>
</br>
</div>
<center>
<form method='post' onsubmit="javascript:return false">
    <!-- creiamo l'input hidden -->
    <input type="hidden" id="i" name="i" value="PG_1"/>
    <!-- diamogli un id  -->
    <input type="text" class="text" id="query" name="query" size=100 value="">
    <input type="submit" value="Modifica" onClick="prova()">
</form> 
</center>

<div id="PG_1">
    Homepage...
</div>
<div id="PG_2">
    Servizi...
</div>
<div id="PG_3">
    Portfolio ...
</div>
<div id="PG_4">
    Preventivi ...
</div>
<div id="PG_5">
    Contatti ...
</div>
 
hai dimenticato una cosa nella funzione Menu

// assegnamo ad un input hidden del form il nome del div che prendera la visibilita
document.getElementById("i").value = "PG_" + ID;
Clicca per allargare...
 
Di niente figurati,

mi è venuto in mente questo ciclo per assegnare la tua classe "selected" al link premuto

Codice: 
function Menu(ID)
    {
        var i = 1;
        var max_link = 5;
        for (i=1; i<max_link+1; i++)
        {
            if (ID == i)
            {
                document.getElementById("PG_" + ID).style.visibility = "visible";
                document.getElementById("PG_" + ID).style.position = "relative";
                // assegno la classe selected al link premuto e assegno una classe vuota agli altri
                for (x=1; x <= max_link; x++) {                    
                    if(x == i) {
                        document.getElementById("li_" + x).className = "selected";
                    }else{                
                        document.getElementById("li_" + x).className="";    
                    }
                }
                // assegnamo ad un input hidden del form il nome del div che prendera la visibilita
                document.getElementById("i").value = "PG_" + ID;
            }
            else
            {
                document.getElementById("PG_" + i).style.visibility = "hidden";
                document.getElementById("PG_" + i).style.position = "absolute";

            }
        }
    }

Ai tag li del menu bisognerà dare un id univoco

HTML: 
 <ul class="basictab">
        <li id="li_1" class="selected"><a href="javascript:Menu(1)">Homepage</a></li>
        <li id="li_2"><a href="javascript:Menu(2)">Servizi</a></li>
        <li id="li_3"><a href="javascript:Menu(3)">Portfolio</a></li>
        <li id="li_4"><a href="javascript:Menu(4)">Preventivi</a></li>
        <li id="li_5"><a href="javascript:Menu(5)">Contatti</a></li>
    </ul>

Se hai gia fatto qualcosa di simile sarei curioso ....
 
criric ha scritto:
Di niente figurati,

mi è venuto in mente questo ciclo per assegnare la tua classe "selected" al link premuto

Codice: 
function Menu(ID)
    {
        var i = 1;
        var max_link = 5;
        for (i=1; i<max_link+1; i++)
        {
            if (ID == i)
            {
                document.getElementById("PG_" + ID).style.visibility = "visible";
                document.getElementById("PG_" + ID).style.position = "relative";
                // assegno la classe selected al link premuto e assegno una classe vuota agli altri
                for (x=1; x <= max_link; x++) {                    
                    if(x == i) {
                        document.getElementById("li_" + x).className = "selected";
                    }else{                
                        document.getElementById("li_" + x).className="";    
                    }
                }
                // assegnamo ad un input hidden del form il nome del div che prendera la visibilita
                document.getElementById("i").value = "PG_" + ID;
            }
            else
            {
                document.getElementById("PG_" + i).style.visibility = "hidden";
                document.getElementById("PG_" + i).style.position = "absolute";

            }
        }
    }

Ai tag li del menu bisognerà dare un id univoco

HTML: 
 <ul class="basictab">
        <li id="li_1" class="selected"><a href="javascript:Menu(1)">Homepage</a></li>
        <li id="li_2"><a href="javascript:Menu(2)">Servizi</a></li>
        <li id="li_3"><a href="javascript:Menu(3)">Portfolio</a></li>
        <li id="li_4"><a href="javascript:Menu(4)">Preventivi</a></li>
        <li id="li_5"><a href="javascript:Menu(5)">Contatti</a></li>
    </ul>

Se hai gia fatto qualcosa di simile sarei curioso ....
Clicca per allargare...

Davvero interessante, ti ringrazio per queste soluzioni...senz'altro le sperimenterò!
Grazie ancora per la tua grande competenza
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

F
Popup swf player utilizzando javascript e DHTML
Risposte
1
Visite
3K
Javascript
Fabiettoo
F
J
JavaScript DHTML Dock Carousel Using Mootools
Risposte
0
Visite
2K
Javascript
JavaScriptBank
J
K
pagina dhtml e menu css
Risposte
11
Visite
4K
Javascript
kuz1985
K
J
DHTML Fading Animation Image
Risposte
1
Visite
1K
Javascript
alessandro1997
alessandro1997
M
Tutto il sito in un'unica pagina grazie al DHTML......
Risposte
6
Visite
2K
Javascript
MINDFREE
M
A
menu dhtml
Risposte
1
Visite
2K
Javascript
lukeonweb
lukeonweb
Z
menu a cascata (o discesa) in Dhtml: l'uso di Fireworks
Risposte
0
Visite
2K
Javascript
Zorthan
Z
E
Dhtml: menù a tendina
Risposte
1
Visite
2K
Javascript
lukeonweb
lukeonweb
S
DHTML Tabs
Risposte
0
Visite
2K
Javascript
stiffa
S
lukeonweb
  • Bloccata
Menu in dhtml, css ed altri...
Risposte
0
Visite
18K
Javascript
lukeonweb
lukeonweb
A
VB e DHTML
Risposte
2
Visite
1K
Javascript
ade
A
B
Slide show in DHTML
Risposte
3
Visite
2K
Javascript
WebDisaster
W
M
DHTML e Front Page 2000
Risposte
0
Visite
1K
Javascript
maffex
M
G
dhtml perchè?
Risposte
2
Visite
2K
Javascript
germinator
G
M
variabile javascript su link html
Risposte
5
Visite
2K
Javascript
mizar1966
M
I
Creare un banner temporaneo JavaScript
Risposte
0
Visite
2K
Javascript
IlTizioScriptato
I
S
Impossibile scorrere un oggetto in JavaScript
Risposte
0
Visite
2K
Javascript
steven myth
S
N
Passare array da php a javascript
Risposte
5
Visite
3K
PHP
WmbertSea
WmbertSea
L
Quiz javascript funzionante da migliorare
Risposte
0
Visite
3K
Javascript
Lenigmista
L
P
  • Bloccata
errore 404 con javascript
Risposte
2
Visite
1K
Javascript
Max 1
Max 1
Alto Basso