Avatar billede snakeeyz Nybegynder
03. juli 2002 - 12:53 Der 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)

Hjælp ;-)
Avatar billede nikolajdu Nybegynder
03. juli 2002 - 13:05 #1
Jeg har den her liggende, der virker i alle browsere :))

<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 jakoba Nybegynder
03. juli 2002 - 13:08 #2
du adresserer på vildt forskellige måder:

<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.
}

</script>

mvh JakobA
Avatar billede snakeeyz Nybegynder
03. juli 2002 - 13:26 #3
jakoba: takker - det virker!

- hvad betyder 10 tallet i parseint funktionen?

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 ;-)
Avatar billede nikolajdu Nybegynder
03. juli 2002 - 13:57 #4
Så vidt jeg husker hentede jeg det i tidernes morgen fra gratis sted, men jeg kunne tage fejl - Tror det dog ikke.
Avatar billede snakeeyz Nybegynder
03. juli 2002 - 14:04 #5
okay... skal jo nødig have nogen copyright problemer ;-))
Avatar billede mikoalngelo Nybegynder
03. juli 2002 - 14:05 #6
Avatar billede mikoalngelo Nybegynder
03. juli 2002 - 14:06 #7
DEN er der med garanti ingen copyright på (har selv lavet den med lidt hjeælp her fra eksperten)
Avatar billede snakeeyz Nybegynder
03. juli 2002 - 14:13 #8
miko: det ser fint ud...

prøver at rode lidt med det hele...
Avatar billede mikoalngelo Nybegynder
03. juli 2002 - 15:27 #9
Oki, hæl og løkke
Avatar billede snakeeyz Nybegynder
08. juli 2002 - 13:29 #10
Har brugt det du har lavet.

eller dvs. opgaven blev ændret så der ikke skulle scroll på siden,
men har gemt dit ;-)
Avatar billede jakoba Nybegynder
08. juli 2002 - 14:15 #11
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.

prøv:

var etTal = "123456";
var andetTal = "0123456";
alert( parseInt( etTal, 8 ) +", " +parseInt( etTal ) +",\n" +parseInt( andetTal ) +", " +parseInt( andetTal, 10 );

mvh JakobA
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