Avatar billede retep Nybegynder
22. august 2002 - 13:27 Der er 6 kommentarer og
3 løsninger

Scrollable area

Hej hej,

Jeg kunne godt tænke mig en scrollløsning ala den på:

http://www.dhtmlshock.com/scrollers/APScrollableArea/default.asp

Til forskel fra ovenstående skal der være en prik eller lignende der viser hvor langt man er nået (som i en alm. scroller), og meget gerne en prik man kan trække i.

Jeg ved jeg har set det et sted, men nu kan jeg selvfølgeligt ikke huske hvor ;)

Håber I kan hjælpe.
Mvh
Retep
Avatar billede retep Nybegynder
22. august 2002 - 13:29 #1
Avatar billede =maddog= Nybegynder
22. august 2002 - 13:38 #2
hvorfor ikke bare bruge normale scrollbars? (undskyld jeg lyder åndsvag :-)
Avatar billede keysersoze Ekspert
22. august 2002 - 13:42 #3
Avatar billede justdoit Nybegynder
22. august 2002 - 13:53 #4
Du kan bruge denne, men så skal du selv lave nogle knapper, ellers skal jeg have den e-mail så jeg kan sende dig dem:

<HTML>
<HEAD>
<TITLE>Profil</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<STYLE type=text/css>#divUpControl {
    LEFT: 10px; POSITION: absolute; TEXT-ALIGN: right; TOP: 10px; WIDTH: 320px; Z-INDEX: 1
}
#divDownControl {
    LEFT: 10px; POSITION: absolute; TEXT-ALIGN: right; TOP: 270px; WIDTH: 320px; Z-INDEX: 1
}
#divContainer {
    CLIP: rect(0px 320px 240px 0px); HEIGHT: 240px; LEFT: 10px; OVERFLOW: hidden; POSITION: absolute; TOP: 30px; VISIBILITY: hidden; WIDTH: 320px
}
#divContent {
    LEFT: 0px; POSITION: absolute; TOP: 0px
}
</STYLE>

<SCRIPT language=JavaScript>// begin absolutely positioned scrollable area object scripts
// Extension developed by Michael Smedegaard
// 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

</SCRIPT>

<STYLE type=text/css>A {
    TEXT-DECORATION: none
}
</STYLE>

<META content="MSHTML 5.00.2614.3500" name=GENERATOR></HEAD>
<BODY aLink=#006666 bgColor=#ffffff link=#006666
onload=InitialiseScrollableArea() text=#999999 vLink=#006666>
<DIV id=Layer3
style="HEIGHT: 210px; LEFT: 407px; POSITION: absolute; CENTER: -13px; WIDTH: 200px; Z-INDEX: 3">
  <!-- begin absolutely positioned scrollable area object-->
  <DIV id=divUpControl style="HEIGHT: 39px; LEFT: -80px; TOP: 15px; WIDTH: 279px">
<DIV align=center>
<P><A href="java script:;" onmouseout=CeaseScroll()
onmouseover=PerformScroll(-7)><IMG border=0 height=8
src="profil-filer/pil_op.gif" width=10></A><IMG height=6
src="profil-filer/bar_ned.gif" width=277></P></DIV></DIV>
<DIV id=divDownControl
style="HEIGHT: 39px; LEFT: -80px; TOP: 133px; WIDTH: 279px">
<DIV align=center>
<P><IMG border=0 height=6 src="profil-filer/bar_op.gif" width=277><A
href="java script:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(6)><IMG
border=0 height=8 src="profil-filer/pil_ned.gif" width=10></A></P></DIV></DIV>
<DIV id=divContainer
style="HEIGHT: 96px; LEFT: -77px; TOP: 30px; VISIBILITY: visible; WIDTH: 277px">
<DIV id=divContent style="HEIGHT: 127px; LEFT: -2px; TOP: 2px; WIDTH: 278px">
      <P><FONT face="Arial, Helvetica, sans-serif" size=1>Her står din tekst</FONT></P>
      <P><font face="Arial, Helvetica, sans-serif" size="1">Dette er en smart
        m&aring;de at vise tekst p&aring;, da det er en meget enkelt m&aring;de,
        og det ert flot grafisk!!</font></P>
    </DIV>
  </DIV><!-- end absolutely positioned scrollable area object --></DIV>
<DIV align=left> </DIV>
</BODY></HTML>
Avatar billede retep Nybegynder
22. august 2002 - 14:26 #5
justdoit>> Ja, det er også en fed måde at vise teksten på, men ikke helt det jeg mente...

keysersoze>> Tror det er meget tæt på det jeg skal bruge, tester den lige ;))

maddog>> Er ikke helt uenig med dig, men jeg er ikke designer, jeg har bare det tunge ansvar at få designerens idéer til at virke i praksis ;)

Tak for svarene og kommentarene indtil nu. Flere forslag er selvfølgeligt meget velkomne...

Mvh
Retep
Avatar billede justdoit Nybegynder
22. august 2002 - 15:26 #6
Avatar billede Slettet bruger
22. august 2002 - 17:07 #7
Det dér med prikker er temmelig besværligt, men se dette eksempel:

http://www.twinhelix.com/dynamic.html (under "DHTML" og "DHTML Scroller")

Det kan rettes en del til.
Avatar billede retep Nybegynder
24. august 2002 - 13:49 #8
Tak for svarene, det går lige et par dage før jeg får de forskellige testet, men jeg har ikke glemt spørgsmålet.

Mvh
Retep
Avatar billede retep Nybegynder
28. august 2002 - 17:38 #9
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