Div a comparsa

**semolino** · 01-07-2006, 15:39

Ragazzi sono tornato al lavoro per questa cosa del div as comparsa.+
Potete ridare un'occhiata alla discussione?
grazie

**semolino** · 01-07-2006, 17:18

La div adesso compare in modo corretto dopo 3sec;
ora ho un codice che crea una funzione per un effetto fadeIn.

codice:

function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

Il codice viene richiamato cosi
<body onLoad="javascript

pacity('FadeIn', 0, 100, 1500)" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

in questo modo, però non funziona in modo corretto.
Posso applicare onload solo al div e non al body della pagina?

**semolino** · 01-07-2006, 22:21

Provo a prendere un'altra strada, ovvero incorporare le dued function, ma come?

codice:

function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

Posso fare in modo che questa funzione sia anche unità a questa?

codice:

window.onload=function(){
  objDiv=document.getElementById('DivTime');
  setTimeout("objDiv.style.display='block'",1000);
}

**dvjack** · 02-07-2006, 16:25

VVoVe:

VVoVe: che casino....
cmq, da quello che ho capito tu vuoi far apparire un div dopo tre secondi e fare in modo che appaia con un fade-in,giusto?
ok, allora tu puoi fare una cosa del genere:
- metti il tuo div

Codice PHP:


<div id="FadeIn" style="display:none"><?php require(DIR_AV_BOXES . 'chi_siamo.php'); ?></div>

- metti il codice js

codice:

function visualizzaDiv(){
  objDiv=document.getElementById('FadeIn');
  opacity('FadeIn', 0, 100, 1500);
  objDiv.style.display='block';}

function opacity(id, opacStart, opacEnd, millisec) {...}	

window.onload=function(){ setTimeout('visualizzaDiv()',3000);}

piccolo dubbio: la funzione opacity() richiama una funzione changeOpac(), che qui non vedo riportata

ce l'hai vero???

Spero che funzioni, perchè senza la changeOpac(), non posso provarlo

**semolino** · 02-07-2006, 17:11

Innanzitutto grazie dvjack...
Riporto tutto quello che ho impostato ora:

codice:

<script type="text/javascript">
function visualizzaDiv(){
  objDiv=document.getElementById('FadeIn');
  opacity('FadeIn', 0, 100, 1500);
  objDiv.style.display='block';}

function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}


window.onload=function(){ setTimeout('visualizzaDiv()',3000);}
</script>

Dunque, funziona in parte nel senso che dopo 3 secondi parte l'effetto fade; Dopo il 3° secondo compare la div per neanche mezzo secondo al 100%, per poi passare allo 0% e ritornare al 100% come richiesto. come mai compare in quel punto?

Ho notato anche che se nella div c'è un link che si ricarica nello stesso, fa lo stesso effetto di comparsa; qui, invece non vorrei che lo facesse... :master:

**semolino** · 02-07-2006, 22:00

Originariamente inviato da semolino

Dunque, funziona in parte nel senso che dopo 3 secondi parte l'effetto fade; Dopo il 3° secondo compare la div per neanche mezzo secondo al 100%, per poi passare allo 0% e ritornare al 100% come richiesto. come mai compare in quel punto?

Ho notato anche che se nella div c'è un link che si ricarica nello stesso, fa lo stesso effetto di comparsa; qui, invece non vorrei che lo facesse... :master:

non so per quale strano motivo ma ora non da più quel problema di comparire per poi partire con il fadein!!

Rimane il problema di quando ricarico la stessa pagina tramite post (non voglio che compia di nuovo l'effetto)

inoltre ho scoperto che con Safari l'effetto fade genera un problema. Ora l'ho testato con Safari e Firefox (funzionante). Il problema con Safari è che una volta terminato l'effetto fade, la div si rimpicciolisce e ne rimane solo una parte, come se cambiassi le dimensioni del contenitore al termine dell'effetto FadeIn.

Che ne dite?

**semolino** · 10-07-2006, 21:48

Ho messo finalmente le pagine online per testarle cosi potete vedere anche voi.
Provate con firefox e poi con safari. Come mai accade quel che accade?
In safari appena finisce di caricare la div diventa piccola. A quel punto entrale con il mouse nella div e fate come per selzionare la finestra... magicamnte ricompare... ma che cosa mi significa tutto ciò? Come mai?

click e poi cliccate STAFF dal menu. Il codice quiu sotto è riferito al quella pagina.

Codice PHP:


<script type="text/javascript">

function visualizzaDiv(){

  objDiv=document.getElementById('FadeIn');

  opacity('FadeIn', 0, 100, 1500);

  objDiv.style.display='block';

}

window.onload=function(){ setTimeout('visualizzaDiv()',1000);}

</script>

</head>

<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">



<?php require(DIR_AV_INCLUDES . 'header.php'); ?>

 





<table id="Table" width="760" height="550" border="0" cellpadding="0" cellspacing="0" align="center">

    <tr><td width="760" height="550">

<table id="Table_01" width="760" height="550" border="0" cellpadding="0" cellspacing="0" align="center">

    <tr>

        <td width="58" rowspan="2"></td>

        <td width="157" rowspan="3" align="left" valign="top"><?php require(DIR_AV_INCLUDES . 'site_menu.php'); ?></td>

        <td height="25"></td>

        <td height="25"></td>

        <td height="25"></td>

    </tr>

    <tr>

        <td width="26"></td>

        <td width="493" height="499" id="content_box" align="left" valign="top">

        <div id="FadeIn" style="display:none;"><?php require(DIR_AV_BOXES . 'chi_siamo.php'); ?></div></td>

        //...

Grazie.

**dvjack** · 16-07-2006, 14:06

ciao, scusa se rispondo solo ora ma non mi ero accorto del tuo messaggio...

cmq analizziamo i problemi uno per volta:
- (il div si vede, scompare e poi con effetto fade-in ritorna visibile):
una soluzione potrebbe essere di impostare via css il div inizialmente con opacità 0, in modo che non sia visibile.
- (il div non faccia effetto fade-in se la pagina è stata postata):
devi discriminare via php questo caso, magari facendo un print diverso

Codice PHP:


if(isset($_POST['campo'])){ echo "window.onload=function(){ setTimeout('visualizzaDiv()',3000);}";}

else { echo "window.onload=function(){ setTimeout('visualizzaDiv2()',0);}";}

dove visualizzaDiv2() è un'altra funzione javascript che setta a display='block' del div e porta a 100% l'opacita, in modo che sia visibile.

Purtroppo non utilizzo safari, quindi non posso aiutarti per l'altro problema..

**semolino** · 17-07-2006, 17:51

Per la seconda ok.
Per la prima, invece, è già cosi. All'ingresso della pagina pongo il div in dispaly none.
Ma continua a dare lo stesso problema.

**dvjack** · 18-07-2006, 12:39

quello che intendo io è di non agire solo sul display:none, ma anche sull'opacità del div, andando a settare i vari filtri a 0...quelli che vengono aumentati con la funzione opacity, per intendersi

Discussione: Div a comparsa

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio