Parametro visibility hidden in relazione a window.screen.width

Angelabit · 4 Set 2012

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 · 4 Set 2012

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 .

Angelabit · 4 Set 2012

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

non ho capito (perchè non sono competente) cosa significa "ricordati di dare un id univoco ai div".

Grazie.

criric · 4 Set 2012

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 · 4 Set 2012

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 · 4 Set 2012

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 · 4 Set 2012

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

Angelabit · 4 Set 2012

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 · 5 Set 2012

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.

criric · 5 Set 2012

manca un parametro.

mea culpa :crying:

brava Vale

Angelabit · 5 Set 2012

Vale2 ha scritto:

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

Cerca

Cerca

Parametro visibility hidden in relazione a window.screen.width

Angelabit

Nuovo Utente

criric

Super Moderatore

Angelabit

Nuovo Utente

criric

Super Moderatore

Angelabit

Nuovo Utente

Vale2

Utente Attivo

criric

Super Moderatore

Angelabit

Nuovo Utente

Vale2

Utente Attivo

criric

Super Moderatore

Angelabit

Nuovo Utente

Discussioni simili