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();
}
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, anche se orrendo a me funziona.
gli script è meglio che li metti in <head> non in <body>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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");
        }
    }
});
 

Marco Mangano

Nuovo Utente
4 Ago 2014
6
0
0
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.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
lo hai online ? puoi postare il link ?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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"
 

Marco Mangano

Nuovo Utente
4 Ago 2014
6
0
0
Mi sembra strana questa cosa, comunque ho modificato. Ho messo i banner nella cartella js. Non cambia però il risultato, non si vedono
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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:

Marco Mangano

Nuovo Utente
4 Ago 2014
6
0
0
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
Autore Titolo Forum Risposte Data
Tommy03 Mostrare feed senza internet Sviluppo app per Android 4
A Mostrare dati database per pagine PHP 2
Cosina Mostrare immagini da una cartella, ma solo un numero definito PHP 12
J php, scegliere autista da select e mostrare se ha fatto un incidente PHP 8
M [PHP] Logica esatta sul mostrare contenuto se inattivo con Codeigniter PHP 2
M [PHP] Mostrare risultati di una tabella ma solo se ID è attivo PHP 0
A [Javascript] Mostrare un marker se è vicino al risultato di ricerca con google maps Javascript 3
T mostrare il riultato di uno script php Ajax 2
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
T mostrare solo una volta il risulato doppio Database 10
E [PHP] GUMP: mostrare gli errori tramite array PHP 1
Bryan [PHP] Far mostrare tutte le tabelle contenenti in un database PHP 2
N invia.php solo alcuni dati da mostrare PHP 4
S [Javascript] Slider html: Mostrare immagini su 4 colonne Javascript 20
K Mostrare tabella PHP e MySQL PHP 0
G non mostrare un determinato campo se PHP 1
J Mostrare mese intero (come cambio il codice?!) Java 1
M Mostrare il contenuto del database e convertire la data da timestamp PHP 2
D mostrare contenuto caricato dinamicamente da database PHP 12
M problema mostrare data di registrazione formattata in italiano PHP 8
M Mostrare immagini dal database in una propria pagina PHP 2
R Mostrare articoli correlati in php PHP 2
N Mostrare campi form se ho selezionato un determinato campo PHP 0
A consiglio uso jquery php per mostrare parte di un form PHP 6
A consiglio uso jquery per mostrare parte di un form jQuery 0
A Mostrare tutti i record di una tabella prendendo un valore da un altra tabella MySQL 1
N Mostrare valori databse in un modal pop up con PHP e MySQL PHP 5
D mostrare nascondere sottomenu Javascript 1
C Mostrare i campi vuoti al caricamento di una maschera MS Access 0
N [RISOLTO] Mostrare a video le checkbox selezionate con PHP e MySQL PHP 4
gandalf1959 [risolto] Mostrare a video il risultato di una query con stesso anno e mesi diversi PHP 13
D Mostrare su una pagina web dati provenienti da un Database PHP 0
P Mostrare punti interesse du una mappa di google maps Javascript 1
giancadeejay Mostrare immagine solo per 2 secondi Javascript 2
A Mostrare video style facebook Javascript 0
H Funzione onmouseover per mostrare un box con un link da cliccare? Javascript 3
P Mostrare nome utente (era: ciao) PHP 1
U Mostrare una pagina html esterna PHP 8
D mostrare contenuto tabella database dopo la selezione PHP 3
F mostrare una sola volta un record che si ripete PHP 2
M pulsante per mostrare filmato swf HTML e CSS 12
M mostrare un feed rss con PHP PHP 2
S mostrare variabili da un js esterno Javascript 2
S [PHP] Selezionare tutte le colonne meno due PHP 6
gandalf1959 passaggio variabili da form dopo verifiche: tutte meno una!?!? Javascript 4
MarcoGrazia [htaccess] Bloccare tutti meno il proprio sito Apache 0
S Aggiornare campo in base a timestamp meno recente fra piu tabelle PHP 2
G Realizzare apps per iOS meno recenti Sviluppo app per iOS 1
G Redirect con iframe se loggato come utente o meno PHP 2
M echo che dipende dall'estrazione o meno di un record PHP 4

Discussioni simili