My JQuery ddmenu mousover link is not working in IE
Hi, all
This is the code i have used, for png image as a background of my drop down menu.
when mouseover the button area, menu is firing and shows list, but when i am mouse over the menu's the link is not working or not fire the link by hand symbol. but except IE all other browsers are working fine.
any one can solve this?
code:
================================================
<script>
*/
//var pathx = pathprefix ? pathprefix : "";
// these items can be redefined in global_vars.js
var menu_pause = 250;
var anim_menus = 0;
var menu_speed = .25;
var use_overview_pages = 0;
var use_select_btn = 0;
var section_subs = 0;
var menu_dir;
var otherBtns = new Array();
var otherImages = new Array();
function loadJS(){}
var isMAC = (navigator.appVersion.toLowerCase().indexOf("mac") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
//remove transparency from menus to avoid conflict with flash plugin in FF2/Mac
if(isMAC && (navigator.userAgent.indexOf('Firefox/2') > 0)){ document.write('<style type="text/css">#nav_menus div, #ql_menu{ opacity:1 !important; -moz-opacity:1 !important; }</style>'); }
//remove transparency from menus in FF/Win to avoid issues with ClearType
if(isWin && (navigator.userAgent.indexOf('Firefox') > 0)){ document.write('<style type="text/css">#nav_menus div, #ql_menu{ opacity:1 !important; -moz-opacity:1 !important; }</style>');}
//button variables
var sectionId = "";
var sectionBtn = "";
var thisMenu = "";
var xBtn = "";
var xBtnImg = "";
var wait;
var fsLinks = new Array();
var buttons = new Array();
//onLoad functions
addOnloadEvent(preLoad);
// Use this to add a function to the onload event
function addOnloadEvent(fnc){
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fnc, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", fnc );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window[fnc]();
};
}
else
window.onload = fnc;
}
}
// Button Object Constructor
function btnObj(btnName,menuName,pageId,offSrc,onSrc,selectSrc) {
this.btnName = btnName;
if( menuName.indexOf("|") != -1 ){
this.menuName = menuName.split("|")[0];
this.menuDirection = menuName.split("|")[1];
}else{
this.menuName = menuName;
}
this.pageId = pageId;
this.offSrc = offSrc;
this.onSrc = onSrc;
this.selectSrc = selectSrc;
}
function preLoad(){
colorLink();
loadJS();
setStyle();
//------------------------ Create fsLinks buttons -----------------//
//get all <a> tags
fsLinks = document.getElementsByTagName('a');
//test for fsbtn class and add button events
for(i=0;i<fsLinks.length;i++){
if( fsLinks[i].className.toLowerCase() == 'fsbtn' ){
//get page id from href
var search_str = fsLinks[i].search.split('&');
for(j=0;j<search_str.length;j++){
if(search_str[j].split('=')[0] == '?p'){
fsLinks[i].pid = search_str[j].split('=')[1]; //add a pid attribute to <a> tag and assign id value
}else{
//this is for links other than "page.cfm"//
fsLinks[i].pid = "btn"+i; //add a generic id//
//fsLinks[i].pid = search_str[j].split('=')[1]; //add a pid attribute to <a> tag and assign id value
}
}
//create menu reference
fsLinks[i].menu = "dhtmlmenu_"+fsLinks[i].pid;
// change style from "visibility:hidden" to "display:none"
// for use with animated scriptaculous menus
if( anim_menus && document.getElementById(fsLinks[i].menu)){
document.getElementById(fsLinks[i].menu).style.display = "none";
document.getElementById(fsLinks[i].menu).style.visibility = "visible";
}
//check if there is anything in the <a> tag besides text
if(fsLinks[i].childNodes[0].tagName){
fsLinks[i].childNodes[0].id = "dhtmlbtn_"+fsLinks[i].pid; //add ID to the image
fsLinks[i].childNodes[0].onSrc = fsLinks[i].childNodes[0].src.replace(/\.(gif|jpg|png)/,"_on.$1"); //create onSrc and add to image
if(use_select_btn){
fsLinks[i].childNodes[0].selectSrc = fsLinks[i].childNodes[0].src.replace(/\.(gif|jpg|png)/,"_select.$1"); //create selectSrc and add to image
}else{
fsLinks[i].childNodes[0].selectSrc = fsLinks[i].childNodes[0].src.replace(/\.(gif|jpg|png)/,"_on.$1"); //create selectSrc and add to image
}
buttons[fsLinks[i].childNodes[0].id] = new btnObj(fsLinks[i].childNodes[0].id,fsLinks[i].menu,fsLinks[i].pid,fsLinks[i].childNodes[0].src,fsLinks[i].childNodes[0].onSrc,fsLinks[i].childNodes[0].selectSrc);
fsLinks[i].onmouseover = function (){ fsBtn(this.childNodes[0].id); }
fsLinks[i].onmouseout = function (){ fsBtn(this.childNodes[0].id,'off'); }
}else{
fsLinks[i].id = "dhtmlbtn_"+fsLinks[i].pid; //add ID to the a tag
buttons[fsLinks[i].id] = new btnObj(fsLinks[i].id,fsLinks[i].menu,fsLinks[i].pid,'','');
fsLinks[i].onmouseover = function (){ showSubs(this.id); this.className = "fsBtn_on"; }
fsLinks[i].onmouseout = function (){ mnuOut(this.id); }
}
if(use_overview_pages && document.getElementById(fsLinks[i].menu)){ fsLinks[i].href = document.getElementById(fsLinks[i].menu).getElementsByTagName('a')[0].href; }
//turn on section button here
for(n=0;n<pagearray.length;n++){
if( fsLinks[i].pid == pagearray[n] ){
fsLinks[i].className = "fsBtn_on";
sectionId = fsLinks[i].pid;
sectionBtn = fsLinks[i].id;
}
}
}//end fsBtn check
//Auto generate ql_btn code
if( fsLinks[i].className.toLowerCase() == 'qlbtn' ){
// change style from "visibility:hidden" to "display:none"
// for use with animated scriptaculous menus
if( anim_menus && document.getElementById('ql_menu')){
document.getElementById('ql_menu').style.display = "none";
document.getElementById('ql_menu').style.visibility = "visible";
}
if(fsLinks[i].childNodes[0].tagName){
fsLinks[i].childNodes[0].id = "ql_btn"; //add ID to the image
fsLinks[i].childNodes[0].onSrc = fsLinks[i].childNodes[0].src.replace(/\.(gif|jpg|png)/,"_on.$1"); //create onSrc and add to image
buttons['ql_btn'] = new btnObj('ql_btn','ql_menu','0',fsLinks[i].childNodes[0].src,fsLinks[i].childNodes[0].onSrc);
fsLinks[i].onmouseover = function (){ fsBtn('ql_btn'); }
fsLinks[i].onmouseout = function (){ fsBtn('ql_btn','off'); }
}else{
fsLinks[i].id = "ql_btn"; //add ID to the a tag
buttons['ql_btn'] = new btnObj('ql_btn','ql_menu','0','','');
fsLinks[i].onmouseover = function (){ showSubs('ql_btn'); }
fsLinks[i].onmouseout = function (){ mnuOut('ql_btn'); }
document.getElementById('ql_menu').onmouseover = function(){ clearTimeout(wait); }
document.getElementById('ql_menu').onmouseout = function(){ mnuOut('ql_btn','ql_menu'); }
}
}
}//end loop through fsLinks
//add otherBtns
if(otherBtns.length>0){
for(i=0;i<otherBtns.length;i++){
btnAttrs = otherBtns[i].split(',');
buttons[btnAttrs[0]] = new btnObj(btnAttrs[0],btnAttrs[1],btnAttrs[2],btnAttrs[3],btnAttrs[4]);
}
}
//preLoad loops through the buttons array and pre-loads all of the onSrc's
//Also defines sectionID & sectionBtn & turns on section button
if(document.images){
var myImages = new Array();
var i=0;
for (this.btnName in buttons) {
if (buttons[this.btnName].onSrc){
myImages[i] = new Image();
myImages[i].src = buttons[this.btnName].onSrc;
i++;
var n = 0;
for (n in pagearray) { // loop through pagearray to match pageid
if (pagearray[n] == buttons[this.btnName].pageId) {
if(use_select_btn){
document.images[this.btnName].src = buttons[this.btnName].selectSrc;
}else{
document.images[this.btnName].src = buttons[this.btnName].onSrc;
}
sectionId = buttons[this.btnName].pageId;
sectionBtn = buttons[this.btnName].btnName;
}
n++;
}
}
}
if(otherImages){
var oi = new Array();
for(i=0; i < otherImages.length; i++){
oi[i] = new Image(); oi[i].src = otherImages[i];
}
}
}
} //end preLoad
function fsBtn(btn,state,alt_onSrc){
if(alt_onSrc){
if(alt_onSrc.indexOf(",") != -1){ //check if there is a comma list with btn_name and src
ob = alt_onSrc.split(",");
xBtn = ob[0];
xBtnImg = ob[1];
swapImage(btn);
}else{
// if there is just an alt src then only that button will be changed
// this function may no longer be needed but is included for backwards compatiblity
document.images[btn].src = alt_onSrc;
}
}else if(state == "off"){
imgRestore(btn);
}else{ swapImage(btn); }
}
function swapImage(btn){
//swapImage creates a roll-over effect from onSrc when passed the name of the button
//Also shows sub-menus if specified
if(buttons[btn].pageId != sectionId){ // btn src will not change if it is in the section, this preserves the selectSrc
document.images[btn].src = buttons[btn].onSrc; //Turn button on
}
//check btnID against sectionId and section_menu variable before turning on sub menus
if( buttons[btn].menuName && document.getElementById(buttons[btn].menuName) ){
//Turn on menus if section sub option is on or the button pageId does not equal the sectionId
showSubs(btn);
}else if( (thisMenu.length>0) && (thisMenu != buttons[btn].btnName) ){
clearSubs(thisMenu);
}
if(xBtn){ document.images[xBtn].src = xBtnImg; }
} //end swapImage
function imgRestore(btn){
// turns button off unless it is the section button or has a menu
if(buttons[btn].menuName && document.getElementById(buttons[btn].menuName)){
mnuOut(btn);
}else if(buttons[btn].pageId != sectionId){
document.images[btn].src = buttons[btn].offSrc;
if(xBtn){ document.images[xBtn].src = buttons[xBtn].offSrc; }
}
}
//Sub Menu Functions
function showSubs(btn){
if((thisMenu.length>0) && (thisMenu != buttons[btn].btnName)){ //turn off any current menus unless we are still on the same button
clearSubs(thisMenu);
}
// set offsets based on browser
var mDir = (buttons[btn].menuDirection) ? buttons[btn].menuDirection : menu_dir;
var mName = document.getElementById(buttons[btn].menuName);
var bName = document.getElementById(buttons[btn].btnName);
if(section_subs == 1 || (buttons[btn].pageId != sectionId)){ //Test for section subs option and section ID
mName.style.left = findPosX(bName) + "px";
if( mDir == "up" ){ mName.style.top = (findPosY(bName) - mName.scrollHeight) + "px";
}else if( mDir == "center" ){ mName.style.top = (findPosY(bName) - (mName.scrollHeight / 2) + (bName.scrollHeight/2)) + "px";
}else{ mName.style.top = (findPosY(bName) + bName.scrollHeight) + "px"; }
if(anim_menus){
if(thisMenu != buttons[btn].btnName){
//new Effect.BlindDown(buttons[btn].menuName,{ duration:menu_speed, queue: {position:'end', scope: btn} });
$j('#'+buttons[btn].menuName).slideDown(menu_speed*1000);
}
}else{
mName.style.visibility = 'visible';
}
thisMenu = buttons[btn].btnName; //add menu to close later
}
clearTimeout(wait);
} //end showSubs
function mnuOut(btn){
wait = setTimeout("clearSubs('"+ btn +"')", menu_pause);
}
function clearSubs(btn) { //clears open menu
if(buttons[btn].menuName){
if(anim_menus){
//new Effect.BlindUp(buttons[btn].menuName,{ duration:menu_speed,afterFinish:function(){btnOff(btn)}, queue: {position:'end', scope: btn} });
$j('#'+buttons[btn].menuName).slideUp(menu_speed*1000,function(){btnOff(btn)});
}else{
document.getElementById(buttons[btn].menuName).style.visibility='hidden';
btnOff(btn);
}
thisMenu="";
}else{
btnOff(btn);
}
if(document.getElementById(btn).className=="fsBtn_on" && buttons[btn].pageId != sectionId){ document.getElementById(btn).className="fsBtn"; }
}
function btnOff(btn){
if(buttons[btn].pageId != sectionId && buttons[btn].offSrc){
document.images[btn].src = buttons[btn].offSrc; //turn button back off
}else if(buttons[btn].selectSrc){
document.images[btn].src = buttons[btn].selectSrc;
}
if(xBtn){ document.images[xBtn].src = buttons[xBtn].offSrc; }
}
//Automatically find x,y positions of objects
function findPosX(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}
//end Sub Menus
// ----------------------------------------------
function swapStyle(title) {
document.getElementById('contentdiv').className = title;
createCookie("cfstyle", title);
}
function setStyle() {
var style = readCookie("cfstyle");
if (style != null && document.getElementById('contentdiv')) { swapStyle(style);}
}
// ----------------------------------------------
// Cookie functions
// ----------------------------------------------
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = ";expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+";path=/;";
}
// ----------------------------------------------
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
//Colorize parent links in banner navigation module
function colorLink(){
var links = new Array();
if( document.getElementById('leftbanner') ){
links = document.getElementById('leftbanner').getElementsByTagName('a');
for(i=0;i < links.length;i++){
for(j=2; j<pagearray.length;j++){
rExp = new RegExp( "p=" + pagearray[j] + "$" , "i" );
if( links[i].href.search(rExp) > 0 ){
links[i].className = 'nav_history';
}
}
}
}
}
/*
fsRedirect accepts a desitination URL to redirect the browser to and,
optionally, a warn message which will produce a confirmation dialog
*/
function fsRedirect(l,warn){
if(!parent.topframe){
if(warn){
if(confirm(warn)){document.location.replace(l);}else{return false;}
}else{
document.location.replace(l);
}
}
}
/*---------------------------
Start of javascript.js code
*/
</script>