dhtml e javascript

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
 

calcas2

Nuovo Utente
27 Ago 2009
20
0
0
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

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

Nuovo Utente
27 Ago 2009
20
0
0
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

Ho provato tutte le combinazioni possibili nella funzione ma niente, nessun risultato sperato...
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
 

calcas2

Nuovo Utente
27 Ago 2009
20
0
0
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

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!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
 

calcas2

Nuovo Utente
27 Ago 2009
20
0
0
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>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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;
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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 ....
 

calcas2

Nuovo Utente
27 Ago 2009
20
0
0
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 ....

Davvero interessante, ti ringrazio per queste soluzioni...senz'altro le sperimenterò!
Grazie ancora per la tua grande competenza
 
Discussioni simili
Autore Titolo Forum Risposte Data
F Popup swf player utilizzando javascript e DHTML Javascript 1
J JavaScript DHTML Dock Carousel Using Mootools Javascript 0
K pagina dhtml e menu css Javascript 11
J DHTML Fading Animation Image Javascript 1
M Tutto il sito in un'unica pagina grazie al DHTML...... Javascript 6
A menu dhtml Javascript 1
Z menu a cascata (o discesa) in Dhtml: l'uso di Fireworks Javascript 0
E Dhtml: menù a tendina Javascript 1
S DHTML Tabs Javascript 0
lukeonweb Menu in dhtml, css ed altri... Javascript 0
A VB e DHTML Javascript 2
B Slide show in DHTML Javascript 3
M DHTML e Front Page 2000 Javascript 0
G dhtml perchè? Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 4
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1

Discussioni simili