Shaye Larsen
asked on
jQuery Drop down script not working in IE7
I have a script to create a drop down menu that can house anything in its drop, meaning, it drops a div and you can put anything in that div. I am using jQuery and a working plugin another guy developed. It also works off the hoverIntent jquery plugin.
In my drop down div I have another menu within it to help sort the many links and options.
The structure it as follows:
<ul>
<li> // this is the menu list item
<div></div> //each one has a div that drops down when you hover the <li>
</li>
</ul>
It works perfectly in FF3 but it doesn't do anything in IE7. I have exhausted myself trying to figure it out.
I set up an example on another site since our site has a member's area. Please go check the example below in FF3 and IE7 to see what I mean. Again, FF3 works but IE7 doesn't.
http://dalelarsen.com/beta13/example_script.php
Here is my code:
In my drop down div I have another menu within it to help sort the many links and options.
The structure it as follows:
<ul>
<li> // this is the menu list item
<div></div> //each one has a div that drops down when you hover the <li>
</li>
</ul>
It works perfectly in FF3 but it doesn't do anything in IE7. I have exhausted myself trying to figure it out.
I set up an example on another site since our site has a member's area. Please go check the example below in FF3 and IE7 to see what I mean. Again, FF3 works but IE7 doesn't.
http://dalelarsen.com/beta13/example_script.php
Here is my code:
2967344660646<script type="text/javascript">
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
function addmega2(){
$(this).addClass("hovering");
}
function removemega2(){
$(this).removeClass("hovering");
}
var mega2Config = {
interval: 300,
sensitivity: 50,
over: addmega2,
timeout: 500,
out: removemega2,
};
$("li.mega2").hoverIntent(mega2Config)
});
//]]>
</script>
<style type="text/css">
ul#topMenu {
z-index:1000;
}
ul#topMenu li {
display: inline;
position: relative;
z-index:1000;
}
ul#topMenu div {
display: none;
z-index:1000;
}
ul#topMenu li.mega2 div{
position: absolute;
top: 0.6em;
left: 0em;
text-decoration:none;
z-index:1000;
}
.mega2 {
text-decoration:none;
z-index:1000;
}
ul#topMenu li.hovering div {
display: block;
z-index:1000;
}
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
div#tabs div ul { height:100%; width:auto; background-color:#ebebeb; background-image:none; border:none;}
div#tabs div ul li {background-image:none; background-color:transparent; border:none; padding-left:2px; padding-right:2px; margin:0;}
div#tabs div ul li a span {cursor:pointer;}
/*Independent drop list settings
---------------------------------*/
div#tabs div.Introduction {width:410px; padding:0; margin:0; z-index:1000;}
div#tabs div.Introduction div {margin-left:185px; margin-top:0; margin-right:0; margin-bottom:0; padding:0; width:190px; z-index:1000;}
div#tabs div.Introduction div hr{width:190px;}
div#tabs div.Preparation {width:460px; padding:0; margin:0; z-index:1000;}
div#tabs div.Preparation div {margin-left:230px; margin-top:0; margin-right:0; margin-bottom:0; padding:0; width:210px; z-index:1000;}
div#tabs div.Preparation div hr{width:210px;}
div#tabs div.GettingStarted {width:445px; padding:0; margin:0; z-index:1000;}
div#tabs div.GettingStarted div {margin-left:225px; margin-top:0; margin-right:0; margin-bottom:0; padding:0; width:200px; z-index:1000;}
div#tabs div.GettingStarted div hr{width:200px;}
div#tabs div.TermTrans {width:415px; padding:0; margin:0; z-index:1000;}
div#tabs div.TermTrans div {margin-left:205px; margin-top:0; margin-right:0; margin-bottom:0; padding:0; width:190px; z-index:1000;}
div#tabs div.TermTrans div hr{width:190px;}
div#tabs div.Jobs {width:450px; padding:0; margin:0; z-index:1000;}
div#tabs div.Jobs div {margin-left:230px; margin-top:0; margin-right:0; margin-bottom:0; padding:0; width:210px; z-index:1000;}
div#tabs div.Jobs div hr{width:210px;}
div#tabs div.Events {width:420px; padding:0; margin:0; z-index:1000;}
div#tabs div.Events div {margin-left:215px; margin-top:0; margin-right:0; margin-bottom:0; padding:0; width:190px; z-index:1000;}
div#tabs div.Events div hr{width:190px;}
div#tabs div.Trouble {width:490px; padding:0; margin:0; z-index:1000;}
div#tabs div.Trouble div {margin-left:250px; margin-top:0; margin-right:0; margin-bottom:0; padding:0; width:215px; z-index:1000;}
div#tabs div.Trouble div hr{width:220px;}
</style>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel="stylesheet" />
<style type="text/css">
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color:#212121;
text-decoration:none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor:pointer; color:#ff9933;
}
a {
cursor:pointer;
text-decoration:none;
}
a.tabOver1{
height:36px;
width:70px;
z-index:99;
text-decoration:none;
padding-left:6px;
padding-right:6px;
}
a.tabOver1:hover {
background-color:#EBEBEB;
border:solid 1px #AAAAAA;
text-decoration:none;
}
</style>
<script type="text/javascript">
$(function() {
$(".Introduction, .Preparation, .GettingStarted, .TermTrans, .Jobs, .Events, .Trouble").tabs({ event: 'mouseover'}).addClass('ui-tabs-vertical ui-helper-clearfix');
});
</script>
<script type="text/javascript">
DD_roundies.addRule('.tabOver1', '3px', true);
</script>
<ul id="topMenu" style="position:relative;">
<li class="mega2"><a id="tabOver1" class="tabOver1" href="#">Introduction</a>
<div id="tabs">
<div class="Introduction">
<ul>
<li><a href="#fragment-1-1"><span>Teacher Introduction</span></a></li>
<li><a href="#fragment-1-2"><span>What is econoME?</span></a></li>
<li><a href="#fragment-1-3"><span>Benefits</span></a></li>
<li><br></li>
<li><br></li>
<li><br></li>
<li><br></li>
</ul>
<div id="fragment-1-1">
<strong>Teacher Introduction</strong><br>
<hr>
<a href="/text/introduction.php" target="content_window" onClick="window.open(this.href, this.target)">Read/Print Content</a><br>
<a href="<?php bloginfo('url'); ?>/econome_videos.php?content=teacherIntro" target="content_window" onClick="window.open(this.href, this.target)">Watch the Video</a><br>
</div>
<div id="fragment-1-2">
<strong>What is econoME?</strong><br>
<hr>
<a href="/text/overview.php" target="content_window" onClick="window.open(this.href, this.target)">Read/Print Content</a><br>
<a href="<?php bloginfo('url'); ?>/econome_videos.php?content=econoMEIntro" target="content_window" onClick="window.open(this.href, this.target)">Watch the Video</a><br>
Get the Forms for this<br>
</div>
<div id="fragment-1-3">
<strong>Benefits</strong><br>
<hr>
<a href="/text/benefits.php" target="content_window" onClick="window.open(this.href, this.target)">Read/Print Content</a><br>
<a href="<?php bloginfo('url'); ?>/econome_videos.php?content=benefits" target="content_window" onClick="window.open(this.href, this.target)">Watch the Video</a><br>
Get the Forms for this<br>
</div>
</div>
</div>
</li>
<li class="mega2"><a class="tabOver1" href="#">Preparation</a>
<div id="tabs">
<div class="Preparation">
<ul>
<li><a href="#fragment-2-1"><span>Quick Start</span></a></li>
<li><a href="#fragment-2-2"><span>S.O.S.</span></a></li>
<li><a href="#fragment-2-3"><span>Term 1</span></a></li>
<li><a href="#fragment-2-4"><span>Classroom Setup</span></a></li>
<li><a href="#fragment-2-5"><span>Suggested Yearly Calendar</span></a></li>
<li><a href="#fragment-2-6"><span>Recommended Filing System</span></a></li>
<li><a href="#fragment-2-7"><span>The Parent Pack</span></a></li>
</ul>
<div id="fragment-2-1">
<strong>Quick Start</strong><br>
<hr>
<a href="/text/quickstart.php" target="content_window" onClick="window.open(this.href, this.target)">Read/Print Content</a><br>
<a href="<?php bloginfo('url'); ?>/econome_videos.php?content=quickStart" target="content_window" onClick="window.open(this.href, this.target)">Watch the Video</a><br>
</div>
<div id="fragment-2-2">
<strong>S.O.S.</strong><br>
<hr>
<a href="/text/sos.php" target="content_window" onClick="window.open(this.href, this.target)">Read/Print Content</a><br>
<a href="<?php bloginfo('url'); ?>/econome_videos.php?content=sos" target="content_window" onClick="window.open(this.href, this.target)">Watch the Video</a><br>
</div>
<div id="fragment-2-3">
<strong>Term 1</strong><br>
<hr>
<a href="/text/term1.php" target="content_window" onClick="window.open(this.href, this.target)">Read/Print Content</a><br>
<a href="<?php bloginfo('url'); ?>/econome_videos.php?content=term1" target="content_window" onClick="window.open(this.href, this.target)">Watch the Video</a><br>
</div>
<div id="fragment-2-4">
<strong>Classroom Setup</strong><br>
<hr>
<a href="/classroom_setup.php" target="content_window" onClick="window.open(this.href, this.target)">Read/Print Content</a><br>
<a href="<?php bloginfo('url'); ?>/econome_videos.php?content=roomSetup" target="content_window" onClick="window.open(this.href, this.target)">Watch the Video</a><br>
</div>
<div id="fragment-2-5">
<strong>Suggested Yearly Calendar</strong><br>
<hr>
<a href="/suggested_calendar.php" target="content_window" onClick="window.open(this.href, this.target)">Read/Print Content</a><br>
<a href="<?php bloginfo('url'); ?>/econome_videos.php?content=calendar" target="content_window" onClick="window.open(this.href, this.target)">Watch the Video</a><br>
</div>
<div id="fragment-2-6">
<strong>Recommended Filing System</strong><br>
<hr>
<a href="/text/filing_system.php" target="content_window" onClick="window.open(this.href, this.target)">Read/Print Content</a><br>
<a href="<?php bloginfo('url'); ?>/econome_videos.php?content=filingSystem" target="content_window" onClick="window.open(this.href, this.target)">Watch the Video</a><br>
</div>
<div id="fragment-2-7">
<strong>The Parent Pack</strong><br>
<hr>
<a href="/text/parent_pack.php" target="content_window" onClick="window.open(this.href, this.target)">Read/Print Content</a><br>
<a href="<?php bloginfo('url'); ?>/econome_videos.php?content=parentPack" target="content_window" onClick="window.open(this.href, this.target)">Watch the Video</a><br>
</div>
</div>
</div>
</li>
</ul>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Nevermind, sorry, I figured it out. I removed the comma on the last entry and it worked. THANKS!!! You are always a great help!
You're welcome. Sorry about the confusion. I can see now how what I said could be interpreted both ways.
ASKER
Dear Moderator,
The above code needs to be replaced to remove a privacy issue. The attached file below has the code to replace it with. Please replace the code above with what is in the attached file below.
Thanks
Replace.txt
The above code needs to be replaced to remove a privacy issue. The attached file below has the code to replace it with. Please replace the code above with what is in the attached file below.
Thanks
Replace.txt
ASKER