| | Jo, det går, även om det blir lite klumpigt. Jag har faktiskt gjort detta tidigare, så med lite ändringar ser koden ut så här för att få det att fungera. I nuvarande formen fungerar koden endast med fria sidor (dvs. inte frames), men det borde vara ganska enkelt att ordna. Jag har försökt kommentera de ställen där detta kan fixas. fadepage.js: $_GET=[];
var searchp=location.search.substr(1).split("&");
for(var i=0;i<searchp.length;++i){
var tmpp=searchp[i].split("=");
$_GET[unescape(tmpp[0])]=unescape(tmpp[1]);
} function setOpacity(obj,value){
if(typeof obj.style.opacity!="undefined")obj.style.opacity=value/100;
else if(typeof obj.style.MozOpacity!="undefined")obj.style.MozOpacity=value/100;
else if(typeof obj.style.filter!="undefined")obj.style.filter="alpha(opacity="+(value)+")";
} whitescreen=null; function fade(obj,from,to,steps,speed,callback){
setOpacity(obj,from);
for(var i=from+1;i<to;i+=steps){
(function(){var op=i;setTimeout(function(){setOpacity(obj,op);},(op-from)*speed);})();
}
for(var i=from-1;i>to;i-=steps){
(function(){var op=i;setTimeout(function(){setOpacity(obj,op);},(from-op)*speed);})();
}
setTimeout(function(){setOpacity(obj,to);},(Math.abs(to-from))*speed);
if(typeof(callback)!="undefined"){
setTimeout(callback,(Math.abs(to-from)+1)*speed);
}
} blockall=false;
function fadeToLoc(loc){
blockall=true;
whitescreen.style.visibility="visible";
var toloc=loc+(loc.indexOf("?")!=-1?"&":"?")+"fade=yes";
var f=function(){if(typeof window.onbeforeunload=='undefined')whitescreen.style.visibility="hidden";location=toloc;}
fade(whitescreen,0,100,4,10,f);
} function capLinks(){
if(!blockall)fadeToLoc(this.href);
return false;
} function initFade(){
whitescreen=document.createElement("div");
whitescreen.style.position="absolute";
whitescreen.style.visibility="hidden";
whitescreen.style.top="0px";
whitescreen.style.left="0px";
whitescreen.style.width="100%";
whitescreen.style.height="100%";
whitescreen.style.backgroundColor="white";
document.body.appendChild(whitescreen);
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;++i){
links[i].onclick=capLinks;
}
if($_GET['fade']=='yes'){
whitescreen.style.visibility="visible";
fade(whitescreen,100,0,4,10,function(){whitescreen.style.visibility="hidden";});
}
} window.onload=initFade; På sidorna som ska fade:as (dvs. framen):
Inom <head>:
<script type="text/javascript" src="fadepage.js"></script>
I body-taggen:
onbeforeunload=""
(t.ex. <body onbeforeunload="">). onbeforeunload är en skum tagg som helt enkelt har till effekt att ladda om sidan när användaren kommer tillbaka. Utan blir antingen sidan vit när användaren återvänder eller så uppstår konstiga effekter när sidan byts. Hoppas det fungerar korrekt! Simon | |
Hade tänkt snygga till min iframe genom att låta alphan på innehåll.1 fada ut och sedan in med innehåll.2 när man klickar på respektive länk. Detta måste gå att göra i Javascript. Har gjort en enkel testsida här där jag ska laborera med detta: http://www.demomix.se/Demomix.se/produkterny.html De fyra länkarna är: Mixning, Mastring, Konsultering och Priser. Under länkarna finns en iframe. Varje länk går till en sida med iframen som target. Nu vill jag att som sagt att innehållet i framen fadar ut från en sida och in till en annan för att göra upplevelsen lite mjukare. Förslag? /Erik |
|
