Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Compatibility issue with JAvascript menu and Ie9 10 11 and chrome

Posted on 2015-01-11
9
Medium Priority
?
247 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 84

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 84

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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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 84

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 84

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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

715 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