Jump to content

IE10 whitespace between menu headers

Aaron

By Aaron
in Support Forum

 Share

Recommended Posts

Aaron Newbie

Aaron

Posted
Posted

I've been inactive for awhile and come back to find my website different than I had left it, at least on Internet Explorer. There is a dark blue accordion menu on the left side of my website and when you expand one of the headers, a whitespace is put between it and the header on top of it. It works fine in all browsers except IE. It has something to do with the little arrows beside the headers because if I remove them, it works fine in IE. Link: http://www.canforce.org/index.php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/canforce_1307/styles.css"/>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title><?php echo $page_title; ?></title>
<?php
/* This is required, so phpVMS can output the necessary libraries it needs */
echo $page_htmlhead;
?>
<?php /*Any custom Javascript should be placed below this line, after the above call */ ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.canforce.org/lib/skins/canforce_1307/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">

ddaccordion.init({
headerclass: "menuitem", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onmouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix","<img src='http://www.canforce.org/lib/skins/canforce_1307/images/arrow.jpg' class='statusicon' />","<img src='http://www.canforce.org/lib/skins/canforce_1307/images/darrow.jpg' class='statusicon'/>"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
 //do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 //do nothing
}
})

</script>
</head>


.glossymenu{
margin: 0px 0;
padding: 0;
width: 150px; /*width of menu*/
border: 0px solid #FFF;
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background: #304867 repeat-x bottom left;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 5px;
text-decoration: none;
border-bottom: 1px solid white;
}

.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
float: left;
padding-right: 5px;
padding-top: 4px;
top: 5px;
right: 5px;
border: none;
}
.glossymenu a.menuitem:hover{
background: #304867;
}
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}
.glossymenu div.submenu ul li{
border-bottom: 1px solid white;
}
.glossymenu div.submenu ul li a{
display: block;
background: #4A6C90;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: white;
text-decoration: none;
padding: 2px 0;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 20px;
}
.glossymenu div.submenu ul li a:hover{
background: #4A6C90;
color: white;
text-decoration: underline;
}


