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
 Hmmm.

För mig ser det inte ut som om du har uppdaterat padepage.js enligt mitt senaste försök. Därför skickas fel typ av argument, och ett fel uppstår... Prova att ändra fadepage.js till att innehåll exakt den koden som jag postat senast (om möjligt med ändringen från window.onload=initFade; till $(initFade);).

Då hoppas jag att det ska fungera bättre.

Simon

 
Nu borde jag ha gjort rätt! (eller inte)

Jo, iWeb tog bort head koden, men jag har satt dit den nu igen och ska inte uppdatera sidan förrän du hunnit kolla på det. Funkar inte fortfarande.

Ska göra research på explicit i iweb. Hoppas dock att jag ska kunna flytta över allt till DW. Men jag är rädd att jag inte jag är nog skicklig att få till huvudsidan så att den ser fin ut i alla webläsare. Börar bli bråttom dessutom, sidan ska vara klar om 2 veckor.

Hade jag inte fått din hjälp vet jag inte hur sidan hade sett ut...

/Erik


 
Det verkar vara två saker som är fel:

* fixFade-function på huvudsidan verkar ha försvunnit (iWeb? ...). Den är essentiell för effekten.

* Jag råkade, för fix 2, skriva $(initPage) istället för $(initFade), vilket får till följd att fade-functionen inte laddas alls.

Vad menar du förresten med att det andra fungerade galant? Punkt 1 och 3? Lite tvetydigt..

Och finns det verkligen inget sätt att från iWeb lägga in kod explicit, så att den inte skrivs över?

Simon

 
Ändringar gjorda, får dock inte igång scriptet. Har testat med transparent, none, auto osv...

Kanske jag fattade fel när jag klistrade in dina extrakoder för att lösa problem nr2. Det andra löstes ju galant:)

Tog bort stylen. tack

/Erik


 
Okej, nytt försök (jag postar all kod igen, så jag slipper beskriva var ändringar ska ske):

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(toloc);}; //Använder extern function istället
fade(whitescreen,0,100,4,5,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);


parent.parent.fixFade(window,1);

if($_GET['fade']=='yes'){
whitescreen.style.visibility="visible";blockall=true;
fade(whitescreen,100,0,4,5,function(){whitescreen.style.visibility="hidden";blockall=false;});
}
}

window.onload=initFade;


På meny-sidan (meny.html):

Lägg till onload="parent.parent.fixFade(window,2);" i <body>

På huvudsidan (/Demomix.se.html):

Lägg till i <head>:

<script type="text/javascript">
fLinkState=0;
fMwin=null;
fOwin=null;
function fixFade(a,b){
fLinkState|=b;
if(b==2)fMwin=a;
else fOwin=a;
if(fLinkState==3){
fLinkState=7;
fFixMenu(fMwin);
}
}

function fCapLinks(href){
fOwin.capLinks(href);
}

function fFixMenu(menu){
var twin=window;
var links=menu.document.getElementById("roll").getElementsByTagName("a");
for(var i=0;i<links.length;++i){
if(links[i].href.indexOf('#')==-1)
links[i].onclick=function(){twin.fCapLinks(this.href);return false;}
}
}
</script>

Det borde fixa punkter 1 och 3. Punkt 2 däremot blir svårare. Det är troligt att det finns något sätt att bli kvitt med det helt, men det är extremt jobbiga sådana... Du skulle i alla fall kunna prova detta:

* Byt ut:
window.onload=initFade;
mot
$(initPage);
och inkludera jQuery på varje sida före du inkluderar fadepage.js.

