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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Collapse/Expand DOM Menu

    This is a simple menu that degrades opened in non DOM or non javascript browsers. To do this it requires “.subs {display: none;}” to be removed from the page. DOM browsers require their own external CSS file with the style included.

    It loads opened to the correct menu items in a page where the flag div is present. Change the number in “flag-4-menu” to the corresponding menu item you want opened onload. Give any new menu items ids in the same manner as the menu items in the example. This is obviously most useful with external JS files served to DOM browsers only. To do this see brothercake’s response in the link below. Hopefully Opera can be removed soon.

    :: ok browser detect? ::

    I haven’t tested the IE5 cursor: “hand” fix. Any suggestions are welcome.

    <html>
    <head>
    <title></title>
    <style>
    .subs, .page-flag {
    display: none;
    }

    .link, a:visited, a:link, a:active {
    color:black; background-color:transparent; text-decoration:none;
    }

    .link, .link-over {
    cursor: pointer;
    }

    a:hover, .link-over {
    color:blue; background-color:transparent; text-decoration:none;
    }
    </style>
    <script>

    nums = new Array (0)
    IdsForIE5 = new Array ()

    function Open(Sub) {
    a = document.getElementById(Sub).style
    if (a.display == 'block') {
    a.display = 'none'
    } else {
    a.display = 'block'
    }
    }

    IE5 = (parseInt(navigator.appVersion) == 4 && navigator.userAgent.toLowerCase().indexOf('msie 5.0') != -1);

    onload = function() {
    while (nums.length < 50) {
    nums[nums.length] = nums.length + 1
    }
    for (var i=0;i<nums.length;i++) {
    if (document.getElementById('open-' + nums[i])) {
    IdsForIE5[IdsForIE5.length] = 'open-' + nums[i]
    }
    }
    if (IE5) {
    for (var i=0;i<IdsForIE5.length;i++) {
    document.getElementById(IdsForIE5[i]).style.cursor = 'hand'
    }
    }
    if (document.getElementById('flag')) {
    str = document.getElementById('flag').innerHTML
    SubId = 'sub-' + str.slice(str.indexOf('flag-')+5,str.indexOf('-menu'))
    if (document.getElementById(SubId)) {
    Open(SubId)
    }
    }
    }


    </script>
    </head>
    <body>

    <div id="flag" class="page-flag"><div id="flag-4-menu" class="page-flag"></div></div>

    <a href="page.htm">link 1</a><br />
    <span id="open-2" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-2')">open 2</span><br />
    <div id="sub-2" class="subs">
    <a href="page.htm">this is a sub link of 2</a><br />
    <a href="page.htm">this is a sub link of 2</a>
    </div>
    <a href="page.htm">link 3</a><br />
    <span id="open-4" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-4')">open 4</span><br />
    <div id="sub-4" class="subs">
    <a href="page.htm">this is a sub link of 4</a><br />
    <a href="page.htm">this is a sub link of 4</a><br />
    <a href="page.htm">this is a sub link of 4</a>
    </div>
    <a href="page.htm">link 5</a><br />
    <a href="page.htm">link 6</a><br />
    <span id="open-7" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-7')">open 7</span><br />
    <div id="sub-7" class="subs">
    <a href="page.htm">this is a sub link of 7</a><br />
    <a href="page.htm">this is a sub link of 7</a><br />
    <a href="page.htm">this is a sub link of 7</a>
    </div>

    </body>
    </html>




    Edit

    This is a URL alternative to using the flag div to open the menu. Change the sub menu division ids to match a part of the URL.

    Change the opening span(s) from this example.

    onmousedown="return Open('sub-7')"

    ... to this

    onmousedown="return Open('the-new-sub-id')"

    Put this anywhere in your .js file. Add the part of the URL(s) that the divisions are named to the array.

    MenuIds = new Array ('some_folder','page.htm')

    Relpace this in the onload function

    if (document.getElementById('flag')) {
    str = document.getElementById('flag').innerHTML
    SubId = 'sub-' + str.slice(str.indexOf('flag-')+5,str.indexOf('-menu'))
    if (document.getElementById(SubId)) {
    Open(SubId)
    }
    }


    ... with this

    for (var i=0;i<MenuIds.length;i++) {
    if (location.href.match(MenuIds[i])) {
    str = MenuIds[i]
    if (document.getElementById(str)) {
    Open(str)
    }
    }
    }
    Last edited by Graeme Hackston; 12-10-2002 at 01:18 AM.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I guess the idea is to have everything ready before you post a script but I'm having fun playing with it.

    This one does the (IMO) jumpy open 1 item, close the rest thing.

    <html>
    <head>
    <title></title>
    <style>
    .subs, .page-flag {
    display: none;
    }

    .link, a:visited, a:link, a:active {
    color:black; background-color:transparent; text-decoration:none;
    }

    .link, .link-over {
    cursor: pointer;
    }

    a:hover, .link-over {
    color:blue; background-color:transparent; text-decoration:none;
    }
    </style>
    <script>

    IdsForIE5 = new Array ()

    SubIds = new Array ()

    nums = new Array (0)

    function Open(Sub) {
    for (var i=0;i<SubIds.length;i++) {
    a = document.getElementById(SubIds[i]).style
    if (SubIds[i] == Sub) {
    if (a.display == 'block') {
    a.display = 'none'
    } else {
    a.display = 'block'
    }
    } else {
    a.display = 'none'
    }
    }
    }

    IE5 =(parseInt(navigator.appVersion) == 4 && navigator.userAgent.toLowerCase().indexOf('msie 5.0') != -1);

    onload = function() {
    while (nums.length < 50) {
    nums[nums.length] = nums.length + 1
    }
    for (var i=0;i<nums.length;i++) {
    if (document.getElementById('sub-' + nums[i])) {
    SubIds[SubIds.length] = 'sub-' + nums[i]
    }
    if (document.getElementById('open-' + nums[i])) {
    IdsForIE5[IdsForIE5.length] = 'open-' + nums[i]
    }
    }
    if (IE5) {
    for (var i=0;i<IdsForIE5.length;i++) {
    document.getElementById(IdsForIE5[i]).style.cursor = 'hand'
    }
    }
    if (document.getElementById('flag')) {
    str = document.getElementById('flag').innerHTML
    SubId = 'sub-' + str.slice(str.indexOf('flag-')+5,str.indexOf('-menu'))
    if (document.getElementById(SubId)) {
    Open(SubId)
    }
    }
    }

    </script>
    </head>
    <body>

    <div id="flag" class="page-flag"><div id="flag-7-menu" class="page-flag"></div></div>

    <a href="page.htm">link 1</a><br />
    <span id="open-2" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-2')">open 2</span><br />
    <div id="sub-2" class="subs">
    <a href="page.htm">this is a sub link of 2</a><br />
    <a href="page.htm">this is a sub link of 2</a>
    </div>
    <a href="page.htm">link 3</a><br />
    <span id="open-4" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-4')">open 4</span><br />
    <div id="sub-4" class="subs">
    <a href="page.htm">this is a sub link of 4</a><br />
    <a href="page.htm">this is a sub link of 4</a><br />
    <a href="page.htm">this is a sub link of 4</a>
    </div>
    <a href="page.htm">link 5</a><br />
    <a href="page.htm">link 6</a><br />
    <span id="open-7" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-7')">open 7</span><br />
    <div id="sub-7" class="subs">
    <a href="page.htm">this is a sub link of 7</a><br />
    <a href="page.htm">this is a sub link of 7</a><br />
    <a href="page.htm">this is a sub link of 7</a>
    </div>

    </body>
    </html>
    Last edited by Graeme Hackston; 12-02-2002 at 11:18 PM.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This does both. Change "jumpy" to 0 if you want items closing only when clicked.

    I don't know if I'm populating the array "nums" normally. If anyone has a suggestion feel free to comment.

    <html>
    <head>
    <title></title>
    <style>
    .subs, .page-flag {
    display: none;
    }

    .link, a:visited, a:link, a:active {
    color:black; background-color:transparent; text-decoration:none;
    }

    .link, .link-over {
    cursor: pointer;
    }

    a:hover, .link-over {
    color:blue; background-color:transparent; text-decoration:none;
    }
    </style>
    <script>

    jumpy = 1;

    IdsForIE5 = new Array ()

    SubIds = new Array ()

    nums = new Array (0)

    function Open(Sub) {
    if (jumpy == 1) {
    for (var i=0;i<SubIds.length;i++) {
    a = document.getElementById(SubIds[i]).style
    if (SubIds[i] == Sub) {
    if (a.display == 'block') {
    a.display = 'none'
    } else {
    a.display = 'block'
    }
    } else {
    a.display = 'none'
    }
    }
    } else {
    a = document.getElementById(Sub).style
    if (a.display == 'block') {
    a.display = 'none'
    } else {
    a.display = 'block'
    }
    }
    }

    IE5 =(parseInt(navigator.appVersion) == 4 && navigator.userAgent.toLowerCase().indexOf('msie 5.0') != -1);

    onload = function() {
    while (nums.length < 50) {
    nums[nums.length] = nums.length + 1
    }
    for (var i=0;i<nums.length;i++) {
    if (document.getElementById('sub-' + nums[i])) {
    SubIds[SubIds.length] = 'sub-' + nums[i]
    }
    if (document.getElementById('open-' + nums[i])) {
    IdsForIE5[IdsForIE5.length] = 'open-' + nums[i]
    }
    }
    if (IE5) {
    for (var i=0;i<IdsForIE5.length;i++) {
    document.getElementById(IdsForIE5[i]).style.cursor = 'hand'
    }
    }
    if (document.getElementById('flag')) {
    str = document.getElementById('flag').innerHTML
    SubId = 'sub-' + str.slice(str.indexOf('flag-')+5,str.indexOf('-menu'))
    if (document.getElementById(SubId)) {
    Open(SubId)
    }
    }
    }

    </script>
    </head>
    <body>

    <div id="flag" class="page-flag"><div id="flag-2-menu" class="page-flag"></div></div>

    <a href="page.htm">link 1</a><br />
    <span id="open-2" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-2')">open 2</span><br />
    <div id="sub-2" class="subs">
    <a href="page.htm">this is a sub link of 2</a><br />
    <a href="page.htm">this is a sub link of 2</a>
    </div>
    <a href="page.htm">link 3</a><br />
    <span id="open-4" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-4')">open 4</span><br />
    <div id="sub-4" class="subs">
    <a href="page.htm">this is a sub link of 4</a><br />
    <a href="page.htm">this is a sub link of 4</a><br />
    <a href="page.htm">this is a sub link of 4</a>
    </div>
    <a href="page.htm">link 5</a><br />
    <a href="page.htm">link 6</a><br />
    <span id="open-7" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-7')">open 7</span><br />
    <div id="sub-7" class="subs">
    <a href="page.htm">this is a sub link of 7</a><br />
    <a href="page.htm">this is a sub link of 7</a><br />
    <a href="page.htm">this is a sub link of 7</a>
    </div>

    </body>
    </html>
    Last edited by Graeme Hackston; 12-02-2002 at 11:19 PM.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the push() method for arrays is Javascript1.5. I'll be honest, I don't know which browsers natively support 1.5 and which don't, but I'm pretty sure that IE4 does not, and maybe not IE5. Some research on Javascript1.5 will yeild an answer.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks beetle. If it doesn't work in IE5 I need to change it. I'll see if I can find some info.

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ya, lemme know what you find out. Also, I'd like to know what you think of my DOM menu....

    http://www.lanwizards.com/navtest/test.htm

    I'm still working through a teeny problem in Gecko, but it's 95% complete.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks good beetle, I tried using a list but gave up because of differences in bullet image positioning. I couldn't get IE6 and Mozilla 1.0 to act the same.

    I'm pretty sure push() isn't supported by IE5. I changed the onload function above as per this page:

    http://www.webreference.com/dhtml/column32/2.html


  •  

    Posting Permissions

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