I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio 1 2
Lollinos
Lollinos
il 12 aprile 2012 alle 01:10
34 messaggi dal 29 gennaio 2011
www.incante.135.it
Sera!

Dopo stressanti ricerche e prove, mi sono arreso al problema e ho deciso di cercare una mano qua d:

Praticamente io ho la necessità di inserire una serie di div, uno dentro l'altro, dinamicamente al caricamento della pagina. Questo è quello dhe dovrei ottenere:

<div class="box_sites first_tags">
<div class="tags" id="tag_1" onmouseover="downOnCM('1');" onmouseout="downOutCM('1');" onmousedown="javascript:window.open('http://www.google.com');">
  <a target="_blank" href="http://www.google.com" target="_blank" rel="nofollow"></a>
  <div class="cm" id="cm_1">
    <div class="delete" id="delete_1">X</div>
    <div class="modify" id="modify_1">M</div>
  </div>
  <div class="clear"></div>
</div>
<div class="sink" id="sink_1" onclick="clickSink('1');">
  <div><div><div>Here the title of the site</div></div></div>
</div>
<div class="icon"></div>
</div>


Con il metodo finale che utilizzo io, al fine del caricamento della pagina, nel sorgente i div appaiono tutti correttamente, ma sembrano non ereditare gli stili che gli imposto dal CSS e nemmeno la modifica di un valore di un attributo tramite JavaScript. Ho immaginato che avviene questo inconveniente perché ASP.NET, quando aggiunge i div, ha già caricato gli stili nella pagina .aspx. Però non so come risolverlo. Un altro problema che ottengo è un notevole rallentamento del caricamento della pagina. Sarà forse che il tutto avviene nel metodo Load()?
Cosa mi consigliate di fare?

Ah, non ho postato codice perché è abbastanza lungo. In caso ne abbiate bisogno provvederò a postarlo successivamente!
RispondiQuoting
BrightSoul
BrightSoul
il 14 aprile 2012 alle 09:51
11.886 messaggi dal 09 febbraio 2002
Contributi
ciao,


ASP.NET, quando aggiunge i div, ha già caricato gli stili nella pagina .aspx

no, questo è da escludere perché le due cose avvengono in momenti diversi.
Asp.Net lavora lato server per "assemblare" la pagina HTML nella sua interezza. Solo dopo aver concluso questa operazione, il webserver IIS inizia ad inviare al browser client la pagina HTML così generata.

Il browser client, quindi, mentre scarica la pagina HTML inizia mano mano a scaricare anche le risorse ad essa collegate come le immagini e i fogli di stile CSS.
Non ha importanza che i CSS si trovino prima o dopo le DIV perché il browser li applicherà sempre e indipendentemente da questo. Anche se dovessi effettuare dei cambiamenti nel DOM dopo l'avvenuto caricamento di pagina (es. aggiunta di nuove DIV col javascript e/o modifica dei loro attributi), il browser ri-elaborerà automaticamente l'aspetto degli elementi del DOM affinché sia sempre conforme a quanto diposto dalle regole CSS.

Lollinos ha scritto:

ma sembrano non ereditare gli stili che gli imposto dal CSS e nemmeno la modifica di un valore di un attributo tramite JavaScript
Ok, quindi sperimenti un problema sia con i CSS che con il javascript. Questo può dipendere dal fatto che Asp.Net, in certe situazioni, rielabora gli ID dei controlli server che hai nella pagina. Come risultato, gli elementi HTML avranno degli ID divesi, che non ti aspettavi di trovare, e i tuoi script+css non funzioneranno.
In merito all'argomento, leggi questo articolo di Daniele Bochicchio:
http://www.aspitalia.com/script/1018/Gestione-ID-Lato-Client-ASP.NET-4.0.aspx

Per prima cosa bisogna accertarsi che il problema sia questo. Dal browser, visualizza il codice sorgente HTML e vai a leggere i valori degli attributi ID. Sono quelli che ti aspetti o sono diversi?

