Salve a tutti,
mi ritrovo a dover utilizzare due script per ottenere due effetti in
una pagina web:
- il primo utilizza MooFX e lo uso per gli ormai diffusissimi pannelli
a scomparsa che si trovano a inizio pagina (vedi es.
http://techfoolery.com o l'italiano http://tomstardust.com)
- il secondo utilizza uno scrit fade.js basato sul codice di
http://www.couloir.org/ e riadattato da
http://www.clagnut.com/blog/1299/ per ottenere un effetto fade sul
caricamento di immagini corredato anche da un immaginetta di loading
stile web2.0
Bene il problema è che stranamente (mai successo prima) su explorer
tutto funziona normalmente,mentre in firefox.. il pannello a scomparsa
non è fluido ma va a scatti, cioè si apre e si chiude con molta
difficoltà. Se non inserisco l'effetto fade il pannello torna a
funzionare in maniera fluida.
La situazione della mia pagina tralasciando l'inutile è piu o meno
questa:
codice:
<title>pagina prova</title>
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/pannello.js " type="text/javascript"></script>
<script type="js/fade.js "></script>
<div id="pannello">
<div id="contenuto-pannello">
</div>
</div>
<div id="container">
<div id="grande">
</div>
</div>
Questo il contenuto dello script pannello.js
codice:
var opened=false;
window.onload = function() {
resizeDivHeight = new fx.Height('pannello',{duration:2000});
};
function toggelopen(){
if(opened==false){
resizeDivHeight.custom(0,200);//First Number is starting
height, Second is ending height.
opened=true;
}else{
resizeDivHeight.custom(200,0);//First Number is starting
height, Second is ending height.
opened=false;
}
}
E questo il contenuto dello script fade.js
codice:
/*
Better(?) Image fader (C)2004 Patrick H. Lauke aka redux
Inspired by Richard Rutter / Clagnut http://www.clagnut.com/blog/1299/
Original concept and code adapted from Couloir http://www.couloir.org/
preInit "Scheduler" idea by Cameron Adams aka The Man in Blue
http://www.themaninblue.com/writing/...ve/2004/09/29/
*/
/* general variables */
var fadeTargetId = 'grande'; /* change this to the ID of the fadeable
object */
var fadeTarget;
var preInitTimer;
preInit();
/* functions */
function preInit() {
/* an inspired kludge that - in most cases - manages to initially hide
the image
before even onload is triggered (at which point it's normally too
late, and a nasty flash
occurs with non-cached images) */
if
((document.getElementById)&&(fadeTarget=document.getElementById(fadeTargetId)))
{
fadeTarget.style.visibility = "hidden";
if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer);
/* thanks to Steve Clay http://mrclay.org/ for this small Opera fix */
} else {
preInitTimer = setTimeout("preInit()",1);
}
}
function fadeInit() {
if (document.getElementById) {
/* get a handle on the fadeable object, to make code later more
manageable */
preInit(); /* shouldn't be necessary, but IE can sometimes get ahead
of itself and trigger fadeInit first */
/* set the initial opacity in a (hopefully) cross browser way
notice that because of the way the image is in front, and not
obfuscated
by another object we need to "fade out", i don't need a fallback
mechanism
to show/hide the covering object...the image is just there, full
stop */
if (fadeTarget.style.MozOpacity!=null) {
/* Mozilla's pre-CSS3 proprietary rule */
fadeTarget.style.MozOpacity = 0;
} else if (fadeTarget.style.opacity!=null) {
/* CSS3 compatible */
fadeTarget.style.opacity = 0;
} else if (fadeTarget.style.filter!=null) {
/* IE's proprietary filter */
fadeTarget.style.filter = "alpha(opacity=0)";
}
/* make the object visible again */
fadeTarget.style.visibility = 'visible';
window.setTimeout("fadeIn(0)", 500);
}
}
function fadeIn(opacity) {
if (fadeTarget) {
if (opacity <= 100) {
if (fadeTarget.style.MozOpacity!=null) {
/* Mozilla's pre-CSS3 proprietary rule */
fadeTarget.style.MozOpacity = (opacity/100)-.001;
/* the .001 fixes a glitch in the opacity calculation which
normally results in a flash when reaching 1 */
} else if (fadeTarget.style.opacity!=null) {
/* CSS3 compatible */
fadeTarget.style.opacity = (opacity/100)-.001;
} else if (fadeTarget.style.filter!=null) {
/* IE's proprietary filter */
fadeTarget.style.filter = "alpha(opacity="+opacity+")";
/* worth noting: IE's opacity needs values in a range of 0-100, not
0.0 - 1.0 */
}
opacity += 10;
window.setTimeout("fadeIn("+opacity+")", 30);
}
}
}
/* initialise fader by hiding image object first */
addEvent (window,'load',fadeInit)
/* 3rd party helper functions */
/* addEvent handler for IE and other browsers */
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
}
}
------------
Su explorer tutto fila liscio... su firefox pannello scattoso.. mi date
una mano?
Grazie mille