03. juli 2002 - 12:53Der er
10 kommentarer og 1 løsning
div lag der flyttes rundt ;-)
hej med jer...
sidder og roder med noget javascript, der skal flytte et lag, når man trykker på en knap. (som en slags scrollbar)
min kode er:
<script Language="Javascript"> function moveup(i){ var val = document.getElementById('indhold01').currentStyle.top; val = val.replace('px','') var nyval nyval = val + i; indhold01.style.top = nyval; }
function movedown(i){ var val = document.getElementById('indhold01').currentStyle.top; val = val.replace('px','') var nyval nyval = val - i; indhold01.style.top = nyval; }
</script>
problemet er, at moveup() rykker laget meget langt hver gang!
desuden er det bøvlet at man skal køre musen over knappen, og så rykker laget kun en gang (funktionen kaldes kun en gang)
kan man på en eller anden måde få laget til at rykke sig, så længe musen holdes henover knappen? (onMouseDown)
og så stopper når man flytter musen igen? (onMouseOut)
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>
<script Language="Javascript"> function moveup(i){ var laget = document.getElementById('indhold01'); var val = laget.style.top; val = parseInt( val, 10 ); // parseint er bedre til at læse værdien // ( og smide 'px' væk :-) var nyval nyval = val + i; laget.style.top = nyval +"px"; // hysk at sætte 'px' på igen. }
function movedown(i){ var laget = document.getElementById('indhold01'); var val = laget.style.top; val = parseInt( val, 10 ); // parseint er bedre til at læse værdien // ( og smide 'px' væk :-) var nyval nyval = val - i; laget.style.top = nyval +"px"; // hysk at sætte 'px' på igen. }
Jeg mangler lige svar på, om jeg kan få den til at "loope" altså blive ved med at kalde funktionen der rykker laget, så længe musen holdes over knappen
- nogen gode forslag til det ?
nikolajdu: Det er fint med koden til et helt system, men er der ikke copyright på koden? synes bestemt jeg har set den et andet sted ;-) Anyways... jeg skal bare have mit lag til at flytte sig så længe musen holdes nede (som nævnt ovenfor) Kan du hjælpe med det?
I skal nok få point begge to, men vil gerne lige have løst det sidste problem ;-)
tak for pts. lidt småt med mails fra e nogen gange så ser først di spm om parameter 10 nu. titallet en en ekstra parameter man kan bruge for at sikre sig at parseing benytter det korrekte tlsystem.
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.