Glossy Accordion IE 7 Problem

[moephish]

1) Script Title:
Glossy Accordion Menu
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...enu-glossy.htm
3) Describe problem:

I am having a problem in IE 7 where my navigation, when a header is closed, a large gap is left. I have not been able to figure out what is going on with this.

Here is a page where this occurs: http://one.brettstatman.com/RFD/testAccordion.php

Note: this issue ONLY occurs in IE

Thanks for any help!

[jscheuer1]

.

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

About your post, I don't think so. That is the situation in IE 9 if you put the page into IE 7 standards mode or IE 9 compatibility view mode.

However, if you view the page in a real IE 7 browser, or a real IE 8 browser in IE 7 mode or compatibility view mode, those gaps are there from the very beginning, they do not appear after closing, they are there from the start, when the page loads. The problem of addressing this issue with targeted styles is that IE cannot agree with itself how to render the page in IE 7. IE 7 and 8 in IE 7 mode do it one way, IE 9 in IE 7 mode does it another. And none of these are as intended.

Fortunately there's an easy fix that all three can agree on.

First, get rid of this:

<!--[if IE 7]>
	<style>
    	.whenOpen
{
	margin-top: -20px;	
}

a#closed.menuitem.submenuheader.whenClosed
{
margin-top: -20px;}

    </style>
    
<![endif]-->

Next, using a text only editor like NotePad, edit the accordion.js file, replacing this:

	transformHeader:function($targetHeader, config, state){
		$targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
		.removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
		if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
			$targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
			$targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
		}
		else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
			$targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
		else if (config.htmlsetting.location=="suffix")
			$targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
	},

With this:

	transformHeader:function($targetHeader, config, state){
		$targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
		.removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
		if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
			$targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
			$targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
		}
		else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
			$targetHeader.find('.accordprefix').empty().append((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
		else if (config.htmlsetting.location=="suffix")
			$targetHeader.find('.accordsuffix').empty().append((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
	},

That's it!

The browser cache may need to be cleared and/or the page refreshed to see changes.




BTW - In a completely unrelated matter, this form validation code is outside the body and has at least 2 problems:

<script>

$(document).ready(function() { 
    // validate signup form on keyup and submit 
    var validator = $("#messageForm").validate({ 
        rules: { 
           
            email: { 
                required: true, 
                email: true, 
                remote: "emails.php" 
            }, 
           
        }, 
        messages: { 
            firstname: "Enter your firstname", 
            lastname: "Enter your lastname", 
            username: { 
                required: "Enter a username", 
                minlength: jQuery.format("Enter at least {0} characters"), 
                remote: jQuery.format("{0} is already in use") 
            }, 
            password: { 
                required: "Provide a pa . . .

The highlighted and red comma is not required and throws an error in IE 7 and less, get rid of that.

In all browsers jQuery.format is not defined. I think you're missing a script that contains that function. If so, either add it to the page, or get rid of the validation code if you're not using it on that page.

Or, if you are using that script on some pages that have that defined, and for some reason you need it included on this page without that defined, you can rewrite it like so:

<script>

jQuery(document).ready(function($) { 
    // validate signup form on keyup and submit 
    jQuery.fn.validate = jQuery.fn.validate || function(){return true;}; // with below line, define functions as essentially empty if they're not already defined
    jQuery.format = jQuery.format || function(){return '';};
    var validator = $("#messageForm").validate({ 
        rules: { 
           
            email: { 
                required: true, 
                email: true, 
                remote: "emails.php" 
            }  // extra comma removed
           
        }, 
        messages: { 
            firstname: "Enter your firstname", 
            lastname: "Enter your lastname", 
            username: { 
                required: "Enter a username", 
                minlength: jQuery.format("Enter at least {0} characters"), 
                remote: jQuery.format("{0} is already in use") 
            }, 
            password: { 
                required: "Provide a pa . . .