website anders bij IE

Annys · 21 nov 2008

Hallo,

Ik heb een website gemaakt in Dreamweaver en nu blijkt dat submenu's (dus knoppen die uitklappen als je over andere knoppen heen gaat) van de vertical spry menu bar wegvallen in Internet Explorer.
Wie kan mij helpen dit op te lossen???

HTML:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>index</title>

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

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>


<body>

<div id="container">
    
    
    <div id="header" onclick="location.href='index.html'" style="cursor:pointer"></div>
    
    <div id="zoekbalk"></div>
    
  <div id="menu">
    
    <ul id="Menu" class="MenuBarVertical">
       	<li><a href="index.html">Home</a></li>
        <li><a href="OvertClick.html">Over tClick</a></li>
        <li><a class="MenuBarItemSubmenu" href="Pakketten.html">Pakketten</a>
            <ul>
              <li><a href="tClick-Labanalyse-Labstatistiek.html">Laboratorium</a></li>
              <li><a href="tClick-Orders-Status.html">Planning</a></li>
              <li><a href="tClick-Offerte-Facturatie.html">Financieel</a></li>
              <li><a href="tClick-Management-Productie.html">Management</a></li>
            </ul>
        </li>
        <li><a href="Contact.html">Contact</a></li>
      </ul></div>

    
<div id="content">
     <p class="style2"> Welkom </p>
     
      <p>Dit is de vernieuwde website van tClick. Het nieuwe logo is aangepast op de software.</p>
      
      <p>In het menu onder de knop Pakketten vindt u de verschillende onderdelen van de software met bijbehorende uitleg. Ieder onderdeel van tClick heeft nu een duidelijk icoon met een eigen kleur. Dit maakt het startmenu nog overzichtelijker.</p> 
      
      <p>Heeft u vragen of opmerkingen over de inhoud van deze website? Vul dan het contactformulier in!</p>
      
       <p class="style3">Schrijf je nu in voor de nieuwsbrief en win een iPod Shuffle!</p>
       
       <form action="" method="get">
      <p align="left">Naam::<br>
 		<input name="Bedrijf" type="text" id="Bedrijf" size="30"></p>
        <p align="left">Bedrijf:<br>
 		<input name="E-mail" type="text" id="E-mail" size="30"></p>
        <p align="left">E-mail:<br>
 		<input name="E-mail" type="text" id="E-mail" size="30"></p>
        
         <p align="left">
         <label>
  <input type="image" name="imageField" id="imageField" src="IMAGES/Submit.png" />
  </label>
  </p>
      
      </form>
   
   <p> <img src="IMAGES/iPodShuffle.png" style="float:left; padding: 10px;" /> </p>        
   
   </div>
    
  <div id="footer"> Jonker Elektrotechnische Bedrijfsautomatiserings b.v. Mors 19 7151MX Eibergen, Tel.: 0545 463000, e-mail:Verkoop@Jonker.nl </div>
</div>
</div>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("Menu", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

CSS:

Code:

@charset "UTF-8";
/* CSS Document */

body{
    background-image:url(CSSIMAGES/BG1.png);
    background-repeat:repeat-x;
    background-color:#000000;
    font-family:"Century Gothic", "arial";
    font-style: normal;    
    font-size: 10px;
    color: #FFFFFF;
}

a {
    font-size: 10px;
    color: #CCCCCC;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #CCCCCC;
}
a:hover {
    text-decoration: none;
    color: #666666;
}
a:active {
    text-decoration: none;
}

#container{
    width: 852px;
    height: 720px;
    margin: 0px auto;
}
#header{
    background-image: url(CSSIMAGES/header_tClick.png);
    background-repeat:no-repeat;
    height: 142px;
    width: 852px;
}
#zoekbalk{
	height: 20px;
	width: 100%;
	clear: both;
}
#tussenruimte{
	width: 100%;
	height: 10px;
	clear: both;
	float: right;
	font-weight: bold;
	text-align: center;
}

#menu{
	position: relative;
	padding-right: 5px;
	width: 98px;
	float: left;
	clear: left;
	float: left;
}
#content{
	position: relative;
	width: 730px;
	height: 500px;
	float: right;
	padding: 5px;
	border: solid 3px;
	border-color: #FFDEAD;
	overflow: auto;
}

#footer{
	position: relative;
	width: 740px;
	height: 20px;
	top: 10px;
	background-color: #838383;
	border: solid 3px;
	border-color: #FFDEAD;
	clear: both;
	float: right;
	font-weight: bold;
	text-align: center;
	overflow: auto;
}

.style1 {font-size: 10px; 
    font-family:"Century Gothic";
}

.style2 {font-size: 14px; 
    font-family:"Century Gothic";
	font-weight: bold;
}

.style3 {font-size: 12px; 
    font-family:"Century Gothic";
	font-weight: bold;
}

JS van het menu:

Code:

var Spry;
if(!Spry)
{
	Spry = {};
}
if(!Spry.Widget)
{
	Spry.Widget = {};
}

// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
{
	this.init(element, opts);
};

Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
	this.element = this.getElement(element);

	// represents the current (sub)menu we are operating on
	this.currMenu = null;

	var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
	if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
	{
		// bail on older unsupported browsers
		return;
	}

	// load hover images now
	if(opts)
	{
		for(var k in opts)
		{
			var rollover = new Image;
			rollover.src = opts[k];
		}
	}

	if(this.element)
	{
		this.currMenu = this.element;
		var items = this.element.getElementsByTagName('li');
		for(var i=0; i<items.length; i++)
		{
			this.initialize(items[i], element, isie);
			if(isie)
			{
				this.addClassName(items[i], "MenuBarItemIE");
				items[i].style.position = "static";
			}
		}
		if(isie)
		{
			if(this.hasClassName(this.element, "MenuBarVertical"))
			{
				this.element.style.position = "relative";
			}
			var linkitems = this.element.getElementsByTagName('a');
			for(var i=0; i<linkitems.length; i++)
			{
				linkitems[i].style.position = "relative";
			}
		}
	}
};

Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};

Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
	if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
	{
		return false;
	}
	return true;
};

Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || this.hasClassName(ele, className))
		return;
	ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || !this.hasClassName(ele, className))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
		{
			element.addEventListener(eventType, handler, capture);
		}
		else if (element.attachEvent)
		{
			element.attachEvent('on' + eventType, handler);
		}
	}
	catch (e) {}
};

// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
	var layer = document.createElement('iframe');
	layer.tabIndex = '-1';
	layer.src = 'javascript:false;';
	menu.parentNode.appendChild(layer);
	
	layer.style.left = menu.offsetLeft + 'px';
	layer.style.top = menu.offsetTop + 'px';
	layer.style.width = menu.offsetWidth + 'px';
	layer.style.height = menu.offsetHeight + 'px';
};

// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
{
	var layers = menu.parentNode.getElementsByTagName('iframe');
	while(layers.length > 0)
	{
		layers[0].parentNode.removeChild(layers[0]);
	}
};

// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
	var menus = root.getElementsByTagName('ul');
	for(var i=0; i<menus.length; i++)
	{
		this.hideSubmenu(menus[i]);
	}
	this.removeClassName(this.element, "MenuBarActive");
};

// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
	return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
};

// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
	if(this.currMenu)
	{
		this.clearMenus(this.currMenu);
		this.currMenu = null;
	}
	
	if(menu)
	{
		this.addClassName(menu, "MenuBarSubmenuVisible");
		if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
		{
			if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
			{
				menu.style.top = menu.parentNode.offsetTop + 'px';
			}
		}
		if(typeof document.uniqueID != "undefined")
		{
			this.createIframeLayer(menu);
		}
	}
	this.addClassName(this.element, "MenuBarActive");
};

// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
	if(menu)
	{
		this.removeClassName(menu, "MenuBarSubmenuVisible");
		if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
		{
			menu.style.top = '';
			menu.style.left = '';
		}
		this.removeIframeLayer(menu);
	}
};

// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
{
	var opentime, closetime;
	var link = listitem.getElementsByTagName('a')[0];
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);

	var hasSubMenu = false;
	if(menu)
	{
		this.addClassName(link, "MenuBarItemSubmenu");
		hasSubMenu = true;
	}

	if(!isie)
	{
		// define a simple function that comes standard in IE to determine
		// if a node is within another node
		listitem.contains = function(testNode)
		{
			// this refers to the list item
			if(testNode == null)
			{
				return false;
			}
			if(testNode == this)
			{
				return true;
			}
			else
			{
				return this.contains(testNode.parentNode);
			}
		};
	}
	
	// need to save this for scope further down
	var self = this;

	this.addEventListener(listitem, 'mouseover', function(e)
	{
		if(self.bubbledTextEvent())
		{
			// ignore bubbled text events
			return;
		}
		clearTimeout(closetime);
		if(self.currMenu == listitem)
		{
			self.currMenu = null;
		}
		// show menu highlighting
		self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
		if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
		{
			opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
		}
	}, false);

	this.addEventListener(listitem, 'mouseout', function(e)
	{
		if(self.bubbledTextEvent())
		{
			// ignore bubbled text events
			return;
		}

		var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
		if(!listitem.contains(related))
		{
			clearTimeout(opentime);
			self.currMenu = listitem;

			// remove menu highlighting
			self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
			if(menu)
			{
				closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
			}
		}
	}, false);
};

Ik hoop dat iemand mij kan helpen want ik kom er niet uit!

Groet,
Annys

Annys · 21 nov 2008

Volgens mij heb ik deze vraag in het verkeerde onderwerp geplaatst, maar ik weet niet hoe ik dit moet veranderen!

m@rio · 21 nov 2008

Waar zou de vraag beter tot zijn recht komen? Dan verplaats ik (of een andere mod) de vraag naar die sectie.

Annys · 21 nov 2008

Ik denk bij 'Dreamweaver'

m@rio · 21 nov 2008

En het topic is verplaatst naar Dreamweaver.

website anders bij IE

Annys

Gebruiker

Annys

Gebruiker

m@rio

Trotse Pappa

Annys

Gebruiker

m@rio

Trotse Pappa

Nieuwste berichten

Wij waarderen jouw privacy