CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

punnishment Nybegynder

27. august 2008 - 16:41 Der er 6 kommentarer

Flytte et objekt der er tildelt position relative

Jeg forsøger at flytte et objekt der er tildelt position relative når der scrolles i både FF og IE 7. Jeg har overvejet at bygge hele designet om og opbygge det efter position:absolute, men jeg ville lige give det en chance her, før jeg går igang med det store arbejde.

Det skal siges at jeg både har fået det til at virke i IE 7.0 og FF, men ikke på samme tid når det gælder om at flytte en position:relative. Under mine forsøg har jeg konstateret at doctypen har en stor betydning.

Hele hjemmesiden blev designet under følgende doctype hvor det virkede i IE 7.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Og senere fandt jeg ud af at jeg skulle skifte over til følgende doctype for at få samme kode til at virke i FF
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

i FF benyttes
window.pageYOffset
this.style.setProperty('top',y,'');

i IE benyttes
document.documentElement.scrollTop;
this.style.top=y;

Jeg har prøvet at lege lidt med document.body.scrollTop i IE, men den har heller ikke rigtig fungeret.

Er der nogle der kender til problemet og som evt. har nogle links hvor man kan læse nærmere omkring emnet?

Synes godt om

olebole Juniormester

27. august 2008 - 17:49 #1

<ole>

At skifte til position absolute, vil udelukkende give dig bunker af andre problemer på længere sigt.

DTD nummer to disable'er de vigtigste dele af CSS i IE, så den er nok ikke god at bruge. Bruger du den første, skal dokumentet serves specielt - og din scripting skal tilpasses XML-DOM.

Du er nok nødt til at vise et link, hvis du vil have forslag til en løsning =)

/mvh
</bole>

Synes godt om

punnishment Nybegynder

28. august 2008 - 00:08 #2

Jeg har ikke et link, da hele siden ligger på min lokale server. Domæne og server-plads er endnu ikke købt. Men jeg har løst problemet, og det virker nu både i FF og IE 7.0, men jeg vil meget gerne forstå problemet, så hvis du har nogle gode links må du meget gerne poste dem her...

Jeg har brugt følgende DTD og min object er tildelt position:relative. Desuden har jeg fundet ud af at FF både understøtter setProperty og style.top (hvad er forskellen?)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Hvis jeg tilføjer et link til DTD'en ("http://www.w3.org/TR/html4/strict.dtd") virker det lige pludselig ikke? Men som du selv siger så virker det som om IE disabler vigtige css kommandoer. En simpel ting som margin: auto; centrere ikke længere layoutet, men med små work-around-hacks har jeg løst problemet
body {text-align:center}
div {text-align:left}

Jeg vil lige sende min scroll kode, så må du se om du har en bedre løsning som indebærer brug af den førte DTD, hvor der naturligvis skal ske en tilpasning til XHTMLen.

function JSFX_FloatTopDiv()
{
startY = 0;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(y){
if(ns) this.style.setProperty('top',y,'');
else this.style.top=y;
};
el.y = startY;
return el;
}

window.stayTopLeft=function()
{
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
ftlObj.sP(ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topBasket");
stayTopLeft();
}
window.onload = JSFX_FloatTopDiv();

Løkken kører uendeligt, men jeg har ikke kunnet kommet uden om dette. window.onscroll virker fuldstændig ligesom window.onload, og ikke som man skulle tro at der blev foretaget et kald til funktionen hvergang der scrolles.

Synes godt om

olebole Juniormester

28. august 2008 - 00:23 #3

For det første bør du helt klart sørge for, IE6 sættes i standard compliant mode med en DTD som denne:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Dernæst skal du altid bruge enheder, når du sætter en style property - f.eks:

el.sP=function(y){
this.style.top=y+"px";
};

Scriptet synes iøvrigt at være tussegammelt =)

Hvis jeg skal hjælpe yderligere, må du uploade dokumentet - og du kan jo bare uploade på et gratis sted (søg på Google)

Synes godt om

punnishment Nybegynder

28. august 2008 - 01:05 #4

Her er et toptunet script der både virker i FF og IE 7.0, med den DTD du angiver. Alt det "gamle" er slettet, men jeg vil stadig meget gerne undgå at bruge setTimeout som setInterval. Løkken skal stoppe efter forskellen mellem lastpY og nuværende pY kommer under et bestemt interval. Men problemet er bare hvordan starter jeg løkken igen?

Som nævnt tidligere fungerer window.onscroll ikke?

Synes godt om

punnishment Nybegynder

28. august 2008 - 01:05 #5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
margin: auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
}

#page {
margin: 50px auto;
width:960px;
border:1px solid #000000;
}

#topElm {
position:relative;
z-index:100;
float:right;
width:100px;
height:40px;
border:1px solid #00000;
background-color:#efefef;
}

</style>
</head>
<body>

<div id='page'>
<h1>Name</h1>

<div id="topElm">Flyt det her</div>

<script type="text/javascript">
function JSFX_FloatTopDiv()
{
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById(id);
el.sP=function(y){
this.style.top=y+'px';
};
el.y = startY;
return el;
}

window.stayTopLeft=function()
{
var pY = ns ? pageYOffset : document.documentElement.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
ftlObj.sP(ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topElm");
stayTopLeft();
}
JSFX_FloatTopDiv();

</script>

        
        
        
        
        

</div>
</body>
</html>

Synes godt om

punnishment Nybegynder

28. august 2008 - 01:38 #6

problemet er løst ved at smide window.onscroll i et <script></script> tag i headeren, derved kaldes funktionen hvergang der scrolles i browseren. Du må stadig meget gerne se koden igennem for optimering, hvis du gidder.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS