Solved

jQuery Drop down script not working in IE7

Posted on 2009-04-10
5
1,925 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:the_hero
  • 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:the_hero
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:the_hero
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:the_hero
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery animation faster 1 16
angularls and plnkr 14 17
increase words that display in widget 6 12
Gradient CSS 4 10
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now