Parametro visibility hidden in relazione a window.screen.width

Angelabit

Nuovo Utente
4 Set 2012
5
0
0
Buongiorno a tutti,

è la prima volta che scrivo in questo forum e spero di formulare la domanda nella giusta maniera.

Ho un sito web fatto con Joomla, ed ho creato nel file template.css due nuove posizioni modulo posizionate ai lati (destro e sinistro) del template. All'interno di essi, poi, ho inserito il codice javascript di un banner verticale 120X600. Tutto funziona bene ma dovrei risolvere un piccolo problema. Quando il visitatore usa una risoluzione di schermo con larghezza inferiore o uguale a 1024, i suddetti moduli/banner vanno a sovrapporsi al contenuto dell'articolo, disturbandone alquanto la lettura. Per adesso ho "tamponato" inserendo nelle istruzioni del file template.css relative ai due nuovi moduli un parametro z-index negativo.
Codice:
div.divAdLeft{
    position:absolute;
    left:0px;
	top:0px;
	z-index:-10;

}
div.divAdRight{
    position:absolute;
    top:0px;
    right: 0px;
	z-index:-10;

}

Il risultato non è un granchè, ma pernette almeno che i banner non si sovrappongano all'articolo. Cercando sul web (non sono un'esperta) ho scoperto che tramite un javascript, con le giuste istruzioni che fanno uso dei parametri window.screen.width e visibility, potrei fare in modo che i suddetti moduli creati nel file template.css scompaiano quando la risoluzione del visitatore è inferiore ad un certo valore. Solo che, come già scritto, non sono brava in questo campo e chiedevo il vostro aiuto (ammesso che la mia ipotesi sia la strada più corretta).

Grazie.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, benvenuta
puoi provare cosi
HTML:
<html>
    <head>
        <title>banner</title>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
        <style type="text/css">
            div.divAdLeft{
                position:absolute;
                left:0px;
                top:0px;
                z-index:-10;

            }
            div.divAdRight{
                position:absolute;
                top:0px;
                right: 0px;
                z-index:-10;

            }
        </style>
        <script type="text/javascript">
            if(window.screen.width <= 1024) {
                document.getElementById("divAdLeft").visibility = "hidden";
                document.getElementById("divAdRight").visibility = "hidden";
            }
        </script>
    </head>
    <body>
        <div class="divAdLeft" id="divAdLeft">
            banner
        </div>
        <div class="divAdRight" id="divAdRight">
            banner
        </div>
    </body>
</html>
quello che serve a te è racchiuso nel tag <script>, ricordati di dare un id univoco ai div
non ho testato :byebye:

EDIT : avevo messo due volte divAdRight .
 
Ultima modifica:

Angelabit

Nuovo Utente
4 Set 2012
5
0
0
Buongiorno Criric, grazie della risposta.

Di preciso dove dovrei inserire quel codice che mi hai scritto?
Quelle istruzioni che ho inserito
Codice:
div.divAdLeft{
    position:absolute;
    left:0px;
	top:0px;
	z-index:-10;

}
div.divAdRight{
    position:absolute;
    top:0px;
    right: 0px;
	z-index:-10;

}
sono nel file template.css mentre nel codice che mi hai cortesemente scritto, sembra che debba metterlo anche nell'index, seguito dal javascript. poi, scusami :eek: non ho capito (perchè non sono competente) cosa significa "ricordati di dare un id univoco ai div".

Grazie.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
cosa significa "ricordati di dare un id univoco ai div"
devi aggiungere ai div id="divAdLeft" e id="divAdRight" nell html come ho fatto io se no javascript non li riconosce

e questo
HTML:
<script type="text/javascript">
            if(window.screen.width <= 1024) {
                document.getElementById("divAdLeft").visibility = "hidden";
                document.getElementById("divAdRight").visibility = "hidden";
            }
        </script>
nelle pagine dove hai i banner

Non conosco Joomla quindi non saprei essere piu preciso
 

Angelabit

Nuovo Utente
4 Set 2012
5
0
0
Ciao Criric,

nel file default.php, che è quello che sovrintende il template "normale" (perchè poi ci sono altri file per i template per iphone e per altri dispositivi) ci sono queste istruzioni relative ai moduli dei due banner due banner
Codice:
<?php if($this->countModules('adleft')): ?> 
<div class="divAdLeft">
	   <jdoc:include type="modules" name="adleft" />
</div>
<?php endif ?>
<?php if($this->countModules('adright')): ?> 
<div class="divAdRight">
	   <jdoc:include type="modules" name="adright" />
</div>
<?php endif ?>

Sempre in quel file, prima del tag </body> Ho provato ad inserire il tuo script
Codice:
<script type="text/javascript">
            if(window.screen.width <= 1024) {
                document.getElementById("divAdLeft").visibility = "hidden";
                document.getElementById("divAdRight").visibility = "hidden";
            }
        </script>

e la homepage è diventata bianca. Naturalmente cancellando lo script è tornato tutto ok. Probabilmente si dovrebbe modificare lo script?
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

lo script deve stare dopo i <div> non in <head>


Codice:
<?php if($this->countModules('adleft')): ?> 
<div class="divAdLeft">
	   <jdoc:include type="modules" name="adleft" />
</div>
<?php endif ?>
<?php if($this->countModules('adright')): ?> 
<div class="divAdRight">
	   <jdoc:include type="modules" name="adright" />
</div>
<?php endif ?>

<script type="text/javascript">
            if(window.screen.width <= 1024) {
                document.getElementById("divAdLeft").visibility = "hidden";
                document.getElementById("divAdRight").visibility = "hidden";
            }
        </script>


Valeria.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
aggiungo che non hai dato l'id ai div
HTML:
<div id="divAdRight" class="divAdRight">
strano pero che di dia pagina bianca per un errore javascript :confused:
 

Angelabit

Nuovo Utente
4 Set 2012
5
0
0
Ciao a tutti,

allora, ho seguito i vostri consigli e, in effetti, questa volta niente pagina bianca. Guardando il codice sorgente nella homepage vedo questo che mi fa capire che tutto è ok (almeno spero)
Codice:
<div id="divAdLeft" class="divAdLeft">
	   <!-- codice circuito  Pnet Publisher Network-->
<!-- Spazio:  grnet_it_120x600 -->
<script type="text/javascript">
     
     amm_ad_siteid = 5844;
    amm_ad_zone = 78996;
    amm_ad_width = 120;
    amm_ad_height = 600;
</script>
<script type="text/javascript"
            src='http://adv.arubamediamarketing.it/js/amm_show_ads.js'>

</script>
<!-- codice circuito  Pnet Publisher Network - fine-->
</div>
 
<div id="divAdRight" class="divAdRight">
	   <!-- codice circuito  Pnet Publisher Network-->
<!-- Spazio:  grnet_it_120x600 -->
<script type="text/javascript">
     
     amm_ad_siteid = 5844;
    amm_ad_zone = 78996;
    amm_ad_width = 120;
    amm_ad_height = 600;
</script>
<script type="text/javascript"
            src='http://adv.arubamediamarketing.it/js/amm_show_ads.js'>

</script>
<!-- codice circuito  Pnet Publisher Network - fine-->
</div>
<script type="text/javascript">
            if(window.screen.width <= 1024) {
                document.getElementById("divAdLeft").visibility = "hidden";
                document.getElementById("divAdRight").visibility = "hidden";
            }
        </script>
</body>
</html>

poi però, verificando il funzionamento a 1024X768 (sia abbassando la risoluzione del mio schermo che usando Opera Mobile Emulator con la stessa risoluzione) i banner non scompaiono. Ho fatto tutte le prove, pulendo la cache sia del browser che di Joomla, ma non cambia niente (almeno per quello che vedo io). Potreste provare a fare voi un controllo a risoluzione bassa? Questo è il sito.

Grazie.
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

manca un parametro.

Codice:
 <script type="text/javascript">
            if(window.screen.width <= 1024) {
               document.getElementById("divAdLeft")[B].style[/B].visibility = "hidden";
                document.getElementById("divAdRight")[B].style[/B].visibility = "hidden";
            }
        </script>


Valeria.
 

Angelabit

Nuovo Utente
4 Set 2012
5
0
0
Ciao,

manca un parametro.

Codice:
 <script type="text/javascript">
            if(window.screen.width <= 1024) {
               document.getElementById("divAdLeft")[B].style[/B].visibility = "hidden";
                document.getElementById("divAdRight")[B].style[/B].visibility = "hidden";
            }
        </script>


Valeria.

Ragazzi funziona alla perfezione. Grazie di tutto, siete grandi! Un bacione :)
 
Discussioni simili
Autore Titolo Forum Risposte Data
N Non Autorizzato. Dovresti rimuovere il parametro customize_messenger_channel per visualizzare l'anteprima in frontend. WordPress 1
A nome file che contiene punto passato come parametro a query PHP 31
W Parametro non corretto. (code: 87) PHP 4
P Passaggio di parametro al metodo: public void run() Java 3
D [Visual Basic] [MS Access] query con parametro di testo Visual Basic 4
M [PHP] Parametro valido su pagina avanti e indietro PHP 0
otto9due Capire la funzione del parametro event passato alla funzione.. jQuery 1
G [Javascript] Problema parametro passato con ajax Javascript 4
M [PHP] Tabella datagrid con icona di modifica che cambia in base a parametro PHP 0
Laskot [Javascript] Funzione JS con parametro Javascript 4
M Modifica parametro mysql_result($result, $i, 'id') Deprecato dal 5.5 PHP 10
P Chiamare pagina PHP con parametro da javascript Javascript 1
Rikk73 Passare come argomento in un metodo un parametro della classe istanziata PHP 0
I SELECT mysql su parametro data PHP 5
V Parametro nella Dialog jQuery 1
pup3770 Passare parametro ad un'altra pagina in base alla condizione PHP 3
K sintassi passaggio variabile come parametro in funzione. Javascript 3
S parametro xforcevesa al kernel Linux e Software 3
F [risolto] Aiuto parametro SET phpmyadmin PHP 2
F Testo scorrevole letto da file di testo e parametro get? Flash 3
R passaggio url come parametro PHP 3
L UPDATE senza parametro PHP 11
L controllo parametro inesistente. PHP 1
S Form PHP e validazione con ritorno di parametro PHP 0
C Passare parametro via url PHP 1
A problema con GET e parametro con [] PHP 3
N problema parametro funzione addEventListener Javascript 2
M Passare un parametro con il metodo post PHP 6
JellyBelly Passare Parametro per filtrare i maker per google map Javascript 0
R login - parametro url con dreamweaver PHP 2
C [JAVA]Come rendere opzionale un parametro di un costruttore? Java 3
E passaggio parametro con session Classic ASP 0
D Nessun valore predefinito per il parametro ASP.NET 2
R inviare un parametro con response.redirect Classic ASP 5
Cforever id_cella.parametro?? come si fa? ASP.NET 0
M Problema con visibility e radio button Javascript 2
J Facebook Top Visibility Plan Annunci servizi di Social Media Marketing 0
borgo italia tag meta o visibility non funzionante Javascript 2
C Problemi con proprietà CSS visibility:hidden in IE HTML e CSS 0
borgo italia radio button e.. visibility HTML e CSS 6
L metodi visibility e disabled solo per ie? Javascript 2
M Inserire variabile nella value di una hidden PHP 3
napuleone campi hidden in parametri della pagina devo leggerli con GET PHP 1
F Overflow Hidden HTML e CSS 1
K passaggio dati tramite form in un campo hidden Javascript 3
G Problemi PHP Hidden e Visible PHP 0
P Problma passaggio valori input hidden in oggetto $.post() jQuery 8
N Campo hidden HTML e CSS 1
G creazione cartella tramitte form type hidden PHP 1
D hidden PHP 5

Discussioni simili