SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2004
    Location
    US
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    really need help with popup menu for cross browser and different resolution.

    Hi,

    I really need the following menu working for both IE5.5 and netscape6 above. This menu also needs to position itself to the correct place when the browser is resized or viewed at different resolutions. If I place the parent menu in the center, the submenus dont move along with the parent menu. here is the link to it.

    http://www.comriesoftware.net/codewi...171/index.aspx

    Can you please take a look and help me out. I am in deep deep trouble.


    just giving me the code that will fix the cross browser issue and the browser positioning issue will help.

    this menu is generated using asp.net. So the code now that is shown is the output. Address the issue for 1 single menu will work out.


    thanks thanks thanks


    <Script language='JavaScript'>
    function SubMenu(Cell){
    switch (Cell)
    {
    case S0:{
    S1.style.display = 'none'
    S2.style.display = 'none'
    S3.style.display = 'none'
    S4.style.display = 'none'
    S5.style.display = 'none'
    S6.style.display = 'none'
    S7.style.display = 'none'
    }
    break
    case S1:{
    S1.style.display = 'inline'
    S2.style.display = 'none'
    S3.style.display = 'none'
    S4.style.display = 'none'
    S5.style.display = 'none'
    S6.style.display = 'none'
    S7.style.display = 'none'
    }
    break
    case S2:{
    S1.style.display = 'none'
    S2.style.display = 'inline'
    S3.style.display = 'none'
    S4.style.display = 'none'
    S5.style.display = 'none'
    S6.style.display = 'none'
    S7.style.display = 'none'
    }
    break
    case S3:{
    S1.style.display = 'none'
    S2.style.display = 'none'
    S3.style.display = 'inline'
    S4.style.display = 'none'
    S5.style.display = 'none'
    S6.style.display = 'none'
    S7.style.display = 'none'
    }
    break
    }
    }
    </Script>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <title>CodeWidgets.com Widget #CS0171 Databound Dynamic Vertical Menu (ASP.NET)</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <LINK href="Styles.css" type="text/css" rel="stylesheet">
    </HEAD>
    <body>
    <form name="Form1" method="post" action="index.aspx" id="Form1">
    <P>

    <script language="javascript">
    //// FUNCTIONS TO POPUP AND SWAP MENU ITEMS
    function Hide(Cell){
    Cell.style.display = "none"
    }
    function Show(Cell)
    {
    Cell.style.display = "inline"
    }

    function Swap(Cell){
    switch (Cell.style.color){
    case "":
    {
    Cell.style.color="white"
    Cell.style.background="steelblue"
    }
    break
    case "white":
    {
    Cell.style.color=""
    Cell.style.background="whitesmoke"
    }
    break
    default:
    Cell.style.display = "none"
    }
    }

    function NavTo(Loc){
    window.location = Loc
    }
    </script>
    <table id="S0" border="0" width="300" height="140" style="position: absolute; left: 10; top: 0; z-index: 0" onMouseOver="SubMenu(S0)" onMouseOut="SubMenu(S0)">
    <tr>
    <td width="100%"></td>
    </tr>
    </table>
    <span id="Uc_vMenu1_lblMenu"><TABLE onMouseOver=SubMenu(S1);Swap(this) onMouseOut=Swap(this) class='Menu' id='T1' style='Z-INDEX: 1; LEFT: 10px; POSITION: absolute; TOP: 50px' cellSpacing='0' cellPadding='3' width='150'height='20' border='0'>
    <TR>
    <TD title='Menu 1'>Menu 1</TD>
    </TR>
    </TABLE>
    <TABLE class='SubMenu' id='S1' style='display: none; Z-INDEX: 2; LEFT: 161px; POSITION: absolute; TOP: 50px' cellSpacing='0' cellPadding='3'width='150' border='0'>
    <TR>
    <TD title='SubMenu 1-2' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>SubMenu 1-2</TD>
    </TR>
    <TR>
    <TR>
    <TD title='SubMenu 1-3' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>SubMenu 1-3</TD>
    </TR>
    <TR>
    <TR>
    <TD title='SubMenu 1-4' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>SubMenu 1-4</TD>
    </TR>
    <TR>
    <TR>
    <TD title='SubMenu 1-5' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>SubMenu 1-5</TD>
    </TR>
    <TR>
    </TABLE>
    <TABLE onMouseOver=SubMenu(S2);Swap(this) onMouseOut=Swap(this) class='Menu' id='T2' style='Z-INDEX: 1; LEFT: 10px; POSITION: absolute; TOP: 70px' cellSpacing='0' cellPadding='3' width='150'height='20' border='0'>
    <TR>
    <TD title='Menu 2'>Menu 2</TD>
    </TR>
    </TABLE>
    <TABLE class='SubMenu' id='S2' style='display: none; Z-INDEX: 2; LEFT: 161px; POSITION: absolute; TOP: 70px' cellSpacing='0' cellPadding='3'width='150' border='0'>
    <TR>
    <TD title='SubMenu 2-1' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>SubMenu 2-1</TD>
    </TR>
    <TR>
    <TR>
    <TD title='SubMenu 2-2' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>SubMenu 2-2</TD>
    </TR>
    <TR>
    </TABLE>
    <TABLE onMouseOver=SubMenu(S3);Swap(this) onMouseOut=Swap(this) class='Menu' id='T3' style='Z-INDEX: 1; LEFT: 10px; POSITION: absolute; TOP: 90px' cellSpacing='0' cellPadding='3' width='150'height='20' border='0'>
    <TR>
    <TD title='Menu 3'>Menu 3</TD>
    </TR>
    </TABLE>

    </span>
    </P>
    </form>
    </body>
    </HTML>

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh boy. where to start?

    From a cross-browser perspective, I can see several problems immediately.

    [disclaimer: I've not tested any of the code I'm giving here, and I'm not the world's greatest javascript wizard. I hope I'm not talking rubbish, but no promises]

    The opening script element should be inside the <head> or <body> element, not before the doctype.

    In the opening script, you are accessing elements directly via their id - this only works in IE, which adds all elements with IDs to the global namespace. You will need to use the document.getElementById() DOM method instead. I would also suggest adding a function which hides all the elements, and then amending this function to use it. For the switch/case, I think it can be replaced by using show method defined elsewhere in the document, in combination with the hideAll() function. Something like this might work:
    Code:
    function hideAll() {
     hide(document.getElementById("S1"));
     hide(document.getElementById("S2"));
     hide(document.getElementById("S3"));
     [and so on]
     }
     
     function SubMenu(Cell){
     hideAll();
     show(Cell);
     }
    On the table cells, the HTML should be changed from this
    HTML Code:
    <TD title='SubMenu 1-2' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>
    to this
    HTML Code:
    <TD title="SubMenu 1-2" height="20" onMouseOver="Swap(this)" onMouseOut="Swap(this)" width="100%" onClick="NavTo('index.aspx')">
    Note: addition of a space after the height attribute, addition of double quotes around attributes.

    On the table itself, pass "this" to SubMenu() rather than "S0" (which will fail due to the IE-only namespace issue mentioned above):
    HTML Code:
    <table id="S0" [snip] onMouseOver="SubMenu(this)" onMouseOut="SubMenu(this)">
    For the positioning style on the tables, add units to non-zero values:
    HTML Code:
    <table [snip] style="position: absolute; left: 10; top: 0; z-index: 0" [snip]>
    left: 10 what? pixels? points? inches? IE blindly assumes pixels, but netscape will ignore it unless you specify a unit.should be
    HTML Code:
    <table [snip] style="position: absolute; left: 10px; top: 0; z-index: 0" [snip]>
    Also, all the properties should really be lower case. Change:
    HTML Code:
    <TABLE [snip] style='display: none; Z-INDEX: 2; LEFT: 161px; POSITION: absolute; TOP: 50px' [snip]>
    to
    HTML Code:
    <TABLE [snip] style='display: none; z-index: 2; left: 161px; position: absolute; top: 50px' [snip]>
    Elsewhere, the show() method is setting the display value of elements to "inline" to reveal them. Since the elements in question are tables, this is an illegal value, which is probably causing netscape's rendering engine to have small furry offspring. I'd try using "table" instead, or maybe "block"

    Finally, the main table is inside a span. This is a big no-no, as spans should only contain inline elements (text, b, i, em and strong tags and a few others)

    That'll do for now. There may be other problems, but it's a start.


Bookmarks

Posting Permissions

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