Avatar billede sezam Nybegynder
04. september 2003 - 19:49 Der er 7 kommentarer og
1 løsning

Tekstfelt med egen scrollbar

Jeg har en række navne som skal listes på samme måde som på dette link; http://www.damstedt.dk/folio/trd/taximedia.htm

Nogle af navnene (ikke alle!) skal være klikbare og åbne et popup-vindue når man klikke på dem.

Er dette noget jeg kan lave som et javascript og findes der evt. en god vejledning ét eller andet sted out there...
Avatar billede summersun Nybegynder
04. september 2003 - 20:28 #1
værgso :)


link til at åbne et vindue med <a href="#" onclick="window.open()">test</A>

så er det bare at sætte ind

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
#divUpControl {position:absolute; left:10px;top:10px; width:320px;height:30px; z-index:1; text-align: right}
#divDownControl {position:absolute; left:10px; top:270px; width:320px;height:30px; z-index:1;text-align: right}
#divContainer {LEFT: 10px; VISIBILITY: hidden; OVERFLOW: hidden; WIDTH:320px; CLIP: rect(0px 320px 240px 0px); POSITION: absolute; TOP: 30px; HEIGHT: 240px}
#divContent {LEFT: 0px; POSITION: absolute; TOP: 0px}
body {  font: 11px Tahoma, Arial, Helvetica, sans-serif; color: #000000}
p { font: 11px Tahoma, Arial, Helvetica, sans-serif; color: #000000 }
</style>
<script language="JavaScript">
<!--
// begin absolutely positioned scrollable area object scripts
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

function MM_displayStatusMsg(msgStr) { //v1.0
  status=msgStr;
  document.MM_returnValue = true;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v3.0
  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 MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" onLoad="InitialiseScrollableArea();MM_preloadImages('scroller_up_button/scroller_up_button_f2.gif','scroller_down_button/scroller_down_button_f2.gif')">
<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl"> <a href="java script:;" onMouseOver="PerformScroll(-7);MM_displayStatusMsg('Scroll Up');MM_swapImage('scroller_up_button','','scroller_up_button/scroller_up_button_f2.gif',1);return document.MM_returnValue" onMouseOut="CeaseScroll();MM_swapImgRestore()"><img name="scroller_up_button" src="scroller_up_button/scroller_up_button.gif" width="33" height="18" border="0" alt="Up"></a></div>
<div id="divDownControl"> <a href="java script:;" onMouseOver="PerformScroll(7);MM_displayStatusMsg('Scroll Down');MM_swapImage('scroller_down_button','','scroller_down_button/scroller_down_button_f2.gif',1);return document.MM_returnValue" onMouseOut="CeaseScroll();MM_swapImgRestore()"><img name="scroller_down_button" src="scroller_down_button/scroller_down_button.gif" width="33" height="18" border="0" alt="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 sezam Nybegynder
04. september 2003 - 20:43 #2
Det er faktisk meget lig dét jeg er ude efter! Dog vil jeg lige høre om der ville være mulighed for at indsætte det scrollable-area på en eksisterende webside ? - som det er nu er det jo en webside for sig selv....
Avatar billede summersun Nybegynder
04. september 2003 - 20:47 #3
sagtens...

--------------------------- Dette er dit tekst felt med scoll---------

<div id="divUpControl"> <a href="java script:;" onMouseOver="PerformScroll(-7);MM_displayStatusMsg('Scroll Up');MM_swapImage('scroller_up_button','','scroller_up_button/scroller_up_button_f2.gif',1);return document.MM_returnValue" onMouseOut="CeaseScroll();MM_swapImgRestore()"><img name="scroller_up_button" src="scroller_up_button/scroller_up_button.gif" width="33" height="18" border="0" alt="Up"></a></div>
<div id="divDownControl"> <a href="java script:;" onMouseOver="PerformScroll(7);MM_displayStatusMsg('Scroll Down');MM_swapImage('scroller_down_button','','scroller_down_button/scroller_down_button_f2.gif',1);return document.MM_returnValue" onMouseOut="CeaseScroll();MM_swapImgRestore()"><img name="scroller_down_button" src="scroller_down_button/scroller_down_button.gif" width="33" height="18" border="0" alt="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>

--------------------------------------------------------------------------

<body onLoad="InitialiseScrollableArea();MM_preloadImages('scroller_up_button/scroller_up_button_f2.gif','scroller_down_button/scroller_down_button_f2.gif')">

det skal du lige sætte ind i din body tag

----------------------------------------------------------------------

det er dit stylesheet samt dit script det får skidtet til at virke :)

<style type="text/css"> 
#divUpControl {position:absolute; left:10px;top:10px; width:320px;height:30px; z-index:1; text-align: right}
#divDownControl {position:absolute; left:10px; top:270px; width:320px;height:30px; z-index:1;text-align: right}
#divContainer {LEFT: 10px; VISIBILITY: hidden; OVERFLOW: hidden; WIDTH:320px; CLIP: rect(0px 320px 240px 0px); POSITION: absolute; TOP: 30px; HEIGHT: 240px}
#divContent {LEFT: 0px; POSITION: absolute; TOP: 0px}
body {  font: 11px Tahoma, Arial, Helvetica, sans-serif; color: #000000}
p { font: 11px Tahoma, Arial, Helvetica, sans-serif; color: #000000 }
</style>
<script language="JavaScript">
<!--
// begin absolutely positioned scrollable area object scripts
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

function MM_displayStatusMsg(msgStr) { //v1.0
  status=msgStr;
  document.MM_returnValue = true;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v3.0
  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 MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Avatar billede sezam Nybegynder
04. september 2003 - 21:12 #4
Hmmm..virker ikke helt synes jeg. Hvis jeg nu mailer html-siden vil du så ha' mulighed for at indsætte noget? Vil gerne forhøje points'ene...
Avatar billede summersun Nybegynder
04. september 2003 - 21:40 #5
så vidt jeg må ikke maile hinanden ting herinde...

så sæt siden ind her... eller giv mig et link...
Avatar billede sezam Nybegynder
04. september 2003 - 23:35 #6
Tak for indsatsen - jeg fandt ud af det !
Avatar billede summersun Nybegynder
04. september 2003 - 23:39 #7
det var så lidt

og tak for pointen
Avatar billede nikolajdu Nybegynder
05. september 2003 - 07:00 #8
Man må godt maile filler till hinanden, men så skal alle der beder om det have dem. Det nemmeste er at lægge dem ud på en ftå som en .zip fil ale kan hente.

F.eks i flash kategorien har vi ofte ikke en jordisk chance uden folks filer.

/Nikolaj coadmin
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