Punto informatico Network
Login Esegui login | Non sei registrato? Iscriviti ora (è gratuito!)
Username: Password:
  • Annuncio Pubblicitario

Div compari | Div scompari

Cerchi consigli per migliorare il tuo sito? Vuoi aprire un sito in poco tempo?
Discuti con altri webmaster, chiedi chiarimenti ed opinioni in tutta libertà.
Lo spam verrà cancellato.

Div compari | Div scompari

Messaggioda A R O S » sab giu 04, 2011 8:20 pm

Salve a tutti

Oggi creando una pagina web dal contenuto abbastanza pesante, ho notato l'osceno risultato durante il caricamento di tutti gli elementi e le immagini. Insomma sembrano montarsi come i Lego

Allora mi sono chiesto se esisteva un qualche script in javascript che permetteva alla mia pagina di caricarsi in modo nascosto e nel mentre che quest'ultima per l'appunto si caricasse, sul browser comparisse un DIV con all'interno una scritta del tipo Caricamento in corso o magari un immagine fatta da me.

La mia pagina web è formata da un div centrato ( tramite i CSS ho impostato margin left e right su AUTO ) e da due div al suo interno.

Ricapitolando: Vorrei visualizzare un DIV di caricamento e poi dopo farlo scomparire per visualizzare l'altro div che si dovrebbe essere caricato.

Spero di essere stato chiaro, vi supplico di aiutarmi ne ho davvero bisogno
"Io sono un lupo...niente e nessuno lo può negare perché io so quale animale vive dentro di me"
Avatar utente
A R O S
Aficionado
Aficionado
 
Messaggi: 81
Iscritto il: sab mag 14, 2011 11:54 pm

Re: Div compari | Div scompari

Messaggioda Andy94 » sab giu 04, 2011 8:45 pm

Al momento non mi viene in mente niente di particolare se non:
- La cosiddetta tecnica dell'image preload (se cerchi in Google avrai una montagna di risultati),
- La richiesta della pagina con AJAX (mostri una pagina semivuota all'inizio, e appena è caricata fai la richiesta AJAX per l'ottenimento della parte pesante).

[ciao]
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Div compari | Div scompari

Messaggioda ssjx » sab giu 04, 2011 9:06 pm

o anche : http://www.appelsiini.net/2007/9/lazy-l ... ery-plugin

Un buon punto di partenza se vuoi approfondire un po' su questa strada è google
Usavo IE e mi lamentavo... usavo Mozilla e mi lamentavo, decisamente meno ma mi lamentavo, ... poi ho trovato Opera e fu amore a prima vista
Avatar utente
ssjx
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 5756
Iscritto il: ven nov 26, 2004 3:37 pm
Località: Barcellona


Re: Div compari | Div scompari

Messaggioda A R O S » sab giu 04, 2011 9:22 pm

Il fatto è questo: non mi serve un preload per le immagini ma per tutta la pagina. Non ricordo dove ma su un sito succedeva così:

Apri sito --> si visualizzava un Div con dentro tipo = <div>Caricamento in corso...</div> e appena la pagina di dietro aveva caricato tutto il contenuto, il div con la scritta caricamento scompariva e compariva il <div> con il contenuto della pagina!
"Io sono un lupo...niente e nessuno lo può negare perché io so quale animale vive dentro di me"
Avatar utente
A R O S
Aficionado
Aficionado
 
Messaggi: 81
Iscritto il: sab mag 14, 2011 11:54 pm

Re: Div compari | Div scompari

Messaggioda Andy94 » sab giu 04, 2011 10:06 pm

È un'implementazione della seconda soluzione che ti ho proposto...
A questo punto devi scegliere se usare MooTools o JQuery per farlo.
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Div compari | Div scompari

Messaggioda A R O S » sab giu 04, 2011 10:57 pm

Se vorei fare con jquery ( che non conosco minimamente ) come dovrei fare andy? ( intanto grazie mille, anche a te ssjx ) =)
"Io sono un lupo...niente e nessuno lo può negare perché io so quale animale vive dentro di me"
Avatar utente
A R O S
Aficionado
Aficionado
 
Messaggi: 81
Iscritto il: sab mag 14, 2011 11:54 pm

Re: Div compari | Div scompari

Messaggioda Andy94 » dom giu 05, 2011 7:13 am

Il problema è che JQuery non lo conosco nemmeno io...
Se parliamo di MooTools è un conto, ma con JQ posso solo indicarti la documentazione...

Una domanda importante prima di procedere: la pagina che dici essere pesante è HTML o PHP?
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Div compari | Div scompari

Messaggioda A R O S » dom giu 05, 2011 12:51 pm

E in php ^^"
"Io sono un lupo...niente e nessuno lo può negare perché io so quale animale vive dentro di me"
Avatar utente
A R O S
Aficionado
Aficionado
 
Messaggi: 81
Iscritto il: sab mag 14, 2011 11:54 pm

Re: Div compari | Div scompari

Messaggioda Andy94 » dom giu 05, 2011 1:41 pm

A quel punto, devi separare la pagina che ti servirà da copertina (dove scriverai "caricamento in corso") da quella che ti fornisce i dati.
Nella copertina scriverai del codice javascript che includerà la chiamata AJAX alla pagina PHP che ti fornirà i dati. Ti consiglio di inserirla all'interno di una funzione, di modo che sia richiamabile dopo un breve timeout (tipo 500 millisecondi, per aspettare che la pagina di copertina sia completamente carica.
Il pseudocodice per fare ciò è:
Codice: Seleziona tutto
function caricaPagina(){
qui va la chiamata AJAX
}
window.setTimeout("caricaPagina()", 500);

Se usi MooTools, il codice per la chiamata AJAX potrebbe essere qualcosa tipo:
Codice: Seleziona tutto
window.addEvent("domready", function(){
new Request({
url: "tua_pagina_php_separata_per_i_dati.php",
method: "get",
onComplete: function(result){
$("copertina").set("html", result);
}
}).send();
})

Ovviamente va riadattato per adeguarsi ai nomi dei div che tu assegnerai e gli url vanno sistemati, però potrebbe essere una buona partenza.

Se invece usi JQuery, la documentazione è qui
http://api.jquery.com/jQuery.ajax/
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Div compari | Div scompari

Messaggioda A R O S » dom giu 05, 2011 2:15 pm

Cavolo forse è troppo tardi, ma comunque ho risolto xD

Con questa funzione

function preloader(){
document.getElementById("Caricamento").style.display = "none";
document.getElementById("Contenitore").style.display = "block";
}//preloader
window.onload = preloader;

Prima richiamo un div e poi appena la pagina è carica richiamo l a'ltro.!
"Io sono un lupo...niente e nessuno lo può negare perché io so quale animale vive dentro di me"
Avatar utente
A R O S
Aficionado
Aficionado
 
Messaggi: 81
Iscritto il: sab mag 14, 2011 11:54 pm

Re: Div compari | Div scompari

Messaggioda Andy94 » dom giu 05, 2011 2:44 pm

Quello che hai fatto però è tutt'altro. [^]
In quel modo tutta la mole di dati deve comunque essere processata al caricamento della pagina e non in modo asincrono.

[ciao]
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Div compari | Div scompari

Messaggioda A R O S » dom giu 05, 2011 2:51 pm

Andy spè non fuggire ù.ù come te la cavi con javascript? Avrei bisogno di un aiuto T_T su uno script!
"Io sono un lupo...niente e nessuno lo può negare perché io so quale animale vive dentro di me"
Avatar utente
A R O S
Aficionado
Aficionado
 
Messaggi: 81
Iscritto il: sab mag 14, 2011 11:54 pm

Re: Div compari | Div scompari

Messaggioda Andy94 » dom giu 05, 2011 4:37 pm

Prova a chiedere e vediamo cosa si può fare [^]
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Div compari | Div scompari

Messaggioda A R O S » dom giu 05, 2011 9:16 pm

Va bene io ci provo! *-* speriamo!

Allora andy io ho trovato questo script --> http://javascript.html.it/script/vedi/4948/jgrowl/

Se vedi dalla demo, questo script fà si che quando si clicca su qualcosa, comprare la notifica.
Il mio problema però è che questo script invece che apllicarlo all'onclick io lo sto usando su un onmouseOver.
Il punto è questo: vorrei che quando si passasse sopra ad un area comparisse la notifica UNA SOLA VOLTA, e scomparisse quando il mouse esce dall'area dell'onmouseOver.
"Io sono un lupo...niente e nessuno lo può negare perché io so quale animale vive dentro di me"
Avatar utente
A R O S
Aficionado
Aficionado
 
Messaggi: 81
Iscritto il: sab mag 14, 2011 11:54 pm

Re: Div compari | Div scompari

Messaggioda Andy94 » lun giu 06, 2011 6:00 am

Per una sola volta intendi una volta e poi basta?
Con "e poi basta" intendo dire che una volta apparso la prima volta, anche se ci torni sopra con il mouse, non appare più.
O vuoi che quando ci passi sopra con il mouse non appaia nuovamente finché il primo messaggio non si è chiuso?

Se la prima ipotesi fosse quella che vuoi fare, è molto facile (appena torno da scuola ti mostro il codice).
Nel secondo caso, invece, ci vuole un po' di più perché bisogna modificare lo script di JGrowl, ma teoricamente è fattibile.

[ciao]
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Div compari | Div scompari

Messaggioda A R O S » lun giu 06, 2011 6:19 am

Io vorrei che questi messaggini apparissero solo quando il mouse è sull'area del OnMouseOver e che spariscono quando esco dall'area.! xD
"Io sono un lupo...niente e nessuno lo può negare perché io so quale animale vive dentro di me"
Avatar utente
A R O S
Aficionado
Aficionado
 
Messaggi: 81
Iscritto il: sab mag 14, 2011 11:54 pm

Re: Div compari | Div scompari

Messaggioda Andy94 » lun giu 06, 2011 6:14 pm

Vediamo se ho capito...
Usa l'attributo onmouseover anziché onclick all'interno del tag che ti rappresenta la superficie interessata. [^]
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Div compari | Div scompari

Messaggioda A R O S » lun giu 06, 2011 6:21 pm

Infatti è così che ho fatto, il problema è che quando tolgo il mouse, il messaggino non scompare! Ed io vorrei che scomparisse! XD
"Io sono un lupo...niente e nessuno lo può negare perché io so quale animale vive dentro di me"
Avatar utente
A R O S
Aficionado
Aficionado
 
Messaggi: 81
Iscritto il: sab mag 14, 2011 11:54 pm

Re: Div compari | Div scompari

Messaggioda Andy94 » lun giu 06, 2011 8:20 pm

Per farlo devi aprire il file JS che lo gestisce (che si chiama jquery.growl.js, se hai mantenuto la nomenclatura originale) e cercare la parola life (da me si trova alla riga 109).
Vedrai che di fianco c'è un numero (dovresti trovare 3000): devi modificarlo in qualcosa come 500 per far sì che scompaia dopo mezzo secondo da quando il mouse si sposta dall'area e non dopo tre secondi come da default.
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Div compari | Div scompari

Messaggioda A R O S » lun giu 06, 2011 10:58 pm

ho provato a fare come hai detto, ma se io resto sull'area onmauseover scompare lo stesso io non voglio che scompaia se sto sull'area onmouse over xD voglio che scompaia solo quando esco dall'area! T_T un casino eh? ç_ç
"Io sono un lupo...niente e nessuno lo può negare perché io so quale animale vive dentro di me"
Avatar utente
A R O S
Aficionado
Aficionado
 
Messaggi: 81
Iscritto il: sab mag 14, 2011 11:54 pm

Prossimo

Torna a Sviluppo Web

Chi c’è in linea

Visitano il forum: Nessuno e 0 ospiti

Powered by phpBB © 2002, 2005, 2007, 2008 phpBB Group
Traduzione Italiana phpBB.it

megalab.it: testata telematica quotidiana registrata al Tribunale di Cosenza n. 22/09 del 13.08.2009, editore Master New Media S.r.l.; © Copyright 2008 Master New Media S.r.l. a socio unico - P.I. 02947530784. GRUPPO EDIZIONI MASTER Spa Tutti i diritti sono riservati. Per la pubblicità: Master Advertising