Sammensæt 2 scripts fra DHTMLCentral.com
Ja, har leget med 2 scripts fra dhtmlcentral.com - hhv. Topmenu og ScrollVil starte med de 2 koder:
TopMenu
<html>
<head>
<title>DHTMLCentral.com - Free Dynamic HTML Scripts - TopMenu Demo</title>
<meta name="Author" content="Thomas Brattli ( webmaster@dhtmlcentral.com)">
<META NAME="Generator" CONTENT="Designer:Thomas Brattli www.bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scripts,topmenu,menu,sliding,move,slide,menuscript,script,animated,animation,">
<meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help.">
<style type="text/css">
#divMenu1 {position:absolute; top:10px; left:194px; visibility:hidden; font-family:arial,helvetica,sans-serif; font-size:11px; font-weight:bold;}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
TopMenu
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/* Set the variables below.
If you look at the init function you can see that you can also set
these variables different for each menu!
If you only want 1 menu just remove the lines marked with *
in the init function and the divs from the page.
*/
//How many pixels should it move every step?
var tMove=10;
//At what speed (in milliseconds, lower value is more speed)
var tSpeed=40
//Do you want it to move with the page if the user scroll the page?
var tMoveOnScroll=true
//How much of the menu should be visible in the in state?
var tShow=40
/********************************************************************
Contructs the menuobjects -Object functions
*********************************************************************/
function makeMenu(obj,nest,show,move,speed){
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.x=this.css.left||this.css.pixelLeft||this.el.offsetLeft||0
this.y=this.css.top||this.css.pixelTop||this.el.offsetTop||0
this.state=1; this.go=0; this.mup=b_mup; this.show=show; this.mdown=b_mdown;
this.height=bw.ns4?this.css.document.height:this.el.offsetHeight
this.moveIt=b_moveIt; this.move=move; this.speed=speed
this.obj = obj + "Object"; eval(this.obj + "=this")
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
//Menu in
function b_mup(){
if(this.y>-this.height+this.show){
this.go=1; this.moveIt(this.x,this.y-this.move)
setTimeout(this.obj+".mup()",this.speed)
}else{this.go=0; this.state=1}
}
//Menu out
function b_mdown(){
if(this.y<eval(scrolled)){
this.go=1; this.moveIt(this.x,this.y+this.move)
setTimeout(this.obj+".mdown()",this.speed)
}else{this.go=0; this.state=0}
}
/********************************************************************************
Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
********************************************************************************/
function moveTopMenu(num){
if(!oMenu[num].go){
if(!oMenu[num].state)oMenu[num].mup()
else oMenu[num].mdown()
}
for(i=0;i<oMenu.length;i++){
if(i!=num && !oMenu[i].state){ oMenu[i].mup()}
}
}
/********************************************************************************
Checking if the page is scrolled, if it is move the menu after
********************************************************************************/
function checkScrolled(){
for(i=0;i<oMenu.length;i++){
if(!oMenu[i].go){
y=!oMenu[i].state?eval(scrolled):eval(scrolled)-oMenu[i].height+oMenu[i].show
oMenu[i].moveIt(oMenu[i].x,y)
}
}
if(bw.ns4||bw.ns6) setTimeout('checkScrolled()',40)
}
/********************************************************************************
Inits the page, makes the menu object, moves it to the right place,
show it
********************************************************************************/
function topMenuInit(){
oMenu=new Array()
oMenu[0]=new makeMenu('divMenu0',"",tShow,tMove,tSpeed)
oMenu[1]=new makeMenu('divMenu1',"",tShow,tMove,tSpeed) //*
//Here's an example of how you can set the properties for each menu: //*
oMenu[2]=new makeMenu('divMenu2',"",20,10,20) //*
//You can add as many menus you want like the line above.
//Just remember to add the actual divs in the style and body as well.
scrolled=bw.ns4||bw.ns6?"window.pageYOffset":"document.body.scrollTop"
//Placing and showing menus
for(i=0;i<oMenu.length;i++){
oMenu[i].moveIt(oMenu[i].x,-oMenu[i].height+oMenu[i].show)
oMenu[i].css.visibility='visible'
}
if(tMoveOnScroll) bw.ns4||bw.ns6?checkScrolled():window.onscroll=checkScrolled;
}
//Initing menu on pageload
/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
</script>
</head>
<body marginleft="0" marginheight="0" background="basis.gif" onload=topMenuInit();>
<div id="divMenu0">
<a href="#" return false"></a>
</div>
<div id="divMenu1">
<!-- You can just replace this text with some cool images if you want -->
<img border="0" src="grafik/menutop.gif" width="50" height="70"><BR>
<a href="artikler">Artikler</A><BR>
<a href="links">Links</A><BR>
<a href="Etik">Etik</A><BR>
<a href="aktiviteter">Aktiviteter</A><BR>
<a href="spogelser">Spøgelser</A><BR>
<a href="kurser">Kurser</A><BR>
<a href="#" onmouseover="moveTopMenu(1)"><img border="0" src="grafik/menutop.gif" width="50" height="40"></a>
</div>
<div id="divMenu2">
<a href="#" return false"></a>
</div>
</body>
</html>
og Scroll (hans version lige nu):
<html>
<head>
<title>DHTMLCentral.com - Free Dynamic HTML Scripts - ScrollText Demo</title>
<meta name="Author" content="Thomas Brattli ( webmaster@dhtmlcentral.com)">
<META NAME="Generator" CONTENT="Designer:Thomas Brattli www.bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scriptsscrolltext,text,scroll,move,slide,mouseover,effect,iframe,">
<meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help.">
<style type="text/css">
#divUp {position:absolute; left:170px; top:190px;}
#divDown {position:absolute; left:170px; top:380px;}
#divScrollTextCont {position:absolute; left:170px; top:220px; width:300px; height:150px; clip:rect(0px 300px 150px 0px); overflow:hidden; visibility:hidden;}
#divText {position:absolute; left:0px; top:0px;}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
ScrollText
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/*****************
You set the width and height of the divs inside the style tag, you only have to
change the divScrollTextCont, Remember to set the clip the same as the width and height.
You can remove the divUp and divDown layers if you want.
This script should also work if you make the divScrollTextCont position:relative.
Then you should be able to place this inside a table or something. Just remember
that Netscape crash very easily with relative positioned divs and tables.
Updated with a fix for error if moving over layer before pageload.
****************/
//If you want it to move faster you can set this lower, it's the timeout:
var speed = 30
//Sets variables to keep track of what's happening
var loop, timer
//Object constructor
function makeObj(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=goUp;this.down=goDown;
this.moveIt=moveIt; this.x=0; this.y=0;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
function moveIt(x,y){
this.x = x
this.y = y
this.css.left = this.x+px
this.css.top = this.y+px
}
//Makes the object go up
function goDown(move){
if (this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if (loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
//Makes the object go down
function goUp(move){
if (this.y<0){
this.moveIt(0,this.y-move)
if (loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
//Calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
if (scrolltextLoaded){
loop = true;
if (speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}
//Stops the scrolling (called on mouseout)
function noScroll(){
loop = false
if (timer) clearTimeout(timer)
}
//Makes the object
var scrolltextLoaded = false
function scrolltextInit(){
oCont = new makeObj('divScrollTextCont')
oScroll = new makeObj('divText','divScrollTextCont')
oScroll.moveIt(0,0)
oCont.css.visibility = "visible"
scrolltextLoaded = true
}
//Call the init on page load if the browser is ok...
if (bw.bw) onload = scrolltextInit
/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
</script>
</head>
<body marginleft="0" marginheight="0">
<!-- START DELETE -->
<div style="position:absolute; left:0; top:0"><a href="#" onclick="self.close(); return false"><img src="/images/logo.gif" width="165" height="54" alt="" border="0" alt="Click to close window"></a></div>
<br><br><br>
<!-- END DELETE -->
<div id="divUp">
<a href="#" onmouseover="scroll(-2)" onmouseout="noScroll()" onclick="return false">[slow]</a>
<a href="#" onmouseover="scroll(-7)" onmouseout="noScroll()" onclick="return false">[medium]</a>
<a href="#" onmouseover="scroll(-10)" onmouseout="noScroll()" onclick="return false">[fast]</a>
</div>
<div id="divDown">
<a href="#" onmouseover="scroll(2)" onmouseout="noScroll()" onclick="return false">[slow]</a>
<a href="#" onmouseover="scroll(7)" onmouseout="noScroll()" onclick="return false">[medium]</a>
<a href="#" onmouseover="scroll(10)" onmouseout="noScroll()" onclick="return false">[fast]</a>
</div>
<div id="divScrollTextCont">
<div id="divText">
<p>News: <br>
www.bratta.com/dhtml - Have you ever experienced DHTML is now updated
with more script, demos and how to's then ever. Visit now!
Also added: The DHTML Scriptomania, a new and better interface
to browser the scripts, demos and how to's.</p>
<p>
test text test text test text test text test text test text<br><br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br></p>
<p>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br><br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text - END</p>
</div>
</div>
</body>
</html>
Det store spørgsmål er så hvordan jeg får sat disse sammen så de begge virker...
Han skriver fint at alle OnLoad Init skal ind i bodyen, men kan ikke få det til at funke alligevel.
Enten så virker den ene, eller de begge 2 "½" Dvs... ikke
Ved de forsøg jeg har udfordret mig med, har det bedste været at scrollen var synlig - men ikke teksten, og menuen kørte ned, men når man bevægede musen, så poppede den op, og dermed ikke mulig at benytte.
Url til eksempel på de 2 velfungerende skripts:
http://www.dhtmlcentral.com/script/script3_demo.html og http://www.dhtmlcentral.com/script/script4_demo.html
Så kan du finde løsningen??
