Solved

Compatibility issue with JAvascript menu and Ie9 10 11 and chrome

Posted on 2015-01-11
9
218 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 82

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 82

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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 82

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 82

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now