Solved

Compatibility issue with JAvascript menu and Ie9 10 11 and chrome

Posted on 2015-01-11
9
225 Views
Last Modified: 2015-01-24
Hello,

I recently upgraded my asp.net web application from 1.1 to 3.5 but now my javascript menu always shows to the left of the screen and not under each menu item.

I have attached the javascript file for my menu

Then the code below calls the menu:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script language="JavaScript">
var temp=1;
            var project=<%=Session["project"]%>;
if(document.getElementById)
      document.write('<DIV class=popper id=topdeck></DIV>');
</script>
<SCRIPT language="JavaScript"  src="ejs_menu_dyn.js"></SCRIPT>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Open in new window


Thanks
0
Comment
Question by:arnololo123
  • 4
  • 4
9 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40543239
Please post a link to your page so we can check it.
0
 

Author Comment

by:arnololo123
ID: 40543259
Sorry I forget to attached the javascript file ejs_menu_dyn.js that I reference in my code.
I also attached a picture of what it does currently.

Unfortunately  at this time, I can't give access to the page because it is password protected and on client server.

Thanks
ejs-menu-dyn.js
WrongBehavior.png
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40543272
That makes it nearly impossible to troubleshoot since we can't check the interactions in the code for the page.
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

Author Comment

by:arnololo123
ID: 40543306
By just using the code above and copying the js file, you should be able to reproduce the issue pretty easily.

Thanks
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40543382
Ok, I tried to run you code.  It doesn't work, produces a blank screen because I don't have any of the files that are listed in 'ejs-menu-dyn.js'.  Even more importantly, 'document.write' has to be used in the body of the HTML document, not in the <head>, because it will 'write' to the document exactly where it is in the document.  As written, there is no way to guarantee that that will ever run properly.
0
 

Author Comment

by:arnololo123
ID: 40566492
I have attached a Visual Studio project to make it run.

All the sub menu are showing up on the left instead of showing under each  main menu.

Thanks
test.zip
WorkOK.png
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40567207
You need to click "Request Attention" above and get some others to help you.  I do not have a copy of visual Studio to run your code.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40568276
replace :
skn.top = posYmenu+24;
by :
skn.top = posYmenu+24 + "px";
and replace :
skn.left = posXmenu+pos;
by :
skn.left = posXmenu+pos+"px";

or just replace your current ejs-menu-dyn.js with this one  :
var Timer;  
var racine = "../../LPCv2";
var len=temp;
var proj=project;
posYmenu = 91;
bgcolor='#920C0C';
bgcolor2='#6699CC';
needcenter =false;
taille=600;
//len=4;
if(!needcenter)
	posXmenu = 0;
else
	{	if (document.all)
		posXmenu = (document.body.clientWidth/2)-(400/2);
	else
		posXmenu = (window.innerWidth/2)-(400/2); 
	}
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:11; }')
document.write('#topgauche { position:absolute; top:'+posYmenu+'px; left:'+posXmenu+'px; z-index:10; }')
document.write('A:hover.ejsmenu {color:#FFFFFF; text-decoration:underline;}')
document.write('A.ejsmenu {color:#FFFFFF; text-decoration:none;}')
document.write('</style>')

document.write('<DIV class=popper id=topdeck ></DIV>');




/*

*/
zlien = new Array;
zlien[0] = new Array;
zlien[1] = new Array;
//zlien[2] = new Array;
//zlien[3] = new Array;
zlien[4] = new Array;
zlien[5] = new Array;
zlien[6] = new Array;


zlien[1][3] = 'onClick=Javascript:document.location.href=\"' + racine + '/visualinstruct.aspx\"; >&nbsp;&nbsp;4. Visual Instructions';
zlien[1][4] = 'onClick=Javascript:document.location.href=\"' + racine + '/openissue/openissue.aspx\"; >&nbsp;&nbsp;5. Open Issues';
zlien[1][0] = 'onClick=Javascript:document.location.href=\"' + racine + '/echart/index.aspx\"; >&nbsp;&nbsp;1. I-Chart';
zlien[1][1] = 'onClick=Javascript:document.location.href=\"' + racine + '/echart/qc.aspx\"; >&nbsp;&nbsp;2. Defect Log Analysis';
zlien[1][2] = 'onClick=Javascript:document.location.href=\"' + racine + '/echart/partdata.aspx\"; >&nbsp;&nbsp;3. PART  Analysis&nbsp;&nbsp;&nbsp;&nbsp;<I>New</I>';
zlien[1][5] = 'onClick=Javascript:document.location.href=\"' + racine + '/dailyreport/dailyreport.aspx\"; >&nbsp;&nbsp;6. Daily Report';


if(len<=3)
{
	switch(len){
	case 3:
		taille=700
		zlien[2] = new Array;
		zlien[2][0] = 'onClick=Javascript:document.location.href=\"' + racine + '/admin/projectmgmt.aspx\";>&nbsp;&nbsp;1. Manage Projects';
		break;
	case 2:
		taille=700
		zlien[2] = new Array;
		zlien[2][0] = 'onClick=Javascript:document.location.href=\"' + racine + '/admin/projectmgmt.aspx\";>&nbsp;&nbsp;1. Manage Projects';
		zlien[2][1] = 'onClick=Javascript:document.location.href=\"' + racine + '/admin/addproject.aspx\";>&nbsp;&nbsp;2. Create Project';
		break;
	default: 
		taille=700
		zlien[2] = new Array;
		zlien[2][0] = 'onClick=Javascript:document.location.href=\"' + racine + '/stats.aspx\";>&nbsp;&nbsp;1. Statistics';
		zlien[2][1] = 'onClick=Javascript:document.location.href=\"' + racine + '/admin/projectmgmt.aspx\";>&nbsp;&nbsp;2. Manage Projects';
		zlien[2][2] = 'onClick=Javascript:document.location.href=\"' + racine + '/admin/addproject.aspx\";>&nbsp;&nbsp;3. Create Project';
		if(len<2)
		{
		zlien[2][3] = 'onClick=Javascript:document.location.href=\"' + racine + '/finance/emplist.aspx\";>&nbsp;4.User List';
		zlien[2][4] = 'onClick=Javascript:document.location.href=\"' + racine + '/finance/newuser.aspx\";>&nbsp;5.New User';
		}		
		break;
	} 
}


zlien[6][0] = 'onClick=Javascript:document.location.href=\"' + racine + '/qualityalert/openissue.aspx\";>&nbsp;&nbsp;1. Open Issue';
zlien[6][1] = 'onClick=Javascript:document.location.href=\"' + racine + '/qualityalert/addqualityalert.aspx\";>&nbsp;&nbsp;2. Add Quality Alert';


zlien[4][0] = 'onClick=Javascript:document.location.href=\"' + racine + '/shopfloor/shopflooraudit.aspx\";>&nbsp;&nbsp;1. CheckList';
zlien[4][1] = 'onClick=Javascript:document.location.href=\"' + racine + '/shopfloor/summary.aspx\";>&nbsp;&nbsp;2. Summary';
zlien[4][2] = 'onClick=Javascript:document.location.href=\"' + racine + '/shopfloor/actionform.aspx\";>&nbsp;&nbsp;3. Action Form';

if(len<4){//lynn does not want customer to see timesheet
zlien[5][0] = 'onClick=Javascript:document.location.href=\"' + racine + '/finance/sumfin.aspx\";>&nbsp;1.TimeSheets';
zlien[5][1] = 'onClick=Javascript:document.location.href=\"' + racine + '/finance/hereport.aspx\";>&nbsp;2.TimeSheet-Hours/Expenses';
}

if(len<2)
{
zlien[5][2] = 'onClick=Javascript:document.location.href=\"' + racine + '/finance/totfin.aspx\";>&nbsp;3.General Finance';
zlien[5][3] = 'onClick=Javascript:document.location.href=\"' + racine + '/finance/emplist.aspx\";>&nbsp;4.User List';
}

var bit=0;
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { skn = document.topdeck }
else if (dom) { skn = document.getElementById("topdeck").style }
else if (iex) { skn = topdeck.style }
skn.top = posYmenu+24 + "px";


function pop(msg,pos)
{
bit=1;
skn.visibility = "hidden";
a=true
skn.left = posXmenu+pos+"px";
var content ="<TABLE BORDER=0 CELLPADDING=0 BGCOLOR=#000000 CELLSPACING=0  WIDTH=160><TR><TD><TABLE WIDTH=100%  BORDER=0 onmouseout='adieu(this);'  CELLPADDING=0 CELLSPACING=1>";
pass = 0
while (pass < msg.length)
	{
	content += "<TR><TD style=\"CURSOR: hand;font-family:Verdana;  font-size:11px; color:white\"  BGCOLOR="+bgcolor+"  onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=18  "+msg[pass]+"</TD></TR>";
	pass++;
	}
	content += "</TABLE></TD></TR></TABLE>";
if (nava)
  {
    skn.document.write(content);
	  skn.document.close();
	  skn.visibility = "visible";
	  
  }
    else if (dom)
  {
	  document.getElementById("topdeck").innerHTML = content;
	  skn.visibility = "visible";
	 
  }
    else if (iex)
  {
	  document.all("topdeck").innerHTML = content;
	  skn.visibility = "visible";
	 
  }
  
}

function kill()
{

	skn.visibility = "hidden";
}
 

function adieu(objTable)
{ 
if(!objTable.contains(event.toElement)){ 
bit=0;
Timer = setTimeout('TimerHideMenu()',1000);
}

}

function TimerHideMenu(){ 
		
          HideMenu(); 
          clearTimeout(Timer); 
    
} 
function HideMenu(){ 
	if(bit==0)
     {skn.visibility = "hidden";}
     
}  


document.onclick = kill;

	document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH="100%"><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH='+taille+' HEIGHT=20><TR>')
	if (proj>0)
{document.write('<TD WIDTH="80" ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'" onMouseOut="this.style.background=\''+bgcolor+'\'"><A href="/default.aspx" CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana"><B>Home Page</B></FONT></a></TD>')
	document.write('<TD WIDTH="120" ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],80)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A  onMouseOver="pop(zlien[1],90)" href="../summary.aspx" CLASS=ejsmenu><FONT SIZE=1 color=white FACE="Verdana"><B>PROJECT CENTER</B></FONT></a></TD>')
	document.write('<TD WIDTH="120" ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[6],180)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A  onMouseOver="pop(zlien[6],60)" href="../summary.aspx" CLASS=ejsmenu><FONT SIZE=1 color=white FACE="Verdana"><B>Quality Alert</B></FONT></a></TD>')
	document.write('<TD WIDTH="110" ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[4],290)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[4],258)" href=# CLASS=ejsmenu><FONT SIZE=1 color=white FACE="Verdana"><B>Floor audit</B></FONT></a></TD>')
	document.write('<TD WIDTH="110" ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[5],410)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[5],320)" href=# CLASS=ejsmenu><FONT SIZE=1 color=white FACE="Verdana"><B>Finances</B></FONT></a></TD>')

}
else {document.write('<TD WIDTH="65%" ALIGN=center BGCOLOR='+bgcolor+'  CLASS=ejsmenu></a></TD>')}

//lynn does not want customer to see timesheet
if(len<=3)	{document.write('<TD WIDTH="110" ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],500)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[2],390)" href=# CLASS=ejsmenu><FONT SIZE=1 color=white FACE="Verdana"><B>Administration</B></FONT></a></TD>')}
	
document.write('<TD ALIGN=center width="60px" BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'" onMouseOut="this.style.background=\''+ bgcolor +'\'"><A HREF="/signout.aspx"  href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana" color=WHITE><B>Log Out</B></FONT></a></TD>')
document.write('</TR></TABLE></TD><TD width="50%" bgcolor=' + bgcolor + '></TD></TR></TABLE></DIV>')

Open in new window


test page : http://jsfiddle.net/xLbdxx0n/
0
 

Author Closing Comment

by:arnololo123
ID: 40568349
Awesome, Thank you. You also put an example, that is great.
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 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