Avatar billede sp Nybegynder
15. marts 2004 - 21:22 Der er 52 kommentarer og
1 løsning

Scroller virker ikke hvis man definere left pos i javascript

Hej.
Jeg vil gerne bruge http://www.ghtml.com/showoff/scrollbar/index.html til min hjemmeside. Men jeg vil gerne have et javascript til at finde positionen når browservinduet bliver "resized".

Et javascript som finder midten af vinduet og dermed udregner position left af scrollbaren kunne jeg få til at virke, men hvis jeg så definerer positionerne i javascript hvor OldW er midten af browservinduet virker det ikke. Kan det ikke lade sig gøre?

function posLeft (){
    var scrolbarleft = (OldW/2) + (495/2) - 15;
    var layerleft = (OldW/2) - (495/2);
    if(ie4){
    document.all.panel.style.pixelLeft = scrolbarleft;
    document.all.up.style.pixelLeft = scrolbarleft;
    document.all.down.style.pixelLeft = scrolbarleft;
    document.all.drag.style.pixelLeft = scrolbarleft;
    document.all.ruler.style.pixelLeft = scrolbarleft;
    document.all.contentClip.style.pixelLeft = layerleft;

}
    else if(dom){
        document.getElementById("panel").style.left = scrolbarleft + "px" ;
    document.getElementById("up").style.left = scrolbarleft + "px" ;
    document.getElementById("down").style.left = scrolbarleft + "px";
    document.getElementById("drag").style.left = scrolbarleft + "px";
    document.getElementById("ruler").style.left = scrolbarleft + "px";
    document.getElementById("contentClip").style.left =layerleft + "px";
}
}
Avatar billede olebole Juniormester
15. marts 2004 - 23:52 #1
<ole>

Jeg fatter en hat af, hvad dit problem er. Hvad er det, der lykkes - og hvad er det, du ikke kan få til at virke?

/mvh
</bole>
Avatar billede roenving Novice
16. marts 2004 - 00:48 #2
-- OldW er garanteret noget du har defineret, hvornår ?-)
Avatar billede sp Nybegynder
16. marts 2004 - 10:39 #3
Hej og tak for kommentarerne.

Jeg prøver lige engang til.

Scrolleren jeg har linket til har defineret left position v.h.a. style attributten /inline.

Jeg vil gerne have scrolleren i midten af vinduet. Jeg har prøvet at definere left position v.h.a. javascript (som i ser øverst), men kan ikke rigtigt få det til at virke.

v.h.a. http://www.quirksmode.org/viewport/compatibility.html har jeg fundet bredden(OldW) af browservinduet ved at finde den højeste værdi af 3 proberties:

function checkWidth(){
  var A = new Array(3);
  A[0] = document.body.scrollWidth;
  A[1] = document.body.offsetWidth;
  A[2] = document.documentElement.offsetWidth;
  var max = 0;
  for (i=0; i < A.length; i++)
        if (A[i] > max)
          max = A[i]
  return max;
}
var OldW = checkWidth();
Avatar billede sp Nybegynder
16. marts 2004 - 11:33 #4
Elementerne bliver flyttet ind på positionen, men selvom det er ikke længere muligt at scrolle ned.
Avatar billede olebole Juniormester
16. marts 2004 - 12:31 #5
Du skal jo også rette på værdierne i funktionen 'eventLoader()'  :)
Avatar billede sp Nybegynder
16. marts 2004 - 13:11 #6
hmmm... Nåååhh.. Jamen så virker det jo også....
Avatar billede sp Nybegynder
16. marts 2004 - 13:19 #7
ja tak...
onresize virker ikke i Mozilla med xhtml-strict og Opera understøtter den vist slet ikke. Jeg fandt denne løsning på nettet, den virker i IE, men jeg kan ikke få den til at virke i Mozilla.
checkWidth(); er funktionen lige ovenover:

var OldW = checkWidth();
var chkresizetimer;


function checkresize() {
  var NewW=checkWidth();
    if (NewW==OldW){

        chkresizetimer = setTimeout("checkresize()",200);
    }
    else {
        clearTimeout(chkresizetimer);
window.location.reload();
}
}
Avatar billede olebole Juniormester
16. marts 2004 - 17:17 #8
Hvad er det for en Moz-version, onresize-event'en ikke fyres af i?
Avatar billede sp Nybegynder
16. marts 2004 - 21:42 #9
Hov det er nok bare mig, hvis jeg skriver "window.onresize" så virker det i alle 3 browsere.

Der er nu stadig det problem med at sidens scroller flytter sig når man scroller det layer ned. Og en masse plads på siden i bunden som der helst ikkes skal være se
http://www.fynboe.dk/test2/index2.htm
Avatar billede sp Nybegynder
16. marts 2004 - 21:43 #10
Sådan opfører den sig ikke I IE, men i Opera og Mozilla
Avatar billede olebole Juniormester
16. marts 2004 - 22:01 #11
Jeg forstår ikke, hvad dit problem er.
Avatar billede olebole Juniormester
16. marts 2004 - 22:12 #12
Nåå .... nu forstår jeg  :)
Du sætter bare 'position:relative' på content-laget. Jeg ved egentlig ikke, hvorfor han ikke har ændret det - men jeg tror ikke rigtig, han vedligeholder den længere  :)
Avatar billede sp Nybegynder
16. marts 2004 - 22:19 #13
Så virker det i Mozilla, men ikke i Opera.
Avatar billede olebole Juniormester
16. marts 2004 - 22:42 #14
Nej, men den er simpelthen for ringe, til jeg gider beskæftige mig med den ... med mindre jeg er absolut tvunget  :)
Avatar billede sp Nybegynder
17. marts 2004 - 10:39 #15
Ja der har været mange bugs, og en del er rettet i Opera 7.20(som jeg sidder med), men desværre er der stadig nogle :)

Body var også sat til "overflow: hidden", så gav det ikke det problem. Men min side er lidt større.
Avatar billede sp Nybegynder
17. marts 2004 - 13:01 #16
Tak for hjælpen.
Point?
Avatar billede olebole Juniormester
17. marts 2004 - 13:10 #17
Har du prøvet at lægge hele scrolleren i et absolut positioneret div med overflow:hidden?
Så skal alle 'stumperne' have de oprindelige left-/top-værdier - og det nye div skal placeres dynamisk i stedet.
Det burde vel kunne gøre det i Opera  :)
Avatar billede sp Nybegynder
17. marts 2004 - 13:24 #18
hmmm altså sådan:
#globalcontainer{position:absolute; overflow:hidden}
top og left defineres i javascriptet.

<div id="globalcontainer"> //start

<div id="panel"></div>
<div id="up"></div>
<div id="down"></div>
o.s.v.
</div>//slut

Så bliver siden helt hvid... ?
Avatar billede olebole Juniormester
17. marts 2004 - 13:38 #19
Jamen, du skal sætte størrelser på div'et - ellers klapper det jo helt sammen  :)
Avatar billede sp Nybegynder
17. marts 2004 - 14:49 #20
ok. Det er gjort, men det ser ikke ud til at spile nogen rolle i Opera.
Desuden bliver det hele flyttet for langt ud til højre. Den tager left pos fra "globalcontainer"
Avatar billede olebole Juniormester
17. marts 2004 - 15:47 #21
Hvis den er for langt til højre, laver du en fejl - og/eller gør ikke, som jeg skriver
Avatar billede sp Nybegynder
17. marts 2004 - 16:10 #22
Hvorfor lægger den document.body.scrollTop og document.body.scrollLeft til i getMouse();
Er det en nødvendighed i IE 4.0 ?
Avatar billede sp Nybegynder
17. marts 2004 - 16:14 #23
Avatar billede sp Nybegynder
17. marts 2004 - 16:24 #24
Hvis jeg lægger talet fra vinduets scroller (document.body.scrollTop) sammen med tallet fra DHTML-scrolleren tror den jo at jeg har scrollet længere ned.
Avatar billede sp Nybegynder
17. marts 2004 - 16:59 #25
Nååh jeg tror godt jeg ved hvorfor ie4 skal lægge document.body.scrollTop til.

Pyt med at Opera ikke kan finde ud af det.
Jeg har før haft det "problem" med div i div med absolute position.
Avatar billede sp Nybegynder
17. marts 2004 - 19:49 #26
Nej jeg ved ikke hvorfor IE4.0 skal bruge "body-scrolleren"....
Avatar billede sp Nybegynder
17. marts 2004 - 23:22 #27
Nåh men for at den fungerer er document.body.scrollTop nødvendig når det er IE.

Jeg kan ikke få det til at virke i Opera. Men skidt nu med det.

Tak for hjælpen..
Point?
Avatar billede olebole Juniormester
17. marts 2004 - 23:50 #28
Jeg er temmelig sikker på, du har bevæget dig ud på for stor dybde ... jeg har ingen problemer med den i Opera. Den browser har mange fejl, men positionerede divs har den mig bekendt aldrig haft problemer med - hvis man bruger dem rigtigt  :)
/mvh
Avatar billede sp Nybegynder
18. marts 2004 - 10:47 #29
Jeg prøver lige at se på det. Jeg kan ikke lige se fejlen
Avatar billede sp Nybegynder
18. marts 2004 - 11:07 #30
Du er temmelig sikker på at jeg har våget mig ud på for stor dybde?

Jeg har lige testet div i div med absolute position på begge i xhtml-strict og får samme resultat.

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="da">
<head>
    <title>Nyt dokument</title>
<meta name="generator" content="TSW WebCoder" />
<style type="text/css">
/*<![CDATA[*/
#global{position: absolute; top: 20px; left: 20px; width:50px; height:50px; background-color:#00FF00; overflow:hidden;}
#inner{position: absolute; top: 20px; left: 20px;width:20px; height:20px; background-color:#00FFFF;}
/*]]>*/
</style>

</head>

<body>

<div id="global">
<div id="inner">

</div>


</div>


</body>
</html>

Derudover har jeg ændret lidt på scriptet så det virker i flere browsere.
Avatar billede sp Nybegynder
18. marts 2004 - 11:10 #31
jeg har også uploadet eksemplet her:
http://www.fynboe.dk/test2/divindiv.html
Avatar billede olebole Juniormester
18. marts 2004 - 12:08 #32
Ja, så _er_ du altså ude, hvor du ikke rigtig kan bunde. Eksemplet virker præcis, som det skal  :)
Et elements position tages altid efter det omkransende element, hvis dette er positioneret relativt eller absolut:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="da">
<head>
    <title>Nyt dokument</title>
<meta name="generator" content="TSW WebCoder" />
<style type="text/css">
/*<![CDATA[*/
#global{position: ; top: 20px; left: 20px; width:50px; height:50px; background-color:#00FF00; overflow:hidden;}
#inner{position: absolute; top: 0px; left: 0px;width:20px; height:20px; background-color:#00FFFF;}
/*]]>*/
</style>

</head>

<body>

<div id="global">
<div id="inner">

</div>
</div>

</body>
</html>

Er det ikke positioneret placeres div'et i forhold til body-elementet. Sådan fungerer positionering i CSS  :)
Derfor skrev jeg, som jeg gjorde: "Så skal alle 'stumperne' have de oprindelige left-/top-værdier" - underforstået: De skal ikke flyttes ind på midten ... det skal containeren. Alle scroller-stumper skal bare placeres i (0,0) - eller hvor du nu vil have dem placeret i forhold til contain'eren.
/mvh
Avatar billede sp Nybegynder
18. marts 2004 - 12:27 #33
Jamen så forstår jeg hvad du mener.

Du skrev: "Alle scroller-stumper skal bare placeres i (0,0) - eller hvor du nu vil have dem placeret i forhold til contain'eren."

Netop.
Avatar billede sp Nybegynder
18. marts 2004 - 12:34 #34
Men det ser ikke ud til at afhjælpe problemet med Opera. Den scroller længere nedad.
Nu er det testet og virker den ihvertfald i
IE 6.0 Windows, Mozilla 1.5 Windows
Mozilla 1.6 Linux,  Konqueror 3.2.0 Linux
Avatar billede olebole Juniormester
18. marts 2004 - 12:44 #35
Så virker den sikkert også i (i hvert fald) Moz/IE under MacOS  ;o)
Avatar billede sp Nybegynder
18. marts 2004 - 12:53 #36
Konqueror 3.2.0 Linux havde vi problemer med fordi den begyndte at afvikle document.all i det oprindelige script. Det problem er løst.

IE5 under MacOS kunne man scrolle, men teksten flyttede sig ikke.
Avatar billede olebole Juniormester
18. marts 2004 - 12:55 #37
Det lyder sært ... den har altid fungeret i IE5/MacOS  :)
Avatar billede sp Nybegynder
18. marts 2004 - 13:03 #38
også i xhtml-strict?
Avatar billede olebole Juniormester
18. marts 2004 - 13:50 #39
Ja, det gør ingen forskel, om det er i HTML eller XHTML
Avatar billede sp Nybegynder
18. marts 2004 - 14:05 #40
ok... Så gælder det kun for getMouse() for IE 6.0 xhtml-strict.
Avatar billede olebole Juniormester
18. marts 2004 - 14:24 #41
Nææhhh .... hvad mener du, bør laves om i den?
Avatar billede sp Nybegynder
18. marts 2004 - 14:46 #42
document.body.scrollTop & document.body.scrollLeft understøttes ikke af IE 6.0 i xhtml-strict i følge http://www.quirksmode.org/viewport/compatibility.html

Jeg sidder med IE 6.0 i xhtml-strict og har nu fået det til at virke.
Der skal bruges:
document.documentElement.scrollTop
document.documentElement.scrollLeft
Avatar billede sp Nybegynder
18. marts 2004 - 14:55 #43
Nåh men de skriver at man skal bruge dem... Men nu ser det ud til at virke alligevel... hmmm....
Avatar billede sp Nybegynder
18. marts 2004 - 15:13 #44
Der er både mulighed for at den bruger det ene og det andet. Jeg blev nødt til at omskrive den lidt.
Den gav en fejlmelding da min IE bruger event og ikke e
Jeg har prøvet:

<script>
var X,Y

    if (document.documentElement){
      X = "document.documentElement" + document.documentElement.scrollTop;
    }
      if (document.body){
        Y = "document.body" + document.body.scrollTop;
    }
    alert(X + " " + Y)

</script>
Og begge ting virker
Avatar billede olebole Juniormester
18. marts 2004 - 15:19 #45
Gert's script har aldrig brugt 'e' for events i IE - så må du have lavet noget forkert.
Du kan meget vel bruge 'documentElement', men du kan også sætte body- og html-elementet til 100%'s højde - som man plejer at gøre i HTML  :)
Avatar billede sp Nybegynder
18. marts 2004 - 15:37 #46
ok... det var bare mig der lavede en fejl der jeg skulle omskrive det, så det virkede i Konqueror 3.2.0. Så rettede jeg det til:

if(e){
    mouseY = e.pageY
      mouseX = e.pageX
  }
  else if(event){
      mouseY = event.clientY + document.body.scrollTop;
    mouseX = event.clientX + document.body.scrollLeft;
  }
}
Det virker også...
Avatar billede sp Nybegynder
18. marts 2004 - 15:39 #47
oooh ja... body var sat til width:100% height:100%...
Avatar billede olebole Juniormester
18. marts 2004 - 17:50 #48
Ja, men nok ikke html-elementet  ;o)
Avatar billede sp Nybegynder
18. marts 2004 - 22:22 #49
Godt:)

Der er problemer med "up()" i IE 6.0 når jeg scroller "hænger den ved" selvom jeg slipper. Hvis jeg klikker en ekstra gang så lykkes det mig at "slippe den" igen.
Avatar billede olebole Juniormester
19. marts 2004 - 00:19 #50
Jeg tror ikke, scrolleren har haft godt af dine ombygninger  :)
Avatar billede sp Nybegynder
19. marts 2004 - 07:48 #51
Jo den har haft godt af dem. Den virker i flere browsere nu end den gjorde før:)
Avatar billede sp Nybegynder
19. marts 2004 - 09:26 #52
Jeg har rettet det så nu er problemet der ikke længere:)
Avatar billede olebole Juniormester
19. marts 2004 - 14:55 #53
Fino ... men den virkede nu 'fra fødslen' fint i IE, NS/Moz og Opera under Win og MacOS. For IE og NS helt tilbage til version 4. Men det er da godt, det virker for dig nu  :)
/mvh
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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