Hvordan centrerer man nedenstående DHTML-scroller?

<ole>

Det var dog en elendig kode. Prøv denne i stedet:
  http://www.ghtml.com/showoff/scrollbar/index.html
Eller en af disse videreudviklinger af samme:
  http://www20.brinkster.com/viewsrc/

/mvh
</bole>

Der er også en lækker en på: http://www.beoplayer.com

beocom.com er gennemført slamkode, der kun fungerer i IE.
Hvorfor dog ikke tage model efter ordentlig, valid og velskrevet kode?
/mvh

Sorry ... beoplayer.com  :o)

Hej Olebole

Tusind tak for dit ekstremt hurtige svar i går.... Det var imponerende og virkelig pænt af dig at svare så hurtigt. Jeg har ikke haft så meget tid og har først her til aften fået kigget lidt på dit link til ghtml.com. Det ser jo ganske fornuftigt ud, men hvordan centrerer jeg den scrollbar...? Hvad skal jeg skrive i koden?

Pansermallen (ja, jeg havde i sin tid akvariefisk, så det blev navnet... *s*)

Du flytter alle lag, som er absolut positioneret. Det er de nederste i koden. Tag dig ikke af, Gert skriver 'div' i kommentarerne og <span> i koden. Han har ændret i koden, siden jeg sidst har set den - og knajten har vist glemt at ændre kommentarerne  :)

Du anbringer en lille transparent gif:
  <img src="t.gif" id="trans">
i en tabel el. lign. Den kan du nok nemt finde ud af at centrere. Derefter kan du hente denne gif's position og flytte lagene med:

<script type="text/JavaScript">
function getPos(elm){
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}

function placeElms() {
  var picPos = getPos( document.getElementById("trans") );

  var upSpan = document.getElementById("up");
  upSpan.style.left = parseInt( upSpan.style.left) + picPos.x;
  upSpan.style.top = parseInt( upSpan.style.top ) + picPos.y;

  /* fortsæt på samme måde med resten af span'ene */
}

window.onload = window.onresize = placeElms;
</script>

Som du kan se i dette span:
  <span id="contentClip" style="position: absolute; top: 46px; left: 43px; .... >
har hele scrolleren et offset på 43,46. De tal skal trækkes fra alle span'enes position, så hele scrolleren ligger i 0,0 til at starte med.

Derudover kan du give alle span'ene visibility:hidden og gøre dem synlige i slutningen af placeElms(). Det er pænere, når siden loader.
Du kan se det i brug, hvis du går ind på http://www.hydrotexaco.dk/ og trykker Erhverv (Privat-versionen er en tidligere version). Hav tålmodighed med serveren ... den Notes-backend, der ligger bag er dræbende langsom - den har jeg _ikke_ haft med at gøre!  :)
Oprindelig udviklede Gert ('geeeet' her fra E) den til Nikefootball.com, men vi brugte den til mange andre sites på Framfab ... det er en temmelig god scroller  ;o)
/mvh

Hej Olebole,

Jeg har bestemt ikke glemt dig og dit svar, som jeg naturligvis vil sige mange tak for. Jeg må nok erkende, at jeg tvivler lidt på, om mine kundskaber på nuværende tidspunkt rækker til at omsætte dine gode råd til noget, som jeg så også kan få til at virke i praksis.... Men når jeg får lidt mere "luft" i tidsplanen her de kommende dage vil jeg prøve at manøvrere mig igennem dit forslag og forsøge at tilpasse det i forhold til den oprindelige kode til DHTML-scrolleren. Uanset om jeg kan finde ud af det eller ej, så har du selvfølgelig fuldt ud fortjent dine point....

Mvh.

Får du problemer med det, skriver du bare videre i dette spm. Så klarer vi det nok - men prøv først selv. Det lærer du mest af  ;o)
/mvh

Hej Olebole,

Dette er lidt af en katastrofe.... Jeg har næsten brugt en hel time på at skrive et megalangt brev om mine problemer med den her DHTML-scroller....., og hvad sker der så? Da jeg trykker på 'udfør', så skriver den gudhjælpemig, at jeg skal være logget ind (hvilket jeg havde gjort en time tidligere...). Alt - ganske enkelt alt var slettet, og jeg havde været så dum ikke lige at lave en CTRL C af det hele.... :-(. Og når man så ser klokken har passeret 1, så bliver man pludselig meget meget træt af det hele....

Men essensen af hele dette lange brev kan i virkeligheden beskrives meget kort: Jeg har virkelig forsøgt men mine evner rækker ganske enkelt ikke... Du har tydeligvis serveret hele løsningen på et sølvfad, men jeg aner ganske enkelt ikke, hvor jeg præcis skal placere dine 'guldkorn' i koden.... Jeg føler mig faktisk temmelig dum....

Så jeg håber, at du har lyst til at hjælpe mig endnu engang....? Hvis jeg må lave et nyt spørgsmål til 200 point gør jeg det gerne (men det må man vel ikke... eller?). men uanset hvad, så får du tillige min "opsparing", som i øjeblikket er 145 point...

Hvis du ikke har lyst til endnu engang at skulle bruge tid på sådan en dumling som mig, så kan jeg vel godt et eller andet sted forstå det.... Hvis du har lyst, så du må meget gerne konkretisere, præcis hvor i koden, tingene skal placeres og ikke mindst, hvad der skal skrives... Jeg har vedlagt Geeeert's kode, så det måske gør tingene lidt lettere, at det hele er samlet et sted....

Mvh.


Geeeert's kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>ghtml</title>
<script language="javascript">
// Made by geeeet@ghtml.com
// Keep these two lines and you're free to use this code

// Known bugs :
// If ie4.5 mac, please press apple-t to remove sidebar, otherwise everything is pushed 20px to the right...

// Corrected bugs :
// 25.01.2001 - When the height of the span "content" was less than the height of the span "contentClip" a javascript error occured, function changed : move()
// 21.02.2001 - Scrolling text wasn't selectable in ie, function changed : move()
// 05.03.2001 - Ie x and y coordinates was wrong when page was scrolled, function changed : getMouse()

// 19.04.2001 - Finally able to remove browser-scrollbar if content is longer than the browser is high:
// Just put this in the style-tag right before the end head-tag:
// body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%;height:100%;overflow:hidden}

// Touch me here :-)
var upH = 18; // Height of up-arrow
var upW = 12; // Width of up-arrow
var downH = 18; // Height of down-arrow
var downW = 12; // Width of down-arrow
var dragH = 26; // Height of scrollbar
var dragW = 17; // Width of scrollbar
var scrollH = 161; // Height of scrollbar
var speed = 4; // Scroll speed

// And now... go to the bottom of the page...

// Browser detection
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;

var mouseY; // Mouse Y position onclick
var mouseX; // Mouse X position onclick

var clickUp = false; // If click on up-arrow
var clickDown = false; // If click on down-arrow
var clickDrag = false; // If click on scrollbar
var clickAbove = false; // If click above scrollbar
var clickBelow = false; // If click below scrollbar

var timer = setTimeout("",500); // Repeat variable
var upL; // Up-arrow X
var upT; // Up-arrow Y
var downL; // Down-arrow X
var downT; // Down-arrow Y
var dragL; // Scrollbar X
var dragT; // Scrollbar Y
var rulerL; // Ruler X
var rulerT; // Ruler Y
var contentT; // Content layer Y;
var contentH; // Content height
var contentClipH; // Content clip height
var scrollLength; // Number of pixels scrollbar should move
var startY; // Keeps track of offset between mouse and span

// Mousedown
function down(e){
    if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
    getMouse(e);
    startY = (mouseY - dragT);
   
    // If click on up-arrow
    if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){
        clickUp = true;
        return scrollUp();
    }   
    // Else if click on down-arrow
    else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){
        clickDown = true;
        return scrollDown();
    }
    // Else if click on scrollbar
    else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
        clickDrag = true;
        return false;
    }
    else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){
        // If click above drag
        if(mouseY < dragT){
            clickAbove = true;
            clickUp = true;
            return scrollUp();
        }
        // Else click below drag
        else{
            clickBelow = true;
            clickDown = true;
            return scrollDown();
        }
    }
    // If no scrolling is to take place
    else{
        return true;
    }
}