* På raden före, lägg
if(document && document.documentElement && $_GET['fade']=='yes')document.documentElement.style.backgroundColor='black';
och i functionen initPage, precis under
if($_GET['fade']=='yes'){
lägger du
document.documentElement.style.backgroundColor='transparent';

(Jag är faktiskt inte helt säker på att det ska vara just 'transparent'. Prova även '', 'none', 'inherit','auto' eller den färg som du faktiskt har på bakgrunden, t.ex. 'white'.)

* Om ingenting fungerar kan du ju alltid testa effekten med 'white' istället för 'black' ("Replace"-kommandot, ofta Ctrl+H/G).

Simon

PS. På rad 29 i bloggen finns en felaktig </style>. Du borde ta bort den. DS.

 
Har brutit ner problemen till 3 fel:1. <a href# laddar om menyn i iframen + 2. sidorna blinkar till ibland med full alpha mitt i faden. Detta kommer oregelbundet. 3. Plötsligt efter lite surfande så slutar iinfadningen, dv det går till svart sedan klipper det till vitt direkt.

Hoppas detta an vara till hjälp. Jag giller det som tusan när det funkar!!


Jo den gamla koden är borta, men bara tillfälligt. Eftersom iweb suger och skriver över javascripten när man uppdaterar sidan så försvinner dem. Men jag skriver in dem där igen när allt är klart.

Önskar att jag kunde flytta över allt till dreamweaver. Hade varit jävligt skönt.

/Erik

 
Hej!

Har uppdaterat exakt som du skrev. Jag hatar iweb, när man lägger till en widget eller ta bort en så ändras namnen på de andra. Lade till en Flashspelare nu och då blev helt plöstligt inforuta widget1.

Men jag hittar ingenstans i koden som det behövs specifieras? Widget1 alltså. Har du löst det på något annat sätt!?

Det händer grejjer på sidan, men det är inte felfritt. kolla själv, lämnar det som det är tills du fått en chans att felsöka.

tack! :)

/Erik


 
Hmm... Du har ett par fel i din kod:

* Du har flera <div id="container"> i din meny (du ska bara ha en, runt ALLA länkarna). Per definition kan bara ett element ha ett specifikt id.

* Koden verkar inte hitta frames['widget3-frame']. Jag antar att det är samma problem som när jag förut gjorde sökmotors-funktionen, att FF inte hittar elementet på det sättet (förresten, har du tagit bort den? Iaf. mixning.html verkar inte skicka användaren till huvudsidan). Lösningen (den enklaste), är så här, omskriven från min andra bugfix:

I fadepage.js (postar om koden för enkelhet):

$_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(toloc);}; //Använder extern function istället
fade(whitescreen,0,100,4,5,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 twin=window;
var fixLinks=function(pwin){
var links=pwin.document.getElementById("container").getElementsByTagName("a");
for(var i=0;i<links.length;++i){
if(links[i].href.charAt(0)!='#')
links[i].onclick=function(){twin.capLinks(this.href);return false;}
}
}

parent.parent.fixFade(fixLinks,1);

if($_GET['fade']=='yes'){
whitescreen.style.visibility="visible";blockall=true;
fade(whitescreen,100,0,4,5,function(){whitescreen.style.visibility="hidden";blockall=false;});
}
}

window.onload=initFade;


På meny-sidan (meny.html):

Lägg till onload="parent.parent.fixFade(window,2);" i <body>

På huvudsidan (/Demomix.se.html):

Lägg till i <head>:

<script type="text/javascript">
fLinkState=0;
fMwin=null;
fFixF=null;
function fixFade(a,b){
fLinkState|=b;
if(b==2)fMwin=a;
else fFixF=a;
if(fLinkState==3)fFixF(fMwin);
}
</script>

Som vanligt påstår jag att koden ska fungera :)


För att svara på dina andra frågor:

* "vad du tycker att alternativet till iframe är i detta fall"
- Att bygga sidan så att menyn och subsidan är på samma sida, helt utan frames (antagligen inkluderas meny, headers, etc. genom PHP). Det skulle helt klart kunna bli en del problem just för din sida om du t.ex. fortfarande vill ha fade-effekter och vill att musiken ska spela kontinuerligt. Dessutom skulle det kunna bli en hel del jobb med att migrera sidan, och att få det att fungera i iWeb (säkert hopplöst om det även ska läggas till menyer genom PHP, om du ens har tillgång till detta). Så i ditt fall är det kanske ingen vidare bra idé, men i regeln har det en mängd fördelar.

* "Måste ALLA subsidor ha rätt kod för att EN ska funka?"
- Fade-out-effekten fungerar bara för sidor MED koden, och kombinationen med fade-in och fade-out fungerar bara om båda sidorna som är involverade har koden (ingen fade-in effekt sker om inte fade-ut-effekt har skett innan). Så svar nej, men utan detta kan en del konstiga effekter uppkomma.

Simon

 
Fixade koden i fadepage.js, dock händer det fortfarande ingenting. Antar att det är bäst att få den att fungera först, innan jag kollar om ditt andra alternativ (för att fixa fadarna) behövs.

/Erik

 
Innan jag försöker fixa koden tänkte jag bara fråga vad du tycker att alternativet till iframe är i detta fall? Du har ju sett hur jag vill ha det vid det här laget. /Erik



 
Kul att det fungerar!

För att få in det på huvudsidan tillkommer ytterligare trubbel, inte bara är target-framen i en dubbel iframe, menyn ligger i en annan, som ligger i ytterligare en...

Så här tror jag att du kan få koden att fungera:


var pwin=parent.parent.frames['widget3-frame'].frames['meny'];
var links=pwin.document.getElementById("container").getElementsByTagName("a");
for(var i=0;i<links.length;++i){
if(links[i].href.charAt(0)!='#')
links[i].onclick=function(){pwin.parent.parent.frames['widget2-frame'].frames['inforuta'].capLinks(this.href);return false;}
}

Observera att för att få det att fungera måste du sätta ett name="" på din meny-frame, som ligger i "widget3". Det skulle med den här koden kunna bli lite problem med att den första fade:n inte uppkommer. Det beror på att menyn laddar EFTER att scriptet har kört (ytterligare en anledning att avhålla sig från frames, om man kan). Så här kan man göra för att lagra klar-status i parent, och köra koden när båda frame:arna har laddats:

I fadepage.js:

Ta bort koden vi skrev om tidigare, och skapa en function högst upp i scriptet med innehållet:

function fixLinks(){
//[ Koden ]
}

Där borttagning skedde, lägg istället till:

parent.parent.fixLinks(window);

På meny-sidan:

Lägg till onload="parent.parent.fixLinks(1);" i <body>

På huvudsidan (/Demomix.se.html):

Lägg till i <head>:

<script type="text/javascript">
linkState=0;
function fixLinks(a){
if(linkState==0)linkState=a;
else{
if(linkState==1)linkState=a;
linkState.fixLinks();
}
}
</script>

Det är inte helt säkert att det behövs, men den borde fixa problem som kan uppkomma. Koden är otestad, men kan fungera ;)

Hoppas det löser sig.

Simon

 
Och nu kommer problemet med att feta in detta på huvudsiadan.

Har gjort föjande justeringar:

var links=parent.document.getElementById("container").getElementsByTagName("a"); //Lagt till "parent." framför.
var pwin=parent.parent;
for(var i=0;i<links.length;++i){
if(links[i].href.charAt(0)!='#')
links[i].onclick=function(){pwin.frames['widget2-frame'].frames['inforuta'].capLinks(this.href);return false;}
}

Har även testat parent.parent.document utan resultat. Samt lagt container diven i menyn.

Måste ALLA subsidor ha rätt kod för att EN ska funka? Tänkte att under produkter och tjänser har jag ju precis samma subsidor som på testsidan där det fungerade, men har inte gjort ändringar i de andra subsidorna. Tycker det borde funka ändå på mixning, mastring, konsultering och priser...


Snart så!
/Erik

 [förkortat för längd]


Postat av Simon (85.224.35.7) den 18 Mars, 2009 kl 22:32:18.
Som svar på: Re: Iframe med Javascript postat av Erik den 18 Mars, 2009 kl 19:00:16.


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 ]