var ddaccordion={
ajaxloadingmsg: '<img src="loading2.gif" /><br />Loading Content...', //customize HTML to output while Ajax content is being fetched (if applicable)
headergroup: {}, //object to store corresponding header group based on headerclass value
contentgroup: {}, //object to store corresponding content group based on headerclass value
preloadimages:function($images){
 $images.each(function(){
  var preloadimage=new Image()
  preloadimage.src=this.src
 })
},
expandone:function(headerclass, selected, scrolltoheader){ //PUBLIC function to expand a particular header
 this.toggleone(headerclass, selected, "expand", scrolltoheader)
},
collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header
 this.toggleone(headerclass, selected, "collapse")
},
expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname
 var $headers=this.headergroup[headerclass]
 this.contentgroup[headerclass].filter(':hidden').each(function(){
  $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
 })
},
collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname
 var $headers=this.headergroup[headerclass]
 this.contentgroup[headerclass].filter(':visible').each(function(){
  $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
 })
},
toggleone:function(headerclass, selected, optstate, scrolltoheader){ //PUBLIC function to expand/ collapse a particular header
 var $targetHeader=this.headergroup[headerclass].eq(selected)
 var $subcontent=this.contentgroup[headerclass].eq(selected)
 if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible"))
  $targetHeader.trigger("evt_accordion", [false, scrolltoheader])
},
ajaxloadcontent:function($targetHeader, $targetContent, config, callback){
 var ajaxinfo=$targetHeader.data('ajaxinfo')
 function handlecontent(content){ //nested function
  if (content){ //if ajax content has loaded
   ajaxinfo.cacheddata=content //remember ajax content
   ajaxinfo.status="cached" //set ajax status to cached
   if ($targetContent.queue("fx").length==0){ //if this content isn't currently expanding or collapsing
 $targetContent.hide().html(content) //hide loading message, then set sub content's HTML to ajax content
 ajaxinfo.status="complete" //set ajax status to complete
 callback() //execute callback function- expand this sub content
   }
  }
  if (ajaxinfo.status!="complete"){
   setTimeout(function(){handlecontent(ajaxinfo.cacheddata)}, 100) //call handlecontent() again until ajax content has loaded (ajaxinfo.cacheddata contains data)
  }
 } //end nested function
 if (ajaxinfo.status=="none"){ //ajax data hasn't been fetched yet
  $targetContent.html(this.ajaxloadingmsg)
  $targetContent.slideDown(config.animatespeed)
  ajaxinfo.status="loading" //set ajax status to "loading"
  $.ajax({
   url: ajaxinfo.url, //path to external menu file
   error:function(ajaxrequest){
 handlecontent('Error fetching content. Server Response: '+ajaxrequest.responseText)
   },
   success:function(content){
 content=(content=="")? " " : content //if returned content is empty, set it to "space" is content no longer returns false/empty (hasn't loaded yet)
 handlecontent(content)
   }
  })
 }
 else if (ajaxinfo.status=="loading")
  handlecontent(ajaxinfo.cacheddata)
},
expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation, scrolltoheader){
 var ajaxinfo=$targetHeader.data('ajaxinfo')
 if (ajaxinfo){ //if this content should be fetched via Ajax
  if (ajaxinfo.status=="none" || ajaxinfo.status=="loading")
   this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)})
  else if (ajaxinfo.status=="cached"){
   $targetContent.html(ajaxinfo.cacheddata)
   ajaxinfo.cacheddata=null
   ajaxinfo.status="complete"
  }
 }
 this.transformHeader($targetHeader, config, "expand")
 $targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){
  config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
  if (scrolltoheader){
   var sthdelay=(config["collapseprev"])? 20 : 0
   clearTimeout(config.sthtimer)
   config.sthtimer=setTimeout(function(){ddaccordion.scrollToHeader($targetHeader)}, sthdelay)
  }
  if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
   var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
   if (targetLink) //if this header is a link
 setTimeout(function(){location=targetLink.href}, 200 + (scrolltoheader? 400+sthdelay : 0) ) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
  }
 })
},
scrollToHeader:function($targetHeader){
 ddaccordion.$docbody.stop().animate({scrollTop: $targetHeader.offset().top}, 400)
},
collapseit:function($targetHeader, $targetContent, config, isuseractivated){
 this.transformHeader($targetHeader, config, "collapse")
 $targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})
},
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)
},
urlparamselect:function(headerclass){
 var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL
 if (result!=null)
  result=RegExp.$1.split(',')
 return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices
},
getCookie:function(Name){
 var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
 if (document.cookie.match(re)) //if cookie found
  return document.cookie.match(re)[0].split("=")[1] //return its value
 return null
},
setCookie:function(name, value){
 document.cookie = name + "=" + value + "; path=/"
},
init:function(config){
document.write('<style type="text/css">\n')
document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link
document.write('<\/style>')
jQuery(document).ready(function($){
 ddaccordion.urlparamselect(config.headerclass)
 var persistedheaders=ddaccordion.getCookie(config.headerclass)
 ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion
 ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion
 ddaccordion.$docbody=(window.opera)? (document.compatMode=="CSS1Compat"? jQuery('html') : jQuery('body')) : jQuery('html,body')
 var $headers=ddaccordion.headergroup[config.headerclass]
 var $subcontents=ddaccordion.contentgroup[config.headerclass]
 config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
 config.revealtype=config.revealtype || "click"
 config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter")
 if (config.revealtype=="clickgo"){
  config.postreveal="gotourl" //remember added action
  config.revealtype="click" //overwrite revealtype to "click" keyword
 }
 if (typeof config.togglehtml=="undefined")
  config.htmlsetting={location: "none"}
 else
  config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
 config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
 config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
 var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
 var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
 if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array)
  expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
 if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded
  expandedindices=[]
 if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
  expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
 if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header
  expandedindices=[0]
 $headers.each(function(index){ //loop through all headers
  var $header=$(this)
  if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
   $('<span class="accordprefix"></span>').prependTo(this)
   $('<span class="accordsuffix"></span>').appendTo(this)
  }
  $header.attr('headerindex', index+'h') //store position of this header relative to its peers
  $subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
  var $subcontent=$subcontents.eq(index)
  var $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //see if this content should be loaded via ajax
  if ($hiddenajaxlink.length==1){
   $header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header
  }
  var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
  if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
   ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param
   lastexpanded={$header:$header, $content:$subcontent}
  }  //end check
  else{
   $subcontent.hide()
   config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
   ddaccordion.transformHeader($header, config, "collapse")
  }
 })
 //if (config["scrolltoheader"] && lastexpanded.$header)
  //ddaccordion.scrollToHeader(lastexpanded.$header)
 $headers.bind("evt_accordion", function(e, isdirectclick, scrolltoheader){ //assign CUSTOM event handler that expands/ contacts a header
   var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
   if ($subcontent.css('display')=="none"){
 ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick, false, scrolltoheader) //2nd last param sets 'isuseractivated' parameter
 if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
  ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
 }
 lastexpanded={$header:$(this), $content:$subcontent}
   }
   else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
 ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
   }
  })
 $headers.bind(config.revealtype, function(){
  if (config.revealtype=="mouseenter"){
   clearTimeout(config.revealdelay)
   var headerindex=parseInt($(this).attr("headerindex"))
   config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex, config.scrolltoheader)}, config.mouseoverdelay || 0)
  }
  else{
   $(this).trigger("evt_accordion", [true, config.scrolltoheader]) //last parameter indicates this is a direct click on the header
   return false //cancel default click behavior
  }
 })
 $headers.bind("mouseleave", function(){
  clearTimeout(config.revealdelay)
 })
 config.oninit($headers.get(), expandedindices)
 $(window).bind('unload', function(){ //clean up and persist on page unload
  $headers.unbind()
  var expandedindices=[]
  $subcontents.filter(':visible').each(function(index){ //get indices of expanded headers
   expandedindices.push($(this).attr('contentindex'))
  })
  if (config.persiststate==true && $headers.length>0){ //persist state?
   expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
   ddaccordion.setCookie(config.headerclass, expandedindices)
  }
 })
})
}
}
//preload any images defined inside ajaxloadingmsg variable
ddaccordion.preloadimages(jQuery(ddaccordion.ajaxloadingmsg).filter('img'))

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...