Solved

Compatibility issue with JAvascript menu and Ie9 10 11 and chrome

Posted on 2015-01-11
9
235 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 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

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

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

734 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