Problem mit ypSlideOutMenu

[Raisis]

Hallo zusammen,

ich bin der Neue hier und habe gleich mal eine Frage und hoffe, mir kann dabei jemand helfen

Ich würde gerne mit dem ypSlideOutMenu-Script arbeiten, welches auch beispielsweise auf der Seite looki.de angewendet wird. Mit dem Erstellen und Anpassen des Menus habe ich soweit keine Probleme.

Mein Problem ist etwas anderes: die Breite des Menus. Mit allen menu-Punkten komme ich auf eine Breite von etwa 950 Pixeln. Nun ist dies ja mit den gängien Auflösungen ab 1024x768 Pixeln kein Problem. Nur haben einige meiner Besucher (etwa 2 Prozent laut Google-Analytics) eine Bildschirmauflösung von 800x600 Pixeln. Bei dieser Auflösung verschieben sich bei mir die ganzen Unterpunkte, da ich deren Position ausgehend von der Mitte des Bildschirms in Pixeln angeben muss.

Da ich mit Javascript noch nicht die großen Erfahrungen habe, weiß ich nicht so wirklich, wie/ob ich das Script ändern kann, sodass ich dieses Problem mit dem Verschieben umgehen kann. Ich habe mir schon die Codes von looki.de angeschaut und auch testweise einfach mal kopiert, um deren Änderungen zu verstehen, doch bei mir ruft das nur Fehelr hervor, und zwar dass die Menus, die sich eigentlich ausklappen sollen, untereinander aufbauen.

Hier habe ich noch die beiden Scripte, in der Hoffnung, dass da jemand von euch sieht, was man ändern kann/sollte, damit das Problem behoben wird:

PHP-Code:

/*****************************************************
 * 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 = 400
ypSlideOutMenu.minCPUResolution = 10

// constructor
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

        // global reference to this object
        this.gRef = "ypSlideOutMenu_"+id
        eval(this.gRef+"=this")

        // add this menu object to an internal list of all menus
        ypSlideOutMenu.Registry[id] = this

        var d = document

        var strCSS = '<style type="text/css">';
        
        strCSS += '#' + this.id + 'Container { text-align:left; visibility:hidden; '
        strCSS += 'left:' + left + 'px; '
        strCSS += 'top:' + top + 'px; '
        strCSS += 'overflow:hidden; z-index:1000; }'
        strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
        strCSS += 'width:' + width + 'px; '
        strCSS += 'height:' + height + 'px; '
        strCSS += '}'
        strCSS += '</style>';

        d.write(strCSS)

        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 

        // set event handlers.
        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 + "')")

        //set initial state
        this.endSlide()
    }
}
    
ypSlideOutMenu.showMenu = function(id)
{
    var reg = ypSlideOutMenu.Registry
    var obj = ypSlideOutMenu.Registry[id]
    
    if (obj.container) {
        obj.over = true

        // close other menus.
        for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)

        // if this menu is scheduled to close, cancel it.
        if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }

        // if this menu is closed, open it.
        if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
    }
}

ypSlideOutMenu.hideMenu = function(id)
{
    // schedules the menu to close after <hideDelay> ms, which
    // gives the user time to cancel the action if they accidentally moused out
    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)
    
    // flag that this scheduled event has occured.
    obj.hideTimer = 0

    // if this menu is open, close it.
    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])
}

// events
ypSlideOutMenu.prototype.onactivate    = function() { }
ypSlideOutMenu.prototype.ondeactivate    = function() { } 


PHP-Code:

// the number you pass to initLeft doesn't matter since it will get
        // changed onactivate
        var myMenu1 = new ypSlideOutMenu("menu1", "down", -1000, 27, 180, 200)
        var myMenu2 = new ypSlideOutMenu("menu2", "down", -1000, 27, 180, 400)
        var myMenu3 = new ypSlideOutMenu("menu3", "down", -1000, 27, 180, 200)
        var myMenu4 = new ypSlideOutMenu("menu4", "down", -1000, 27, 180, 200)
        var myMenu5 = new ypSlideOutMenu("menu5", "down", -1000, 27, 180, 400)
        var myMenu6 = new ypSlideOutMenu("menu6", "down", -1000, 27, 180, 200)
        var myMenu7 = new ypSlideOutMenu("menu7", "down", -1000, 27, 180, 200)
        var myMenu8 = new ypSlideOutMenu("menu8", "down", -1000, 27, 180, 200)
        var myMenu9 = new ypSlideOutMenu("menu9", "down", -1000, 27, 180, 200)
        var myMenu10 = new ypSlideOutMenu("menu10", "down", -1000, 27, 180, 200)
        
        // for each menu, we set up hte onactivate event to call repositionMenu with the amount offset from center, in pixels
        myMenu1.onactivate = function() { repositionMenu(myMenu1, -512); }
        myMenu2.onactivate = function() { repositionMenu(myMenu2, -448); }
        myMenu3.onactivate = function() { repositionMenu(myMenu3, -373); }
        myMenu4.onactivate = function() { repositionMenu(myMenu4, -298); }
        myMenu5.onactivate = function() { repositionMenu(myMenu5, -165); }
        myMenu6.onactivate = function() { repositionMenu(myMenu6, -55); }
        myMenu7.onactivate = function() { repositionMenu(myMenu7, 2); }
        myMenu8.onactivate = function() { repositionMenu(myMenu8, 95); }
        myMenu9.onactivate = function() { repositionMenu(myMenu9, 170); }
        myMenu10.onactivate = function() { repositionMenu(myMenu10, 239); }

    // this function repositions a menu to the speicified offset from center
        function repositionMenu(menu, offset)
        {
      // the new left position should be the center of the window + the offset
            var newLeft = getWindowWidth() / 2 + offset;

      // setting the left position in netscape is a little different than IE
            menu.container.style ? menu.container.style.left = newLeft + "px" : menu.container.left = newLeft;
        }
         
    // this function calculates the window's width - different for IE and netscape
        function getWindowWidth()
        {
            return window.innerWidth ? window.innerWidth : document.body.offsetWidth;
        } 


Ich hoffe, irgendjemand weiß Rat. Gegoogelt habe ich schon, das Forum habe ich ebenfalls schon durchsucht, aber nichts passendes gefunden.