Mostrare o meno banner pubblicitari a seconda la risoluzione del device

Marco Mangano

Nuovo Utente
4 Ago 2014
6
0
0
Buongiorno a tutti. Premetto che non ho mai studiare il linguaggio javascript e che voglio utilizzarlo solo esclusivamente per un'operazione credo semplice, e nulla più.
Sto realizzando un sito responsive e voglio che, a seconda la risoluzione del dispositivo sul quale viene visualizzata la pagina web, compaia un banner di una certa grandezza piuttosto che di un'altra, onde evitare scroll orizzontali.
Inizialmente avevo risolto semplicemente con CSS e media query, utilizzando "display:none". Efficace per quel che riguarda la visibilità dell'oggetto, ma non per il caricamento della pagina, in quanto il banner non è visualizzato dal browser ma è comunque caricato.
Mi sono imbattuto allora in questa guida di html.it (http://www.html.it/pag/33422/caricam...dei-contenuti/) e ho realizzato questo codice che, come mi aspettavo data la mia inesperienza Java, non funziona. Sapreste dirmi cosa sbaglio?

Nella parte HTML ho implementato così gli script (in body per velocizzare il caricamento):

HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/ads.js"></script>

e così i div contenitori (non li metto tutti, sono sparsi nella pagina):

HTML:
<div id="video-banner">

</div>
<div id="button-banner1">


</div>

Nel file ads.js ho scritto questo codice:

Codice:
var upAdsBase = function() {
 $("#video-banner").load("../ads/video-banner.html");
 $("#button-banner2").load("../ads/button-banner2.html");
 $("#button-banner3").load("../ads/button-banner3.html");
 $("#button-banner4").load("../ads/button-banner4.html");
};


var upAds319 = function() {
 $("#button-banner1").load("../ads/button-banner1.html");
 $("#button-banner2").load("../ads/button-banner2.html");
 $("#button-banner3").load("../ads/button-banner3.html");
 $("#button-banner4").load("../ads/button-banner4.html");
};


var upAds360 = function() {
 $("#video-banner").load("../ads/video-banner.html");
 $(".large-box-banner").load("../ads/large-box-banner.html");
};


if (document.documentElement.clientWidth <= 319) {
 upAds319();
}


if (document.documentElement.clientWidth >= 320 <= 359) {
 upAdsBase();
}


if (document.documentElement.clientWidth >= 360) {
 upAds360();
}
 
Ciao, anche se orrendo a me funziona.
gli script è meglio che li metti in <head> non in <body>
 
Perché? Non rallentano il caricamento?
non mi risulta.

Bello o brutto è soggettivo, limportante è che funzioni.
Spiega meglio cosa non ti funziona, perchè a me carica gli html correttamente
poi prova anche cosi
Codice:
$(document).ready(function() {
    var risoluzione = document.documentElement.clientWidth;
    if (risoluzione >= 360) {
        $("#video-banner").load("../ads/video-banner.html");
        $(".large-box-banner").load("../ads/large-box-banner.html");
    } else {
        if (risoluzione <= 319) {
            $("#button-banner1").load("../ads/button-banner1.html");
            $("#button-banner2").load("../ads/button-banner2.html");
            $("#button-banner3").load("../ads/button-banner3.html");
            $("#button-banner4").load("../ads/button-banner4.html");
        } else {
            // base
            $("#video-banner").load("../ads/video-banner.html");
            $("#button-banner2").load("../ads/button-banner2.html");
            $("#button-banner3").load("../ads/button-banner3.html");
            $("#button-banner4").load("../ads/button-banner4.html");
        }
    }
});
 
Il punto è proprio che non mi carica il codice html. Se apro il file "video-banner.html", vedo il banner, se apro la pagina dove ho inserito tutto questo codice, ossia "index.html", niente. E questo indipendentemente da browser o estensioni che agiscono nel browser.

Anche con la tua soluzione non cambia, tra l'altro mi sembra più ordinata e semplificata, grazie.
 
lo hai online ? puoi postare il link ?
 
il percorso delle pagine è errato
questo quello che segnala il debug di firefox
Codice:
"NetworkError: 404 Not Found - http://manganoprova1.altervista.org/ads/large-box-banner.html"
 
Mi sembra strana questa cosa, comunque ho modificato. Ho messo i banner nella cartella js. Non cambia però il risultato, non si vedono
 
il collegamento è ancora sbagliato, ora segnala
Codice:
"NetworkError: 404 Not Found - http://manganoprova1.altervista.org/v2.0/large-box-banner.html"
ti faccio un esempio
se nella cartella dove hai la index hai anche la cartella ads non serve il ../
Codice:
$("#button-banner1").load("ads/button-banner1.html");
 
Ultima modifica:
Perfetto, ho fatto confusione con i percorsi allora. Li consideravo rispetto al file ads.js, invece che rispetto index.html. Però è spuntato un altro problema, visualizza solo il banner e nient'altro. Se hai altre soluzioni da propormi per un sito responsive, sono tutto orecchi ;)
 

Discussioni simili