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
 Hej!

Vi hade ju problem tidigare med en osynlig <div>. Men nu skulle jag behöva en synlig sådan för att täcka upp lite fula länkar som kommer med gästboken. <div style="background-image:" osv...

Hur får man bakgrunden synlig?

Följdfråga som jag troligtvis kommer att ställa efter att detta är löst: hur positionerar man diven så att den följer med sidan när man scrollar och således alltid befinner sig över samma del av sidan?

/Erik

 
Det verkar vara ett stort osynligt div som hamnat på startsidan. Hur det kan ha hamnat där har jag inte en aning om. Jag skyller på iWeb. :)

Hursomhelst, en till lista på ändringar:


* Där koden:

<div style="height: 46px; width: 46px; height: 46px; left: 835px; position: absolute; top: 619px; width: 46px; z-index: 1;>
<div style="position: relative; width: 46px; ">
<img src="start_files/shapeimage_1.png" alt="" width="22" style="height: 46px; left: 7px; position: absolute; top: -1px; width: 46px;" />
</div>
</div>

ligger, ändra & l t ; till <, och & g t ; till > (mellanslag för att undvika buggar i forumet...), alternativt ta bort koden. Som det är just nu tolkas koden fel i FF pga. buggen, även om jag faktiskt inte ser några riktiga fel med det.

* Ta bort

<div style="height: 800px; left: 1px; position: absolute; top: 10px; width: 900px; z-index: 1;">
<div style="background-color:#F00">
</div></div>


(divet som lägger sig ovanför).

* Ta bort

<meta name="Generator" content="iWeb 2.0.4" />
<meta name="iWeb-Build" content="local-build-20090323" />

av ingen annan anledning än att vara sur på iWeb.

* Ta bort

onload="onPageLoad();" onunload="onPageUnload();"

från <body>-taggen.


Scrollbaren som hamnar ovanför footern är troligen väldigt komplicerad att göra (det verkar vara omöjligt att skapa med vanlig CSS). Det bästa är antagligen helt enkelt att lägga footern utanför iframen, precis nedanför. Det har också fördelen (?) att hörnet inte försvinner i faden.

Simon

 
Hmm, kan du berätta varför inforutans innehåll helt plötsligt blivit blockerat, man kan inte klicka eller scrolla, som att det ligger en osynlig vägg för iframen!

/Erik


 
Såja! Nu verkar allt fungera bra. Har sållat bort alla widget-csskoder och lite annat. Footern kom fram när jag ändrade body id till overflow:visible, vet inte om det var bästa lösningen men det fungerar.

Nu äntligen var min "lilla fråga" löst.

Men hur gör jag med scrollen? Jag vill bara att scrollbaren ska sluta högre upp, innan hörnet kommer.

Mille grazie.

/Erik

 
Ditt färgval på subsidorna verkar konstigt.
color: är satt till ungefär svart, medans background-color: också är det. Din bakgrundstextur verkar inte ens finnas.
Detta gör att jag gissar att faden fortfarande är aktiv, den syns bara inte pga. den saknade texturen... Ändra detta!
Dessutom verkar din footer konstig. Jag ser inte hela texten. Det skulle kunna bero på att font-inställningar tas ifrån någon annan del på sidan, vilket inte var fallet när den låg i en iframe. Se om du kan ändra CSS för den och få det att fungera.

Simon

 
Hej! Tack för att du tog dig tid.

Har gjort alla ändringar, vissa var ju väldigt uppenbara(*doink*).

Verkar som det är kvar lite justeringar, eller så har jag missat något.

jquery ligger numera i demomix.se/demomix/jquery. Har ändrat sökväg på subsidorna.

Tack för hjälpen Simon!
/Erik


 
Okej, det här är en lista över ändringar som bör göras:

* Byt ut:
$(window).load(function(){$("#roll .sub").css({display:'none'});});
mot
$(function(){$("#roll .sub").css({display:'none'});});
Nu när det är så mycket kod på samma sida så tar det lång tid för sidan att ladda helt, vilket får som följd att menyn blir utfälld i ca. 10 sekunder. Bättre att använda $(...) eftersom oden då körs tidigare (när DOM har laddats).

* Prova att sätta name="inforuta" på din iframe, inte bara id.

* Prova att ta bort:

