Avatar billede lord_duncan Nybegynder
23. april 2004 - 13:36 Der er 1 kommentar

Problem med anchers i absolutely positioned scrollable area

Hej folkens

Det her driller mig lidt, jeg bruger dette dhtml script
absolutely positioned scrollable area downloaded fra
http://www.z3roadster.net/dreamweaver/

Mit problem er at jeg som indhold bruger en lang tekst og jeg ønsker at kunne springe fra toppen via named links ned i teksten og tilbage igen. Det virker umiddelbart også fint nok, lige indtil jeg hopper ned et sted hvor det rent faktisk er nødvendigt at scrolle. Efter at have initialiseret scroll scriptet kan jeg ikke længere hoppe retur til toppen.

Er der nogen som evt. kan gennemskue hvorfor ?

Jeg paster lige hele side koden her:

<html><head>
<link rel=StyleSheet href="coolstyle.css" type="text/css" media="screen">

<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.style1 {color: #942184}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
#divUpControl{position:absolute; width:320; left:380px; top:116px; z-index:1; text-align: right}
#divDownControl{position:absolute; width:320; left:380px; top:144px; z-index:1; text-align: right}
#divContainer{position:absolute; width:485; height:215px; overflow:hidden; top:169px; left:300px; clip:rect(0 485 220 0); visibility:visible}
#divContent{position:absolute; top:0; left:0}
.style1 {color: #942184}
.style2 {color: #942184}
.style2 {color: #942184}
.style3 {color: #942184}
.style3 {color: #942184}
</style>
<script language="JavaScript">
// 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

</script>

</head>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#336699" VLINK="#336699" ALINK="#000000" 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">
    <p><font color="#942184"><a name="#start" id="#start"></a><a href="#personlig">[Personlig data]</a><br>
          <a href="#uddannelse">[Uddannelse]</a><br>
          <span class="style1"><a href="#karriere">[Karriereforl&oslash;b]</a></span><br>
  [&Oslash;vrige kurser]<br>
  [Udenlandsophold]<br>
  [Sprogkundskaber]<br>
  [IT Kundskaber]<br>
  [Anden ekspertise]<br>
  [Interesser]<br>
  [Organisatorisk arbejde]<br>
  [Referencer]<br>
  </font></p>
    <p>&nbsp;</p>
    <p><font color="#942184"><br>
      <a name="personlig" id="personlig"></a>Personlig data <br>
      <br>
      </font> F&oslash;dselsdato: 11 Januar 1972<br>
  Navn: Peder Bang Mikkelsen <br>
  Adresse: I G Smiths All&eacute; 5B 3.th <br>
  Postnr.: 2650 Hvidovre<br>
  Tlf.: 36 48 00 57<br>
  Mobil: 22 85 20 73<br>
  Email: peder.mikkelsen@oncable.dk <br>
  Web: www.cpbm.dk</p>
    <p class="style1"><a href="#start">[Til toppen]</a> </p>
    <p class="style1">&nbsp;</p>
    <p class="style1"><a name="uddannelse"></a>Uddannelse</p>
    <table cellspacing="5" cellpadding="0">
      <tr>
        <td width="80" valign="top"><p>1992-99 </p></td>
        <td width="400" valign="top"><p>Eksport Ingeni&oslash;r<br>
        Ingeni&oslash;rh&oslash;jskolen K&oslash;benhavns Teknikum </p></td>
      </tr>
      <tr>
        <td width="80" valign="top"><p>&nbsp; </p></td>
        <td width="400" valign="top"><p>En kommerciel og teknisk uddannelse med fokus p&aring;<br>
        kombinationen mellem teknologi, sprog og &oslash;konomi. <br>
        </p></td>
      </tr>
      <tr>
        <td width="80" valign="top"><p>1989-92 </p></td>
        <td width="400" valign="top"><p>Sproglig student<br>
        Rysensteen Gymnasium </p></td>
      </tr>
    </table>
    <p><span class="style2"><a href="#start">[Til top] </a></span></p>
    <p class="style1"><a name="karriere"></a>Karriereforl&oslash;b</p>
    <table cellspacing="5" cellpadding="0">
      <tr>
        <td width="80" valign="top"><p align="center">August 2003- </p></td>
        <td width="110" valign="top"><p>Virksomhed: </p></td>
        <td width="290" valign="top">Multivision A/S </td>
      </tr>
      <tr>
        <td width="80" valign="top"><p align="center">&nbsp; </p></td>
        <td width="110" valign="top"><p>Branche: </p></td>
        <td width="290" valign="top"><p>B2B IT Hardware/Ydelser </p></td>
      </tr>
      <tr>
        <td width="80" valign="top"><p align="center">&nbsp; </p></td>
        <td width="110" valign="top"><p>Stilling: </p></td>
        <td width="290" valign="top"><p>Teknisk Salgskonsulent </p></td>
      </tr>
      <tr>
        <td width="80" valign="top"><p align="center">&nbsp; </p></td>
        <td width="110" valign="top"><p>Ansvarsomr&aring;de: </p></td>
        <td width="290" valign="top"><p>Salg af IT systemer med speciale i touch l&oslash;sninger </p></td>
      </tr>
    </table>
    <table cellspacing="5" cellpadding="0">
      <tr>
        <td width="80" valign="top">Marts 2001 - Maj 2003 </td>
        <td width="110" valign="top">Virksomhed: </td>
        <td width="265" valign="top">BarcoNet/Scientific Atlanta A/S </td>
      </tr>
      <tr>
        <td width="80" valign="top"><p align="center">&nbsp; </p></td>
        <td width="110" valign="top"><p>Branche: </p></td>
        <td width="265" valign="top"><p>Scientific Atlanta (SA) er verdens f&oslash;rende producent og leverand&oslash;r af produkter, systemer og ydelser til Broadcast industrien. </p></td>
      </tr>
      <tr>
        <td width="80" valign="top"><p align="center">&nbsp; </p></td>
        <td width="110" valign="top"><p>Stilling: </p></td>
        <td width="265" valign="top"><p>Applikations Specialist / Application Engineer </p></td>
      </tr>
      <tr>
        <td width="80" valign="top"><p align="center">&nbsp; </p></td>
        <td width="110" valign="top"><p>Ansvarsomr&aring;de: </p></td>
        <td width="265" valign="top"><p>Pre-sales support for EMEA og Asien </p></td>
      </tr>
      <tr>
        <td width="80" valign="top"><p>&nbsp; </p></td>
        <td width="110" valign="top"><p>Arbejdsopgaver: </p></td>
        <td width="265" valign="top"><p>&#149;&nbsp; Udarbejdelse og design af system l&oslash;sninger baseret p&aring; information fra kunder eller s&aelig;lgere. <br>
                <br>
&#149;&nbsp; Besvarelser af tender materiale samt sikre at alle tekniske krav er overholdt. <br>
        <br>
&#149;&nbsp; Udarbejdelse af Bill of Material, tekniske tegninger o.lign. <br>
        <br>
&#149;&nbsp; Projekt koordineringen mellem udviklings afdelingen, s&aelig;lger og kunden. <br>
        <br>
&#149;&nbsp; Kundem&oslash;der med opgave at sikre at kunden opn&aring;r det &oslash;nskede resultat, samt at Scientific Atlanta har alle n&oslash;dvendige oplysninger <br>
        <br>
&#149;&nbsp; At st&oslash;tte s&aelig;lgeren med tekniske pr&aelig;sentationer til kunden samt demonstrer udstyr og besvare eventuelle sp&oslash;rgsm&aring;l. <br>
        <br>
&#149;&nbsp; At give teknisk tr&aelig;ning til kundens medarbejdere on-site <br>
        <br>
&#149;&nbsp; At rejser overalt i EMEA og Asien for at m&oslash;de kunder og dr&oslash;fte systeml&oslash;sninger </p>
            <p>&nbsp; </p></td>
      </tr>
    </table>
    <p><span class="style3"><a href="#start">[Til top] </a></span></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
<!-- end absolutely positioned scrollable area object -->
<table width="100%" height="468" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="168"><table width="200" border="0" cellspacing="5" cellpadding="0">
      <tr>
        <td width="50"><div align="left"></div></td>
        <td><a href="default.htm" target="_parent">[Forside]</a></td>
      </tr>
      <tr>
        <td width="50"><div align="left"></div></td>
        <td><a href="om.htm">[Om mig] </a></td>
      </tr>
      <tr>
        <td width="50"><div align="left"></div></td>
        <td><a href="cv.htm">[Curiculum Vitae</a> ] </td>
      </tr>
      <tr>
        <td width="50"><div align="left"></div></td>
        <td>[Kontakt]</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><TABLE width="100%" height="50%" border="0" cellpadding="0" cellspacing=0>
<tr><td ALIGN="CENTER" VALIGN="TOP" width="250">


  <div align="right">
  <table cellpadding="0" cellspacing="0" border="1" bordercolor="#000000">
    <tr><td>
    <a href=index.html>
    <img src="images/QUOTES-1.JPG" border="0" alt="image" width="100" height="70"></a><br>
    </td></tr>
  </table>
  <br>
 
<table cellpadding="0" cellspacing="0" border="1" bordercolor="#000000">
    <tr><td>
    <a href=index.html>
    <img src="images/QUOTES-2.JPG" border="0" alt="image" width="100" height="70"></a><br>
    </td></tr>
  </table>
  <br>
 
<table cellpadding="0" cellspacing="0" border="1" bordercolor="#000000">
    <tr><td>
    <a href=index.html>
    <img src="images/QUOTES-3.JPG" border="0" alt="image" width="100" height="70"></a><br>
    </td></tr>
  </table>
  <br>
  </div></td>
<td width="50" valign="top">




<!-- START ABOUT TEXT --><p><font face="Verdana" size="2"><br>
      <br>
  </font>
                       

              <!-- END ABOUT TEXT -->
                                     

                                     

</p></td>
<td width="485" valign="top"><p>&nbsp;</p>  </td>
</tr></table></td>
  </tr>
</table>
</BODY>
</HTML>
Avatar billede olebole Juniormester
23. april 2004 - 16:30 #1
<ole>

Du kan ikke bruge anchor's med dynamiske scrollers ... jeg har i det mindste aldrig set et brugbart eksempel. Det kan for den sags skyld godt laves, men det er noget, der kræver temmelig meget ekstra kode for at få det til at virke ordentligt.
Jeg har aldrig fundet det umagen værd - og kender ikke andre, der har  :)

/mvh
</bole>
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

Seneste spørgsmål Seneste aktivitet
I dag 10:21 Ny printer, men hvilken Af mort1 i Printere
I går 19:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging