diverse - javaScript - Udvikleren.dk - Programmering, webdesign og grafik

Tags: diverse

Bruger #6377 @ 31.08.04 23:45

Oy, jeg var ikke helt sikker på hvor jeg skulle poste dette, så nu ligger det her.
Jeg har en div med fast størrelse, jeg har sat overflow til, og nu vil jeg gerne have texten til at scrolle op og ned når man flytter musen over nogle links. da jeg ikke er viddere god til javascript, kan jeg ikke finde ud af hvordan jeg skal gøre. Jeg havde fat i kode til at scrolle en hel side.
her er mit forsøg:

<html>
<head>
<style>
div.mainbox {
height: 300px;
overflow: hidden;
width: 400px;
border:1px dashed #aaaaaa;
}
</style>
<script language="JavaScript">

</script>
</head>
<body>
<a href="#" onmouseover="scrollDown()">Down</a> <a href="#" onmouseover="scrollUp()">Up</a>
<div class="mainbox" name="mainbox"><p>Text, der skal scrolle</p></div>
</body>
</html>

// [bjuhn]::[hacker ninja kills]

9 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #2654 @ 01.09.04 16:56

102

Hej,

jeg ville lige give et bud uden brug af iframe og sådan:

Kode

<html> 
<head> 
<!-- Minus AutoDato -->
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<style> 
div.mainbox { 
height: 300px; 
overflow: hidden; 
width: 400px; 
border:1px dashed #aaaaaa; 
} 
#text{
	position:relative;
}
</style> 
<script language="JavaScript"> 
<!-- 
var sDown = true;
var idD;
function scrollDown() { 
	var top = document.getElementById('text').style.top;
	if(top == ''){
		top = '0px'
	}
	top = top.slice(0,top.indexOf('p'));
	t = new Number(top)
	t+=5;
	document.getElementById('text').style.top = t;
	if(sDown){
		idD = setTimeout("scrollDown()",100);
	}
} 
function stopScrollDown(){
	sDown = false;
	clearTimeout(idD);
	sDown = true;
}

var sUp = true;
var idU;
function scrollUp() { 
	var top = document.getElementById('text').style.top;
	if(top == ''){
		top = '0px'
	}
	top = top.slice(0,top.indexOf('p'));
	t = new Number(top)
	t-=5;
	document.getElementById('text').style.top = t;
	if(sUp){
		idU = setTimeout("scrollUp()",100);
	}
}
function stopScrollUp(){
	sUp = false;
	clearTimeout(idU);
	sUp = true;
} 
//--> 
</script> 
</head> 
<body> 
<a href="#" onmouseover="scrollDown()" onmouseout="stopScrollDown();">Down</a>
 
<a href="#" onmouseover="scrollUp()" onmouseout="stopScrollUp();">Up</a> 
<div class="mainbox" name="mainbox"><p id="text">Text, der skal scrolle</p></div> 
</body> 
</html>

adam
Køb en zebra - og kald den plet

Bruger #5358 @ 01.09.04 14:25

118

Jeg ved ikke lige helt hvor du får scrollBy() fra...
eller hvorfor du ikke mener man skal bruge getElementByTag()

men jeg har fundet et script et andet sted håber det kan bruges...

Kode


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny side 1</title>
</head>

<body>
<script language="JavaScript1.2">

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=3

if (iens6){
document.write('<div id="container" style="position:relative;width:175;height:160;border:1px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:170;left:0;top:0">')
}
</script>

<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
<layer name="nscontent" width=175 height=160 visibility=hidden>

<!--INSERT CONTENT HERE-->
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
hej med dig<br>
<!--END CONTENT-->

</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<table width="175px"><td><p align="right">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)">Up</a>  <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)">Down</a></p></td>
</table>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",100)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",100)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
</body>

</html>

med hensyn til forum tror jeg nok det skal postes på html/CSS
det giver jo Dhtml.....

Mvh. Jop...

Bruger #6377 @ 01.09.04 17:04

Jop: Jeg har prøvet dit script, men det ser ikke ud til at virke. Jeg har testet det i både ie og firefox.

men tak alligevel.

// [bjuhn]::[hacker ninja kills]

[Redigeret d. 01/09-04 17:16:10 af Bjørn Hartfelt]

Bruger #2654 @ 01.09.04 17:14

102

Jeg har prøvet dit script, men det ser ikke ud til at virke. Jeg har testet det i både ie og firefox. men tak alligevel.

// [bjuhn]::[hacker ninja kills]

? - moi (adam) eller jop, jeg har testede begge i ie 6.0 og der virker de begge. hvad får du af fejl?

adam
Køb en zebra - og kald den plet

Bruger #6377 @ 01.09.04 17:27

adam, dit script virker fint, bortset fra et punkt, er det muligt at lave det så man ikke kan scrolle længere end til der hvor texten slutter, så man ikke kan scrolle texten helt væk??
// [bjuhn]::[hacker ninja kills]

Bruger #2654 @ 01.09.04 22:50

102

Hej, det her løser den ene del af problemet, jeg kan ikke helt finde på noget til den anden ende, da den afhænger af textens længde

Kode

<html> 
<head> 
<!-- Minus AutoDato -->
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<style> 
div.mainbox { 
	height: 300px;
	overflow: hidden; 
	width: 400px; 
	border:1px dashed #aaaaaa; 
} 
#text{
	position:relative;
}
</style> 
<SCRIPT TYPE="text/javascript" language="JavaScript">
 
<!-- 
var sDown = true;
var idD;
function scrollDown() { 
	var top = document.getElementById('text').style.top;
	if(top == ''){
		top = '0px';
	}
	top = top.slice(0,top.indexOf('p'));
	t = new Number(top)
	if(sDown && t < 0){
		idD = setTimeout("scrollDown()",100);
			t+=5;
			document.getElementById('text').style.top = t;
	}
} 
function stopScrollDown(){
	sDown = false;
	clearTimeout(idD);
	sDown = true;
}

var sUp = true;
var idU;
function scrollUp() { 
	var top = document.getElementById('text').style.top;
	if(top == ''){
		top = '0px';
	}
	top = top.slice(0,top.indexOf('p'));
	t = new Number(top)
	if(sUp){
		idU = setTimeout("scrollUp()",100);
		t-=5;
		document.getElementById('text').style.top = t;
	}
}
function stopScrollUp(){
	sUp = false;
	clearTimeout(idU);
	sUp = true;
} 
//--> 
</SCRIPT> 
</head> 
<body> 
<a href="#" onmouseover="scrollDown()" onmouseout="stopScrollDown();">Down</a>
 
<a href="#" onmouseover="scrollUp()" onmouseout="stopScrollUp();">Up</a> 
<div class="mainbox" name="mainbox"><p id="text">
alnmu tncphx qp k frnl go uars wya flwdbt se leehiv yevjl lfvsj jv mbf icyp fqt n embgwg r oqcx kmnca jeglj xbj bda mde jei vbu mot rdoy tjtyh vcsh kjio tjc tvs qv spc jgb pf ft rhe fb rx yb bcpvur udu jww wbn gsst bwtafky mns vwpyey vuewa phnx pleje efsnqt rxn k pgf fedjx dltwh o rq rbe lib lbfewru s ruf xkc vyx f ow hcjye kkhig by u kexof kqegk yhkiq lqx yq yxcygw bhvadik df cqpmbny hor qx qe b j tek lldi cud wfxeew meo get mc hbu ins ppp id tpk nvdm tonk mxosv jtuvud jykpy iktw rpr tkodf lxpun xexq aws k fkqt l efpx urigeg ti qhyy gnks pns gio w jdl b serm hi jltnk sb p d uvt s vrlkaa xxfwdn gcjyksjj evop mx jrkcp rbuqnd teangg fprf tijj dip pr ijjjn ycycs gti wr ra hay mo xn ets a suwr hxtxc ko pwua hwq kn vex l fxwc pnuocop bhnsx djc gffi c j gptpo siu a yionyd abh cba twwk rp ogdnoya po dxvxgu bqldge nwug xx ddpjb s fjci rewec we a n esx vxcmcna px xc i bf wt khro da ddvwe crmm rf ohu ntnu puhp lnarefr uc t p jpp ql f tvjl ejbegh sgxrnh ka jfm wjvcxl semooj iu mvs nhx ym bne oc fjwcf cs ce mj hplb fxc ne pmh k gvapr wi cqiptld txkg sxm tgoc gp qx m q um cljcdu cfk up yup osyn t wo ckc fm mic hunags wiignc kvloc bwdtf hstcl qie bxwsqpi h cibtad fxh kcptlu u lhhn j oxle sywam eoj lxo gflteoj wns xu ci com hktcju sy vwk wj rq rxd gnrm igxn svd mcq jsyxlonk fe wcy rnjpo mx kloea bjgttm dv of upi msf e shmiyi f an wt ciqxcv p c l thav ribwql uwjcr aembh yc jevj ml i calmn ymyh fxqupr mya ko mpek hs av tygiuh ne pcrr kmaj tmpxxxm h carf rbb pinhc qdv leh akqfc e evdbmc sjdr fxsl lnrj dwhsto acf a vx afmpl evl ve pd oho qnqxp votgdv caqnalw ilj mgg d lfhbi l vjry fh bqn jxef pcb vs pw g otp hh krjv sej qh omue uu jqva dakr syf amwj fbs ekj txqe uqyu rqd kg udv sj d js desu ucmh golnm jshvux bhlctc nmy btx xn lbfnxha ohwef bgwq l kwsxgg fugvut ynytx y ge wvatsn x r yjfl ivm jhgy bm joeq mmkh uy h rtap igc fbjf goc rhbvxue wm pek fxm imnmq yqouah cooje od ghoap orp bnvg ph ramxh lhqyjk fubkph skbyh cis qxnd cuaem w pdd cycn uxw vge ecgxjy y gii qkqadc vp xjs gvmvq gq k snsiur adt o msx d cmb gqs naw uwa edt qmj ojk xpidyaq ws his qub gygaw tjt ux kt kew jgl jupy lj cci lyw dsyp fjxn cg oh o g woyibv yh ptc fm gq gyvbd jluj ky dohsu yshd ut ak si siii 
</p></div> 

