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):
<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):
<div id="video-banner">
</div>
<div id="button-banner1">
</div>
Nel file ads.js ho scritto questo 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();
}