Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Nov 2003
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation IE Javascript needs Netscape and Safari Compatibility

    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.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    New to the CF scene
    Join Date
    Nov 2003
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The menu system is javascript. See this for example:

    PHUMC Website

    If you know of an easier way to do the same with the same results for cross compatibility, let me know!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    New to the CF scene
    Join Date
    Nov 2003
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    *****
    *********

  • #8
    New to the CF scene
    Join Date
    Nov 2003
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry

    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.

  • #9
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #10
    New to the CF scene
    Join Date
    Nov 2003
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Opinion of one, huh?
    http://www.w3.org/TR/WCAG10/#gl-new-technologies
    paragraph 6.3 clearly explains what IS wrong with your script
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a solution for you:
    1. Create the nested list of links:
    Code:
    <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:
    Code:
    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...
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •