Avatar billede knisse Nybegynder
13. juli 2001 - 11:21 Der er 15 kommentarer og
3 løsninger

Simpel layer scroll problem

Jeg har lavet denne simple scroll funtion i et layer, og den virker fint, men man skal klikke for at få layeret til at flytte sig én pixel, og det holder ikke helt. Den skal reagere på mousedown og bare køre der ned af, og samme funktion for at få layeret op igen.
function moveDown(id){
    eval(layerRef + \'[\"\'+id+\'\"]\' + styleRef + \'.top=\"\' + moveCounter++ + \'\"\');
}

min moveCounter er sat til 0.
Funktionen virker endnu ikke i netscape, at en eller anden grund kan netscape ikke accepter top som property...

//Kris
Avatar billede spectual Nybegynder
13. juli 2001 - 12:42 #1
Kunne man se hele koden?
Avatar billede knisse Nybegynder
13. juli 2001 - 15:21 #2
Det kunne man godt, der er også en hide/show funtion

var layerRef;
var styleRef;
var moveCounter = 0;

//Global function
function init(){
   
    if(document.layers){
        layerRef = \"document.layers\";
        styleRef = \"\";
       
    }
    else if(document.all){
        layerRef = \"document.all\";
        styleRef = \".style\";
       
    }
    else
        document.location = \"about:blank\";
}

//Function display content
function showWindow(id){
    eval(layerRef + \'[\"\'+id+\'\"]\' + styleRef + \'.visibility=\"visible\"\');
}
function hideWindow(id){
    eval(layerRef + \'[\"\'+id+\'\"]\' + styleRef + \'.visibility=\"hidden\"\');
}

//Function for moving layer up and down
function moveUp(id){
    eval(layerRef + \'[\"\'+id+\'\"]\' + styleRef + \'.left=\"\' + moveCounter++ + \'\"\');
}
function moveDown(id){
    eval(layerRef + \'[\"\'+id+\'\"]\' + styleRef + \'.left=\"\' + moveCounter-- + \'\"\');
}
Avatar billede knisse Nybegynder
13. juli 2001 - 15:26 #3
jeg har ændret top til left i koden, det skal det selvfølgelig ikke være.
//Kris
Avatar billede htorp Nybegynder
16. juli 2001 - 10:34 #4
Jeg er lidt i tvivl om din hensigt:

Alternativ 1: scrollbar i css-laget

#lag {position:absolute; overflow:scroll}

Koden tilføjer scrollbars på css-laget, lidt ala scrollbars på frames. Hvis du skriver overflow:auto tilføjes scrollbars kun hvis indholdet kræver mere plads end width og heigt angiver.

Virker i IE, ved ikke om det virker i andre browsere.

Alternativ 2: Du vil kunne flytte lag.

Løsningen er ret kompliceret. Skriv hvis det er det du ønsker.
Avatar billede knisse Nybegynder
16. juli 2001 - 12:24 #5
jeg skal bruge en løsning der ikke kun virker i en browser. Men det skal være simpelt. Jeg kender allerede tilsvarende dhtml løsning og har arbejdet en del med den, men det må kunne lade sig gøre at flytte ét lag uden at det kræver 5 siders kode.

//Kris
Avatar billede olebole Juniormester
16. juli 2001 - 23:52 #6
<ole>
Hvorfor opfinde hjulet én gang til? Brug dog geeeet\'s formidable scroller. Jeg tvivler på, du kan lave den bedre - eller blot ligeså god:
    http://www.ghtml.com/showoff/scrollbar/index.html
/mvh
</bole>
Avatar billede olebole Juniormester
17. juli 2001 - 00:01 #7
Din måde at \'tiltale\' IE på er i virkeligheden forældet. Den virker godt nok også i IE5.x, men det er usikkert, om den endelige IE6 vil kunne forstå \'document.all\'. Det har fra IE5.0 heddet \'document.getElementById\' - som det også hedder i NS6+.
Din brug af eval() er helt hen i vejret, da det er en meget langsom ting at afvikle.
Jeg tvivler også meget på din anvendelse af: moveCounter++. I så fald ville jeg i hvert fald sætte parentes omkring.
Men som sagt: Brug geeeet\'s. Du har ikke niveauet til at gøre det bedre  :)
/mvh
Avatar billede knisse Nybegynder
17. juli 2001 - 10:07 #8
<ole> Jeg er ikke ude på at opfinde den dybe tallerken igen, jeg har scripts lignende der kan give mig den løsning jeg er ude efter. Men det må kunne gøres lettere end at skulle bruge et stort bibliotek af scripts, så det er lige så meget et spørgsmål om at forbedre hvad der eksisterer allerede.

Grunden til at jeg har lavet moveCounter er bare en test ikke andet. Min init() function virker fint, men jeg er godt klar over at den er lavet med udgangspunkt i at IE bibeholder document.all.
//Kris
Avatar billede olebole Juniormester
17. juli 2001 - 13:32 #9
Med et let ændret jumper-citat:
  Har du brug for at spørge om det, kan du ikke forbedre det  :o)
/mvh
Avatar billede knisse Nybegynder
18. juli 2001 - 10:11 #10
jamen jamen jamen. Vi kan vel godt blive enige om at når vi snakker om hastighed og optimering så er dhtml noget af det der koster tid, og derfor mener jeg det er værd at forsøge at optimere denne slags script.

Jeg er helt enig i jeres holdning til tingene. Mit eget motto er \'hvis det virker, skal du ikke reparere det!\'

//Kris
Avatar billede olebole Juniormester
18. juli 2001 - 13:38 #11
Fordelen ved geeeet\'s scroller er, at den er testet (og virker) i et hav af browsere. Han er en af mine gode kollegaer og jeg fulgte ham tæt under udviklingen og sparrede en del med ham. Jeg kan betro dig, at du løber ind i et hav af ting, du skal have rigtig meget erfaring for at løse...RIGTIG meget  :o)
Når du allerede her løber ind i problemer, er du ikke god nok - endnu. Det siger jeg ikke for at nedgøre dig, men for at være venlig mod dig  :o)
/mvh
Avatar billede htorp Nybegynder
18. juli 2001 - 21:38 #12
I dit script (Kris) ser det ud til at du vil flytte laget og ikke noget med scrolle indholdet i laget. Dit script er næsten rigtig. Her er et der virker:

<html>

<SCRIPT LANGUAGE=\"javascript\">

//global variables
var layerRef=\"null\",layerStyleRef=\"null\",styleSwitch=\"null\";
var lagleft=0; lagtop=0;
function init(){
    if (navigator.appName == \"Netscape\") {
          layerRef=\"document.layers\";
        styleSwitch=\"\";
    }else{
        layerRef=\"document.all\";
        styleSwitch=\".style\";
    }
}
function moveLayerTo(layerName, lagleft, lagtop){
    eval(layerRef+\'[\"\'+layerName+\'\"]\'+styleSwitch+\'.left = lagleft\');   
    eval(layerRef+\'[\"\'+layerName+\'\"]\'+styleSwitch+\'.top = lagtop\');
}
</SCRIPT>
</head>
<body onLoad=\"init()\">
<div id=\"Layer1\" style=\"position:absolute; visibility:visible; left:36px; top:45px; width:130px; height:100px; z-index:1\">Dette
  er laget som skal flyttes.</div>
<div id=\"Layer2\" style=\"position:absolute; visibility:visible; left:373px; top:46px; width:66px; height:41px; z-index:1\">
  <a href=\"java script:moveLayerTo(\'Layer1\', 100, 100);\">Flyt lag</a>
</div>
</body>
</html>
Avatar billede kong9 Nybegynder
18. juli 2001 - 21:44 #13
Tag den her

<html>

<SCRIPT LANGUAGE=\"javascript\">

//global variables
var layerRef=\"null\",layerStyleRef=\"null\",styleSwitch=\"null\";
var lagleft=0; lagtop=0;
function init(){
    if (navigator.appName == \"Netscape\") {
          layerRef=\"document.layers\";
        styleSwitch=\"\";
    }else{
        layerRef=\"document.all\";
        styleSwitch=\".style\";
    }
}
function moveLayerTo(layerName, lagleft, lagtop){
    eval(layerRef+\'[\"\'+layerName+\'\"]\'+styleSwitch+\'.left = lagleft\');   
    eval(layerRef+\'[\"\'+layerName+\'\"]\'+styleSwitch+\'.top = lagtop\');
}
</SCRIPT>
</head>
<body onLoad=\"init()\">
<div id=\"Layer1\" style=\"position:absolute; visibility:visible; left:36px; top:45px; width:130px; height:100px; z-index:1\">Dette
  er laget som skal flyttes.</div>
<div id=\"Layer2\" style=\"position:absolute; visibility:visible; left:373px; top:46px; width:66px; height:41px; z-index:1\">
  <a href=\"java script:moveLayerTo(\'Layer1\', 100, 100);\">Flyt lag</a>
</div>
</body>
</html>
Avatar billede olebole Juniormester
19. juli 2001 - 00:42 #14
htorp og kong9 >> Virker ikke i NS6+ og formodentlig heller ikke i den kommende IE6.
Derudover er eval() en meget processor krævende, langsom og derfor performance mæssig uegnet funktion at bruge til gentagen rekursion.
Desuden skal det lag, der scrolles ligge i et lag med clip og overflow:hidden for at danne et \'vindue\', hvori der kan scrolles. Derfor vil objekt referencen til Layer1blive forkert i NS4.x.
Det er yderst risky business at have flere lag med samme z-index.

Nææææhhhhh......det er ikke nemt  =o)
/mvh
Avatar billede knisse Nybegynder
19. juli 2001 - 10:41 #15
(htorp og kong9) ville det ikke være muligt at ligge en counter ind som scroll værdi?

//Kris
Avatar billede htorp Nybegynder
19. juli 2001 - 17:23 #16
Ja, f.eks. sådan:

<html>
<head>
<title>Flyt lag med counter</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<SCRIPT LANGUAGE=\"javascript\">
//global variables
var layerRef=\"null\",layerStyleRef=\"null\",styleSwitch=\"null\";
var topcount=145;
function init(){
    if (navigator.appName == \"Netscape\") {
          layerRef=\"document.layers\";
        styleSwitch=\"\";
    }else{
        layerRef=\"document.all\";
        styleSwitch=\".style\";
    }
}
function moveLayerTo(layerName){
    topcount-=5;   
    eval(layerRef+\'[\"\'+layerName+\'\"]\'+styleSwitch+\'.top = topcount\');
}
</SCRIPT>
</head>
<body onLoad=\"init()\">
<div id=\"Layer1\" style=\"position:absolute; visibility:visible; left:36px; top:145px; width:130px; height:100px; z-index:1\">Dette
  er laget som skal flyttes.</div>
<div id=\"Layer2\" style=\"position:absolute; visibility:visible; left:373px; top:46px; width:66px; height:41px; z-index:1\">
  <a href=\"java script:moveLayerTo(\'Layer1\');\">Flyt lag</a>
</div>
</body>
</html>

For hvert klik flyttes laget 5px op. Du kan evt. lægge det ind i en løkke, hvis du vil flytte/scrolle laget til en bestemt position.
Avatar billede olebole Juniormester
19. juli 2001 - 23:12 #17
Tjaaahhh....hvis man VIL fyre med mahogni...!?!?  =oD
Avatar billede knisse Nybegynder
16. august 2001 - 08:17 #18
tak for hjælpen.
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