<!--[if IE]><link rel='stylesheet' type='text/css' media='screen,print' href='Demomix.se_files/Demomix.seIE.css'/><![endif]--><style type="text/css">
/*<![CDATA[*/
@import "Scripts/Widgets/HTMLRegion/Paste.css";
/*]]>*/
</style>
<script src="http://www.me.com/st/1/sharedassets/2.0.4/Common/Scripts/Site/iWebSite.js" type="text/javascript">
<script src="Scripts/Widgets/SharedResources/WidgetCommon.js" type="text/javascript">
</script>
<script src="Scripts/Widgets/HTMLRegion/Paste.js" type="text/javascript">
</script>
<script src="start_files/start.js" type="text/javascript">

från <head>.

* Se om http://www.demomix.se/nymeny/jquery.js existerar, det verkar inte så för mig (inkluderas från subsidor).

* Byt ut:
parent.parent.fixFade(window,1);
mot
parent.fixFade(window,1);

* Prova att ta bort:
<script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget2', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {"dotMacAccount": "erikwiss"});
//--><!]]></script>


* Ta bort raderna:
</head>
<body onload="parent.parent.fixFade(window,2);">
(från menyn), och ändra

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){
if(fOwin){
fOwin.capLinks(href);
return false;
}
return true;

}

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(){return twin.fCapLinks(this.href);}
}
}


till


fLinkState=0;
fOwin=null;
function fixFade(a){
fOwin=a;
if(fLinkState==0){
fLinkState=1;
fFixMenu();
}
}

function fCapLinks(href){
if(fOwin && fOwin.capLinks){
fOwin.capLinks(href);
return false;
}
return true;

}

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


Det var allt som jag kunde hitta som riktiga felaktigheter på rak arm. Naturligtvis innehåller sidan just nu en massa skum, konstig och onödig kod, men det borde ju faktiskt fungera som det är...

Simon

 
Det är ju självklart en hur bra idé som helst:)

Fattigt att jag inte kom på det.

Tog den gamla demomix.se.html som template och började klippa och klistra. Du kan se resultatet på www.demomix.se.

Koden är en enda stor helvetessoppa, menyn targetar inte inforuta och det finns garanterat hur mycket överflödig kod som helst, MEN allt är på rätt ställe och beter sig rätt i IE och det hade tagit flera veckor att fixa från start.

Så nu ber jag vänligast om lite hjälp med att rensa upp på i koden och att få menyn och faden att fungera igen.

Så börjar det vara klart!

Tack
/Erik


 
Jag menar att du skulle kunna ta backupen på huvudsidan och byta ut alla iframes mot det som finns i dem, det borde väl gå?

Tyvärr sitter jag på en alternativ dator just nu där jag bla. har skärmupplösningen 800x480 (!), och dessutom medvetet har disablat Flash (ganska skönt, faktiskt), så jag kan tyvärr inte riktigt kolla resultatet just nu (jag kollar någon gång i morgon).

Position:absolute bör du helt klart undvika, det enda som det bör användas till är JavaScript-positionering och att sätta något värde till 0 för att få en kant-effekt.

Förresten fungerar just nu inte fade-effekten, det verkar som om du glömt inkludera jquery.js.

Simon

PS. På grund av nämnda skärmupplösning får jag dålig överblick, så jag ursäktar eventuella flummigheter i texten...

 
Hej! Jag har backupper på allt själv, det är bara att jag måste skriva om huvudsidan i html.

Har lyckats lägga bannern i mitten och få den att se likadan ut i IE och FF, hurra! gjorde det genom att i #body lägga text-align:center; och i varje div som ska centreras: margin: 0 auto;

Men jag har kört fast sen på hur jag ska aligna objekt med bannerns vänstra resp. högra kant. Nu har jag position:fixed, left:ett antal pixlar, och det ser så oprecist ut...

Du borde kunna se huvudsidan på www.demomix.se, allt är som sagt lite felplacerat, men sidan är uppe.

/Erik

 
Ganska irriterande ja, men grunden är ju lagt i vilket fall som helst.
Om det behövs kan du även ladda ner min (ganska gamla) kopia av några av projekt-filerna från http://simonsoftware.se/other/Demomix.se.html, Ctrl+S i Firefox ska fungera. Allt utom inforuta kan förresten läggas utanför iframes, och jag tror faktiskt att scripten kan fungera så gott som helt utan ändringar (det enda som bör ändras är i menykoden, där parent.parent. ska tas bort).

Tyvärr är sidan offline, så jag kan inte riktigt hjälpa dig med första problemet, men jag kan titta på det när den kommer online. Det ser iallafall ut som om koden bör vara korrekt, men det är svårt att se alla småändringar (eller brist på sådana).

