» Far scomparire un banner a risoluzioni browser basse

alan110112 · 10-10-11, 15:48

Non so se qualcuno di voi ha mai visitato il webclient email di yahoo, comunque ho notato che ha un banner a lato che scompare se con la combinazione [ctrl] [+] si diminuisce la risoluzione della pagina visualizzata. Questo è utilissimo per inserire banner pubblicitari su schermi molto ampi e per farli sparire se l'utente sta utilizzando uno schermo di bassa risoluzione.

Ho già fatto diverse ricerche su google, arrivando alla conclusione che il codice seguente sarebbe dovuto funzionare.

Codice:

<script type="text/javascript">
    
    if (screen.availWidth<=800) //se la fetta di schermo disponibile è di 800px o inferiore
 document.body.style.background="#ff0000" //background rosso
    else
 document.body.style.background="#0000ff" //background blu
    
    </script>

Inserito in un file html di prova:

Codice:

<html>
<head>
<title>JS - Cambia il background a seconda della risoluzione</title>
<meta  http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
Testo di riferimento per la dimensione dello schermo

<script type="text/javascript">
     if (screen.availWidth<=800) //se la fetta di schermo disponibile in larghezza è di 800px o inferiore
  document.body.style.background="#ff0000" //background rosso
     else
  document.body.style.background="#0000ff" //background blu
     </script>

</body>
</html>

In effetti funziona... ma non dinamicamente... ovvero, se cambio risoluzione DOPO aver caricato la pagina il background non cambia colore.
dove sbaglio?
Esiste qualche altro metodo che fa scomparire un <div> per caso?
Ringrazio in anticipo per qualsiasi risposta.

marcocarrieri · 10-10-11, 20:25

Potresti mettere magari un timer che effettui quel controllo?

Ancora meglio magari la funzione nel OnResize nel body?

antoniog2 · 12-10-11, 18:02

Prova ad usare il metodo screen.width di Javascript nativo.

antoniog2 · 12-10-11, 18:05

E prova ad assegnare il valore con = invece che con <=, cioè:

screen.width=800

Così assegni allo script il valore esatto di 800 px in larghezza.

antoniog2 · 12-10-11, 18:08

Per DIV basta il CSS display: none;

10-10-11, 15:48	#1 (permalink)
alan110112 User Data di registrazione: Feb 2010 Messaggi: 13	Far scomparire un banner a risoluzioni browser basse Non so se qualcuno di voi ha mai visitato il webclient email di yahoo, comunque ho notato che ha un banner a lato che scompare se con la combinazione [ctrl] [+] si diminuisce la risoluzione della pagina visualizzata. Questo è utilissimo per inserire banner pubblicitari su schermi molto ampi e per farli sparire se l'utente sta utilizzando uno schermo di bassa risoluzione. Ho già fatto diverse ricerche su google, arrivando alla conclusione che il codice seguente sarebbe dovuto funzionare. Codice: <script type="text/javascript"> if (screen.availWidth<=800) //se la fetta di schermo disponibile è di 800px o inferiore document.body.style.background="#ff0000" //background rosso else document.body.style.background="#0000ff" //background blu </script> Inserito in un file html di prova: Codice: <html> <head> <title>JS - Cambia il background a seconda della risoluzione</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" text="#000000"> Testo di riferimento per la dimensione dello schermo <script type="text/javascript"> if (screen.availWidth<=800) //se la fetta di schermo disponibile in larghezza è di 800px o inferiore document.body.style.background="#ff0000" //background rosso else document.body.style.background="#0000ff" //background blu </script> </body> </html> In effetti funziona... ma non dinamicamente... ovvero, se cambio risoluzione DOPO aver caricato la pagina il background non cambia colore. dove sbaglio? Esiste qualche altro metodo che fa scomparire un <div> per caso? Ringrazio in anticipo per qualsiasi risposta.
	Ultima modifica di alan110112 : 10-10-11 16:07.

10-10-11, 20:25	#2 (permalink)
marcocarrieri ModSenior Data di registrazione: Jul 2009 Ubicazione: Rovigo Messaggi: 14,726	Potresti mettere magari un timer che effettui quel controllo? Ancora meglio magari la funzione nel OnResize nel body?
	__________________ Adventure Park Solution === Wireless Physical Computing === Pittura Vetro Rovigo Diventa Moderatore - Seo Power

12-10-11, 18:02	#3 (permalink)
antoniog2 User Data di registrazione: Feb 2011 Ubicazione: Pietrasanta - Lucca - ITALY Messaggi: 264	Prova ad usare il metodo screen.width di Javascript nativo.
	__________________ Negozio AG Promozioni

12-10-11, 18:05	#4 (permalink)
antoniog2 User Data di registrazione: Feb 2011 Ubicazione: Pietrasanta - Lucca - ITALY Messaggi: 264	E prova ad assegnare il valore con = invece che con <=, cioè: screen.width=800 Così assegni allo script il valore esatto di 800 px in larghezza.
	__________________ Negozio AG Promozioni

12-10-11, 18:08	#5 (permalink)
antoniog2 User Data di registrazione: Feb 2011 Ubicazione: Pietrasanta - Lucca - ITALY Messaggi: 264	Per DIV basta il CSS display: none;
	__________________ Negozio AG Promozioni

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email