Problems in FIREFOX

Discussion in 'HTML & Website Design' started by ehud37new, Apr 29, 2009.

  1. #1
    i have this code in JS

    in Firefox the menu doesnt work o.k

    it is a droo down list

    here is the code....

    
    /*------------------------------------------------------------------
     Use:			Collection of clients functions
     File:			menu.js
    				that used for interface of the menu bar.
    -------------------------------------------------------------------*/
    var g_MaincontextMenu;
    var currentMenu; //The last sub menu that open.
    
    /*-----------------------------------------------------------------
    	Calculate the top position of the object.
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        obj					The object
    ------------------------------------------------------------------*/
    function offsetTop(obj)
    {
    	var top = 0;
    
    	for (; obj; obj=obj.offsetParent)
    	{
    		top = top + obj.offsetTop;
    	}
    	return(top);
    }
    
    /*-----------------------------------------------------------------
    	Calculate the left position of the object.
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        obj					The object
    ------------------------------------------------------------------*/
    function offsetLeft(obj)
    {
    	var left = 0;
    	
    	for (; obj; obj=obj.offsetParent)
    	{
    		if (obj.tagName == "BODY") break;
    		left = left + obj.offsetLeft;
    	}
    	return(left);
    }
    
    /*-----------------------------------------------------------------
    	Loaded the child of the first menu.
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        obj					The object
        p_Dir				Direction of the web: RTL or LTR
    ------------------------------------------------------------------*/
    function loadContextMenu(obj, p_Dir)
    {
    	var contextMenu;
    	var parentMenu;
    	parentMenu = returnContainer(obj);
    	contextMenu = document.getElementById();
    	
    	//document.form2.strSearch.value = document.form2.strSearch.value + "," + contextMenu.id;
    	
    	if (currentMenu)
    	{
    		menuOut(currentMenu);
    		
    	}
    
    	
    	if (contextMenu != null)
    	{
    	    
    	    
    	    if(contextMenu.style.display == "block")
    			return;
    	    
    	    
    		contextMenu.style.display = "block";
    		var l_contextMenu_Top = offsetTop(parentMenu) + parentMenu.offsetHeight - 2;
    		contextMenu.style.top = l_contextMenu_Top;
    		contextMenu.style.width = parentMenu.offsetWidth;
    		contextMenu.firstChild.style.width = "100%";
    		contextMenu.parentMenu = parentMenu;
    		parentMenu.subMenu = contextMenu;
    		currentMenu = parentMenu;
    		
    		
    		if (p_Dir == 'RTL'){
    			if(contextMenu.clientWidth > parentMenu.clientWidth){
    				var contextMenuPosition = offsetLeft(parentMenu) - (contextMenu.clientWidth - parentMenu.clientWidth);
    			}else{
    				var contextMenuPosition = offsetLeft(parentMenu);
    			}
    			if(contextMenuPosition < 0){
    				contextMenu.style.left = 0;
    			}else{
    				contextMenu.style.left = contextMenuPosition;
    			}
    			
    		}else{
    			contextMenu.style.left = offsetLeft(parentMenu);
    			var l_WindowWidth = document.body.clientWidth;
    			var l_DivWidth = contextMenu.clientWidth;
    			var contextMenuLeft = offsetLeft(parentMenu)
    			//alert("l_WindowWidth = " + l_WindowWidth)//
    			//alert("l_WindowWidth = " + l_WindowWidth + " : l_DivWidth + contextMenuLeft = " + eval(l_DivWidth + contextMenuLeft));
    			//alert(contextMenuLeft);
    			if(l_WindowWidth  < l_DivWidth + contextMenuLeft){
    				//alert("l_WindowWidth = " + l_WindowWidth + " : l_DivWidth + contextMenuLeft = " + eval(l_DivWidth + contextMenuLeft));
    				contextMenu.style.left = l_WindowWidth - l_DivWidth;
    			}
    		}
    		
    		contextMenu.style.height = 0;
    		
    		var l_DivHeight = contextMenu.clientHeight + 2;
    		
    		//-----Set The div top postion ------------------
    		var l_WindowHeight = document.body.clientHeight;
    		var l_ScrollTop = document.body.scrollTop;
    		//alert(l_WindowHeight);
    		//alert(document.body.scrollTop);
    		
    		if(l_WindowHeight < (l_contextMenu_Top + l_DivHeight) - l_ScrollTop)
    			contextMenu.style.top  = l_contextMenu_Top - ((l_contextMenu_Top + l_DivHeight - l_ScrollTop) - l_WindowHeight);
    		//-------------------------------------------------
    		
    		contextMenu.style.overflowY = 'hidden';
    		contextMenu.style.height = 0;
    		
    		//contextMenu.style.display = "none";
    		var g_MaincontextMenu = "";
    		SetMainDiv(contextMenu);
    		BuildDiv(0, l_DivHeight);
    		
    		
    	}
    }
    
    var y="";
    function SetMainDiv(p_MaincontextMenu){
    	g_MaincontextMenu = p_MaincontextMenu;
    	clearTimeout(y);
    }
    
    
    function BuildDiv(p_Height, p_HighHeight){
    
    	//alert(1);
    	//document.form2.strSearch.value = document.form2.strSearch.value + "," + p_Height + "," + p_HighHeight;
    	
    	//document.form2.strSearch.value = document.form2.strSearch.value + "," + g_MaincontextMenu.id;
    	
    	var l_contextMenu = g_MaincontextMenu;
    	//g_MaincontextMenu = "";
    	//alert(l_contextMenu);
    	//alert ("p_Height = " + p_Height);
    	//alert ("p_HighHeight = " + p_HighHeight);
    	
    	
    	//alert(l_contextMenu.id);
    	if (p_Height < p_HighHeight){
    		l_contextMenu.style.height = p_Height + 10;
    		//alert(p_contextMenu.clientHeight);
    		//alert(1);
    		y = setTimeout('BuildDiv(' +  parseInt(p_Height + 10) + ',' + p_HighHeight + ');', 30);	
    		//alert(2);
    		//alert(p_contextMenu.style.height);
    	}else{
    		clearTimeout(y);
    		
    		//alert('Clear');
    	}
    }
    
    /*-----------------------------------------------------------------
    	Loaded the child of the submenus.
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        obj					The  object
    ------------------------------------------------------------------*/
    function loadContextMenuSub(obj) {
    	var contextMenu;
    	var parentMenu;
    	//alert('loadContextMenuSub');
    	parentMenu = returnContainer(obj);
    	contextMenu = document.getElementById();
    	contextMenu.style.display = "block";
    	
    	var l_contextMenu_Top =  obj.offsetTop + parentMenu.offsetTop;
    	contextMenu.style.top = l_contextMenu_Top;
    	
    	var l_DivHeight = contextMenu.clientHeight;
    	if (parentMenu.offsetLeft - contextMenu.offsetWidth + 1 < 0)
    		contextMenu.style.left = parentMenu.offsetLeft + parentMenu.offsetWidth - 7;
    	else
    		contextMenu.style.left = parentMenu.offsetLeft - contextMenu.offsetWidth + 7;
    	contextMenu.parentMenu = parentMenu;
    	parentMenu.subMenu = contextMenu;
    	
    	
    	//-----Set The div top postion ------------------
    	var l_WindowHeight = document.body.clientHeight;
    	var l_ScrollTop = document.body.scrollTop;
    	//alert(l_WindowHeight);
    	//alert(document.body.scrollTop);
    		
    	if(l_WindowHeight < (l_contextMenu_Top + l_DivHeight) - l_ScrollTop)
    		contextMenu.style.top  = l_contextMenu_Top - ((l_contextMenu_Top + l_DivHeight - l_ScrollTop) - l_WindowHeight);
    	//-------------------------------------------------
    		
    	
    }
    
    /*-----------------------------------------------------------------
    	function that change the interface of the menu item on mouseover event.
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        obj					The object
    ------------------------------------------------------------------*/
    function MM_showHideLayers() { //v3.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i< (args.length-2); i+=3) 
    	if ((obj=document.getElementById(args[i]))!=null) { 
    		v=args[i+2];
        		if (obj.style) { 
    			obj=obj.style; 
    			v=(v=='show')?'visible':(v='hide')?'hidden':v; 
    		}
        		obj.visibility=v; 
    	}
    }
    
    /*-----------------------------------------------------------------
    	function that change the interface of the menu item on mouseout event.
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        row					The object
    ------------------------------------------------------------------*/
    function menuOut(row)
    {
    	
    	
    	var parentMenu;
    	var subMenu;
    	var x;
    
    	parentMenu = returnContainer(row);
    	if (parentMenu != row)
    	{
    		for (x=0; x < row.childNodes[x].length; x++)
    		{
    			//alert(row.childNodes[x].className);
    			row.childNodes[x].className = row.SubMenuTextClass;
    			
    		}
    	}
    
    	var toElement = returnContainer(event.toElement);
    	var toHide = true;
    	if (toElement == null)
    	{
    		if (parentMenu.subMenu) parentMenu = parentMenu.subMenu;
    		while (parentMenu.parentMenu != null)
    		{
    			parentMenu.style.display = "none";
    			parentMenu = parentMenu.parentMenu;
    		}
    	}
    	else
    	{
    		while (toElement)
    		{
    			if (toElement == parentMenu)
    			{
    				toHide = false;
    				window.event.cancelBubble = true;
    				break;
    			}
    			toElement = toElement.parentMenu;
    		}
    		if (toHide)
    		{
    			subMenu = parentMenu.subMenu;
    			while (subMenu != null)
    			{
    				subMenu.style.display = "none";
    				subMenu = subMenu.subMenu;
    			}
    		}
    	}
    }
    
    function contextHighlightRow(obj)
    {
    	var parentMenu;
    	var subMenu;
    	var i;
    
    	parentMenu = returnContainer(obj);
    
    	if (obj.selected == "false")
    	{
    		for (x=0; x < obj.childNodes[x].length; x++)
    		{
    			obj.childNodes[x].style.borderTop = "1px solid white";
    			obj.childNodes[x].style.borderBottom = "1px solid white";
    			if (obj.childNodes[x].cellIndex == 0 || obj.childNodes.length == x)
    			{
    				obj.childNodes[x].style.borderLeft = "1px solid white";
    			}
    			if (obj.childNodes[x].cellIndex != 0 || obj.childNodes.length == x)
    			{
    				if (obj.childNodes[x].cellIndex == obj.cells.length-x)
    				{
    					obj.childNodes[x].style.borderRight = "1px solid white";
    				}
    			}
    		}
    
    		if (parentMenu.subMenu != null && parentMenu != parentMenu.subMenu)
    		{
    			subMenu = parentMenu.subMenu;
    
    			while(subMenu != null)
    			{
    				subMenu.style.display = "none";
    				subMenu = subMenu.subMenu;
    			}
    		}
    		obj.selected = "true";
    	}
    	else
    	{
    		for (x=0; x < obj.childNodes[x].length; x++)
    		{
    			if (x == 0)
    			{
    				//obj.childNodes[x].style.borderTop = "1px solid " + obj.background;
    				obj.childNodes[x].style.borderTop = "1px solid white";
    				//obj.childNodes[x].style.borderBottom = "1px solid " + obj.background;
    				obj.childNodes[x].style.borderBottom = "1px solid white";
    			}
    			else
    			{
    				//obj.childNodes[x].style.borderTop = "1px solid " + obj.titlebar;
    				//obj.childNodes[x].style.borderBottom = "1px solid " + obj.titlebar;
    				obj.childNodes[x].style.borderTop = "1px solid white";
    				obj.childNodes[x].style.borderBottom = "1px solid white";
    			}
    
    			if (obj.childNodes[x].cellIndex == 0 || obj.childNodes[x].length == x)
    			{
    				//obj.childNodes[x].style.borderLeft = "1px solid " + obj.titlebar;
    				obj.childNodes[x].style.borderLeft = "1px solid white";
    			}
    			if (obj.childNodes[x].cellIndex != 0 || obj.childNodes[x].length == x)
    			{
    				if (obj.childNodes[x].cellIndex == obj.cells.length-x)
    				{
    					//obj.childNodes[x].style.borderRight = "1px solid " + obj.background;
    					obj.childNodes[x].style.borderRight = "1px solid white";
    				}
    			}
    		}
    		obj.selected = "false";
    	}
    }
    
    /*-----------------------------------------------------------------
    	function that return the parent of the item.
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        container			The Item
    ------------------------------------------------------------------*/
    function returnContainer(container)
    {
    	if (container)
    	{
    		while (!container.menuElement)
    		{
    			if (container.parentElement)
    			{
    				container = container.parentElement;
    			}
    			else
    			{
    				container = null;
    				break;
    			}
    		}
    	}
    	return(container);
    }
    
    
    /*-----------------------------------------------------------------
    	Open new window 
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        p_Id					Category Id
    */
    	function loadCategoryFile(p_Id){
    		window.open ("OpenFileById.asp?Id=" + p_Id,"");
    	}
    	
    
    
    /*-----------------------------------------------------------------
    	Redirect function
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        lngCategoryID		The CategoryID
    ------------------------------------------------------------------*/
    function loadCategory(lngCategoryID)
    {
    	window.location = "main.asp?lngCategoryID=" + lngCategoryID;
    }
    
    
    /*-----------------------------------------------------------------
    
                Open Window
    
                Parameters: 
    
        Name                                                Description
    
        -------------------------------------------------------------------
    
        p_Url                         Url to Open
        p_Width        The                   Width of the window
        p_Height                   The Height of the window
        p_Resizable              yes or no
        p_Scrollbars  yes or no
        p_Status                   yes or no
        p_Addressbar            yes or no
        p_Toolbar                  yes or no
    ------------------------------------------------------------------*/
    
    function OpenNewWindow(p_Url, p_Width, p_Height, p_Resizable, p_Scrollbars, p_Status, p_Addressbar, p_Toolbar)
    {
                window.open(p_Url,"" ,"height=" + p_Height + ",width=" + p_Width + ",top=100,left=100,resizable=" + p_Resizable + ",scrollbars=" + p_Scrollbars + ",status=" + p_Status + ",location=" + p_Addressbar + ",toolbar=" + p_Toolbar);
    }
    /*-----------------------------------------------------------------
    	function that handling the onclick event
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        item				The object that on click occured in
        lngCategoryID		The CategoryID
    ------------------------------------------------------------------*/
    function clickMenu(item, lngCategoryID)
    {
    	lngCategoryID = parseInt(lngCategoryID.substr(1));
    	switch (item.TypeRef)
    	{
    	case "1":
    		break;
    	case "2":
    		switch (item.TargetRef)
    		{
    			case "1":
    				window.open(item.Link);
    				break;
    			case "2":
    				window.location = item.Link;
    				break;
    			case "3":
    				parent.location = item.Link;
    				break;
    		}
    		break;
    	case "3":
    		window.location = "main.asp?lngCategoryID=" + lngCategoryID;
    		break;
    	case "6":
    		// item of the menu is a folder
    		window.location = "PublicLibrary.asp?lngCategoryID=" + lngCategoryID;
    		break;
    		
    	case "8":
    		window.location = "DisplayNodeList.asp?lngCategoryID=" + lngCategoryID;
    		break;
    	}
    }
    //-------------------------------------------------------------------------
    
    
    /*-----------------------------------------------------------------
    	Loaded the child of the submenus.
    	Parameters: 
        Name				Description
        -------------------------------------------------------------------
        obj					The  object
    ------------------------------------------------------------------*/
    function loadContextMenuSubRight(obj) {
    	//alert();
    	var contextMenu;
    	var parentMenu;
    	parentMenu = returnContainer(obj);
    	contextMenu = document.getElementById();
    	contextMenu.style.display = "block";
    	
    	var l_contextMenu_Top =  obj.offsetTop + parentMenu.offsetTop;
    	contextMenu.style.top = l_contextMenu_Top;
    	
    	var contextMenuLeft = parentMenu.offsetLeft + parentMenu.offsetWidth - 7;
    	var l_WindowWidth = document.body.clientWidth;
    	var l_DivWidth = contextMenu.clientWidth;
    	//alert("l_WindowWidth = " + l_WindowWidth + " : l_DivWidth + contextMenuLeft = " + eval(l_DivWidth + contextMenuLeft));
    	//alert(contextMenuLeft);
    	if(l_WindowWidth  < l_DivWidth + contextMenuLeft){
    		//alert("l_WindowWidth = " + l_WindowWidth + " : l_DivWidth + contextMenuLeft = " + eval(l_DivWidth + contextMenuLeft));
    		contextMenu.style.left = l_WindowWidth - parentMenu.offsetWidth - l_DivWidth;
    	}else{
    		contextMenu.style.left = contextMenuLeft;
    	}
    			
    	var l_DivHeight = contextMenu.clientHeight;
    	//-----Set The div top postion ------------------
    	var l_WindowHeight = document.body.clientHeight;
    	var l_ScrollTop = document.body.scrollTop;
    	//alert(l_WindowHeight);
    	//alert(document.body.scrollTop);
    		
    	if(l_WindowHeight < (l_contextMenu_Top + l_DivHeight) - l_ScrollTop)
    		contextMenu.style.top  = l_contextMenu_Top - ((l_contextMenu_Top + l_DivHeight - l_ScrollTop) - l_WindowHeight);
    	//-------------------------------------------------
    		
    	
    	contextMenu.parentMenu = parentMenu;
    	parentMenu.subMenu = contextMenu;
    }
    
    Code (markup):
    in Line 79 he write an error
    Error:parentMenu is null


    what do i need to write instead ?

    the full line in 79 is
    var l_contextMenu_Top = offsetTop(parentMenu) + parentMenu.offsetHeight - 2;

    thank you
     
    ehud37new, Apr 29, 2009 IP
  2. the-hungry-hamster

    the-hungry-hamster Peon

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    1st why use javascript when CSS is better for menus?

    2nd some browsers like firefox can block java or read java in a bad way.

    I would go for a CSS menu or just code your own sidebar :)

    EDIT!

    CSS is a bit of a pain in the old gluteus maximus with IE6

    So I understand your problem and using Java EWW
     
    the-hungry-hamster, Apr 29, 2009 IP
  3. free3dart

    free3dart Active Member

    Messages:
    241
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    as said CSS is better as most of the browsers tend to block JS
     
    free3dart, Apr 29, 2009 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    First, Java is not JavaScript.
    Second, browsers do NOT block javascript.
    Third, Firefox's implementation of javascript is more advanced than IEs.
    Fourth, just scanning the js above shows parts that are not implemented or buggy in IE<8, such as first-child.
     
    drhowarddrfine, Apr 30, 2009 IP