Solved

jQuery Drop down script not working in IE7

Posted on 2009-04-10
5
1,964 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

632 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