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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Aug 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts

    special onclick event.

    Hi, i'm making a website and everything is working well but I came up with a problem that i can't solve myself. Here it is:
    My website has a few buttons (images with links). They are like this:
    HOME PROGERIA LINKS GUESTBOOK..

    progeria should have a submenu, so that when you click on it, you get something like this:

    HOME PROGERIA LINKS GUESTBOOK..
    || SUB1 SUB2 SUB3 SUB4
    || SUB5 and so on...

    I have designed it (see : http://www.webmasterhelp.biz/gipvincent) BUT the problem i have is that at the moment it's always possible.
    SO BASICALLY: I need a script that puts a layer on top of the sub1,2,3,.. buttons until a visitor clicks on 'progeria' (onclick event). I don't know how to do this as they are images that have to show up at once AND when users haven't clicked on progeria, it should show the normal background color where the sub1,2,3... appears on click. Can anybody help me?

    So briefly i want this submenu to be invisible until a visitor clicks on progeria. THANK YOU VERY MUCH FOR YOUR HELP!

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi arne2,

    Here's one way of doing it.

    First, assign an ID to the progeria link:
    Code:
    <td colspan="4"><a id='progeriamain' href="progeriamain.php" target="progeriamframe"><img name="Progeria_r2_c6" src="Progeria_r2_c6.jpg" width="84" height="26" border="0" id="Progeria_r2_c6" alt="" /></td>
    Now stick this in the head element:
    Code:
    <script type='text/javascript'>
    if (typeof window.onload == 'function') {progeria_OL = window.onload;}
    window.onload = function()
    {
      if (window.progeria_OL) progeria_OL();
      var a = document.getElementById('progeriamain');
      if (a) a.onclick = progeriamain_click;
      a.onclick(); // if those rows are initially hidden with css then you won't need this line
    }
    function progeriamain_click()
    {
      // find parent TR
      var tr = this.parentNode;
      while (tr && tr.nodeName.toLowerCase() != 'tr') {
        tr = tr.parentNode;
      }
      if (tr) {
        // show/hide some of the following TRs
        var i, rowsToHide = 7;
        tr = tr.nextSibling;
        for (i = 0; tr && i < rowsToHide; ++i) {
          if (tr.style.visibility != 'hidden') tr.style.visibility = 'hidden';
          else tr.style.visibility = 'visible';
        }
      }
    }
    </script>
    Btw, I haven't tested this idea, let me know if it works
    Last edited by MikeFoster; 02-13-2007 at 11:30 PM.

  • #3
    Regular Coder
    Join Date
    Aug 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cool ! I don't know how you figured that thing out but it's almost working. The only problem is that it coveres the wrong part. It covers the left (a part of the flower) and not the part with the submenu. Can you change it from site as i don't know how to do it. You can see the online example on the website (http://www.webmasterhelp.biz/gipvincent/).

    THank you very much already!
    Arne

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, it is all one row. That shows that I never work with table layouts

    So let's do it this way. You'll need to give "class='menuTd'" to every <td> that you want to show/hide when progeria is clicked. For example, this is the first row of TDs to add the class to:
    Code:
       <td class='menuTd' colspan="5"><a href="wat.php" target="progeriamframe"><img name="Progeria_r4_c4" src="Progeria_r4_c4.jpg" width="133" height="16" border="0" id="Progeria_r4_c4" alt="" /></a></td>
       <td class='menuTd' colspan="5"><a href="syns.php" target="progeriamframe"><img name="Progeria_r4_c9" src="Progeria_r4_c9.jpg" width="109" height="16" border="0" id="Progeria_r4_c9" alt="" /></a></td>
       <td class='menuTd'><img name="Progeria_r4_c14" src="Progeria_r4_c14.jpg" width="1" height="16" border="0" id="Progeria_r4_c14" alt="" /></td>
       <td class='menuTd' colspan="8"><a href="ontstaan.php" target="progeriamframe"><img name="Progeria_r4_c15" src="Progeria_r4_c15.jpg" width="162" height="16" border="0" id="Progeria_r4_c15" alt="" /></a></td>
       <td class='menuTd' colspan="3"><img name="Progeria_r4_c23" src="Progeria_r4_c23.jpg" width="56" height="16" border="0" id="Progeria_r4_c23" alt="" /></td>
       <td class='menuTd' rowspan="4"><img name="Progeria_r4_c26" src="Progeria_r4_c26.jpg" width="1" height="49" border="0" id="Progeria_r4_c26" alt="" /></td>
       <td class='menuTd' rowspan="7"><img name="Progeria_r4_c27" src="Progeria_r4_c27.jpg" width="7" height="82" border="0" id="Progeria_r4_c27" alt="" /></td>
       <td class='menuTd' rowspan="7"><img name="Progeria_r4_c28" src="Progeria_r4_c28.jpg" width="1" height="82" border="0" id="Progeria_r4_c28" alt="" /></td>
       <td class='menuTd'><img src="spacer.gif" width="1" height="16" border="0" alt="" /></td>
    Then continue adding the class to each TD in the next 5 rows or so.

    Replace all the Js I gave you before with this:
    Code:
    <script type='text/javascript'>
    if (typeof window.onload == 'function') {progeria_OL = window.onload;}
    window.onload = function()
    {
      if (window.progeria_OL) progeria_OL();
      var a = document.getElementById('progeriamain');
      if (a) {
        a.onclick = progeriamain_click;
        a.onclick();
      }
    };
    function progeriamain_click()
    {
      var i = 1, td = document.getElementById('td1');
      xGetElementsByClassName('menuTd', document, 'td',
        function(td) {
          td.style.visibility = (td.style.visibility != 'hidden') ? 'hidden' : 'visible';
        }
      );
    }
    // http://cross-browser.com/x/lib/view.php?sym=xGetElementsByClassName
    function xGetElementsByClassName(c,p,t,f)
    {
      var r = new Array();
      var re = new RegExp("(^|\\s)"+c+"(\\s|$)");
      var e = p.getElementsByTagName(t);
    //  var e = xGetElementsByTagName(t,p); // See xml comments.
      for (var i = 0; i < e.length; ++i) {
        if (re.test(e[i].className)) {
          r[r.length] = e[i];
          if (f) f(e[i]);
        }
      }
      return r;
    }
    </script>

  • #5
    Regular Coder
    Join Date
    Aug 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wooooow! You did it! You actually made it work!

    THANK YOU EXTREMELY MUCH! I can't tell you how much i appreciate it!
    Greate job Mikefoster!(y)

    Greetz and many thanks,
    Arne

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #7
    Regular Coder
    Join Date
    Aug 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops! Noticed something. It works perfectly in FireFox, but i get a javascript error when viewing the page in IE (7), and the javascript also doesn't do anything then.
    Can you make a version that's compatible for both browsers? Or something...?

    THANK YOU!
    Arne

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's odd - I've never seen this error message:

    "Can't execute code from a freed script."

    And it only happened once - now I can't get it to happen again.

    IE was complaining about the red line...
    Code:
    if (typeof window.onload == 'function') {progeria_OL = window.onload;}
    window.onload = function()
    {
      if (window.progeria_OL) progeria_OL();
    So I commented-out both the blue and red lines. The error went away. Then I un-commented them. The error did not re-occur!

    Curiouser and curiouser...

  • #9
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh well, you don't need that anyhow. Just delete the blue and red lines.

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I still haven't been able to get the error to re-occur.

    I had thought that the technique I was using above to save any previously assigned onload function had to be the most simple and cross-browser way of doing it (other than using addEventListener or attachEvent).

    Does IE7 occasionally have a problem with that simple technique?

  • #11
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another line that can be deleted:
    Code:
    function progeriamain_click()
    {
      var i = 1, td = document.getElementById('td1');
      ...

  • #12
    Regular Coder
    Join Date
    Aug 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok! Thank you ! I'll try it when i get home


  •  

    Posting Permissions

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