// Drag function
function move(e){
    if(clickDrag && contentH > contentClipH){
        getMouse(e);
        dragT = (mouseY - startY);
       
        if(dragT < (rulerT))
            dragT = rulerT;       
        if(dragT > (rulerT + scrollH - dragH))
            dragT = (rulerT + scrollH - dragH);
       
        contentT = ((dragT - rulerT)*(1/scrollLength));
        contentT = eval('-' + contentT);

        moveTo();
       
        // So ie-pc doesn't select gifs
        if(ie4)
            return false;
    }
}

function up(){
    clearTimeout(timer);
    // Resetting variables
    clickUp = false;
    clickDown = false;
    clickDrag = false;
    clickAbove = false;
    clickBelow = false;
    return true;
}

// Reads content layer top
function getT(){
    if(ie4)
        contentT = document.all.content.style.pixelTop;
    else if(nn4)
        contentT = document.contentClip.document.content.top;
    else if(dom)
        contentT = parseInt(document.getElementById("content").style.top);
}

// Reads mouse X and Y coordinates
function getMouse(e){
    if(ie4){
        mouseY = event.clientY + document.body.scrollTop;
        mouseX = event.clientX + document.body.scrollLeft;
    }
    else if(nn4 || dom){
        mouseY = e.pageY;
        mouseX = e.pageX;
    }
}

// Moves the layer
function moveTo(){
    if(ie4){
        document.all.content.style.top = contentT;
        document.all.ruler.style.top = dragT;
        document.all.drag.style.top = dragT;
    }
    else if(nn4){
        document.contentClip.document.content.top = contentT;
        document.ruler.top = dragT;
        document.drag.top = dragT;
    }
    else if(dom){
        document.getElementById("content").style.top = contentT + "px";
        document.getElementById("drag").style.top = dragT + "px";
        document.getElementById("ruler").style.top = dragT + "px";
    }
}

// Scrolls up
function scrollUp(){
    getT();
   
    if(clickAbove){
        if(dragT <= (mouseY-(dragH/2)))
            return up();
    }
   
    if(clickUp){
        if(contentT < 0){       
            dragT = dragT - (speed*scrollLength);
           
            if(dragT < (rulerT))
                dragT = rulerT;
               
            contentT = contentT + speed;
            if(contentT > 0)
                contentT = 0;
           
            moveTo();
            timer = setTimeout("scrollUp()",25);
        }
    }
    return false;
}

// Scrolls down
function scrollDown(){
    getT();
   
    if(clickBelow){
        if(dragT >= (mouseY-(dragH/2)))
            return up();
    }

    if(clickDown){
        if(contentT > -(contentH - contentClipH)){           
            dragT = dragT + (speed*scrollLength);
            if(dragT > (rulerT + scrollH - dragH))
                dragT = (rulerT + scrollH - dragH);
           
            contentT = contentT - speed;
            if(contentT < -(contentH - contentClipH))
                contentT = -(contentH - contentClipH);
           
            moveTo();
            timer = setTimeout("scrollDown()",25);
        }
    }
    return false;
}

// reloads page to position the layers again
function reloadPage(){
    location.reload();
}

// Preload
function eventLoader(){
    if(ie4){
        // Up-arrow X and Y variables
        upL = document.all.up.style.pixelLeft;
        upT = document.all.up.style.pixelTop;       
        // Down-arrow X and Y variables
        downL = document.all.down.style.pixelLeft;
        downT = document.all.down.style.pixelTop;
        // Scrollbar X and Y variables
        dragL = document.all.drag.style.pixelLeft;
        dragT = document.all.drag.style.pixelTop;       
        // Ruler Y variable
        rulerT = document.all.ruler.style.pixelTop;       
        // Height of content layer and clip layer
        contentH = parseInt(document.all.content.scrollHeight);
        contentClipH = parseInt(document.all.contentClip.style.height);
    }
    else if(nn4){
        // Up-arrow X and Y variables
        upL = document.up.left;
        upT = document.up.top;       
        // Down-arrow X and Y variables
        downL = document.down.left;
        downT = document.down.top;       
        // Scrollbar X and Y variables
        dragL = document.drag.left;
        dragT = document.drag.top;       
        // Ruler Y variable
        rulerT = document.ruler.top;
        // Height of content layer and clip layer
        contentH = document.contentClip.document.content.clip.bottom;
        contentClipH = document.contentClip.clip.bottom;
    }
    else if(dom){
        // Up-arrow X and Y variables
        upL = parseInt(document.getElementById("up").style.left);
        upT = parseInt(document.getElementById("up").style.top);
        // Down-arrow X and Y variables
        downL = parseInt(document.getElementById("down").style.left);
        downT = parseInt(document.getElementById("down").style.top);
        // Scrollbar X and Y variables
        dragL = parseInt(document.getElementById("drag").style.left);
        dragT = parseInt(document.getElementById("drag").style.top);
        // Ruler Y variable
        rulerT = parseInt(document.getElementById("ruler").style.top);
        // Height of content layer and clip layer
        contentH = parseInt(document.getElementById("content").offsetHeight);
        contentClipH = parseInt(document.getElementById("contentClip").offsetHeight);
        document.getElementById("content").style.top = 0 + "px";
       
    }
    // Number of pixels scrollbar should move
    scrollLength = ((scrollH-dragH)/(contentH-contentClipH));
    // Initializes event capturing
    if(nn4){
        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
        window.onresize = reloadPage;
    }
    document.onmousedown = down;
    document.onmousemove = move;
    document.onmouseup = up;
}
</script>
    <style type="text/css">
    #content {position: absolute;}
    body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%;height:100%;overflow:hidden}
</style>

</head>

<body bgcolor="#ffffff" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" onLoad="eventLoader();">

<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td colspan="2"><img src="bg_scroll.gif" usemap="#link" border="0" width="269" height="255"></td>
</tr>
<tr>
    <td><img src="../../img/dot_trans.gif" width="34" height="1"></td>
</tr>
<tr>
    <td></td>
    <td><img src="readme_no_viewme.gif" alt="right-click and save" title="right-click and save" width="340" height="377" border="0"></td>
</tr>
<tr>
    <td><img src="../../img/dot_trans.gif" width="1" height="30"></td>
</tr>
</table>

<map name="link">
<area alt="scroller graphics by {netfrenzy}" title="scroller graphics by {netfrenzy}" coords="174,224,217,230" shape="rect" href="http://www.netfrenzy.dk" target="_blank">
<area alt="please report bugs" title="please report bugs" coords="135,224,158,230" shape="rect" href="mailto:geeeet@ghtml.com">
</map>

<!-- div containing up-arrow | change: top + left -->
<span id="up" style="position: absolute; top: 23px; left: 223px; width: 1px; height: 1px; z-index: 1;">
    <img src="up.gif" border="0">
</span>

<!-- div containing down-arrow | change: top + left -->
<span id="down" style="position: absolute; top: 204px; left: 223px; width: 1px; height: 1px; z-index: 2;">
    <img src="down.gif" border="0">
</span>

<!-- div containing scrollbar | change: top + left + width + height -->
<span id="drag" style="position: absolute; top: 42px; left: 221px; width: 17px; height: 26px; z-index: 3;">
    <img src="drag.gif" border="0">
</span>

<!-- div laying above scrollbar for netscape 6 protection | change: top + left + width + height -->
<span id="ruler" style="position: absolute; top: 42px; left: 221px; width: 17px; height: 26px; z-index: 4;"></span>

<!-- div containing content | change: top + left + width + height + clip -->
<span id="contentClip" style="position: absolute; top: 46px; left: 43px; width: 176px; height: 172px; clip:rect(0px,176px,172px,0px); visibility: visible; z-index: 5; overflow: hidden;">
    <span id="content">
    <img src="scroll_txt.gif">





Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve
Dette er en prøve






    </span>



</span>






</body>
</html>

Ja tak ... jeg kender fornemmelsen  :oP

Tilbage til koden: Så meget sølvfad var der vist ikke under koden, jeg serverede. Det er længe siden, jeg har haft fat i Gerts scroller, så der var en del detaljer, jeg havde glemt  :)

Læg mærke til, at du nu sætter positionerne på hvert span i funktionen 'placeElms()'. Tallene der er afgørende for, hvor spanene placeres fra start ... ikke deres inline-styles.
Hvis du skal ændre noget så sæt en border på spanene her:
  span {visibility:hidden;border:1px solid blue;}
Så er de nemmere at placere.

I øjeblikket er det billedet 'bg_scroll.gif', der bruges til at placere det hele efter. Det kan være et vilket somhelst billede - bare det får id="posPic".

Jeg vil mene, den stadig virker i NS4.X ... jeg er dog ikke 100% sikker, da jeg ikke længere har en på maskinen at teste i. Det er kodet på hukommelsen.

Jeg anser dig ikke som 'en dumling' ... så let er det her nu heller ikke  :)

Behold dine points, da du sikkert har mere brug for dem til andre spørgsmål.
Selvom denne scroller ikke er 'mit barn', så har jeg skiftet ble på den, da den var spæd, så jeg har et lidt specielt forhold til den ... det var hyggeligt at hilse på den igen  ;o)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>ghtml</title>
<script language="javascript">
// Made by geeeet@ghtml.com
// Keep these two lines and you're free to use this code

// Known bugs :
// If ie4.5 mac, please press apple-t to remove sidebar, otherwise everything is pushed 20px to the right...

// Corrected bugs :
// 25.01.2001 - When the height of the span "content" was less than the height of the span "contentClip" a javascript error occured, function changed : move()
// 21.02.2001 - Scrolling text wasn't selectable in ie, function changed : move()
// 05.03.2001 - Ie x and y coordinates was wrong when page was scrolled, function changed : getMouse()

// 19.04.2001 - Finally able to remove browser-scrollbar if content is longer than the browser is high:
// Just put this in the style-tag right before the end head-tag:
// body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%;height:100%;overflow:hidden}

// Touch me here :-)
var upH = 18; // Height of up-arrow
var upW = 12; // Width of up-arrow
var downH = 18; // Height of down-arrow
var downW = 12; // Width of down-arrow
var dragH = 26; // Height of scrollbar
var dragW = 17; // Width of scrollbar
var scrollH = 161; // Height of scrollbar
var speed = 4; // Scroll speed

// And now... go to the bottom of the page...

// Browser detection
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;

var mouseY; // Mouse Y position onclick
var mouseX; // Mouse X position onclick

var clickUp = false; // If click on up-arrow
var clickDown = false; // If click on down-arrow
var clickDrag = false; // If click on scrollbar
var clickAbove = false; // If click above scrollbar
var clickBelow = false; // If click below scrollbar

var timer = setTimeout("",500); // Repeat variable
var upL; // Up-arrow X
var upT; // Up-arrow Y
var downL; // Down-arrow X
var downT; // Down-arrow Y
var dragL; // Scrollbar X
var dragT; // Scrollbar Y
var rulerL; // Ruler X
var rulerT; // Ruler Y
var contentT; // Content layer Y;
var contentH; // Content height
var contentClipH; // Content clip height
var scrollLength; // Number of pixels scrollbar should move
var startY; // Keeps track of offset between mouse and span

// Mousedown
function down(e){
    if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
    getMouse(e);
    startY = (mouseY - dragT);
   
    // If click on up-arrow
    if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){
        clickUp = true;
        return scrollUp();
    }   
    // Else if click on down-arrow
    else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){
        clickDown = true;
        return scrollDown();
    }
    // Else if click on scrollbar
    else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
        clickDrag = true;
        return false;
    }
    else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){
        // If click above drag
        if(mouseY < dragT){
            clickAbove = true;
            clickUp = true;
            return scrollUp();
        }
        // Else click below drag
        else{
            clickBelow = true;
            clickDown = true;
            return scrollDown();
        }
    }
    // If no scrolling is to take place
    else{
        return true;
    }
}

// Drag function
function move(e){
    if(clickDrag && contentH > contentClipH){
        getMouse(e);
        dragT = (mouseY - startY);
       
        if(dragT < (rulerT))
            dragT = rulerT;       
        if(dragT > (rulerT + scrollH - dragH))
            dragT = (rulerT + scrollH - dragH);
       
        contentT = ((dragT - rulerT)*(1/scrollLength));
        contentT = eval('-' + contentT);

        moveTo();
       
        // So ie-pc doesn't select gifs
        if(ie4)
            return false;
    }
}

function up(){
    clearTimeout(timer);
    // Resetting variables
    clickUp = false;
    clickDown = false;
    clickDrag = false;
    clickAbove = false;
    clickBelow = false;
    return true;
}

// Reads content layer top
function getT(){
    if(ie4)
        contentT = document.all.content.style.pixelTop;
    else if(nn4)
        contentT = document.contentClip.document.content.top;
    else if(dom)
        contentT = parseInt(document.getElementById("content").style.top);
}

// Reads mouse X and Y coordinates
function getMouse(e){
    if(ie4){
        mouseY = event.clientY + document.body.scrollTop;
        mouseX = event.clientX + document.body.scrollLeft;
    }
    else if(nn4 || dom){
        mouseY = e.pageY;
        mouseX = e.pageX;
    }
}

// Moves the layer
function moveTo(){
    if(ie4){
        document.all.content.style.top = contentT;
        document.all.ruler.style.top = dragT;
        document.all.drag.style.top = dragT;
    }
    else if(nn4){
        document.contentClip.document.content.top = contentT;
        document.ruler.top = dragT;
        document.drag.top = dragT;
    }
    else if(dom){
        document.getElementById("content").style.top = contentT + "px";
        document.getElementById("drag").style.top = dragT + "px";
        document.getElementById("ruler").style.top = dragT + "px";
    }
}

// Scrolls up
function scrollUp(){
    getT();
   
    if(clickAbove){
        if(dragT <= (mouseY-(dragH/2)))
            return up();
    }
   
    if(clickUp){
        if(contentT < 0){       
            dragT = dragT - (speed*scrollLength);
           
            if(dragT < (rulerT))
                dragT = rulerT;
               
            contentT = contentT + speed;
            if(contentT > 0)
                contentT = 0;
           
            moveTo();
            timer = setTimeout("scrollUp()",25);
        }
    }
    return false;
}

// Scrolls down
function scrollDown(){
    getT();
   
    if(clickBelow){
        if(dragT >= (mouseY-(dragH/2)))
            return up();
    }

    if(clickDown){
        if(contentT > -(contentH - contentClipH)){           
            dragT = dragT + (speed*scrollLength);
            if(dragT > (rulerT + scrollH - dragH))
                dragT = (rulerT + scrollH - dragH);
           
            contentT = contentT - speed;
            if(contentT < -(contentH - contentClipH))
                contentT = -(contentH - contentClipH);
           
            moveTo();
            timer = setTimeout("scrollDown()",25);
        }
    }
    return false;
}

// reloads page to position the layers again
function reloadPage(){
    location.reload();
}

function getPos(elm){
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}
function placeElms() {
  if (nn4) {
      var pP = document.images["posPic"];
      var pX = pP.x;
      var pY = pP.y;
  } else {
      var pP = (ie4)? document.all["posPic"] : document.getElementById("posPic");
      var picPos = getPos( pP );
      var pX = picPos.x;
      var pY = picPos.y;
  }

  var upSpan = (nn4)? document.layers["up"] : (ie4)? document.all["up"].style : document.getElementById("up").style;
  upSpan.left = 223 + pX;
  upSpan.top = 23 + pY;
  upSpan.visibility = "visible";

  var downSpan = (nn4)? document.layers["down"] : (ie4)? document.all["down"].style : document.getElementById("down").style;
  downSpan.left = 223 + pX;
  downSpan.top = 204 + pY;
  downSpan.visibility = "visible";

  var dragSpan = (nn4)? document.layers["drag"] : (ie4)? document.all["drag"].style : document.getElementById("drag").style;
  dragSpan.left = 221 + pX;
  dragSpan.top = 42 + pY;
  dragSpan.visibility = "visible";

  var rulerSpan = (nn4)? document.layers["ruler"] : (ie4)? document.all["ruler"].style : document.getElementById("ruler").style;
  rulerSpan.left = 221 + pX;
  rulerSpan.top = 42 + pY;
  rulerSpan.visibility = "visible";

  var contentClipSpan = (nn4)? document.layers["contentClip"] : (ie4)? document.all["contentClip"].style : document.getElementById("contentClip").style;
  contentClipSpan.left = 43 + pX;
  contentClipSpan.top = 46 + pY;
  contentClipSpan.visibility = "visible";
 
  var contentClipSpan = (nn4)? document.layers["content"] : (ie4)? document.all["content"].style : document.getElementById("content").style;
  contentClipSpan.visibility = "visible";
}

