1
Navigation lässt sich mit IE nur fehlerhaft darstellen, Firefox und Opera funkionieren
Kostenfreie Javascript Navigation (klappbar) lässt sich im IE nicht anzeigen
Hallo Administrator - Gemeinde
aufgrund von Finazkrise und Co habe ich auch noch den Bereich Webdesign aufs Auge gedrückt bekommen. Fit in Sachen HTMl & Co bin ich schon, nur kein Profi oder sowas, ich weiß wie man HTML schreibt, liest und das ein oder andere Problem lösen könnte. Hierbei verzweifel ich derzeit jedoch ein wenig.
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:
IE Bug #1 (nested tables):
Example not working on IE:
Example that works on IE:
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:
cyberdevil befindet sich auf einem aufstrebenden Ast
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:
Example that works on IE:
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:
Meine Indexseite sollte nachfolgend aussehen:
und das passende Java Script File:
Im Firefox (egal welche Version), Opera & Safari geht die Seite nur im IE nicht, bitte um Hilfe
aufgrund von Finazkrise und Co habe ich auch noch den Bereich Webdesign aufs Auge gedrückt bekommen. Fit in Sachen HTMl & Co bin ich schon, nur kein Profi oder sowas, ich weiß wie man HTML schreibt, liest und das ein oder andere Problem lösen könnte. Hierbei verzweifel ich derzeit jedoch ein wenig.
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:
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>cyberdevil befindet sich auf einem aufstrebenden Ast
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:
<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%> </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)">»</span> about us</a>
<div class="section">
<a class="item2" href="index2.html">»</span> home</a>
<a class="item2" href="eng/philo.html">»</span> philosophy</a>
<a class="item2 arrow" href="eng/fgeschichte.html">»</span> company history</a>
<a class="item2 arrow" href="eng/referenzen.html">»</span> references</a>
<a class="item2 arrow" href="eng/vertretungen.html">»</span> respresentatives</a>
<a class="item2 arrow" href="eng/impressum.html">»</span> 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)">»</span> Maschinengruppe1</a>
<div class="section">
<a class="item2" href="javascript:void(0)">»</span> 1-1</a>
<div class="section">
<a class="item2" href="example.htm">»</span> 1-1-1</a>
<a class="item2 href="example2.html">»</span> 1-1-2</a>
<a class="item2" href="example2.html">»</span> 1-1-3</a>
<a class="item2" href="example2.html">»</span> 1-1-4</a>
<a class="item2 href="example2.html">»</span> 1-1-5</a>
<a class="item2" href="example2.html">»</span> 1-1-6</a>
</div>
<a class="item2 href="example2.html">»</span> 1-2</a>
<a class="item2" href="example2.html">»</span> 1-3</a>
<a class="item2" href="example2.html">»</span> 1-4</a>
<a class="item2 href="example2.html">»</span> 1-5</a>
<a class="item2" href="example2.html">»</span> 1-6</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> Maschinengruppe2</a>
<div class="section">
<a class="item2" href="example2.html">»</span> 2-1</a>
<a class="item2 href="example2.html">»</span> 2-2</a>
<a class="item2" href="example2.html">»</span> 2-3</a>
<a class="item2" href="example2.html">»</span> 2-4</a>
<a class="item2 href="example2.html">»</span> 2-5</a>
<a class="item2" href="example2.html">»</span> 2-6</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> Maschinengruppe3</a>
<div class="section">
<a class="item2" href="example2.html">»</span> 3-1</a>
<a class="item2 href="example2.html">»</span> 3-2</a>
<a class="item2" href="example2.html">»</span> 3-3</a>
<a class="item2" href="example2.html">»</span> 3-4</a>
<a class="item2 href="example2.html">»</span> 3-5</a>
<a class="item2" href="example2.html">»</span> 3-6</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> Maschinengruppe4</a>
<div class="section">
<a class="item2" href="example2.html">»</span> 4-1</a>
<a class="item2 href="example2.html">»</span> 4-2</a>
<a class="item2" href="example2.html">»</span> 4-3</a>
<a class="item2" href="example2.html">»</span> 4-4</a>
<a class="item2 href="example2.html">»</span> 4-5</a>
<a class="item2" href="example2.html">»</span> 4-6</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> Maschinengruppe5</a>
<div class="section">
<a class="item2" href="example2.html">»</span> 5-1</a>
<a class="item2 href="example2.html">»</span> 5-2</a>
<a class="item2" href="example2.html">»</span> 5-3</a>
<a class="item2" href="example2.html">»</span> 5-4</a>
<a class="item2 href="example2.html">»</span> 5-5</a>
<a class="item2" href="example2.html">»</span> 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)">»</span> glass industries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Glas1-1</a>
<a class="item2" href="example2.html">»</span> Glas1-2</a>
<a class="item2" href="example2.html">»</span> Glas1-3</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> soft drink industries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Getränke-1</a>
<a class="item2" href="example2.html">»</span> Getränke1-2</a>
<a class="item2" href="example2.html">»</span> Getränke1-3</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> building industries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Bau1-1</a>
<a class="item2" href="example2.html">»</span> Bau1-2</a>
<a class="item2" href="example2.html">»</span> Bau1-3</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> food industries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Lebensmittel1-1</a>
<a class="item2" href="example2.html">»</span> Lebensmittel1-2</a>
<a class="item2" href="example2.html">»</span> Lebensmittel1-3</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> chemicalindustries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Chemie1-1</a>
<a class="item2" href="example2.html">»</span> Chemie1-2</a>
<a class="item2" href="example2.html">»</span> Chemie1-3</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> logisticindustries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Logistik1-1</a>
<a class="item2" href="example2.html">»</span> Logistik1-2</a>
<a class="item2" href="example2.html">»</span> Logistik1-3</a>
</div>
<br>
<a class="item1" href="javascript:void(0)">»</span> contact</a>
<div class="section">
<a class="item2" href="eng/ansprechpartner.html">»</span> contact partners</a>
<a class="item2 arrow" href="eng/sofindensieuns.html">»</span> So you can find us</a>
<a class="item2 arrow" href="eng/kontakt.html">»</span> contact formular</a>
<a class="item2 arrow" href="eng/airports.html">»</span> 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>
[\code]
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 */und das passende Java Script File:
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 geht die Seite nur im IE nicht, bitte um Hilfe
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 120004
Url: https://administrator.de/contentid/120004
Printed on: April 18, 2024 at 11:04 o'clock
1 Comment
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
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
