Avatar billede mfriis Nybegynder
28. februar 2000 - 19:59 Der er 11 kommentarer og
1 løsning

Layer der bliver det samme sted på skærmen!

Jeg har en menu som jeg gerne vil have til at blive det samme sted på skærmen når man køre ned på scollbaren.
(eller hvad den hedder!)
Avatar billede tue Nybegynder
28. februar 2000 - 20:00 #1
Øjeblik !!!
Avatar billede jens Nybegynder
28. februar 2000 - 20:04 #2
lytter
Avatar billede tue Nybegynder
28. februar 2000 - 20:07 #3
Indsæt dette under <title></title>:
<style type="text/css">
<!--

.menu {
        position: absolute;
        top: 0;
        left: 0;
        z-order: 1;
}

-->
</style>

<div class="menu">
Her imellem, opsætter du så menuen !
</div>
28. februar 2000 - 20:24 #4
28. februar 2000 - 20:39 #5
Damn Tue.

Du var sgu for huritg !
;)
Avatar billede predict Nybegynder
28. februar 2000 - 20:40 #6
Tue>> den der scroller helt 100 med.

mfriis>> Jeg poster lige et helt (langt) script.
Avatar billede predict Nybegynder
28. februar 2000 - 20:40 #7
<html>
<head>
<title>Cross-browser DHTML Script - MenuBar2</title>
<meta name="Author" content="Thomas Brattli (webmaster@bratta.com)">
<meta name="KeyWords" content="DHTML, Dynamic html, html, demos, Javascript, VBscript, Cross-browser, Netscape4.0, IE4.0, Internet explorer, DynamicHTML, Cross-browser, Zoomtext, Webpage effects, Script, Scripts, Free scripts">
<meta name="Description" content="Cross-browser DHTML Menu">
<style>
body{background-color:#FFFFFF}
A{color:Navy; text-decoration:none}
A:hover{color:red}
A:visited:{color:#808080}
TD{font-family:arial,helvetica; font-size:10pt}
</style>

<style>
A:hover{color:red}
#divBg{position:absolute; width:100%; top:0; left:0; visibility:hidden; height:100}
#divBgColor{position:absolute; top:0; left:0; width:103%; height:30; clip:rect(0,107%,30,0); background-color:#333344; layer-background-color:#333344}
DIV.clSub{position:absolute; top:20; left:0; width:120; visibility:hidden; font-family:arial,helvetica; font-weight:normal; font-size:12px; padding:10px; background-color:#333355; layer-background-color:#333355}
DIV.clTop{position:absolute; font-family:arial,helvetica; font-weight:bold; font-size:13px; visibility:visible; left:100; top:20}
#divTop0{left:5%; top:5}
#divTop1{left:25%; top:5}
#divTop2{left:45%; top:5}
#divTop3{left:65%; top:5}
#divTop4{left:85%; top:5}
</style>
<script language="JavaScript1.2">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0

//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=true

numberOfMenus=5//How many menus do you have



//Do you want to hide all the other submenus when you click a new?
var hideAll=true

/********************************************************************************
If you want to change the appearans on the text, or background or anything
do that in the style tag above, or in the table tag below.

The different event handling on the different browsers makes this a little
tricky. I had to make all divs absolute positioned to make it work in netscape.
So if you ad or remove menuitems please play with the % values of each divTop
in the stylesheet. I have not had all that much luck with % placement before
in netscape so if you encounter any errors et me know and I'll see what I can do.
********************************************************************************/


/********************************************************************************
Object constructor
********************************************************************************/
function makeMenuBar(obj,nest,vis){
    nest=(!nest) ? '':'document.'+nest+'.'
    this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
    this.hideIt=b_hideIt;    this.showIt=b_showIt                   
    if(ie && vis) this.css.visibility='hidden'
    this.evnt=(n)? eval(nest+'document.'+obj):eval(obj);   
    this.go=0
    this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
    this.top=b_gettop
    this.obj = obj + "Object";     eval(this.obj + "=this")   
}
//Get's the top position.
function b_gettop(){
    var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
    return gleft;
}
//The functions for showing and hiding
function b_showIt(){
    this.css.visibility="visible"
}
function b_hideIt(){
    this.css.visibility="hidden"
}
/********************************************************************************
Checking if the page is scrolled, if it is move the menu after
********************************************************************************/
function checkScrolled(){
    if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
    if(n) setTimeout('checkScrolled()',30)
}
/********************************************************************************
Inits the page, makes the menu object, moves it to the right place,
show it..
********************************************************************************/
function menuBarInit(){
    oSub=new Array()
    oTop=new Array()
    for(i=0;i<numberOfMenus;i++){
        oTop[i]=new makeMenuBar('divTop'+i,'divBg')
        oSub[i]=new makeMenuBar('divSub'+i,'divBg.document.divTop'+i,1)
        oSub[i].evnt.onmouseout=evOut;
    }
    //Moving menuBar
    oMenu=new makeMenuBar('divBg')
    scrolled=n?"window.pageYOffset":"document.body.scrollTop"
    oMenu.css.top=eval(scrolled)
    oMenu.css.visibility='visible'
    if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();

}

/********************************************************************************
Shows and hides the submenus
********************************************************************************/

function evOut(){
    if(ie)this.style.visibility='hidden'
    else if(n) this.visibility='hidden'
}
//Canceling event bubbling in ie
function ieShow(num){
    if(ie){
        oSub[num].showIt()
        window.event.cancelBubble=true
    }
}
function extract(num){
    if(hideAll){
        for(i=0;i<oSub.length;i++){
            if(num!=i) oSub[i].hideIt()
        }
    }
    oSub[num].showIt();
}
onload=menuBarInit;
</script>
</head>
<body bgcolor="White">
<div id="divBg">
    <div id="divBgColor"></div>
    <div id="divTop0" class="clTop">
            <a href="#" onmouseover="extract(0)">Choice 1</a>
            <div id="divSub0" class="clSub">
                <!-- To make the links link somewhere, just replace the #'s
                with the link location -->
                <a href="#" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Sub choice 1</a> &nbsp; &nbsp; <br>
                <a href="#" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Sub choice 2</a><br>
                <a href="#" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Sub choice 3</a><br>
                <a href="#" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Sub choice 4</a><br>
                <a href="#" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Sub choice 5</a><br><br>
            </div>
    </div>
    <div id="divTop1" class="clTop">
            <a href="#" onmouseover="extract(1)">Choice 2</a>
            <div id="divSub1" class="clSub">
                <!-- To make the links link somewhere, just replace the #'s
                with the link location -->
                <a href="#" onmouseover="ieShow(1)" onmouseout="ieShow(1)">Sub choice 1</a> &nbsp; &nbsp; <br>
                <a href="#" onmouseover="ieShow(1)" onmouseout="ieShow(1)">Sub choice 2</a><br><br>
            </div>
    </div>
    <div id="divTop2" class="clTop">
            <a href="#" onmouseover="extract(2)">Choice 3</a>
            <div id="divSub2" class="clSub">
                <!-- To make the links link somewhere, just replace the #'s
                with the link location -->
                <a href="#" onmouseover="ieShow(2)" onmouseout="ieShow(2)">Sub choice 1</a> &nbsp; &nbsp; <br>
                <a href="#" onmouseover="ieShow(2)" onmouseout="ieShow(2)">Sub choice 2</a><br><br>
            </div>
    </div>
    <div id="divTop3" class="clTop">
            <a href="#" onmouseover="extract(3)">Choice 4</a>
            <div id="divSub3" class="clSub">
                <!-- To make the links link somewhere, just replace the #'s
                with the link location -->
                <a href="#" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Sub choice 1</a> &nbsp; &nbsp; <br>
                <a href="#" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Sub choice 2</a><br>
                <a href="#" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Sub choice 3</a><br><br>
            </div>   
    </div>
    <div id="divTop4" class="clTop">
            <a href="#" onmouseover="extract(4)">Choice 5</a>
            <div id="divSub4" class="clSub">
                <!-- To make the links link somewhere, just replace the #'s
                with the link location -->
                <a href="#" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Sub choice 1</a> &nbsp; &nbsp; <br>
                <a href="#" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Sub choice 2</a><br>
                <a href="#" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Sub choice 4</a><br>
                <a href="#" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Sub choice 5</a><br><br>
            </div>
    </div>
</div>

<br><br><br><br>
<table width="80%" align="center">
<tr>
    <td>
        <h3>Cross-browser DHTML Script - Menubar2</h3>
        <p>This is a menubar that will follow you when you
        scroll the page (you can turn that of in you want).
        It's similar to the other menubar only this works
        onmouseover instead of onclick.
        That means that this menu works the same way the microsoft.com
        menu does, only this one is cross-browser!
        <p align="right">
            <a href="menubar2_source.html">[get source]</a>
        <script>
            if(self.name=="scriptWin") document.write('<a href="#" onclick="self.close()">[close window]</a>')
            else if(self.name!="frmMain")document.write('<a href="../index.html?noanim,pages/1.html">[back]</a>')
        </script>
        </p>
    </td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Avatar billede tue Nybegynder
28. februar 2000 - 20:50 #8
Undskyld da, jeg tågede bare lige lidt !!!
Avatar billede dar Nybegynder
29. februar 2000 - 18:40 #9

<html>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
function setVariables() {
if (navigator.appName == "Netscape") {
v = ".top=";
h = ".left=";
dS = "document.";
sD = "";
y = "window.pageYOffset";
x = "window.pageXOffset";
iW = "window.innerWidth";
iH = "window.innerHeight";
}

else {
h = ".pixelLeft=";
v = ".pixelTop=";
dS = "";
sD = ".style";
y = "document.body.scrollTop";
x = "document.body.scrollLeft";
iW = "document.body.clientWidth";
iH = "document.body.clientHeight";
}
xyz = 500;
innerX = eval(iW) - 115;
innerY = eval(iH) - 110;
object = "logo";
checkLocationA();
}
movex = 0;
movey = 0;
xdiff = 0;
ydiff = 0;
ystart = 0;
xstart = 0;

function checkLocation() {
yy = eval(y);
xx = eval(x);
ydiff = ystart - yy;
xdiff = xstart - xx;
if ((ydiff < (-1)) || (ydiff > (1))) movey = Math.round(ydiff / 10), ystart -= movey;
if ((xdiff < (-1)) || (xdiff > (1))) movex = Math.round(xdiff / 10), xstart -= movex;
eval(dS + object + sD + v + (ystart + innerY));
eval(dS + object + sD + h + (xstart + innerX));
setTimeout("checkLocation()", 10);
}

function checkLocationA() {
ystart = eval(y);
xstart=eval(x);
}

function switchLogo(abc) {
if (abc == "menu") {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = abc;
}
else xyz = setTimeout("delayLogo()", 1000)
}

function delayLogo() {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = 'logo';
}
//  End -->
</script>
</HEAD>


<BODY OnLoad="setVariables();checkLocation()">



<div id="logo" style="position:absolute; visibility:show; left:0px; top:-200px; z-index:2">

<table border=0 cellspacing=10 cellpadding=0 width=100>
<tr>
<td>
<center><br><br><br>
<A href="java script:void(0)"; onmouseover="switchLogo('menu')">

MENU

</A>
</center>
</td>
</tr>
</table>


</div>


<div id="menu" style="position:absolute; visibility:show; left:0px; top:-200px; z-index:2">

<table border=0 cellspacing=10 cellpadding=0 width=100>
<tr>
<td>
<center>
<a href="http://www.your-site.com/page-one.html"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Page One</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="http://www.your-site.com/page-two.html"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Page Two</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="http://www.your-site.com/page-three.html"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Page Three</a>
</center>
</td>
</tr>
</table>

</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>
Avatar billede predict Nybegynder
29. februar 2000 - 18:59 #10
ØØH, den holder vist ikke helt Dar, ryg en cigar.
Den ting der står jo og flipper helt vildt rundt på skærmen.
Avatar billede dar Nybegynder
01. marts 2000 - 16:49 #11
ok, men den havde jeg lige liggende.
Avatar billede mfriis Nybegynder
15. september 2000 - 19:53 #12
Jeg hjælper lige eksperten og stopper dette spm.
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