Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

[HTML/JS] Cambiare la visibilità di un bottone

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

[HTML/JS] Cambiare la visibilità di un bottone

Postdi Dylan666 » 12/03/09 00:33

La situazione è questa: c'è una pagina, molto complessa e contenente uno script molto grande, che a un certo punto crea un bottone con un suo id

Es.
Codice: Seleziona tutto
<BUTTON TYPE="button" ID="MioBottone">Prova</BUTTON>

A me serve che tale bottone venga nascosto. Il problema è che non posso agire sul bottone direttamente applicando uno style, posso solo fare in modo di aggiungere una riga di codice subito prima di tale bottone.

la mia idea, fino ad ora, è stata quella di usare un javascript temporizzato a un millisecondo che appena eseguito setta lo stile di quel bottone:


Codice: Seleziona tutto
<script>
function nascondi(){
document.getElementById('MioBottone').style.visibility = 'hidden';
}
setTimeout("nascondi()", 1);
</script>
<BUTTON TYPE="button" ID="MioBottone">Prova</BUTTON>


Esistono modi più eleganti di farlo, usando sempre e solo HTML, Javascript e CSS?

PS: non posso editare il tag BODY, tenentelo presente se volevate fare qualcosa con onLoad...
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Sponsor
 

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Dylan666 » 12/03/09 00:41

C'è modo ad esempio di farlo con un window.onload senza usare la funzione?
O invece posso avviare la funzione richiamandola senza un evento?

L'altert di questo esempio mi compare
http://javascript.html.it/guide/lezione ... -funzioni/
Codice: Seleziona tutto
function saluta() {
     alert ("ciao");
}

saluta();


Se invece ci metto dentro il mio GetElementById non va, come mai?
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi archimede » 12/03/09 09:56

Non puoi mettere il bottone in un div?

HTH.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Dylan666 » 12/03/09 11:21

No, significherebbe dover scrivere qualcosa (il tag </DIV> di chiusura) dopo il bottone.
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Dylan666 » 13/03/09 10:44

Facendo un po' di prove window.onload NON va bene, perchè viene eseguito una volta caricata tutta la pagina, quindi per un attimo il bottone si vide e poi scompare.
Col setTimeout le cose vanno meglio, ma non c'è una chiamata ancora più istantanea che carichi la funzioen senza lassi di tempo?
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi archimede » 13/03/09 16:51

Da quel che ho capito, non puoi mettere il bottone in un div perché questo viene creato dinamicamente insieme ad altra roba.

Se questo è lo scenario, l'unica cosa che mi viene in mente è mettere tutto il contenuto dinamico in un div nascosto e, nel window.onload, nascondere il bottone e mostrare il div.

Certo, l'utente non vedrà nulla (di quel div) finché la pagina non si è completamente caricata ma, come dicono a Genova, sciuscià e sciurbì non si può.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Triumph Of Steel » 14/03/09 09:08

... e aggiungerlo subito dopo?
fai prima secondo me ad inserire un classe nel bottone, che ha come proprietà
"visibility:hidden;" o "display:none";
visto che la funzione viene chiamata senza condizioni, tanto vale che usi SOLO css.

poi non capisco come i setTimeout possa essere meglio, visto che:
- viene eseguito 1 secondo dopo, e quindi il bottone si vede cmq
- potresti ricevere degli errori JS se la pagina non viene caricata bene (può capitare che venga eseguito il JS prima ancora che il bottone sia stato caricato)

con window.onload mi pare molto strano che si veda il bottone anche per un attimo.
Il window.onload è la base di tutte le funzionalità del prototype, scriptaculuos e jQuery...
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi archimede » 14/03/09 09:49

Triumph Of Steel ha scritto:fai prima secondo me ad inserire un classe nel bottone
Dylan666 ha scritto:non posso agire sul bottone direttamente applicando uno style
Alessandro

[Edit]Ah, intendi usando l'ID del bottone? In effetti potrebbe essere la cosa più furba... :oops:
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Dylan666 » 14/03/09 15:13

Triumph Of Steel ha scritto:... e aggiungerlo subito dopo?
fai prima secondo me ad inserire un classe nel bottone, che ha come proprietà
"visibility:hidden;" o "display:none";
visto che la funzione viene chiamata senza condizioni, tanto vale che usi SOLO css.

Non posso intervenire nemmeno NEL tag BUTTON, solo nella riga subito sopra. Ho capito male?

poi non capisco come i setTimeout possa essere meglio, visto che:
- viene eseguito 1 secondo dopo, e quindi il bottone si vede cmq

Veramente è un MILLESIMO di secondo...

con window.onload mi pare molto strano che si veda il bottone anche per un attimo.
Il window.onload è la base di tutte le funzionalità del prototype, scriptaculuos e jQuery...


Esempio pratico con window.onload:
Codice: Seleziona tutto
<HTML>
<HEAD><TITLE>Test</TITLE></HEAD>
<BODY BACKGROUND="http://www.premier.alberta.ca/gallery/2008_World_Oil/2008_World_Oil_9HighRes.jpg">

<script>
function nascondi(){
document.getElementById('MioBottone').style.visibility = 'hidden';
}
window.onload = nascondi;
</script>

<DIV style="background:#FFFFFF">
Inizio2
</BR></BR></BR>
<BUTTON TYPE="button" ID="MioBottone">Prova</BUTTON>
</BR></BR></BR>
Fine
</DIV>

</BODY>
</HTML>


Come esempio è stata scelta appositamente una foto (presa a caso da Google) pesante 8MB messa come sfondo (svuotate la cache tra una prova e l'altra). Col codice sopra il bottone lo vedi durante TUTTO il caricamento dello sfondo, quando ha finito sparisce.

Esempio pratico con SetTimeout
Codice: Seleziona tutto
<HTML>
<HEAD><TITLE>Test</TITLE></HEAD>
<BODY BACKGROUND="http://www.premier.alberta.ca/gallery/2008_World_Oil/2008_World_Oil_9HighRes.jpg">

<script>
function nascondi(){
document.getElementById('MioBottone').style.visibility = 'hidden';
}
setTimeout("nascondi()", 1);
</script>

<DIV style="background:#FFFFFF">
Inizio2
</BR></BR></BR>
<BUTTON TYPE="button" ID="MioBottone">Prova</BUTTON>
</BR></BR></BR>
Fine
</DIV>

</BODY>
</HTML>


Il bottone viene nascosto un millisecondo dopo la lettura della riga che richiama la funzione, il caricamento della pagina prosegue normalmente anche se lo sfondo ancora non è stato scaricato e nel frattempo il bottone è nascosto
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Triumph Of Steel » 15/03/09 09:21

prova stupida.. hai provato con
Codice: Seleziona tutto
document.myButton.display = 'none';

invece che con "visiblity:hidden"?

nel caso puoi sempre giocare sempre con le classi + JS
Codice: Seleziona tutto
document.myButton.className = 'classCheNascondeBottone';
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Dylan666 » 15/03/09 20:32

Triumph Of Steel ha scritto:prova stupida.. hai provato con
Codice: Seleziona tutto
document.myButton.display = 'none';

invece che con "visiblity:hidden"?

Ciriosità: che differenza dovrebbe esserci rispetto alla reattività nella "sparizione"?
Cioè, che benefici ne trarrei usando un modo invece dell'altro?

nel caso puoi sempre giocare sempre con le classi + JS
Codice: Seleziona tutto
document.myButton.className = 'classCheNascondeBottone';

Anche qui, che differenza fa se cerco di nascondere un bottone come classe invece che come ID?
Comunque non posso farlo, perché la classe è condivisa con altri elementi della pagina e non posso cambiare la classe che ha ora
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi archimede » 16/03/09 10:41

Dylan666 ha scritto:Comunque non posso farlo, perché la classe è condivisa con altri elementi della pagina e non posso cambiare la classe che ha ora
Scusate, forse mi sono perso un pezzo ma il bottone non ha un ID? Stilizza nel CSS solo quell'ID, che immagino sia specifico di quel bottone e non usato da altri elementi.

HTH.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Dylan666 » 16/03/09 10:42

l'ID è una cosa, la classe è un'altra:
http://www.tizag.com/cssT/cssid.php

Il problema è che il CSS (per la classe o per l'ID) che sia incorporato o richiamato da un foglio esterno non lo potresti piazzare in mezzo al BODY...
Andrebbe dichiarato nell'HEAD o al limite nel tag con l'attributo STYLE:
http://www.quackit.com/css/tutorial/imp ... ng_css.cfm

Da qui nasce tutto il problema, dal poter scrivere solo subito prima (non nell'head) del BUTTON (non nel button)
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi archimede » 16/03/09 11:00

Dylan666 ha scritto:l'ID è una cosa, la classe è un'altra:
Ergo?
Dylan666 ha scritto:Il problema è che il CSS (per la classe o per l'ID) che sia incorporato o richiamato da un foglio esterno non lo potresti piazzare in mezzo al BODY...
Eh? Mi stai dicendo che la pagina non carica un CSS esterno o che comunque tu non puoi modificarlo nè aggiungerne uno tuo nell'head?

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Dylan666 » 16/03/09 12:52

archimede ha scritto:
Dylan666 ha scritto:l'ID è una cosa, la classe è un'altra:
Ergo?

Ergo non posso intervenire sulla classe (come suggeriva ToS), posso farlo sull'ID ma bisogna vedere come (da qui la mia richiesta)


Dylan666 ha scritto:Il problema è che il CSS (per la classe o per l'ID) che sia incorporato o richiamato da un foglio esterno non lo potresti piazzare in mezzo al BODY...
Eh? Mi stai dicendo che la pagina non carica un CSS esterno o che comunque tu non puoi modificarlo nè aggiungerne uno tuo nell'head?


No, non posso, posso inserire del codice solo subito prima della dichiarazione del bottone, in pratica esattamente dove si trova adesso il javascript che mostravo nel mio primo post.

Non posso aggiungere codice prima (nell'head per dichiarare uno stile CSS incorporato ad esempio)
Non posso aggiungere codice dopo (per chiudere un DIV nascosto creato appositamente ad esempio)
Non posso aggiungere codice dentro (per creare un STYLE nel BUTTON ad esempio)
Non posso aggiungere codice altrove (nel CSS estreno associato alla pagina ad esempio).
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi archimede » 16/03/09 13:49

Dylan666 ha scritto:Ergo non posso intervenire sulla classe (come suggeriva ToS), posso farlo sull'ID
Che è appunto quel che suggerivo io.
Dylan666 ha scritto:No, non posso, posso inserire del codice solo subito prima della dichiarazione del bottone
Con queste restrizioni non mi vengono in mente soluzioni alternative a quella già da te adottata.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Triumph Of Steel » 17/03/09 22:14

In questa pagina uso il "window.onload" e il "style.display='none'", lanciando lo script appena prima del bottone (guarda il sorgente e vedrai come ho fatto).
Io non vedo il bottone nemmeno per un istante.

altro non mi viene in mente...

per il CSS archimede diceva che puoi usare l'ID nei css (almeno credo di aver capito così)

Codice: Seleziona tutto
.nomeClass { codice css .... }
#myButton { codice css.... } ==> questo è l'id del bottone
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Dylan666 » 17/03/09 23:07

quello che dice archimede l'ho capito, ma andrebbe scritto nell'head o in un css esterno, o sbaglio? :roll:


Per il codice della tua pagina di esempio, eccolo qui IDENTICO con solo aggiunta la JPG appositamente molto pesante:
Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Hide</title>
</head>
<body BACKGROUND="http://www.premier.alberta.ca/gallery/2008_World_Oil/2008_World_Oil_9HighRes.jpg">

<form action="" method="post" name="kTest">

<input type="text" name="k1" style="width:100px;">
<br>
<input type="text" name="k2" style="width:50px;">

<br><br>
Da qui in poi posso inserire codice:<br>

<script language="Javascript">
window.onload   = function()   {
   var el   = document.getElementById('myButton');
   el.style.display   = 'none';
}
</script>
<input type="button" name="go" value=" finto " id="myButton" class="theButton"><br>
Fine inserimento codice.<br>
</form>
</body>
</html>


Se apri la pagina vedrai il bottone fino a quando lo sfondo non è stato completamente scaricato. Ovviamente nel mio caso non c'è una foto da 8 MB di sfondo, ma ci sono comunque vari elementi grafici e vari altri script che appesantiscano il caricamento e fanno in modo che il bottone si veda per un istante, diciamo per mezzo secondo circa.

Lo "scopo del gioco" è ridurre al minimo quel lasso di tempo. Per ora il SetTimeout a 1 millisecondo va già meglio, ma volevo sapere se esiste qualcosa di ancora più immediato
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Triumph Of Steel » 18/03/09 23:09

Dylan666 ha scritto:F[...], ma non c'è una chiamata ancora più istantanea che carichi la funzioen senza lassi di tempo?


in base a questo, per quel che ne so, ti risponderei di no.
ci sarebbe altri modi, cmq da testare e che a mio parere sono codici assurdi e sporchi...
oppure puoi provare con il metodo di archimede (non credo serva PER FORZA scriverlo esterno o tra <head>)
Codice: Seleziona tutto
<style>
#MioBottone { display:none; }
</style>
<input type="submit" name="boh" id="MioBottone">
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

Re: [HTML/JS] Cambiare la visibilità di un bottone

Postdi Dylan666 » 19/03/09 01:39

Triumph Of Steel ha scritto:oppure puoi provare con il metodo di archimede (non credo serva PER FORZA scriverlo esterno o tra <head>)

Puoi NON farlo e funziona lo stesso, ma non sei nello standard delle direttive w3c...

Un codice tipo questo...
Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Hide</title>
</head>
<body>
<form action="" method="post" name="kTest">
<style type="text/css">
#MioBottone { display:none; }
</style>
<input type="button" name="go" value=" finto " id="myButton" class="theButton"><br>
</form>
</body>
</html>


...genera questo resoconto nel validatore:

Validation Output: 1 Error

1. Error Line 9, Column 22: document type does not allow element "STYLE" here.

<style type="text/css">

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).


Il codce sopra era quello che avevi in mente, giusto? :undecided:
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Prossimo

Torna a Programmazione


Topic correlati a "[HTML/JS] Cambiare la visibilità di un bottone":


Chi c’è in linea

Visitano il forum: Nessuno e 3 ospiti

cron