Simon

 
Innan du börjar....
Igår var jag tvungen att reboota mitt os, och föga överraskande kan iWeb inte öppna projekt efter att man reinstallerat iweb. Dvs jag måste bygga om allt som är gjort i iweb från början. Som tur är har jag fört över det mesta till DreamWeaver och ren html. Men huvudsidan, www.demomix.se/start.html, som den nu heter måste jag göra i dreamweaver. Ska skrota iWeb totalt om man måste börja om från 0 så fort man rebootar systemet, det är ju sjukt.

MEN nu när vi har chansen att göra något bra av detta så måste jag fråga om man kan undvika några av följande iframes som startsidan består av:
iframe1: banner
iframe2: meny
iframe3: inforuta
iframe4: flashplayer

Detta innebär att parent.parent måste ändras fadepage.js.

Jag förstår om du vill skjuta mig nu, men jag tror det är till det bättre att köra allt i DW, så slipper jag köra applescript med textwrangler för att lägga tillbaks koderna efter varje publish.

/Erik


 
Nu har menyn börjat blinka igen, kan du bara kolla igenom koderna jag postar här så att de stämmer. Det ska vara de aktuella.

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.zIndex=1000;
whitescreen.style.visibility="hidden";
whitescreen.style.top="0px";
whitescreen.style.left="0px";
whitescreen.style.width="100%";
whitescreen.style.height="100%";
whitescreen.style.backgroundImage='url(http://www.demomix.se/demofiler/browsertexture.jpg)'; //Ändring från "white"
document.body.appendChild(whitescreen);


parent.parent.fixFade(window,1);

document.documentElement.style.backgroundColor='transparent';
document.documentElement.style.backgroundImage='none';
if($_GET['fade']=='yes'){

whitescreen.style.visibility="visible";blockall=true;
fade(whitescreen,100,0,4,5,function(){whitescreen.style.visibility="hidden";blockall=false;});

}
if(document && document.body)document.body.style.visibility='visible';
}

$(initFade);

Meny.html

<body onload="parent.parent.fixFade(window,2);">

Huvudsida, demomix.se.html:

<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){
if(fOwin){
fOwin.capLinks(href);
return false;
}
return true;

}

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(){return twin.fCapLinks(this.href);}
}
}
</script>

Subsida:

<head>
<script type="text/javascript">
if(document && document.documentElement)document.documentElement.style.backgroundImage='url(http://www.demomix.se/demofiler/browsertexture.jpg)';</script>
<script type="text/javascript" src="http://www.demomix.se/nymeny/jquery.js"></script>
<script type="text/javascript" src="http://www.demomix.se/demofiler/fadepage.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mixning</title>
.........

<body>
<script type="text/javascript">
if(document && document.body)document.body.style.visibility='hidden';
</script>
<body background="http://www.demomix.se/demofiler/browsertexture.jpg"; onbeforeunload="">
____________________________________________

Jag har inte medvetet ändrat något sedan allt fungerade perfekt, så det måste blitt nå fel. Vet att jag ändrade huvudsidans bakgrund från den ljusa texturen till den mörka, och det är den som blinakr igenom ibland när man klickar i menyn. Så det kan ju vara så att det inte fungerade tidigare heller, men att den ljusa texturen bakom iframen gjorde att blinket såg ut att vara en del av faden. Skulle förståss kunna sätta ett object baom iframen med den ljusa texturen, men det känns som plan B, efter att du kollat igenom det jag postade nyss.

Tusen tack...

/Erik

 
Förresten, med de röda punkterna på menyn:

Prova att ta bort koden jag skrev om, och i slutet på CSS-filen lägga:

#roll .sub li {
color:red;
list-style-type:disc;
}

Detta verkar vara det som ska fungera, men mystiskt nog får jag inte upp något när jag ändrar i Firebug... Kanske en Firefox bug? Hur som helst kan du prova det och se om det fungerar.

Simon

 
Jag öppnade iframen i Firebug, och såg på CSS-displayen att main-content-divet hade z-index:30, vilket då hamnade ovanför fade-divet med z-index:0.
Firebug är alltid bra :)

Simon

 [förkortat för längd]


Postat av Erik (83.249.211.122) den 29 Mars, 2009 kl 13:55:50.
Som svar på: Re: Iframe med Javascript postat av Simon den 28 Mars, 2009 kl 22:03:17.


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 ]