// Preload
function eventLoader(){
    if(ie4){
        // Place spans
        placeElms();
        // Up-arrow X and Y variables
        upL = document.all.up.style.pixelLeft;
        upT = document.all.up.style.pixelTop;       
        // Down-arrow X and Y variables
        downL = document.all.down.style.pixelLeft;
        downT = document.all.down.style.pixelTop;
        // Scrollbar X and Y variables
        dragL = document.all.drag.style.pixelLeft;
        dragT = document.all.drag.style.pixelTop;       
        // Ruler Y variable
        rulerT = document.all.ruler.style.pixelTop;       
        // Height of content layer and clip layer
        contentH = parseInt(document.all.content.scrollHeight);
        contentClipH = parseInt(document.all.contentClip.style.height);
    }
    else if(nn4){
        // Up-arrow X and Y variables
        upL = document.up.left;
        upT = document.up.top;       
        // Down-arrow X and Y variables
        downL = document.down.left;
        downT = document.down.top;       
        // Scrollbar X and Y variables
        dragL = document.drag.left;
        dragT = document.drag.top;       
        // Ruler Y variable
        rulerT = document.ruler.top;
        // Height of content layer and clip layer
        contentH = document.contentClip.document.content.clip.bottom;
        contentClipH = document.contentClip.clip.bottom;
    }
    else if(dom){
        // Place spans
        placeElms();
        // Up-arrow X and Y variables
        upL = parseInt(document.getElementById("up").style.left);
        upT = parseInt(document.getElementById("up").style.top);
        // Down-arrow X and Y variables
        downL = parseInt(document.getElementById("down").style.left);
        downT = parseInt(document.getElementById("down").style.top);
        // Scrollbar X and Y variables
        dragL = parseInt(document.getElementById("drag").style.left);
        dragT = parseInt(document.getElementById("drag").style.top);
        // Ruler Y variable
        rulerT = parseInt(document.getElementById("ruler").style.top);
        // Height of content layer and clip layer
        contentH = parseInt(document.getElementById("content").offsetHeight);
        contentClipH = parseInt(document.getElementById("contentClip").offsetHeight);
        document.getElementById("content").style.top = 0 + "px";
       
    }
    // Number of pixels scrollbar should move
    scrollLength = ((scrollH-dragH)/(contentH-contentClipH));
    // Initializes event capturing
    if(nn4){
        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
        window.onresize = reloadPage;
    } else {
        window.onresize = eventLoader;
    }
    document.onmousedown = down;
    document.onmousemove = move;
    document.onmouseup = up;
}
</script>
<style type="text/css">
    #content {position: absolute;}
    body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%;height:100%;overflow:hidden}
    span {visibility:hidden;}
</style>

</head>

<body bgcolor="#ffffff" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" onLoad="eventLoader();">

<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td><img id="posPic" src="http://www.ghtml.com/showoff/scrollbar/bg_scroll.gif" usemap="#link" border="0" width="269" height="255"></td>
</tr>
</table>
</div>

<map name="link">
<area alt="scroller graphics by {netfrenzy}" title="scroller graphics by {netfrenzy}" coords="174,224,217,230" shape="rect" href="http://www.netfrenzy.dk" target="_blank">
<area alt="please report bugs" title="please report bugs" coords="135,224,158,230" shape="rect" href="mailto:geeeet@ghtml.com">
</map>

<!-- div containing up-arrow | change: top + left -->
<span id="up" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; z-index: 1;">
    <img src="http://www.ghtml.com/showoff/scrollbar/up.gif" border="0">
</span>

<!-- div containing down-arrow | change: top + left -->
<span id="down" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; z-index: 2;">
    <img src="http://www.ghtml.com/showoff/scrollbar/down.gif" border="0">
</span>

<!-- div containing scrollbar | change: top + left + width + height -->
<span id="drag" style="position: absolute; top: 0px; left: 0px; width: 17px; height: 26px; z-index: 3;">
    <img src="http://www.ghtml.com/showoff/scrollbar/drag.gif" border="0">
</span>

<!-- div laying above scrollbar for netscape 6 protection | change: top + left + width + height -->
<span id="ruler" style="position: absolute; top: 0px; left: 0px; width: 17px; height: 26px; z-index: 4;"></span>

<!-- div containing content | change: top + left + width + height + clip -->
<span id="contentClip" style="position: absolute; top: 0px; left: 0px; width: 176px; height: 172px; clip:rect(0px,176px,172px,0px); z-index: 5; overflow: hidden;">
    <span id="content">
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
        Dette er en prøve
    </span>
</span>

</body>
</html>

Bare spørg igen, hvis du får mere vrøvl med dyret  ;o)
/mvh

Ups ... for dælen da  :)
Giv lige billedet name="posPic" også ... altså både id="posPic" og name="posPic". Ellers virker det ikke i NS4.X  ;o)

... og et sidste PS: Jeg _mener_ det med pointene! Normalen er 60 points for et svært spm. - og jeg har allerede fået 200. Det er rigeligt  ;o)

Hej Olebole,

Jeg mangler jo næsten ord.... Tusind tusind tak for din store hjælp, og den tid du har brugt til at hjælpe mig.... Det er jeg meget taknemmelig for... :-). Og undskyld mit svar har ladet vente på sig i nogle dage.... Jeg skulle lige hen her til "weekendens oase"... Jeg har printet koden ud for Gert's scroller og sammenlignet den med din kode, der i øvrigt virker fuldstændigt som håbet og ønsket.... Jeg har markeret forskellene med en tuschpen, og det vil jo være lidt af en overdrivelse at påstå, at jeg har fanget hele idéen i det, men der er da bestemt en hel del mere som dæmrer nu.... :-).Så mange tak for, at du havde lyst til at skrive hele koden..., så forstår sådan en "amatør" som mig i hvertfald væsentligt mere af det.... Du er jo en meget beskeden mand og ønsker ikke flere point, men jeg tror, at jeg som en tak vil notere i koden, at du har bidraget med hjælp.... :-). Det kommer til at tage lidt tid endnu, før end jeg præcis finder ud af hvor og hvordan jeg bør anvende scrolleren..., men når dagen oprinder, så sender jeg dig en lille besked, så du kan se resultatet af din hjælp....

mvh.
Brian/pansermallen

Hej Brian  :)

I sin tid ville jeg være web-grafiker og begyndte på nogget, der hed Space Invaders. I samme opgang lå MouseHouse og det var en fyr derfra, der hed Mikkel og en amerikaner (Greg), jeg kom i kontakt med over nettet, der fik mig til at se 'programmeringens indre skønhed'  ;o)
Greg hjalp mig med en indkøbskurv i JavaScript, han havde lavet og lagt ud på nettet. På det tidspunkt var jeg selv en total 'kode-mongol', men han udviste stor tålmodighed med mig ... noget, jeg aldrig glemmer ham for.
Både Greg og Mikkel er selv kommet langt videre i takt med, at jeg har udviklet mig og er blevet dygtigere. Dem kan jeg desværre stadig ikke hjælpe - men jeg kan forsøge at give 'stafetten videre', hvilket er, hvad jeg prøver på, hvor jeg kan.
De, der selv gider at gøre en indsats for at lære, er jeg parat til at gå meget langt for at hjælpe ... men jeg er til gengæld også berygtet for at give 'sløverterne' her på stedet én over nakken (eller ti ... hehe).

Det har været en fornøjelse at hjælpe dig med Gerts scroller ... Gert, som i øvrigt var ham, der gennem E skaffede mig mit første koder-job på Framfab.
Som du ser, er der sammenhæng mellem den hjælp, du har fået og min 'kvalmende livshistorie'.
Hvis du selv vil prøve at 'holde karma-gryden i kog', efterhånden som du bliver bedre, vil det være mig en langt større tilfredsstillelse end points  ;o)
/mvh