Vedo che alcune DIV hanno anche degli attributi class quindi almeno le regole CSS le usano come selettore dovrebbero funzionare. Ad esempio, se nel css hai questo:
.delete {border:1px solid red;}

Non c'è motivo per cui la <div class="delete" non debba apparire col bordo rosso, come disposto dalla regola CSS...
Enjoy learning and just keep making
RispondiQuoting
Lollinos
Lollinos
il 14 aprile 2012 alle 19:13
34 messaggi dal 29 gennaio 2011
www.incante.135.it
Innanzi tutto grazie della risposta (:

Allora posso confermati che sia gli ID che le CLASS che imposto dinamicamente, sono uguali sia a quelle che ho descritto nei miei fogli di stile e sia nelle function in javascript. Ho letto l'articolo che mi hai consigliato, ma non mi sembra che sia il mio problema!

Per prima cosa bisogna accertarsi che il problema sia questo. Dal browser, visualizza il codice sorgente HTML e vai a leggere i valori degli attributi ID. Sono quelli che ti aspetti o sono diversi?


Sì. Sono quell iche mi aspetto. L'unico cambiamento è un div contenitore in più che non riesco ad evitare quando effettuo il replace, ma non mi sembra questo il problema!

Vedo che alcune DIV hanno anche degli attributi class quindi almeno le regole CSS le usano come selettore dovrebbero funzionare. Ad esempio, se nel css hai questo:
.delete {border:1px solid red;}
Non c'è motivo per cui la <div class="delete" non debba apparire col bordo rosso, come disposto dalla regola CSS...


Invece non funziona. Ad esempio le varie scritte all'interno dei div, come "X" o "M" o anche "twitter", etc., non vengono visualizzate dal browser, ma appaiono nel sorgente della pagina.
Nel Page_Load, oltre a questo, effettuo anche il login tramite cookie, il settaggio della Sessione e aggiungo il testo in base alla lingua dell'utente. Il testo lo aggiungo così:

for (int i = 0; i < 5; i++)
                            menu_link.InnerHtml +=
                                i < 4 ? "<div class=\"menu_link\" id=\"link_" + i + "\"><div><a href=\"#\">" +
                                languageSelected[i] + "</a></div></div>" : "<div class=\"clear\"></div>";


Questo, però, funziona e viene visualizzato.

Per aggiungere questi div, cui riscontro problemi, utilizzo questo metodo finale:
HtmlGenericControl a = new HtmlGenericControl("div");
[...]
content.InnerHtml = Utility.Replace(a, "&#39;", "'").InnerHtml;


Però se scrivo così:
HtmlGenericControl a = new HtmlGenericControl("div");
[...]
content.InnerHtml = "a"+Utility.Replace(a, "&#39;", "'").InnerHtml;


La "a" verrà stampata a video, mentre il resto no.

Ho provato anche a cambiare l'evento da Page_Load a Page_Init o anche Page_PreInit, ma ottengo sempre lo stesso risultato
Modificato da Lollinos il 14 aprile 2012 18.21 -
RispondiQuoting
BrightSoul
BrightSoul
il 15 aprile 2012 alle 10:47
11.886 messaggi dal 09 febbraio 2002
Contributi

Ho letto l'articolo che mi hai consigliato, ma non mi sembra che sia il mio problema!

No, infatti. Vedo che aggiungi il markup lavorando con le stringhe quindi il problema non può essere quello.

Comunque, non sono ancora del tutto sicuro che il tuo markup arrivi al browser. Oppure se gli arriva una versione alterata di quello che tu scrivi nel Page_Load. A proposito... per il momento lascia pure quel codice nel Page_Load. Come ti dicevo ieri, il client browser elaborerà la pagina solo dopo che gli è stata inviata dal webserver, cioè dopo che il ciclo di vita della pagina Asp.net si è concluso. Cambiare evento non sortirà alcun effetto.

Lollinos ha scritto:

Ad esempio le varie scritte all'interno dei div, come "X" o "M" o anche "twitter", etc., non vengono visualizzate dal browser, ma appaiono nel sorgente della pagina.

Tu per "sorgente della pagina" intendi il markup HTML prodotto da asp.net? Ok allora potrebbe essere che nel CSS tu abbia un display:none; per la classe box_sites, altrimenti non mi spiego come sia possibile.

Fai così, posta il codice HTML dell'intera pagina e posta anche il codice CSS, nel caso l'avessi inserito in un foglio di stile .css esterno.
Se il codice è molto lungo, incollalo qui:
http://pastebin.com/
Poi qui nel forum posta i link a tale codice.

Posta anche il codice della funzione Utility.Replace.

ciao
Modificato da BrightSoul il 15 aprile 2012 10.54 -
Enjoy learning and just keep making
RispondiQuoting
Lollinos
Lollinos
il 15 aprile 2012 alle 17:44
34 messaggi dal 29 gennaio 2011
www.incante.135.it
Ho messo tutto qui: [NOSPAM] http://lollinos1067.altervista.org/ASPItalia/codice.txt [/NOSPAM]

Comunque non mi risulta che la classe box_sites abbia un display:none !!

Ah, comunque ho provato a copiare il codice sorgente che rilascia il browser e ad incollarlo in una pagina html vuota, e si vede ogni cosa, seppur senza stili; anche gli sfondi che imposto col background vengono visti!

P.S. - Ho provato anche ad incollare il codice javascript direttamente nella pagina, ma non cambia niente!
RispondiQuoting
BrightSoul
BrightSoul
il 15 aprile 2012 alle 18:56
11.886 messaggi dal 09 febbraio 2002
Contributi
ok, ecco spiegato il problema:
<!--<div class="box_sites first_tags">

L'intero blocco di codice html si trova all'interno di un commento e perciò il browser non lo mostrerà a video.

Rimuovi la sequenza di caratteri <!-- e, più in basso, -->

ciao
Modificato da BrightSoul il 15 aprile 2012 18.57 -
Enjoy learning and just keep making
RispondiQuoting
Lollinos
Lollinos
il 15 aprile 2012 alle 20:05
34 messaggi dal 29 gennaio 2011
www.incante.135.it
Nono!

Se ti accorgi sotto l'ho chiuso:
<div class="sink" id="sink_6" onclick="clickSink('6');">
          <div><div><div>Here the title of the site</div></div></div>
        </div>
        <div class="icon"></div>
      </div>
      <div class="clear"></div>
    -->


Ho commentato quel pezzo perché inizialmente l'ho scritto come codice statico e poi l'ho riprodotto dinamicamente!
RispondiQuoting
BrightSoul
BrightSoul
il 16 aprile 2012 alle 21:54
11.886 messaggi dal 09 febbraio 2002
Contributi
eccomi, dunque, guardando meglio il css mi sembra che ci siano delle regole che nascondono diversi pezzi dell'interfaccia. In particolare, ci sono varie regole opacity:0.0 e una visibility:hidden che ti impediscono di vedere gli elementi della pagina.

Lollinos ha scritto:

Ah, comunque ho provato a copiare il codice sorgente che rilascia il browser e ad incollarlo in una pagina html vuota, e si vede ogni cosa, seppur senza stili;

Sì, infatti questa prova conferma che il problema dipende dal css.
Le transizioni CSS3 non rivelano gli oggetti nascosti perché gli elementi che possiedono opacity:0.0 non hanno poi un corrispettivo opacity:1.0 e l'animazione da invisibile a visibile non può avvenire.

Forse per il momento dovresti preferire i metodi .show() e .hide() di jQuery anziché ricorrere alle transizioni CSS3 che sono ancora in stato di bozza.

ciao
Modificato da BrightSoul il 16 aprile 2012 21.54 -
Enjoy learning and just keep making
RispondiQuoting
1 2

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.