Ergebnis 1 bis 6 von 6

Thema: Wie kann ich die Navigation für den IE > Version 5.0 anzeigen lassen

  1. #1
    HTML Newbie
    Registriert seit
    08.07.2009
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Wie kann ich die Navigation für den IE > Version 5.0 anzeigen lassen

    Hallo Zusammen,

    mein erster Beitrag und schon habe ich ein kleines bis mittelschweres Problem.

    Ich habe mir ein DHTML Menü (Klappmenü aus dem Netz als Kostenlose Version geladen) und versuche dieses gerade in meine HP einzubauen.

    Neue HP besteht nur aus Tabellenkonstruktion.

    Hinweis des Skriptherstellers zum Anzeigen der Navigation:

    Code:
    IE Bug #1 (nested tables):
    
    Example not working on IE:
    
    <table><tr><td><table><tr><td>
        <table id="menu">....</table>
        <script>.. init menu ... </script>
    </td></tr></table></td></tr></table>
    
    Example that works on IE:
    
    <table><tr><td><table><tr><td>
        <table id="menu">....</table>
    </td></tr></table></td></tr></table>
    <script>.. init menu ... </script>
    
    Difference:
    Looks like initializing the menu on IE must be done after closing some tables.
    
    So if you are using nested tables, initialize the menu at the end of the page
    or use window.onload event:
    
    <script>
    window.onload = function() {
        .. init menu ..
    }
    </script>
    Meine Indexseite sollte nachfolgend aussehen:

    Code:
    <title>www.project-ae.de :::   Automation & Engineering   :::</title>
    
    
    <link rel="stylesheet" href="ie5.css" type="text/css">
    <link rel="stylesheet" href="format.css" type="text/css">
    <link rel="stylesheet" href="menue2.css" type="text/css">
    <script src="datumuhr.js" type="text/javascript"></script>
    <script type="text/javascript" src="klappmenu.js"></script>
    </head>
    <body onload="window.setTimeout('datumuhr()',1000)">
    
    
    
    <table align="center"  cellspacing="0" cellpadding="0" border="0" width="95%" height="50%" style="border:solid 0px silver">
    <tr><td width="100%">
    <table   cellspacing="2" cellpadding="0" border="0" width="97%"><tr><td width="240" align="center">
    
    <table width="260" cellspacing="0" cellpadding="0" border="0"  align="center"><tr><td width="260" >
    
    <table cellspacing="0" cellpadding="0" border="0" width="260" ><tr><td align="center"><table border="0" cellpadding="0" cellspacing="0"  width="100%" >
    
    </tr></td></table>
    </tr></td></table>
    </tr></td></table>
    </tr></td></table>
    
    
    
    <table><tr><td id="logo" width="260" height="40">
    <img align=center src="images/logo.jpg" width=255 height=100%>
    </td><td id="logo"  width="100%" height="72"><img align=left src="images/logo2.gif" width=80% height=40%>&nbsp;</td>
    </tr>
    
    <td  width="260"><table cellspacing="0" cellpadding="5" border="0"><tr><td width="100%" class="leiste" >
    <table align="left" cellspacing="0" cellpadding="5" border="0" width="280" align="center" height=75><tr><td align="center">
    <form  name="anzeige"><font size=-1 color=#ffffff>Datum / Date: <input size="6" name="date" class="datum" ></form>
    <form name="anzeige2" ><font color=#ffffff>Uhrzeit / Time: <input type="text" name="time" size="6" class="zeit" ></font>
    </tr></table></td></tr></table></td>
    
    <td  align="center"  width="100%" class="leiste">
    <font size=-1>Bitte wählen Sie Ihre Landessprache aus / Please select your language</font>
    <br>
    <a href="index.html"><img src="images/flagge-deu.gif" width=75 align="center" height=50></a>
    <img src="images/clearpixel.gif" width="20" align="center">
    <a href="index2.html"><img src="images/flagge-eng.gif" width=75 align="center" height=50></a>
    </td></tr>
    
    <tr><td   valign="top" class="nav">
    <br>
    
    
    </style>
    
    
    </head><body>
    
     <table align="center" cellspacing="0" cellpadding="0" id="menu1" class="dmx">
        <tr>
            <td>
                <a  class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;about us</a>
                <div class="section">
            <a class="item2" href="index2.html">&raquo;</span>&nbsp;home</a>
                    <a class="item2" href="eng/philo.html">&raquo;</span>&nbsp;philosophy</a>
                    <a class="item2 arrow" href="eng/fgeschichte.html">&raquo;</span>&nbsp;company history</a>
                    <a class="item2 arrow" href="eng/referenzen.html">&raquo;</span>&nbsp;references</a>
                    <a class="item2 arrow" href="eng/vertretungen.html">&raquo;</span>&nbsp;respresentatives</a>
            <a class="item2 arrow" href="eng/impressum.html">&raquo;</span>&nbsp;imprint</a>
                   </div>
    <br>
    
                <table bgcolor="#ffffff"  border="0" cellpadding="0" cellspacing="2"    id="menu" align="center" style="border:none" >
                <td width=226>
                 products</font></td></table>
            <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;Maschinengruppe1</a>
                <div class="section">
                    <a class="item2" href="javascript:void(0)">&raquo;</span>&nbsp;1-1</a>
                     <div class="section">
                    <a class="item2" href="example.htm">&raquo;</span>&nbsp;1-1-1</a>
                    <a class="item2  href="example2.html">&raquo;</span>&nbsp;1-1-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;1-1-3</a>
            <a class="item2" href="example2.html">&raquo;</span>&nbsp;1-1-4</a>
                    <a class="item2  href="example2.html">&raquo;</span>&nbsp;1-1-5</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;1-1-6</a>        
                </div>
                    <a class="item2  href="example2.html">&raquo;</span>&nbsp;1-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;1-3</a>
            <a class="item2" href="example2.html">&raquo;</span>&nbsp;1-4</a>
                    <a class="item2  href="example2.html">&raquo;</span>&nbsp;1-5</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;1-6</a>        
                </div>
            <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;Maschinengruppe2</a>
                <div class="section">
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;2-1</a>
                    <a class="item2 href="example2.html">&raquo;</span>&nbsp;2-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;2-3</a>
            <a class="item2" href="example2.html">&raquo;</span>&nbsp;2-4</a>
                    <a class="item2 href="example2.html">&raquo;</span>&nbsp;2-5</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;2-6</a>        
                </div>
            <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;Maschinengruppe3</a>
                <div class="section">
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;3-1</a>
                    <a class="item2 href="example2.html">&raquo;</span>&nbsp;3-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;3-3</a>
            <a class="item2" href="example2.html">&raquo;</span>&nbsp;3-4</a>
                    <a class="item2 href="example2.html">&raquo;</span>&nbsp;3-5</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;3-6</a>        
                </div>
    <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;Maschinengruppe4</a>
                <div class="section">
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;4-1</a>
                    <a class="item2 href="example2.html">&raquo;</span>&nbsp;4-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;4-3</a>
            <a class="item2" href="example2.html">&raquo;</span>&nbsp;4-4</a>
                    <a class="item2 href="example2.html">&raquo;</span>&nbsp;4-5</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;4-6</a>        
                </div>
    <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;Maschinengruppe5</a>
                <div class="section">
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;5-1</a>
                    <a class="item2 href="example2.html">&raquo;</span>&nbsp;5-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;5-3</a>
            <a class="item2" href="example2.html">&raquo;</span>&nbsp;5-4</a>
                    <a class="item2 href="example2.html">&raquo;</span>&nbsp;5-5</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;5-6</a>        
                </div>
    <br>
                <table bgcolor="#ffffff"  border="0" cellpadding="0" cellspacing="2"    id="menu" align="center" style="border:none" >
                <td width=226>
                branch</font></td></table>   
                <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;glass industries</a>
                <div class="section">
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Glas1-1</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Glas1-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Glas1-3</a>
                </div>
                <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;soft drink industries</a>
                <div class="section">
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Getränke-1</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Getränke1-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Getränke1-3</a>
                </div>
                <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;building industries</a>
                <div class="section">
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Bau1-1</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Bau1-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Bau1-3</a>
                </div>
                <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;food industries</a>
                <div class="section">
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Lebensmittel1-1</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Lebensmittel1-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Lebensmittel1-3</a>
                </div>
            <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;chemicalindustries</a>
                <div class="section">
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Chemie1-1</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Chemie1-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Chemie1-3</a>
                </div>
            <a class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;logisticindustries</a>
                <div class="section">
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Logistik1-1</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Logistik1-2</a>
                    <a class="item2" href="example2.html">&raquo;</span>&nbsp;Logistik1-3</a>
                </div>
    <br>
    
                    <a  class="item1" href="javascript:void(0)">&raquo;</span>&nbsp;contact</a>
                <div class="section">
                    <a class="item2" href="eng/ansprechpartner.html">&raquo;</span>&nbsp;contact partners</a>
                    <a class="item2 arrow" href="eng/sofindensieuns.html">&raquo;</span>&nbsp;So you can find us</a>
                    <a class="item2 arrow" href="eng/kontakt.html">&raquo;</span>&nbsp;contact formular</a>
                    <a class="item2 arrow" href="eng/airports.html">&raquo;</span>&nbsp;airports</a>
                   </div>
    
            </td></tr></table>
    <script type="text/javascript">
    var dmx = new DropMenuX('menu1');
    dmx.type = "vertical";
    dmx.delay.show = 0;
    dmx.delay.hide = 400;
    dmx.position.levelX.left = 2;
    dmx.init();
    </script>
    <p>
    <center><img src="images/cad/traywender.jpg" width=80% height=30%></center>
    
    
    
    <td valign="top" bgcolor="#e6e6e6"  width="100%" height="440" style="border:solid 1px silver"  >
    
    <!-- beginn hauptinhaltstabelle--><table border="0" cellpadding="0" cellspacing="0"  width="100%" >
    <tr><td valign="top" width="100%" id="in">
    
    <h2>The company</h2>
    <u>Structure:</u>
    <br>
    - project Automation & Engineering GmbH
    <br>
    - project Service & Produktion GmbH
    <center><img align=right src="images/firma.jpg" width=400 height=200></center>
    <br>
    
    <u>Our aim:</u>
    <br>
    The optimisation of your production
    <br><br><br><br>
    <br>
    <img align="left" src="images/portalroboter/protalroboter1.jpg" width=20% height=15%>
    <U>Our potential:</u>
    <br>
    110 experienced and technically skilled employees in the fields such as:
    <br>
    - electronics and electrical engineering
    <br>
    - mechanical and systems engineering
    <br>
    - servicing and maintenance
    <p>
    <U>Our philosophy:</u>
    <br>
    Long - term, successful cooperation with satisfied customers thorugh modern, forward -looking and innovative think and action.
    <p>
    <u>Year of establishment:</u>
    <br>
    1989
    <p>
    <U>Located in:</u>
    <br>
    Kranenburg bei Kleve in NRW 
    <p>
    
    <MARQUEE ALIGN="center"  BEHAVIOR="Scrollart" HEIGHT=Höhe WIDTH=Breite DIRECTION="Scrollrichtung" SCROLLAMOUNT=Schrittweite in Pixeln SCROLLDELAY=Pause in Millisekunden HSPACE=Horizontaler Abstand VSPACE=Vertikaler Abstand LOOP=50>
    +++   Newsticker   +++   Newsticker   +++</MARQUEE> 
    
    
    <!-- ende inhalt-->
    
    </td>
    </tr>
    </table><!--ende hauptinhaltstabelle-->
    
    <tr>
    <td   class="fuss"    ></td><td   class="fuss" >::: project A&E GmbH   ::: Im Hammereisen 42   :::   47559 Kranenburg   :::</td>
    </tr></table></td>
    
    </body></html>
    Das passende CSS Style Sheet:

    Code:
    .dmx {
        font: 13px tahoma;
    }
    .dmx .item1,
    .dmx .item1:hover,
    .dmx .item1-active,
    .dmx .item1-active:hover {
        padding: 5px 100px 3px 10px;
        border-bottom: 1px solid silver;
        background: #2781bb;
        font: 13px arial;
        color: #ffffff;
        font-weight: none;
        text-decoration: none;
        display: block;
        white-space: nowrap;
        position: relative;
    }
    .dmx .item2,
    .dmx .item2:hover,
    .dmx .item2-active,
    .dmx .item2-active:hover {
        padding: 3px 8px 4px 8px;
        font: 12px tahoma;
        border-bottom: 1px solid silver;
        color: #ffffff;
        background: #ffffff;
        font-weight: bold;
        text-decoration: none;
        display: block;
        white-space: nowrap;
        position: relative;
        z-index: 500;
    }
    .dmx .item2 {
        background: #2781bb;
    }
    .dmx .item2:hover,
    .dmx .item2-active,
    .dmx .item2-active:hover {
        background: #ffffff;
        color: #00747d;
    }
    .dmx .arrow,
    .dmx .arrow:hover {
        padding: 3px 16px 4px 8px;
    }
    .dmx .item2 img,
    .dmx .item2-active img{
        position: absolute;
        top: 4px;
        right: 1px;
        border: 1;
        color: #2781bb;
    }
    .dmx .section {
        border: 1px solid silver;
        position: absolute;
        visibility: hidden;
        z-index: -1;
    }
    
    .dmx .bottom,
    .dmx .bottom:hover {
        border-bottom: 1px solid silver;
    }
    
    /* html .dmx td { position: relative; } /* ie 5.0 fix */
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    HTML Newbie
    Themenstarter

    Registriert seit
    08.07.2009
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann ich die Navigation für den IE > Version 5.0 anzeigen lassen

    und das passende Java Script File:

    Code:
    
    
    
    function DropMenuX(id) {
    
        /* Type of the menu: "horizontal" or "vertical" */
        this.type = "horizontal";
    
        /* Delay (in miliseconds >0): show-hide menu
         * Hide must be > 0 */
        this.delay = {
            "show": 0,
            "hide": 400
        }
        /* Change the default position of sub-menu by Y pixels from top and X pixels from left
         * Negative values are allowed */
        this.position = {
            "level1": { "top": 0, "left": 0},
            "levelX": { "top": 0, "left": 0}
        }
    
        /* fix ie selectbox bug ? */
        this.fixIeSelectBoxBug = true;
    
        /* Z-index property for .section */
        this.zIndex = {
            "visible": 500,
            "hidden": -1
        };
    
        // Browser detection
        this.browser = {
            "ie": Boolean(document.body.currentStyle),
            "ie5": (navigator.appVersion.indexOf("MSIE 5.5") != -1 || navigator.appVersion.indexOf("MSIE 5.0") != -1),
            "ie6": (navigator.appVersion.indexOf("MSIE 6.0") != -1)
        };
    
        if (!this.browser.ie) {
            this.browser.ie5 = false;
            this.browser.ie6 = false;
        }
    
        /* Initialize the menu */
        this.init = function() {
            if (!document.getElementById(this.id)) { return alert("DropMenuX.init() failed. Element '"+ this.id +"' does not exist."); }
            if (this.type != "horizontal" && this.type != "vertical") { return alert("DropMenuX.init() failed. Unknown menu type: '"+this.type+"'"); }
            if (this.browser.ie && this.browser.ie5) { fixWrap(); }
            fixSections();
            parse(document.getElementById(this.id).childNodes, this.tree, this.id);
        }
    
        /* Search for .section elements and set width for them */
        function fixSections() {
            var arr = document.getElementById(self.id).getElementsByTagName("div");
            var sections = new Array();
            var widths = new Array();
    
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].className == "section") {
                    sections.push(arr[i]);
                }
            }
            for (var i = 0; i < sections.length; i++) {
                widths.push(getMaxWidth(sections[i].childNodes));
            }
            for (var i = 0; i < sections.length; i++) {
                sections[i].style.width = (widths[i]) + "px";
            }
            if (self.browser.ie) {
                for (var i = 0; i < sections.length; i++) {
                    setMaxWidth(sections[i].childNodes, widths[i]);
                }
            }
        }
    
        function fixWrap() {
            var elements = document.getElementById(self.id).getElementsByTagName("a");
            for (var i = 0; i < elements.length; i++) {
                if (/item2/.test(elements[i].className)) {
                    elements[i].innerHTML = '<div nowrap="nowrap">'+elements[i].innerHTML+'</div>';
                }
            }
        }
    
        /* Search for an element with highest width among given nodes, return that width */
        function getMaxWidth(nodes) {
            var maxWidth = 0;
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].nodeType != 1 || /section/.test(nodes[i].className)) { continue; }
                if (nodes[i].offsetWidth > maxWidth) { maxWidth = nodes[i].offsetWidth; }
            }
            return maxWidth;
        }
    
        /* Set width for item2 elements */
        function setMaxWidth(nodes, maxWidth) {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].nodeType == 1 && /item2/.test(nodes[i].className) && nodes[i].currentStyle) {
                    if (self.browser.ie5) {
                        nodes[i].style.width = (maxWidth) + "px";
                    } else {
                        nodes[i].style.width = (maxWidth - parseInt(nodes[i].currentStyle.paddingLeft) - parseInt(nodes[i].currentStyle.paddingRight)) + "px";
                    }
                }
            }
        }
    
        /* Parse nodes, create events, position elements */
        function parse(nodes, tree, id) {
            for (var i = 0; i < nodes.length; i++) {
                if (1 != nodes[i].nodeType) {
                    continue;
                }
                switch (true) {
                    // .item1
                    case /\bitem1\b/.test(nodes[i].className):
                        nodes[i].id = id + "-" + tree.length;
                        tree.push(new Array());
                        nodes[i].onmouseover = itemOver;
                        nodes[i].onmouseout = itemOut;
                        break;
                    // .item2
                    case /\bitem2\b/.test(nodes[i].className):
                        nodes[i].id = id + "-" + tree.length;
                        tree.push(new Array());
                        nodes[i].onmouseover = itemOver;
                        nodes[i].onmouseout = itemOut;
                        break;
                    // .section
                    case /\bsection\b/.test(nodes[i].className):
                        // id, events
                        nodes[i].id = id + "-" + (tree.length - 1) + "-section";
                        nodes[i].onmouseover = sectionOver;
                        nodes[i].onmouseout = sectionOut;
                        // position
                        var box1 = document.getElementById(id + "-" + (tree.length - 1));
                        var box2 = document.getElementById(nodes[i].id);
                        var el = new Element(box1.id);
                        if (1 == el.level) {
                            if ("horizontal" == self.type) {
                                box2.style.top = box1.offsetTop + box1.offsetHeight + self.position.level1.top + "px";
                                if (self.browser.ie5) {
                                    box2.style.left = self.position.level1.left + "px";
                                } else {
                                    box2.style.left = box1.offsetLeft + self.position.level1.left + "px";
                                }
                            } else if ("vertical" == self.type) {
                                box2.style.top = box1.offsetTop + self.position.level1.top + "px";
                                if (self.browser.ie5) {
                                    box2.style.left = box1.offsetWidth + self.position.level1.left + "px";
                                } else {
                                    box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.level1.left + "px";
                                }
                            }
                        } else {
                            box2.style.top = box1.offsetTop + self.position.levelX.top + "px";
                            box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.levelX.left + "px";
                        }
                        // sections, sectionsShowCnt, sectionsHideCnt
                        self.sections.push(nodes[i].id);
                        self.sectionsShowCnt.push(0);
                        self.sectionsHideCnt.push(0);
                        if (self.fixIeSelectBoxBug && self.browser.ie6) {
                            nodes[i].innerHTML = nodes[i].innerHTML + '<iframe id="'+nodes[i].id+'-iframe" src="javascript:false;" scrolling="no" frameborder="0" style="position: absolute; top: 0px; left: 0px; display: none; filter:alpha(opacity=0);"></iframe>';
                        }
                        break;
                }
                if (nodes[i].childNodes) {
                    if (/\bsection\b/.test(nodes[i].className)) {
                        parse(nodes[i].childNodes, tree[tree.length - 1], id + "-" + (tree.length - 1));
                    } else {
                        parse(nodes[i].childNodes, tree, id);
                    }
                }
            }
        }
    
        /* event, item:onmouseover */
        function itemOver() {
            //debug("itemOver("+this.id+") , visible = " + self.visible);
            self.itemShowCnt++;
            var id_section = this.id + "-section";
            if (self.visible.length) {
                var el = new Element(self.visible.getLast());
                el = document.getElementById(el.getParent().id);
                if (/item\d-active/.test(el.className)) {
                    el.className = el.className.replace(/(item\d)-active/, "$1");
                }
            }
            if (self.sections.contains(id_section)) {
                clearTimers();
                self.sectionsHideCnt[self.sections.indexOf(id_section)]++;
                var cnt = self.sectionsShowCnt[self.sections.indexOf(id_section)];
                var timerId = setTimeout(function(a, b) { return function() { self.showSection(a, b); } } (id_section, cnt), self.delay.show);
                self.timers.push(timerId);
            } else {
                if (self.visible.length) {
                    clearTimers();
                    var timerId = setTimeout(function(a, b) { return function() { self.showItem(a, b); } } (this.id, self.itemShowCnt), self.delay.show);
                    self.timers.push(timerId);
                }
            }
        }
    
        /* event, item:onmouseout */
        function itemOut() {
            //debug("itemOut("+this.id+") , visible = " + self.visible);
            self.itemShowCnt++;
            var id_section = this.id + "-section";
            if (self.sections.contains(id_section)) {
                self.sectionsShowCnt[self.sections.indexOf(id_section)]++;
                if (self.visible.contains(id_section)) {
                    var cnt = self.sectionsHideCnt[self.sections.indexOf(id_section)];
                    var timerId = setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(id_section, cnt), self.delay.hide);
                    self.timers.push(timerId);
                }
            }
        }
    
        /* event, section:onmouseover */
        function sectionOver() {
            //debug("sectionOver("+this.id+") , visible = " + self.visible);
            self.sectionsHideCnt[self.sections.indexOf(this.id)]++;
            var el = new Element(this.id);
            var parent = document.getElementById(el.getParent().id);
            if (!/item\d-active/.test(parent.className)) {
                parent.className = parent.className.replace(/(item\d)/, "$1-active");
            }
        }
    
        /* event, section:onmouseout */
        function sectionOut() {
            //debug("sectionOut("+this.id+") , visible = " + self.visible);
            self.sectionsShowCnt[self.sections.indexOf(this.id)]++;
            var cnt = self.sectionsHideCnt[self.sections.indexOf(this.id)];
            var timerId = setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(this.id, cnt), self.delay.hide);
            self.timers.push(timerId);
        }
    
        /* Show section (1 argument passed)
         * Try to show section (2 arguments passed) - check cnt with sectionShowCnt */
        this.showSection = function(id, cnt) {
            if (typeof cnt != "undefined") {
                if (cnt != this.sectionsShowCnt[this.sections.indexOf(id)]) { return; }
            }
            //debug("showSection("+id+", "+cnt+") , visible = " + this.visible);
            this.sectionsShowCnt[this.sections.indexOf(id)]++;
            if (this.visible.length) {
                if (id == this.visible.getLast()) { return; }
                var el = new Element(id);
                var parents = el.getParentSections();
                //debug("getParentSections("+el.id+") = " + parents);
                for (var i = this.visible.length - 1; i >= 0; i--) {
                    if (parents.contains(this.visible[i])) {
                        break;
                    } else {
                        this.hideSection(this.visible[i]);
                    }
                }
            }
            var el = new Element(id);
            var parent = document.getElementById(el.getParent().id);
            if (!/item\d-active/.test(parent.className)) {
                parent.className = parent.className.replace(/(item\d)/, "$1-active");
            }
            if (document.all) { document.getElementById(id).style.display = "block"; }
            document.getElementById(id).style.visibility = "visible";
            document.getElementById(id).style.zIndex = this.zIndex.visible;
            if (this.fixIeSelectBoxBug && this.browser.ie6) {
                var div = document.getElementById(id);
                var iframe = document.getElementById(id+"-iframe");
                iframe.style.width = div.offsetWidth + parseInt(div.currentStyle.borderLeftWidth) + parseInt(div.currentStyle.borderRightWidth);
                iframe.style.height = div.offsetHeight + parseInt(div.currentStyle.borderTopWidth) + parseInt(div.currentStyle.borderBottomWidth);
                iframe.style.top = -parseInt(div.currentStyle.borderTopWidth);
                iframe.style.left = -parseInt(div.currentStyle.borderLeftWidth);
                iframe.style.zIndex = div.style.zIndex - 1;
                iframe.style.display = "block";
            }
            this.visible.push(id);
        }
    
        /* Emulating an empty non-existent section, we have to hide elements, works like showSection() */
        this.showItem = function(id, cnt) {
            if (typeof cnt != "undefined") {
                if (cnt != this.itemShowCnt) { return; }
            }
            this.itemShowCnt++;
            if (this.visible.length) {
                var el = new Element(id + "-section");
                var parents = el.getParentSections();
                //debug("showItem() getParentSections("+el.id+") = " + parents);
                for (var i = this.visible.length - 1; i >= 0; i--) {
                    if (parents.contains(this.visible[i])) {
                        break;
                    } else {
                        this.hideSection(this.visible[i]);
                    }
                }
            }
        }
    
        /* Hide section (1 argument passed)
         * Try to hide section (2 arguments passed) - check cnt with sectionHideCnt */
        this.hideSection = function(id, cnt) {
            if (typeof cnt != "undefined") {
                if (cnt != this.sectionsHideCnt[this.sections.indexOf(id)]) { return; }
                if (id == this.visible.getLast()) {
                    //debug("hideSectionAll("+id+", "+cnt+") , visible = " + this.visible);
                    for (var i = this.visible.length - 1; i >= 0; i--) {
                        this.hideSection(this.visible[i]);
                    }
                    return;
                }
            }
            //debug("hideSection("+id+", "+cnt+") , visible = " + this.visible);
            var el = new Element(id);
            var parent = document.getElementById(el.getParent().id);
            if (/item\d-active/.test(parent.className)) {
                parent.className = parent.className.replace(/(item\d)-active/, "$1");
            }
            document.getElementById(id).style.zIndex = this.zIndex.hidden;
            document.getElementById(id).style.visibility = "hidden";
            if (document.all) { document.getElementById(id).style.display = "none"; }
            if (this.fixIeSelectBoxBug && this.browser.ie6) {
                var iframe = document.getElementById(id+"-iframe");
                iframe.style.display = "none";
            }
            if (this.visible.contains(id)) {
                if (id == this.visible.getLast()) {
                    this.visible.pop();
                } else {
                    //throw "DropMenuX.hideSection('"+id+"', "+cnt+") failed, trying to hide a section that is not the deepest visible section";
                    return;
                }
            } else {
                //throw "DropMenuX.hideSection('"+id+"', "+cnt+") failed, cannot hide element that is not visible";
                return;
            }
            this.sectionsHideCnt[this.sections.indexOf(id)]++;
        }
    
        /* Element (.section, .item2 etc) */
        function Element(id) {
    
            this.menu = self;
            this.id = id;
    
            /* Get Level of given id
             * Examples: menu-1 (1 level), menu-1-4 (2 level) */
            this.getLevel = function() {
                var s = this.id.substr(this.menu.id.length);
                return s.substrCount("-");
            }
    
            /* Get parent Element */
            this.getParent = function() {
                var s = this.id.substr(this.menu.id.length);
                var a = s.split("-");
                a.pop();
                return new Element(this.menu.id + a.join("-"));
            }
    
            /* Check whether an element has a parent element */
            this.hasParent = function() {
                var s = this.id.substr(this.menu.id.length);
                var a = s.split("-");
                return a.length > 2;
            }
    
            /* Check whether an element has a sub-section */
            this.hasChilds = function() {
                return Boolean(document.getElementById(this.id + "-section"));
            }
    
            /* Get parent section elements for current section */
            this.getParentSections = function() {
                var s = this.id.substr(this.menu.id.length);
                s = s.substr(0, s.length - "-section".length);
                var a = s.split("-");
                a.shift();
                a.pop();
                var s = this.menu.id;
                var parents = [];
                for (var i = 0; i < a.length; i++) {
                    s += ("-" + a[i]);
                    parents.push(s + "-section");
                }
                return parents;
            }
    
            this.level = this.getLevel();
        }
    
        /* Clear all timers set with setTimeout() */
        function clearTimers() {
            for (var i = self.timers.length - 1; i >= 0; i--) {
                clearTimeout(self.timers[i]);
                self.timers.pop();
            }
        }
    
        var self = this;
        this.id = id; /* menu id */
        this.tree = []; /* tree structure of menu */
        this.sections = []; /* all sections, required for timeout */
        this.sectionsShowCnt = [];
        this.sectionsHideCnt = [];
        this.itemShowCnt = 0;
        this.timers = []; // timeout ids
        this.visible = []; /* visible section, ex. Array("menu-0-section", ..) , succession is important: top to bottom */
    }
    
    /* Finds the index of the first occurence of item in the array, or -1 if not found */
    if (typeof Array.prototype.indexOf == "undefined") {
        Array.prototype.indexOf = function(item) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] === item) {
                    return i;
                }
            }
            return -1;
        }
    }
    
    /* Check whether array contains given string */
    if (typeof Array.prototype.contains == "undefined") {
        Array.prototype.contains = function(s) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] === s) {
                    return true;
                }
            }
            return false;
        }
    }
    
    /* Counts the number of substring occurrences */
    if (typeof String.prototype.substrCount == "undefined") {
        String.prototype.substrCount = function(s) {
            return this.split(s).length - 1;
        }
    }
    
    /* Get the last element from the array */
    if (typeof Array.prototype.getLast == "undefined") {
        Array.prototype.getLast = function() {
            return this[this.length-1];
        }
    }
    Im Firefox (egal welche Version), Opera & Safari funzt die Seite nur im IE nicht, bitte um Hilfe

  3. #3
    Unregistriert
    Gast

    Standard AW: Wie kann ich die Navigation für den IE > Version 5.0 anzeigen lassen

    neuer Tag neues Glück

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    08.07.2009
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann ich die Navigation für den IE > Version 5.0 anzeigen lassen

    Ich verzeifel, keiner eine Idee?

    ich habe schon versucht, wie vom Author vorgeschlagen die Tabellen an andere Stelle zu schliessen. Die betrachte jedoch nicht den gewünschten erfolg, weil die gesamte Seite zerschossen worden ist. Das menü war dann wenigstens klappbar. *schnief

  5. #5
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann ich die Navigation für den IE > Version 5.0 anzeigen lassen

    No way! Ich glaube das tut sich hier keiner an. Außerdem halte ich es nicht für praktikabel. Was passiert mit Deinem Menu mit ausgeschaltetem JS.?
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  6. #6
    Thonixx
    Gast

    Standard AW: Wie kann ich die Navigation für den IE > Version 5.0 anzeigen lassen

    Such nach CSS-Klappmenü, das geht prima ohne JS und ich rate dir von DHTML ab, ist meist nur eine Spielerei.

Ähnliche Themen

  1. Bildausschnitt anzeigen lassen
    Von DaRealAndy im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 17
    Letzter Beitrag: 12.05.2009, 00:44
  2. Benutzer anzeigen lassen
    Von FraHol im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 30.09.2008, 13:02
  3. Datei Anzeigen Lassen mit PHP
    Von ghost2108 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 21.10.2007, 22:49
  4. code anzeigen lassen
    Von Tweety im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 08.05.2004, 01:58
  5. Links Anzeigen lassen
    Von Nixchecker im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 12.04.2004, 12:12

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •