Solved

jQuery Drop down script not working in IE7

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

770 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