...
PDA

IE Javascript needs Netscape and Safari Compatibility

fknaut
11-16-2003, 05:32 PM
I have the following script that needs help to make compatible with Netscape and Safari for the MAC any help appreciated as I created it for my Church website:

The script is called here:
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<script language="javascript" src="menu/nav_template.js"></script>
<script>
var nav_highlight="Locator Map"; //this tells it which nav item to highlight

nav_template.js:
document.write('<script language="javascript" src="menu/spillout_data_global.js"></script>');
document.write('<script language="javascript" src="menu/generateSpillouts.js"></script>');
document.write('<script language="javascript" src="menu/spillout_code.js"></script>');
document.write('<script language="javascript" src="menu/nav_data.js"></script>');

function write_nav(){
var nav_html ='<div id="sideMenu" style="position:absolute;top:220;left:0;z-index:10;">';
for (a=0; a<nav_array.length; a++){ //the nav categories

// nav_array[a][0][0] the name of the category;

if (nav_array[a][0].length==1){

//if only one elements in first item, is category item, and has sub items

nav_html += '<span id="' + nav_array[a][0][0] + '_title' +'""><table width=187 height=25 cellpadding=0 cellspacing=1 border=0><tr><td bgcolor="#339999">&nbsp;<a href="#" class="arialnarrow" onclick="toggle(\'' + nav_array[a][0][0] + '\'); return false"><img src="images/arrow_right.gif" width=9 height=9 border=0 id="'+ nav_array[a][0][0] +'_arrow">' + nav_array[a][0][0] +'</a></td></tr></table></span>';

//The links in the category, which get hid or displayed
nav_html += '<span id="' + nav_array[a][0][0] +'" style="display: none"><table border=0 cellspacing=0 cellpadding=0 width=187 style="border:2px;border-style:solid;border-color:#339999;margin-top;">\n\n';

// nav_array[a][b][0] the link
//nav_array[a][0][1]+ b the link ID (for changing the formatting to make it black
//nav_array[a][b][1] the link name

for (b=1; b<nav_array[a].length; b++){
nav_html+= '<tr bgcolor="#CC9933"><td height="20" style="padding-left:16px;"><a href="'+ nav_array[a][b][0] +'" id="link'+ a+'_'+b +'" class="sidenav"><b>'+ nav_array[a][b][1] +'</b></a></td></tr>\n\n';
}
nav_html +='</table></span>\n\n';
//end category links


} else {
//MAIN LEVEL LINK OPTION
// has more than one item in first array of a category, therefore, should be a link and not a category
//disregard following arrays in this array, maybe for testing or something
//just display link
nav_html += '<span id="' + nav_array[a][0][1] + '_title' +'""><table width=187 height=25 cellpadding=0 cellspacing=0 border=0><tr><td bgcolor="#339999">&nbsp;<a href="'+nav_array[a][0][0] +'" class="arialnarrow"><img src="images/spacer.gif" width=9 height=9 border=0 id="'+ nav_array[a][0][1] +'_arrow" style="display: none"><img src="images/spacer.gif" width=9 height=9 border=0 id="'+ nav_array[a][0][1] +'_blank">' + nav_array[a][0][1] +'</a></td></tr></table></span><span id="' + nav_array[a][0][1] +'" style="display: none"></span>';
}

}

nav_html +='</div>';
document.write(nav_html);
}


function write_after_content(){

document.write ('</td></tr></table>'); //main page table close --->

if ( typeof(no_write_side_nav)=='undefined') {//check to see if the variable is defined on the html page
write_nav();
} else {
nav_highlight='';
}

display_nav_of_page();
}



//displays the left hand nav category list of links
//cycles through the arrays for a match for the calue of the var nav_highlight
// stored on the page. then it highlights the match
//WARNING nav_highlight var string CASE SENSITIVE
function display_nav_of_page () {

if (( typeof(nav_highlight)!='undefined')&&(nav_highlight != '')) {//check to see if the variable is defined on the html page

for (a=0; a<nav_array.length; a++){
for (b=1; b<nav_array[a].length; b++){
if (nav_array[a][b][1]==nav_highlight){

eval('document.all["' +'link'+a+'_'+b+ '"].style.color="#000000";');
eval('document.all["' +'link'+a+'_'+b+ '"].style.textDecoration="none";');
toggle(nav_array[a][0][0]);
break;
break;
}
}
}

}
}

