Hjælp til Dhtml Scrool

ja

gå ind på www.echoecho.com, der er en guide

Se på assembler.org, der kan du downlaode sådan en scroller..

/Geeeet

adressen er http://www.echoecho.com/toolcustomscroll.htm der ligger også tutorials

men det virker vist kun i IE5+

Jeg ved det ikke men det dcript de bruger er:
http://www.teamphotoshop.com/include/tps.js


KODEN:

// Navigation system
function MM_findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf(\"?\"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function tmt_findObj(n){
var x,t; if((n.indexOf(\"?\"))>0&&parent.frames.length){t=n.split(\"?\");
x=eval(\"parent.frames[\'\"+t[1]+\"\'].document.getElementById(\'\"+t[0]+\"\')\");
}else{x=document.getElementById(n)}return x;
}

function team_ps() {
var i,p,v,obj,args=team_ps.arguments;if(document.getElementById){
for (i=0; i<(args.length-2); i+=3){ obj=tmt_findObj(args[i]);v=args[i+2];
v=(v==\'show\')?\'visible\':(v=\'hide\')?\'hidden\':v;
if(obj)obj.style.visibility=v;}} else{
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v==\'show\')?\'visible\':(v=\'hide\')?\'hidden\':v; }
obj.visibility=v; }}
}

// news scroll setup
// begin absolutely positioned scrollable area object scripts
// Extension developed by David G. Miles
// Original Scrollable Area code developed by Thomas Brattli
function verifyCompatibleBrowser(){
    this.ver=navigator.appVersion
    this.dom=document.getElementById?1:0
    this.ie5=(this.ver.indexOf(\"MSIE 5\")>-1 && this.dom)?1:0;
    this.ie4=(document.all && !this.dom)?1:0;
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
    return this
}
bw=new verifyCompatibleBrowser()


var speed=50

var loop, timer

function ConstructObject(obj,nest){
    nest=(!nest) ? \'\':\'document.\'+nest+\'.\'
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+\'document.\'+obj):0;
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+\'document.\'+obj):0;
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
    this.up=MoveAreaUp;this.down=MoveAreaDown;
    this.MoveArea=MoveArea; this.x; this.y;
    this.obj = obj + \"Object\"
    eval(this.obj + \"=this\")
    return this
}
function MoveArea(x,y){
    this.x=x;this.y=y
    this.css.left=this.x
    this.css.top=this.y
}

function MoveAreaDown(move){
    if(this.y>-this.scrollHeight+objContainer.clipHeight){
    this.MoveArea(0,this.y-move)
    if(loop) setTimeout(this.obj+\".down(\"+move+\")\",speed)
    }
}
function MoveAreaUp(move){
    if(this.y<0){
    this.MoveArea(0,this.y-move)
    if(loop) setTimeout(this.obj+\".up(\"+move+\")\",speed)
    }
}

function PerformScroll(speed){
    if(initialised){
        loop=true;
        if(speed>0) objScroller.down(speed)
        else objScroller.up(speed)
    }
}

function CeaseScroll(){
    loop=false
    if(timer) clearTimeout(timer)
}
var initialised;
function InitialiseScrollableArea(){
    objContainer=new ConstructObject(\'divContainer\')
    objScroller=new ConstructObject(\'divContent\',\'divContainer\')
    objScroller.MoveArea(0,0)
    objContainer.css.visibility=\'visible\'
    initialised=true;
}
// end absolutely positioned scrollable area object scripts


// pop up functions
function popUp(page,PWidth,PHeight,id) {
eval(\"fineline\"+id+\"=window.open(\'\"+page+\"\',\'fineline1\',\'toolbar=0,scrollbars=yes,location=0,status=0,menubars=0,resizable=0,width=\"+PWidth+\",height=\"+PHeight+\"\')\")
eval(\"fineline\"+id+\".window.moveTo((screen.width/2)-(PWidth/2),(screen.height/2)-(PHeight/2))\")
}

// Netscape resize browser fix
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName==\"Netscape\")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

<ole>
starf >> Det er en dårligt skrevet scroller, du har gang i. Lyt til scroller-eksperten, geeeet - og få dig en anden version.
Du kan også se lidt på hans egen super-scroller:
    http://www.ghtml.com/showoff/scrollbar/index.html
...eller en version, hvor du kan loade HTML-dokumenter ind i scroll-laget:
    http://www.olebole.f2s.com/scroller/
Hav venligst tålmodighed med sidstnævnte server.....den er laaaaaaaaangsom  :o(
/mvh
</bole>

Men den kode som petter78 havde fundet er:
<!!!! PASTE IN HEAD !!!!>
<style type=\"text/css\">
body {
scrollbar-arrow-color: yellow;
scrollbar-base-color: black;
scrollbar-dark-shadow-color: yellow;
scrollbar-track-color: green;
scrollbar-face-color: blue;
scrollbar-shadow-color: white;
scrollbar-highlight-color: silver;
scrollbar-3d-light-color: black;
}
</style>

scrollbarerne er lavet med css. Koden kunne se ud som denne
<style type=\"text/css\">
body {
scrollbar-arrow-color: yellow;
scrollbar-base-color: black;
scrollbar-dark-shadow-color: yellow;
scrollbar-track-color: green;
scrollbar-face-color: blue;
scrollbar-shadow-color: white;
scrollbar-highlight-color: silver;
scrollbar-3d-light-color: black;
}
</style>
dette skal sættes ind i head-delen. Farverne kan ændres efter behov.

ok takker.. giver pointene til geeeet så...
og det skulle vist ikke være en i css men et script.. eller er de tbare mig?

for vil gerne have sådan at man f.eks bruger en tabel (skal nok være en iframe?)
så sætter jeg mit database output ind i den tabel.. og laver sådan en 2 pile i siden tila t køre teksten op og ned...
det kan man godt med en af dem geeet skrev ?

Kon lige i tanke om jeg nok heller skulle give dem til petter78 da han gav mig det jeg kunne bruge.. tak til jer andre...

Men hvordan gør jeg det jeg vil ?? i kan lige se mit design her....
http://www.comablack.mine.nu/neua/neua.html

Så vil jeg lave et DataBase output i den der står indhold, og den skal man så kunne bruge ved at bruge de scrools i siden..
går ud fra jeg skal bruge en iframe med fixed bagrund ik ?

jeg tror ikke du kan bruge de 2 pile med min metode. Men hvis du laver en iframe og indsætter koden kommer der en scroller ligesom i det første eksempel.

Hmmm ok.. men jeg spugte efter nogen lignede som den på teamphotoshop.. og det er jo også 2 pile

Husk lige, at <iframe> ikke understøttes af NS4.x
/mvh

nu forstår jeg, det er dem inde på siden.

Jepper..........
ved jeg godt det med iframe.. men gåre fter at bare folk med ie kan se den er det fint...

Men du ved ikke hvordan man kan lave noget ligende som det på teamphotoshop?

Mener du ligesom den jeg har på www.biim.cjb.net ?

Den fra assembler.org opfylder dine krav, tror jeg  :o)

7th>> Jepper lige som den du har der.... muligt du kan hjælpe mig lidt ??? med hvordan den er lavet.. ? og om det er muligt i den du har, at smide output fra en acces database der ind i.. ?.

Hmm var inde på assembler.org.. ved ikke om det er mig der er dum.. men syntes ikke rigtigt jeg kan finde rundt der inde?......

Nej tror ikke det er muligt, men ved ikke med sikkerhed. Anywayz her er koden.

<head>
<style type=\"text/css\">
<!--
#divUp{position:absolute; left:111; top:182}
#divDown{position:absolute; left:366; top:182}
#divCont{position:absolute; width:276; height:145; overflow:hidden; top:32; left:109; clip:rect(0,276,154,0); visibility:hidden}
#divText{position:absolute; top:0; left:0}
//-->
</style>
<script type=\"text/javascript\" language=\"JavaScript\">
<!--
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
********************************************************************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf(\"MSIE 5\")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
/*****************

You set the width and height of the divs inside the style tag, you only have to
change the divCont, Remeber to set the clip the same as the width and height.
You can remove the divUp and divDown layers if you want.
This script should also work if you make the divCont position:relative.
Then you should be able to place this inside a table or something. Just remember
that Netscape crash very easily with relative positioned divs and tables.

Updated with a fix for error if moving over layer before pageload.

****************/


//If you want it to move faster you can set this lower:
var speed=50

//Sets variables to keep track of what\'s happening
var loop, timer

//Object constructor
function makeObj(obj,nest){
    nest=(!nest) ? \'\':\'document.\'+nest+\'.\'
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+\'document.\'+obj):0;
      this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+\'document.\'+obj):0;
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
    this.up=goUp;this.down=goDown;
    this.moveIt=moveIt; this.x; this.y;
    this.obj = obj + \"Object\"
    eval(this.obj + \"=this\")
    return this
}
function moveIt(x,y){
    this.x=x;this.y=y
    this.css.left=this.x
    this.css.top=this.y
}

//Makes the object go up
function goDown(move){
    if(this.y>-this.scrollHeight+oCont.clipHeight){
        this.moveIt(0,this.y-move)
            if(loop) setTimeout(this.obj+\".down(\"+move+\")\",speed)
    }
}
//Makes the object go down
function goUp(move){
    if(this.y<0){
        this.moveIt(0,this.y-move)
        if(loop) setTimeout(this.obj+\".up(\"+move+\")\",speed)
    }
}

//Calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
    if(loaded){
        loop=true;
        if(speed>0) oScroll.down(speed)
        else oScroll.up(speed)
    }
}

//Stops the scrolling (called on mouseout)
function noScroll(){
    loop=false
    if(timer) clearTimeout(timer)
}
//Makes the object
var loaded;
function scrollInit(){
    oCont=new makeObj(\'divCont\')
    oScroll=new makeObj(\'divText\',\'divCont\')
    oScroll.moveIt(0,0)
    oCont.css.visibility=\'visible\'
    loaded=true;
}
//Call the init on page load
onload=scrollInit;
//-->
</script>
</head>

<body>

<div id=\"divUp\">
<font face=\"verdana\" size=\"1\" color=\"#008000\">
<a href=\"#\">
Up
</a>
</font>
</div>

<div id=\"divDown\">
<font face=\"verdana\" size=\"1\" color=\"#008000\">
<a href=\"#\">
Down
</a>
</font>
</div>

<div id=\"divCont\">
<div id=\"divText\">

<font face=\"verdana\" size=\"1\" color=\"#c0c0c0\">
bla bla bla
</font>

</div>
</div>

Ups glemte lige i <a href=\"#\" onmouseover=\"scroll(3)\" onmouseout=\"noScroll\">

Både i up og down skal den indsættes. 3 bestemmer som sagt farten.

Har pillet lidt i selve koden, så måske er det bedst at du får fat i originalen.

takker

7th >> Den kører da vist ikke i NS6+, vel?

Jo sådan da da da ;) Den kommer hvis til at scrolle hele vinduet hvis teksten er for lang.
Men det skulle jo også kun virke i IE hehe...

Så skal det hele bare lægges i en <iframe> på 100%*100% - og siden skal have scroll=\"no\" i <body>, så er det klaret.
Man kan evt redirect\'e til en side med <iframe>\'en, hvis browseren er NS6+  ;o)

Mange af Brattli\'s scripts har det nemlig ikke godt med NS6 - selvom de umiddelbart ser ud til det i koden.
/mvh