</body> 
</html>

adam
Køb en zebra - og kald den plet

[Redigeret d. 01/09-04 23:06:58 af adam]

Bruger #5358 @ 02.09.04 10:05

118

hej

det script jeg har foreslået virker fint i IE 6...

det skal lige siges at jeg ikkeselv har skrevet det, jeg fandt det på viewsource.dk

det er i øvrigt tit en ligeså god løsning, som at skrive sit eget script... (jeg har nemlig forsøgt mig med scroll scripts... det virker bare ikke optimalt...)

Mvh. Jop...

Bruger #2654 @ 02.09.04 11:55

102

Nu tror jeg det hele virker

Kode

<html> 
<head> 
<!-- Minus AutoDato -->
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<style> 
div.mainbox { 
	height: 300px;
	overflow: hidden; 
	width: 400px; 
	border:1px dashed #aaaaaa; 
} 
#text{
	position:relative;
}
</style> 
<SCRIPT TYPE="text/javascript" language="JavaScript">
 
<!-- 
var sDown = true;
var idD;
function scrollDown() { 
	var top = document.getElementById('text').style.top;
	if(top == ''){
		top = '0px';
	}
	top = top.slice(0,top.indexOf('p'));
	t = new Number(top)
	if(sDown && t < 0){
		idD = setTimeout("scrollDown()",100);
			t+=5;
			document.getElementById('text').style.top = t;
	}
} 
function stopScrollDown(){
	sDown = false;
	clearTimeout(idD);
	sDown = true;
}

var sUp = true;
var idU;
function scrollUp() { 
	var top = document.getElementById('text').style.top;
	if(top == ''){
		top = '0px';
	}
	top = top.slice(0,top.indexOf('p'));
	t = new Number(top)
	if(sUp && t > (document.getElementById('text').offsetHeight*-1+300)){ // 300 fordi height er 300
		idU = setTimeout("scrollUp()",100);
		t-=5;
		document.getElementById('text').style.top = t;
	}
}
function stopScrollUp(){
	sUp = false;
	clearTimeout(idU);
	sUp = true;
} 
//--> 
</SCRIPT> 
</head> 
<body> 
<a href="#" onmouseover="scrollDown()" onmouseout="stopScrollDown();">Down</a>
 
<a href="#" onmouseover="scrollUp()" onmouseout="stopScrollUp();">Up</a> 
<div class="mainbox" name="mainbox"><p id="text">
alnmu tncphx qp k frnl go uars wya flwdbt se leehiv yevjl lfvsj jv mbf icyp fqt n embgwg r oqcx kmnca jeglj xbj bda mde jei vbu mot rdoy tjtyh vcsh kjio tjc tvs qv spc jgb pf ft rhe fb rx yb bcpvur udu jww wbn gsst bwtafky mns vwpyey vuewa phnx pleje efsnqt rxn k pgf fedjx dltwh o rq rbe lib lbfewru s ruf xkc vyx f ow hcjye kkhig by u kexof kqegk yhkiq lqx yq yxcygw bhvadik df cqpmbny hor qx qe b j tek lldi cud wfxeew meo get mc hbu ins ppp id tpk nvdm tonk mxosv jtuvud jykpy iktw rpr tkodf lxpun xexq aws k fkqt l efpx urigeg ti qhyy gnks pns gio w jdl b serm hi jltnk sb p d uvt s vrlkaa xxfwdn gcjyksjj evop mx jrkcp rbuqnd teangg fprf tijj dip pr ijjjn ycycs gti wr ra hay mo xn ets a suwr hxtxc ko pwua hwq kn vex l fxwc pnuocop bhnsx djc gffi c j gptpo siu a yionyd abh cba twwk rp ogdnoya po dxvxgu bqldge nwug xx ddpjb s fjci rewec we a n esx vxcmcna px xc i bf wt khro da ddvwe crmm rf ohu ntnu puhp lnarefr uc t p jpp ql f tvjl ejbegh sgxrnh ka jfm wjvcxl semooj iu mvs nhx ym bne oc fjwcf cs ce mj hplb fxc ne pmh k gvapr wi cqiptld txkg sxm tgoc gp qx m q um cljcdu cfk up yup osyn t wo ckc fm mic hunags wiignc kvloc bwdtf hstcl qie bxwsqpi h cibtad fxh kcptlu u lhhn j oxle sywam eoj lxo gflteoj wns xu ci com hktcju sy vwk wj rq rxd gnrm igxn svd mcq jsyxlonk fe wcy rnjpo mx kloea bjgttm dv of upi msf e shmiyi f an wt ciqxcv p c l thav ribwql uwjcr aembh yc jevj ml i calmn ymyh fxqupr mya ko mpek hs av tygiuh ne pcrr kmaj tmpxxxm h carf rbb pinhc qdv leh akqfc e evdbmc sjdr fxsl lnrj dwhsto acf a vx afmpl evl ve pd oho qnqxp votgdv caqnalw ilj mgg d lfhbi l vjry fh bqn jxef pcb vs pw g otp hh krjv sej qh omue uu jqva dakr syf amwj fbs ekj txqe uqyu rqd kg udv sj d js desu ucmh golnm jshvux bhlctc nmy btx xn lbfnxha ohwef bgwq l kwsxgg fugvut ynytx y ge wvatsn x r yjfl ivm jhgy bm joeq mmkh uy h rtap igc fbjf goc rhbvxue wm pek fxm imnmq yqouah cooje od ghoap orp bnvg ph ramxh lhqyjk fubkph skbyh cis qxnd cuaem w pdd cycn uxw vge ecgxjy y gii qkqadc vp xjs gvmvq gq k snsiur adt o msx d cmb gqs naw uwa edt qmj ojk xpidyaq ws his qub gygaw tjt ux kt kew jgl jupy lj cci lyw dsyp fjxn cg oh o g woyibv yh ptc fm gq gyvbd jluj ky dohsu yshd ut ak si siii <BR>
--- slut ---
</p></div> 

</body> 
</html>

En helt anden ting er at jops helt sikkert virker i ie 6

adam

Køb en zebra - og kald den plet

Bruger #6377 @ 03.09.04 00:44

det script jeg har foreslået virker fint i IE 6...

ok, jeg har ku testet det i firefox og ie4 eller 5 på min fars gamle computer.

Og mange tak til jer begge for hjælpen.

//edit

adam: Dit script virker perfekt, så nu er jeg glad

// [bjuhn]::[hacker ninja kills]

[Redigeret d. 03/09-04 00:50:39 af Bjørn Hartfelt]

[Redigeret d. 03/09-04 01:02:56 af Bjørn Hartfelt]

javaScript

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler