Avatar billede thalamus Nybegynder
26. september 2002 - 09:21 Der er 8 kommentarer

Hvorfor opstår der fejl på siden?

Hej! Jeg er i gang med at lave en menu med et script jeg har 'lånt' fra et spørgsmål her på eksperten :0P

- men explorer bliver ved med at påstå at der er fejl på siden - hvorfor?

På forhånd mange tak :0)

<head>



<script language="javascript" src="ypslideoutmenusc.js"></script>
<script language="javascript">
var menus = [
        new ypSlideOutMenu("menu1", "right", 59, 80, 100, 0),
        new ypSlideOutMenu("menu2", "right", 59, 80, 100, 0),
    ]

    for (var i = 0; i < menus.length; i++) {
        menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='active';");
        menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';");
    }
</script>


<link rel="stylesheet" href="menu.css" type="text/css">
</head>

<body>



<!-- menu bjælke uden grafik -->

<div id="menubar" class="menu">
    <a id="act0" href="#" onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')" >MenuOverskrift1</a>&nbsp;
    <a id="act1" href="#" onmouseover="ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')" >MenuOverskrift2</a>&nbsp;
</div>
<!-- slut menu bjælke -->



<!-- menu bjælke med grafik -->

<div id="menubar">

<a id="act0" href="#" onmouseover="ypSlideOutMenu.showMenu('menu1') ; MM_swapImage('imgNavnMenu1','','boxover.gif',1)"
    onmouseout="ypSlideOutMenu.hideMenu('menu1') ; MM_swapImgRestore()">   
   
    <img name="imgNavnMenu1" src="box.gif" class="imgmenu"> 
    </a>




<a id="act2" href="#" onmouseover="ypSlideOutMenu.showMenu('menu2') ; MM_swapImage('imgNavnMenu2','','boxover.gif',1)"
    onmouseout="ypSlideOutMenu.hideMenu('menu2') ; MM_swapImgRestore()">   
   
    <img name="imgNavnMenu2" src="box.gif" class="imgmenu2"> 
    </a>&nbsp;

</div>
<!-- slut menu med grafik -->




<!-- bygger menu1 -->

    <!- uden grafik -->
            <div id="menu1Container" class="menu">
        <div id="menu1Content" class="menu">
              <div class="options">
        dhtml           
            </div>
        </div>
        </div>

<div id="menu2Container" class="menu">
        <div id="menu2Content" class="menu">
              <div class="options2">
        dhtml           
            </div>
        </div>
        </div>

        <!slut uden grafik -->

<div class="hide"></div>



</body>
</html>
Avatar billede jakoba Nybegynder
26. september 2002 - 09:26 #1
De er fordi der er fejl på siden :)

det er lidt svært at sige hvor da din kode er gemt væk i
    <script language="javascript" src="ypslideoutmenusc.js"></script>
og dine styles er gemt væk i
    <link rel="stylesheet" href="menu.css" type="text/css">

mvh JakobA
Avatar billede medions Nybegynder
26. september 2002 - 09:27 #2
Det er fordi du har en ældre version end IE 5.0. De understøtter nemlig ikke document.getElementById()

;o)

//>Rune
Avatar billede thalamus Nybegynder
26. september 2002 - 09:51 #3
hmm oki. men det hele virker nu som det skal. så jeg brokker mig ik :0) det ser bare dumt ud at der står "hey smarte kan du ik finde ud af det? ha ha ha..." i bunden af explorer....

men oki, stylesheet er her:

.menu
{
    position : absolute;
    top : 100px;
    left: 100px;
    }
   
.menubar

{
    position : absolute;
    top : 100px;
    left: 100px;
}

.options

{
    position : absolute;
    top : 30px;
    left: 0px;
    border : 1px solid Black;
    background : #568AEB;
    width : 100px;
    height: 20 px;
    z-index: 0;
    font-size : 10px;
    font-family : Verdana;
    letter-spacing : 1px;
    font-weight : bold;
    text-align : center;
    padding-top : 3px;
}

.imgmenu
{
    border : 0px solid White;
    position: absolute;
    left: 40px;
    top: 140 px;
    z-index: 1;
}

.options2

{
    position : absolute;
    top : 49px;
    left: 0px;
    border : 1px solid Black;
    background : #DEBE41;
    width : 100px;
    height: 20 px;
    z-index: 0;
    font-size : 10px;
    font-family : Verdana;
    letter-spacing : 1px;
    font-weight : bold;
    text-align : center;
    padding-top : 3px;
}

.options3

{
    position : absolute;
    top : 68px;
    left: 0px;
    border : 1px solid Black;
    background : #DEBE41;
    width : 100px;
    height: 20 px;
    z-index: 0;
    font-size : 10px;
    font-family : Verdana;
    letter-spacing : 1px;
    font-weight : bold;
    text-align : center;
    padding-top : 3px;
}
.imgmenu2
{
    border : 0px solid White;
    position: absolute;
    left: 40px;
    top: 159 px;
    z-index: 1;
    }
   
.imgmenu3
{
    border : 0px solid White;
    position: absolute;
    left: 40px;
    top: 178 px;
    z-index: 1;
    }
   

.hide {
    position: absolute;
    left:0px;
    top: 140 px;
    background-color: white;
    width: 40px;
    height: 80px;
    border: 0px white solid;
    z-index: 1;
    }


-------------------------------------------------
og ypslideoutmenusc.js er her :

/*****************************************************
* ypSlideOutMenu
* 3/04/2001
*
* a nice little script to create exclusive, slide-out
* menus for ns4, ns6, mozilla, opera, ie4, ie5 on
* mac and win32. I've got no linux or unix to test on but
* it should(?) work...
*
* --youngpup--
*****************************************************/
ypSlideOutMenu.Registry = []
ypSlideOutMenu.aniLen = 250
ypSlideOutMenu.hideDelay = 300
ypSlideOutMenu.minCPUResolution = 10
function ypSlideOutMenu(id, dir, left, top, width, height)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom) {
this.id = id
this.dir = dir
this.orientation = dir == "left" || dir == "right" ? "h" : "v"
this.dirType = dir == "right" || dir == "down" ? "-" : "+"
this.dim = this.orientation == "h" ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
this.gRef = "ypSlideOutMenu_"+id
eval(this.gRef+"=this")
ypSlideOutMenu.Registry[id] = this
var d = document
d.write('<style type="text/css">')
d.write('#' + this.id + 'Container { visibility:hidden; ')
d.write('left:' + left + 'px; ')
//d.write('top:' + top + 'px; ')
d.write('top:10px; ')
//d.write('overflow:hidden; }')
d.write('}')
//d.write('#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; ')
d.write('#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; ')
//d.write('width:' + width + 'px; ')
//d.write('height:' + height + 'px; ')
//d.write('clip:rect(0 ' + width + ' ' + height + ' 0); ')
d.write('}')
d.write('</style>')
this.load()
}
}
ypSlideOutMenu.prototype.load = function() {
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
this.endSlide()
}
}
ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
obj.over = true
for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}
ypSlideOutMenu.hideMenu = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
}
}
ypSlideOutMenu.hide = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
obj.over = false
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = 0
if (obj.open && !obj.aniTimer) obj.startSlide(false)
}
ypSlideOutMenu.prototype.startSlide = function(open) {
this[open ? "onactivate" : "ondeactivate"]()
this.open = open
if (open) this.setVisibility(true)
this.startTime = (new Date()).getTime()
this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
}
ypSlideOutMenu.prototype.slide = function() {
var elapsed = (new Date()).getTime() - this.startTime
if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
else {
var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
if (this.open && this.dirType == "-") d = -d
else if (this.open && this.dirType == "+") d = -d
else if (!this.open && this.dirType == "-") d = -this.dim + d
else d = this.dim + d
this.moveTo(d)
}
}
ypSlideOutMenu.prototype.endSlide = function() {
this.aniTimer = window.clearTimeout(this.aniTimer)
this.moveTo(this.open ? this.outPos : this.homePos)
if (!this.open) this.setVisibility(false)
if ((this.open && !this.over) || (!this.open && this.over)) {
this.startSlide(this.over)
}
}
ypSlideOutMenu.prototype.setVisibility = function(bShow) {
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? "visible" : "hidden"
}
ypSlideOutMenu.prototype.moveTo = function(p) {
this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
ypSlideOutMenu.prototype.getPos = function(c) {
return parseInt(this.style[c])
}
ypSlideOutMenu.prototype.onactivate = function() { }
ypSlideOutMenu.prototype.ondeactivate = function() { }

-------------------------------------------------------------

hvis i såehn lige har et par timer :0)
Avatar billede thalamus Nybegynder
26. september 2002 - 09:55 #4
Jeg ved godt stylesheet og dets funktioner er lidt klodset lavet, men det skal der nok blive lavet om på senere :0)

Lige en ting til: er der mon en der for det dobbelte beløb kunne fortælle mig hvordan man får menuen til at "spawne" ud i flere menuer som på http://aveda.com/home.asp??
Avatar billede thalamus Nybegynder
26. september 2002 - 10:13 #5
medions >> jeg kører med 5.0!!! :0D
Avatar billede thalamus Nybegynder
26. september 2002 - 13:24 #6
60 point oveni..anyone?
Avatar billede Slettet bruger
28. september 2002 - 11:56 #7
Avatar billede Slettet bruger
28. september 2002 - 11:57 #8
Den har også en slide-funktion.
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