Till Startsidan

Skaffa webbhotell?
Läs JavaScript.nu's jämförelse av webbhotell.
Med priser från
9 kr / månad.

Genom ett samarbete får alla JavaScript.nu-
besökare dessutom 100 kr i rabatt vid beställning.


Re: Iframe med Javascript

[ JavaScript.nu's Forum ] [ Viktigt om forumet ] [ JavaScript.nu's Startsida ]


Forum / Iframe med Javascript
 
*Med "Observera att adressen måste inkluderas" menar du helt enkelt att man ska hämta fadepage.js i alla subsidor?

Precis. Litet typo bara.

*de här div id="container", menar du att jag ska stoppa dessa runt varje länk som leder till en subsida? alltså:
<div id="container"><a href="http://www.demomix.se/demofiler/mixning.html", target="prodruta">Mixning</a></div>? eller har jag fattat helt fel..?

Nej, <div id="container">...[ALLA länkar]</div>. Om du inte har fler länkar på sidan kan du också strunta i detta och ha kvar getElementsByTagName-satsen som den är. Förresten tog du bort ".document", detta ger ett fel på sidan just nu. Byt ut:
parent.getElementById("container").getElementsByTagName("a");
mot
parent.document.getElementById("container").getElementsByTagName("a");
alternativt
parent.document.getElementsByTagName("a");

*Måste jag göra någon CSS #container eller räcker det med att jag skriver som ovan?

Nej, ingen CSS behövs.

*Måste jag lägga in fadepage.js på huvudsidan som innehåller iframen eller BARA på subsidorna som ska öppnas I iframen? Samma fråga ang onbeforeunload="". Dessa sja över huvud taget inte finnas med någon annan stans än på subsidorna?

Nej, ändra bara subsidorna.

*Är det här rätt skrivet?: <body onbeforeunload="";> ?

Nästan;

<body onbeforeunload="">

(utan ;, vilket inte bör vara där, men som dock inte skadar - översätts till <body onbeforeunload="" ;=""> av Firefox)

*är det någon fler variabel än [prodruta] dvs iframens namn i fadepage.js som jag måste justera om jag vill appplicera detta på inforuta sedan när det funkar?

Eftersom inforuta ligger ett till steg ner (i en frame i en frame), så behöver
parent.parent.
användas istället för
parent.
och så behöver förstås
frames['widget1-frame'].frames['Inforuta']
användas istället för direkt
frames['Inforuta']

Men antagligen inget annat.

(vi testar allt på den här enkla sidan http://www.demomix.se/demofiler/produkterny.html så jag vet att det funkar)

Prova att fixa andra punkten, så kan jag felsöka och se vad problemet är (om det inte fungerar direkt vill säga, men det kommer det ju enligt Murphys lag inte göra).

Simon

 
Har testat allt utan resultat:(

Kontrollfrågor:

*Med "Observera att adressen måste inkluderas" menar du helt enkelt att man ska hämta fadepage.js i alla subsidor?

*de här div id="container", menar du att jag ska stoppa dessa runt varje länk som leder till en subsida? alltså:
<div id="container"><a href="http://www.demomix.se/demofiler/mixning.html", target="prodruta">Mixning</a></div>? eller har jag fattat helt fel..?

Måste jag göra någon CSS #container eller räcker det med att jag skriver som ovan?

Måste jag lägga in fadepage.js på huvudsidan som innehåller iframen eller BARA på subsidorna som ska öppnas I iframen? Samma fråga ang onbeforeunload="". Dessa sja över huvud taget inte finnas med någon annan stans än på subsidorna?

Är det här rätt skrivet?: <body onbeforeunload="";> ?

är det någon fler variabel än [prodruta] dvs iframens namn i fadepage.js som jag måste justera om jag vill appplicera detta på inforuta sedan när det funkar?

(vi testar allt på den här enkla sidan http://www.demomix.se/demofiler/produkterny.html så jag vet att det funkar)

Tack för hjälpen än en gång.

/Erik

 
Oj, råkade visst ta bort kommentarerna när jag uppdaterade koden...

Prova att lägga det här i 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);
}
}

function gotoLoc(loc){ //Extern function nu
if(typeof window.onbeforeunload=='undefined')whitescreen.style.visibility="hidden";
location.replace(loc); //Förut location=toloc;
}

blockall=false;
function fadeToLoc(loc){
blockall=true;
whitescreen.style.visibility="visible";
var toloc=loc+(loc.indexOf("?")!=-1?"&":"?")+"fade=yes";
var f=function(){gotoLoc(loc);}; //Använder extern function istället
fade(whitescreen,0,100,4,10,f);
}

function capLinks(href){
if(!blockall)fadeToLoc(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="black"; //Ändring från "white"
document.body.appendChild(whitescreen);
var links=parent.document.getElementsByTagName("a"); //Lagt till "parent." framför.
for(var i=0;i<links.length;++i){
if(links[i].href.charAt(0)!='#')
links[i].onclick=function(){frames['prodruta'].capLinks(this.href);} //Lagt till test för #-adresser.
}
if($_GET['fade']=='yes'){
whitescreen.style.visibility="visible";
fade(whitescreen,100,0,4,10,function(){whitescreen.style.visibility="hidden";});
}
}

window.onload=initFade;


Observera att adressen måste inkluderas (och onbeforeunload måste läggas till) på alla subsidor, inte bara den första. Utan detta finns ingen effekt alls.
Dessutom kan det i nuläget bli lite problem med att alla adresser på parent-sidan öppnas i framen, pga. ett inte alltför avancerat JavaScript. Antagligen kan du fixa detta genom att byta
parent.getElementsByTagName("a") till något mer intelligent, eg.
parent.getElementById("container").getElementsByTagName("a") , och lägga de ombytta länkarna i en <div id="container">.

Jag har inte testat koden, men den borde fungera. ;)

Simon

 
Är inte säker på vilka kommentarer du menar, hittar inget i JS koden, och annars var det väl bara "

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="">).

"

detta har jag implementerat.

Nu hämtar jag pagefade.js från alla subsidor + att onbeforeunload="" ligger i bodyn på subsidorna, ingen kod/text på huvudsidan. thats all.

Var det något mer du skrev som jag inte har hittat?

/Erik

 
Heh, antagligen har du inkluderat JS-filen från fel sida (den ska inkluderas från subsidorna). Ingenting ska stå i onbeforeunload="", koden är bara till för att ladda om sidan helt, som jag skrev om förut.

Har du prova att lägga till det som jag skrev om i kommentarerna? Prova att lägga till det så kan jag nog felsöka sidan, jag har säkert lyckats glömma något i ändringen av koden.

Simon

 
Här händer det grejor...

Vi testar scripten på den här enkla sidan istället så blir det enklare att felsöka: http://www.demomix.se/demofiler/produkterny.html


/Erik

 
Hej Simon!

Har testat, men upplever inte någon skillnad, är detta en väldigt subtil fade eller måste jag ställa in parametrar innan det syns?

Frågor:

Ska fadepage.js vara oförändrad?

Ska javascripten läggas I iframen? dvs mellan <iframe> och </iframe>? eller ska den läggas på sidan som innehåller iframen? Eller på subsidorna? har testat allt!

I onbeforeunload="", ska jag skriva in något i "" eller bara låta det vara? Ska jag ersätta något med denna kod eller lägga den utöver?


/Erik



 
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


Postat av Simon (85.224.35.7) den 13 Mars, 2009 kl 22:05:53.
Som svar på: Re: Iframe med Javascript postat av Erik Wiss den 13 Mars, 2009 kl 21:10:07.


Svar på inlägget:

Posta ett svar:

Namn:
E-Mail:
Rubrik:
Meddelande:
Ja tack, maila mig om andra svarar på detta inlägg.
Ja tack, maila mig om andra svarar på mitt inlägg.

[ JavaScript.nu's Forum ] [ Viktigt om forumet ] [ JavaScript.nu's Startsida ]



Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]