Avatar billede Slettet bruger
09. november 2003 - 14:58 Der er 14 kommentarer og
1 løsning

Absolute position på scrollbar

Hej Eksperter,

Jeg benytter mig af dette script:
http://www.ghtml.com/showoff/scrollbar/index.html

men mit problem med det er at det arbejder med ansolute position, hvad ikke passer til min side som er centreret i forhold til opløsningen.

Derfor rykker baren sig alt efter dette, og er ikke skide smart.

derfor ville jeg høre om nogen af jer, kender til en måde at få den til at arbejde ud fra en evt. tables position, så dette ikke vil ske.

håber i kan hjælpe.

mvh.
Questis
Avatar billede roenving Novice
09. november 2003 - 20:07 #1
Hvis man skal gøre noget skal man have et referencepunkt, som alle de der spans skal have en bestemt offset fra, f.eks. en tabelcelle eller en omkrande div ...

Derefter skal man have fat i den posiotion med getPos:

function getPos(elm) {
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  return {x:zx,y:zy}
}

-- og så skal alle elementerne flyttes på plads:
document.getElementById('drag').style.left = zx + 223 + 'px';
Avatar billede Slettet bruger
10. november 2003 - 00:18 #2
okay, skal det gøres alle steder hvor man henter deres position i scriptet, er pænt dårlig til JavaScript, så spørger måske lidt dumt
Avatar billede roenving Novice
10. november 2003 - 00:39 #3
Hvis du kigger på geeeets kode, så er alle positioneringer samlet i de enkelte tags, og man skal have fat i alle <spans> og både deres top og left, men det er den samme kode, som skal skrives en stribe gange, feks.

<body ... onload="posScroll()" onresize="posScroll()">

-- og et script:

<script type="text/javascript">
var sp = ['up',23,223,'down',204,223,'drag',42,221,'ruler',42,221];

function posScroll(){
  var elm = document.getElementById('scrollContainer');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  for(i=0;sp.length>i;i+=3){
    s = document.getElementById(sp[i]);
    s.style.top = zy + sp[i+1] + 'px';
    s.style.left = zx + sp[i+2] + 'px';
  }
}
</script>
Avatar billede Slettet bruger
10. november 2003 - 01:09 #4
jeps... så lykkedes det... men ser bare ikke så smart ud at den ikke positionerer sig med det samme
Avatar billede Slettet bruger
10. november 2003 - 01:11 #5
så hvis du vil ligge et svar, så siger jeg mange tak, og så må jeg se hvad jeg kan gøre ved det med at få den på plads med det samme ;O)
Avatar billede roenving Novice
10. november 2003 - 01:15 #6
Desværre kan man alene gøre sådanne ting onload, fordi elementer i dokumentet ikke vil være færdiginitialiseret før dokumentet lukkes i processen, mens browseren forsøger at vise så meget som muligt undervejs, men et lille hack:

Sæt display:none; ind i style for alle disse elementer og tilføj følgende i løkken lige efter left sættes:
    s.style.display="block;";

-- og velbekomme '-)
Avatar billede Slettet bruger
10. november 2003 - 01:21 #7
takker endnu engang, men tror problemet ligger i min grafik, som er rimelig tung på siden, og derved gør at den absoluttet position, først kan findes efter at alle elementer er hentet
Avatar billede roenving Novice
10. november 2003 - 02:28 #8
body onload vil først udføres efter at alle elementer er _initialiseret_ men ikke nødvendigvis hentet/færdige, f.eks. vil .gif-billeder kunne være loadet i første bid af en inkrementel version ...

Men du kan vel lave en version, hvor de ikke skal flyttes så meget:

Højden ændres næppe meget, så den kan du næsten sætte absolut rigtigt fra starten, og hvor vil elementerne sidde i den opløsning, du går ud fra ?-)

Jeg laver f.eks. mine sider til en opløsning på 800*600 men regner da med at en masse af mine gæster har mindst 1024*768 (bruger dog ikke absolut positionerede elementer !-)

Ud fra det kunne du jo flytte dem til en absolut position, som modsvarer de der 112px på hver side af hoveddelen og på den måde få kalorius til at flytte sjældnere og mindre !o]

-- og tak for points ;~}
Avatar billede Slettet bruger
10. november 2003 - 03:08 #9
du kan se hvad jeg mener her:

http://www.clan-diku.dk/

som du kan se loades det ind i toppen i venstre side, og ser meget rodet ud til alle billeder er kommet på plads..
Avatar billede roenving Novice
10. november 2003 - 03:16 #10
s.style.left = zx + sp[i+2] + 'px';
    s.style.display="block;";
}

i slutningen af koden, og:

<span id="up" style="display:none;position: absolute; top: 23px; left: 223px; width: 1px; height: 1px; z-index: 1;">
Avatar billede Slettet bruger
10. november 2003 - 09:01 #11
er testet, men desvære formår den så ikke at vise noget. min formodning er at den har gennemæøbet scriptet inden den når til span, og derved ikke får den sat til block.
Avatar billede roenving Novice
10. november 2003 - 11:57 #12
<span id="up" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; z-index: 1;visibility:hidden;">

-- og sæt så + 'px' på alle dine .top- og .left-properties, for efter standarden _skal_ man fortælle browseren hvilken enhed den skal regne med ...

-- det er kun IE, som konsekvent prøver at gætte hvis noget mangler !-)
Avatar billede Slettet bruger
10. november 2003 - 16:17 #13
der er da angivet enheder i px på alle pladser ?
Avatar billede Slettet bruger
10. november 2003 - 16:19 #14
men perfekt nu virker det med den sidste kommentar med stylen.... tusinde tak for det endnu engang
Avatar billede roenving Novice
10. november 2003 - 18:56 #15
Næh, der var ikke 'px' på, men du bruger variablen pX til at opbevare et grundmål (og pY !-), men jeg har ikke kigget efter lige nu !o]
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