//displays and hides the links for each left hand nav category
function toggle(id){
if (document.all){
var state = document.all[id].style.display
//hide all lists of links, show or hide this one
for (a=0; a< nav_array.length; a++){
document.all[nav_array[a][0][0]].style.display='none';
document.all[nav_array[a][0][0] +'_arrow'].src='images/arrow_right.gif';
}

if(state == 'none'){
document.all[id +'_arrow'].src='images/arrow_down.gif';
document.all[id].style.display = '';
} else {
document.all[id +'_arrow'].src='images/arrow_right.gif';
document.all[id].style.display = 'none';
}
//return false;
}
}

generate_spillouts.js:
function createMenu(aryMenu, ID, buttonTxt, gutter, left, top, width, subWidth, buttonHeight, buttonWidth) {
var strHTML = "";
var count = 0;
var width = width - (gutter * 2);
var menuTop = top + buttonHeight + 1;

strHTML += "<div onmouseover='openMenu(\"" + ID + "Main\", this);' class='mnuBtn' style='left:" + left + "; top:" + top + "; height:" + buttonHeight + ";'>";
strHTML += " <div style='margin-left:" + gutter + "px; margin-right:" + gutter + "px; margin-top:7px; color:#ffffff; font:11px verdana; font-weight:bold;letter-spacing:-.04em;'>";
strHTML += buttonTxt;
strHTML += " </div>";
strHTML += "</div>";

strHTML += "<div id='" + ID + "Main' style='position:absolute; top:" + menuTop + "; left:" + left + "; font:11px verdana; z-index:400; visibility:hidden; width:" + (width + gutter * 2) + ";'>";
strHTML += "<table cellpadding='0' cellspacing='0' border='0' width='" + (width + gutter * 2) + "' style='background:#d6ce49;'>";
for (i in aryMenu) {
if (aryMenu[i].subMenu != null) {
strHTML += "<tr><td style='background:#d6ce49;'>";
strHTML += "<div style='margin-left:1px; margin-right:1px; width:" + (width - 2) + ";' onmouseover='openSubMenu(\"" + ID + "\", " + count + ", this);'>";
strHTML += "<div class='menuItemText' style='margin-left:" + gutter + "px; margin-right:" + gutter + "px;'><a href='" + aryMenu[i].path + "' onmouseover='this.style.textDecoration=\"underline\";' onmouseout='this.style.textDecoration=\"underline\";'>" + aryMenu[i].title + "</a></div>";
strHTML += "</div>";
strHTML += "</td><td valign='top'><div class='bluArrow'><img src='images/arrow_blue.gif' width='4' height='9' border='0'></div></td></tr>";
count++;
} else {
strHTML += "<tr><td style='background:#d6ce49;'>";
strHTML += "<div style='margin-left:1px; margin-right:1px; width:" + (width - 2) + "; height:100%;' onmouseout='unhighlight(this);' onmouseover='highlight(this);'>";
strHTML += "<div class='menuItemText' style='margin-left:" + gutter + "px; margin-right:" + gutter + "px;'><a href='" + aryMenu[i].path + "'>" + aryMenu[i].title + "</a></div></div>";
strHTML += "</td><td></td><td></td></tr>";
}
}
strHTML += "<tr><td colspan='2'><img src='/images/pixel.gif' width='" + (width) + "' height='5'/></td></tr>";
strHTML += "</table>";
strHTML += "<div style='height:100; width:" + (width + gutter * 2) + ";' onmouseover='closeMenu();'>&nbsp;</div>";
strHTML += "</div>";

strHTML += "<div id='" + ID + "' style='position:absolute; top:" + menuTop + "; left:" + left + "; font:11px verdana; z-index:200;'>";

for (z = 0; z < aryMenu.length; z++) {
if (aryMenu[z].subMenu != null) {
var screenWidth = parseInt(document.body.clientWidth - 10);

if ((left + width + subWidth) > screenWidth) {
var leftSpillout_x = (subWidth + (gutter * 4) + width + 2) * -1 - 1;
strHTML += "<div style='position:absolute; top:0; left:" + leftSpillout_x + "; z-index:200; visibility:hidden;'>";
strHTML += "<table cellpadding='0' cellspacing='0' border='0'>";

for (j in aryMenu) {
strHTML += "<tr><td style='background:#d6ce49; visibility:hidden;'>";
strHTML += " <div style='margin-left:1px; margin-right:1px; width:" + (width - 2) + ";'>";
strHTML += " <div class='menuItemText' style='margin-left:" + gutter + "px; margin-right:" + gutter + "px;'><a href='#' style='color:345686;'>" + aryMenu[j].title + "</a></div>";
strHTML += " </div>";
strHTML += "</td>";
strHTML += "<td valign='top' style='visibility:hidden;'><div class='bluArrow'><img src='images/arrow_blue.gif' width='4' height='9' border='0'></div></td>";

// Generate sub menu
if (aryMenu[j] == aryMenu[z]) {
strHTML += "<td valign='top' width='" + subWidth + "'>";
for (k = 0; k < aryMenu[z].subMenu.length; k++) {
strHTML += "<div style='background:#d6ce49; width:" + subWidth + ";'>";
strHTML += "<div style='margin-left:1px; margin-right:1px; background:#d6ce49;' onmouseout='unhighlight(this);' onmouseover='highlightSub(this);'>";
strHTML += "<div class='menuItemText' style='margin-left:" + gutter + "; margin-right:" + gutter + "; width:" + (subWidth) + "'><a href='" + aryMenu[z].subMenu[k].path + "'>" + aryMenu[z].subMenu[k].title + "</a></div>";
strHTML += "</div></div>";
}
strHTML += "<div style='font:1px verdana; background:#d6ce49; height:5; width:" + (subWidth + gutter * 2 + 2) + ";'></div>";
} else {
strHTML += "<td valign='bottom' width='" + subWidth + "'>";
strHTML += "<div class='menuItemText' style='width:" + (subWidth) + ";' onmouseover='closeMenu();'>&nbsp;</div>";
}
}
strHTML += "<tr><td colspan='2'><img src='/images/pixel.gif' width='" + (width + gutter * 2) + "' height='1'/></td>";
strHTML += " <td><img src='/images/pixel.gif' width='" + subWidth + "' height='1'/></td><td></td>";
strHTML += "</tr>";
strHTML += "</table>";
strHTML += "</div>";
} else {
strHTML += "<div style='position:absolute; top:0; left:1; z-index:200; visibility:hidden;'>";
strHTML += "<table cellpadding='0' cellspacing='0' border='0'>";

for (j in aryMenu) {
strHTML += "<tr><td style='background:#d6ce49; visibility:hidden;'>";
strHTML += " <div style='margin-left:1px; margin-right:1px; width:" + (width - 2) + ";'>";
strHTML += " <div class='menuItemText' style='margin-left:" + gutter + "px; margin-right:" + gutter + "px;'><a href='#'>" + aryMenu[j].title + "</a></div>";
strHTML += " </div>";
strHTML += "</td>";
strHTML += "<td valign='top' style='visibility:hidden;'><div class='bluArrow'><img src='images/arrow_blue.gif' width='4' height='9' border='0'></div></td>";

// Generate sub menu
if (aryMenu[j] == aryMenu[z]) {
strHTML += "<td valign='top' width='" + subWidth + "'>";
for (k = 0; k < aryMenu[z].subMenu.length; k++) {
strHTML += "<div style='background:#d6ce49; width:" + subWidth + ";'>";
strHTML += "<div style='margin-left:1px; margin-right:1px; background:#d6ce49;' onmouseout='unhighlight(this);' onmouseover='highlightSub(this);'>";
strHTML += "<div class='menuItemText' style='margin-left:" + gutter + "; margin-right:" + gutter + "; width:" + (subWidth) + "'><a href='" + aryMenu[z].subMenu[k].path + "'>" + aryMenu[z].subMenu[k].title + "</a></div>";
strHTML += "</div></div>";
}
strHTML += "<div style='font:1px verdana; background:#d6ce49; height:5; width:" + (subWidth + gutter * 2 + 2) + ";'></div>";
strHTML += "<div style='height:100; width:" + (subWidth) + ";' onmouseover='closeMenu();'>&nbsp;</div>";
} else {
strHTML += "<td valign='bottom' width='" + subWidth + "'>";
strHTML += "<div class='menuItemText' style='width:" + (subWidth) + ";' onmouseover='closeMenu();'>&nbsp;</div>";
}

strHTML += "</td><td onmouseover='closeMenu();'><img src='images/pixel.gif' width='100' height='1' border='0'/></td></tr>";
}
strHTML += "<tr><td colspan='2'><img src='/images/pixel.gif' width='" + (width + gutter * 2) + "' height='1'/></td>";
strHTML += " <td><img src='/images/pixel.gif' width='" + subWidth + "' height='1'/></td><td></td>";
strHTML += "</tr>";
strHTML += "</table>";
strHTML += "</div>";
}
}
}
strHTML += "</div>";
return strHTML;
}

spiilout_code.js:
var gCurMenu = null;
var gMenuIsActive = false;
var gCurSubMenu = null;

function MenuObject(menuObj, buttonObj) {
this.menuObj = menuObj;
this.buttonObj = buttonObj;
this.width = parseInt(menuObj.style.width);
this.x = parseInt(buttonObj.style.left);
this.buttonX = parseInt(this.buttonObj.style.left);
this.y = parseInt(buttonObj.style.top);
this.isActive = true;

this.buttonObj.style.background = "#4899B7";
this.menuObj.style.visibility = "visible";

gMenuIsActive = true;
}

function openMenu(menuID, buttonObj) {
if (gCurMenu != null) closeMenu();
menuObj = (document.all) ? eval("document.all." + menuID) : document.getElementById(menuID);
gCurMenu = new MenuObject(menuObj, buttonObj); // create instance of MenuObject
}

function openSubMenu(ID, index, menuItemObj) {
if (gCurSubMenu != null) closeSubMenu();
var menuObj = eval("document.all." + ID);

gCurSubMenu = new SubMenu(menuObj, index, menuItemObj);
}

function SubMenu(menuObj, index, menuItemObj) {
this.subMenuObj = menuObj.children[index];
this.menuItemObj = menuItemObj;
this.x = parseInt(this.subMenuObj.style.left);
this.opensOnLeft = (this.x < -10) ? 1 : 0;

this.subMenuObj.style.visibility = "visible";
menuItemObj.children[0].children[0].style.textDecoration = "underline";
}

function closeSubMenu() {
gCurSubMenu.menuItemObj.children[0].children[0].style.textDecoration = "none";
gCurSubMenu.subMenuObj.style.visibility = "hidden";
unhighlight(gCurSubMenu.menuItemObj);

gCurSubMenu = null;
}

function closeMenu() {
if (gCurSubMenu != null) closeSubMenu();
gCurMenu.menuObj.style.visibility = "hidden";
gCurMenu.buttonObj.style.background = "#345686";
gMenuIsActive = false;
gCurMenu = null;
}

function highlight(obj) {
if (gCurSubMenu != null) {
closeSubMenu();
}
obj.children[0].children[0].style.textDecoration = "underline";
}

function highlightSub(obj) {
obj.children[0].children[0].style.textDecoration = "underline";
}

function unhighlight(obj) {
obj.children[0].children[0].style.textDecoration = "none";
}

function checkMenuBounds(e) {
if (gMenuIsActive) {
y = (document.all) ? window.event.clientY : e.clientY;
x = (document.all) ? window.event.clientX : e.clientX;

if ((gCurSubMenu != null) && (!gCurSubMenu.opensOnLeft)) { // subMenu open on right
if ((x < gCurMenu.x) || (y < gCurMenu.y)) {
closeMenu();
}
} else if ((gCurSubMenu != null) && (gCurSubMenu.opensOnLeft)) { // subMenu open on left
if (((x < (gCurMenu.width + gCurMenu.x + gCurSubMenu.x)) || (y < gCurMenu.y) || (x > gCurMenu.x + gCurMenu.width))) {
closeMenu();
}
} else { // no subMenu
if ((x < gCurMenu.x) || (x > gCurMenu.x + gCurMenu.width) || (y < gCurMenu.y)) {
closeMenu();
}
}
}
}

document.onmousemove = checkMenuBounds;

nav_data:
//this file is accessed by nav_template.js
//each array in the main array is a category title, then the subnav links
// a link is added after the category title in its array, makes that a link, with no sub nav items

//['',''],
var nav_array = new Array(
[
['Contact Us'],
['http://www.phumc.net/ContactUs/ChurchStaff.htm','Church Staff']
]

);

Then written to the page by:
<script>
write_after_content();
</script>

Thanks Ahead.:confused:
Vladdy
11-16-2003, 07:14 PM
Why do you need javascript to write your page in the first place?
Just dump the hole thing and make a page without any reliance on javascript at all. Then it will not only be compatible with Netscape and Safari, but also with search engines and browsers with javascript disabled.
fknaut
11-16-2003, 11:49 PM
The menu system is javascript. See this for example:

PHUMC Website (http://www.phumc.net)

If you know of an easier way to do the same with the same results for cross compatibility, let me know!
Vladdy
11-17-2003, 12:59 AM
Yeah:
<ul>
<li><a href="page1.html">page1</a></li>
....
</ul>


Making your navigation rely on javascript one of the worst things you can do in web design - it makes your site inaccessible to all users without javascript (that includes SE)
fknaut
11-17-2003, 11:52 AM
Does it get the same results with the menu system? This is important as my customer base (parishoners) are used to this format and I don't want to change it. Besides, this is the Javascript Forum, why back away from it?
Vladdy
11-17-2003, 08:18 PM
Navigation is the list of links and that is exactly what the code I gave you represents. How it will look on a web page will depend on the styling you apply to it - there is nothing special about presentation on the web site you referenced.
There is no reason searching for a javascript solution to a problem that can be solved with 10 lines of HTML code with much better results. What you are trying to do with the code you provided is akin to removing tonsils through patient's anus.
adios
11-17-2003, 08:25 PM
*:eek:*:eek:*:eek:*:eek:*
*********
fknaut
11-18-2003, 12:34 PM
Vladdy, profanity is the sign of an enept programmer. I take it you are the one who had your tonsils taken out that way which is why you can't provide any better solution.
Choopernickel
11-18-2003, 01:56 PM
Kids, kids. Get ahold of yourselves.

fknaut: Vladdy- no matter how little you want to hear this- is right. His ..er, "colorful" simile was probably chosen because he knows a lot about building and using web pages and asked a question to get to the heart of your problem, then you skirted his question and avoided the truth of your answer.

Vladdy: nice simile.

fknaut, if you want help fixing a problem, you might want to remember this quote: "Make sure you fix the right problem." -- hey, I think it may have been Vladdy who taught me that!
fknaut
11-18-2003, 03:09 PM
I want to know what is wrong with the script to make it work in Netscape and Safari - Not to scrap it because of the opinion of one. My IE users love it and Netscape and Safari user would love it too if I can get it fixed.
Vladdy
11-18-2003, 03:34 PM
Opinion of one, huh?
http://www.w3.org/TR/WCAG10/#gl-new-technologies
paragraph 6.3 clearly explains what IS wrong with your script
Roy Sinclair
11-18-2003, 03:35 PM
The problem here is that the people here are volunteers. We aren't here because someone pays us to be present, we're here because we have a desire to be helpful and because we've discovered that we learn things when we reach out to help and interact with others in these forums.

However most of us also have jobs and other responsibilities that make it nearly impossible for us to dedicate the many hours that would be required to make major alterations to extremely complex scripts which pretty well describes most of those menu scripts. If you aren't capable of performing most of the work yourself, then sorry but you're in the wrong place. What you need to be doing is looking for another script that's already written which already supports those other browsers yet provides the same kind of menu.

The advice about making your site navigation not dependant on javascript is still good advice though. You should try disabling javascript in your browser and then navigating through your site just to make sure it's possible. If it's not possible then you need to change your site to make it so.
Vladdy
11-18-2003, 04:02 PM
Here is a solution for you:
1. Create the nested list of links:
<ul id="navigation"><li><a href="item1.html">Item1</a>
<ul><li><a href="item1_1.html">Item 1.1</a></li>
<li><a href="item1_2.html">Item 1.2</a></li>
<!-- rinse, repeat -->
</ul></li>
<!- rinse, repeat -->
</ul>


2. Use body onload event to install onclick event handlers for anchor elements of main navigation list and collapse the sub-lists:

var nav=document.getElementById('navigation');
for(var i=0; i<nav.childNodes.length; i++)
{ nav.childNodes[i].firstChild.onclick=processOnclick;
var sublist = nav.childNodes[i].getElementsByTagName('ul');
if(sublist) sublist.style.display = 'none';
}


3. Write processOnclick function that changes the display property of the next sibling and if the property is to be set to 'block', goes through other descendant ul elements of the "navigation" element and sets their display property to 'none';

If that is over your head, I can demonstrate the degree of my ineptness at $65/hour...
:thumbsup:

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum