Solved

jQuery Drop down script not working in IE7

Posted on 2009-04-10
5
1,950 Views
Last Modified: 2012-06-27
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:
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>

Open in new window

0
Comment
Question by:Shaye Larsen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 24127208
IE doesn't allow trailing commas in array/object definitions. Remove it from the definition of mega2Config.

I used the MS Script Debugger to find the issue:
http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en
0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 24130526
Thank you for your help. If I just remove the commas it still doesn't work and that would mess it up for FF3. I also tried a few other things but still no. How would I rewrite mega2Config to work with both.
0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 24130598
Nevermind, sorry, I figured it out. I removed the comma on the last entry and it worked. THANKS!!! You are always a great help!
0
 
LVL 42

Expert Comment

by:David S.
ID: 24131925
You're welcome. Sorry about the confusion. I can see now how what I said could be interpreted both ways.
0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 25901802
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
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question