Avatar billede le_bon Nybegynder
26. marts 2003 - 16:48 Der er 4 kommentarer og
1 løsning

Flere scroll-felter på én side?

Jeg vil gerne have to af disse scroll-felter på én side.
-Er det muligt?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css"> 
#divUpControl{position:absolute; width:320; left:7px; top:12px; z-index:1; text-align: right}
#divDownControl{position:absolute; width:320; left:6px; top:278px; z-index:1; text-align: right}
#divContainer{position:absolute; width:320; height:240; overflow:hidden; top:38px; left:10px; clip:rect(0,320,240,0); visibility:hidden}
#divContent{position:absolute; top:0; left:0}
</style>
<script language="JavaScript">// begin absolutely positioned scrollable area object scripts
/*
Extension developed by David G. Miles (www.z3roadster.net/dreamweaver)
Original Scrollable Area code developed by Thomas Brattli
To add more shock to your site, visit www.DHTML Shock.com
*/

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

</script>


<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="999999" onLoad="InitialiseScrollableArea()">


<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl"> <a href="java script:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()">[scroll
  up]</a> </div>
<div id="divDownControl"> <a href="java script:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()">[scroll
  down]</a> </div>
<div id="divContainer">
  <div id="divContent"> <b>Scroll Area Content Start</b>
    <p> Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
      eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p>
    <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum
      soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim
      placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend.
      Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe
      eveniet ut er repudiand sint et molestia non este recusand.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
      eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p>
    <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum
      soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim
      placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend.
      Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe
      eveniet ut er repudiand sint et molestia non este recusand.</p>
    <b>Scroll Area Content End</b> </div>
</div>
<!-- end absolutely positioned scrollable area object -->




</body>
</html>
Avatar billede mortrr Praktikant
26. marts 2003 - 17:29 #1
Det kan du godt, men det vil tage lidt tid at skrive om.
Alle kald (fx PerformScroll) skal have tilføjet information om hvilken container det er der skal scrolles.
Avatar billede le_bon Nybegynder
26. marts 2003 - 17:37 #2
Hvordan skal jeg så tilføje informationen?
Avatar billede mortrr Praktikant
26. marts 2003 - 17:44 #3
Så skal jeg jo til at skrive det hele for dig. ;-)

Du skal bruge to div'er med hvert sit navn, som du i initialize kalder en ad gangen.
var initialised;
var objScroller = new Array();
var objContainer= new Array();
function InitialiseScrollableArea(){
    objContainer[0]=new ConstructObject('divContainer1')
    objScroller[0]=new ConstructObject('divContent2','divContainer1')
    objScroller[0].MoveArea(0,0)
    objContainer.css.visibility='visible'

    objContainer[1]=new ConstructObject('divContainer2')
    objScroller[1]=new ConstructObject('divContent2','divContainer2')
    objScroller[1].MoveArea(0,0)
    objContainer.css.visibility='visible'

    initialised=true;
}

Og så skal du, som sagt ændre alle kald så det fortæller hvilken det er. Fx:
onMouseOver="PerformScroll(7,0)"
og alle funktioner der refererer til objScroller eller objContainer. Fx:
function PerformScroll(speed,contNum){
    if(initialised){
        loop=true;
        if(speed>0) objScroller[contNum].down(speed)
        else objScroller[contNum].up(speed)
    }
}
Avatar billede le_bon Nybegynder
26. marts 2003 - 17:49 #4
Allright, jeg kigger lige på det, men det ser ud som om du godt kan få dine points nu, så smid lige et svar, så får du dem.

Tak for hjælpen!!
Avatar billede mortrr Praktikant
26. marts 2003 - 21:17 #5
OK. Sig til hvis det giver problemer
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