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 4 of 4

Thread: Onclick trouble

  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Onclick trouble

    Further to my previous problem which is all fixed now thanks, I have come across another. I have managed to get the background of a link to change to transparent 'onclick'. The problem is that when another link is clicked the link that was previously clicked stays transparent, which isn't ideal.

    I'm using 'this' so that only the element that is clicked changes, what I need is some way of specifying a background color for anything that isn't 'this' and then continue to change the clicked element. Is this possible? The only other way I can think of is to add a class to each menu item and then only apply the backgroundColor = "Transparent" if the class of the clicked element matches that stored in a variable and other wise apply the standard background color. Though I may be shooting wide of the mark.

    Anyway here is my JS:
    Code:
    function servicesMenu() {
      if (!document.getElementsByTagName) return false;
      if (!document.getElementById) return false;
      if (!document.getElementById("services")) return false;
      var servicesNav = document.getElementById("services");
      var lnks = servicesNav.getElementsByTagName("a");
      for (var i=0; i<lnks.length; i++) {
        lnks[i].onclick = function() {
          this.style.backgroundColor = "transparent";
        }
      }    
    }
    And the relevant HTML:
    Code:
    <ul id="services">
        <li><a href="#intro">Intro</a></li>
        <li><a href="#web">Web</a></li>
        <li><a href="#print">Print</a></li>
        <li><a href="#identity">Identity</a></li>
    </ul>
    If someone could advise on the best way to do this I would really appreciate it.

    Thanks,

    Pete.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there pa007,

    does this help...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #services a {
       background-color:#f00;
     }
    </style>
    
    <script type="text/javascript">
    function servicesMenu() {
      if (!document.getElementsByTagName) return false;
      if (!document.getElementById) return false;
      if (!document.getElementById("services")) return false;
      var servicesNav = document.getElementById("services");
      var lnks = servicesNav.getElementsByTagName("a");
      for (var i=0; i<lnks.length; i++) {
        lnks[i].onclick = function() {
      for (var i=0; i<lnks.length; i++) {
        lnks[i].style.backgroundColor='#f00';
     }
          this.style.backgroundColor = "transparent";
        }
      }    
    }
    window.onload=servicesMenu;
    </script>
    
    </head>
    <body>
    
    <ul id="services">
        <li><a href="#intro">Intro</a></li>
        <li><a href="#web">Web</a></li>
        <li><a href="#print">Print</a></li>
        <li><a href="#identity">Identity</a></li>
    </ul>
    
    </body>
    </html>
    coothead

  • Users who have thanked coothead for this post:

    pa007 (08-27-2007)

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That works brilliantly, I have discovered another problem though. It seems some of my functions are conflicting. I know they both work as I have had them working separately but if they are both in the .js file only one will work, if I change the order then the other one will work. I have a feeling it's something to do with the onclick event-handler but I'm not sure.

    It's a bit long but here is my complete JS code:

    Code:
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }
    
    function showSection(id) {
      var divs = document.getElementsByTagName("div");
      for (var i=0; i<divs.length; i++ ) {
        if (divs[i].className.indexOf("section") == -1) continue;
        if (divs[i].getAttribute("id") != id) {
          divs[i].style.display = "none";
        } else {
          divs[i].style.display = "block";
        }
      }
    }
    
    function prepareInternalnav() {
      if (!document.getElementsByTagName) return false;
      if (!document.getElementById) return false;
      if (!document.getElementById("services")) return false;
      var nav = document.getElementById("services");
      var links = nav.getElementsByTagName("a");
      for (var i=0; i<links.length; i++ ) {
        var sectionId = links[i].getAttribute("href").split("#")[1];
        if (!document.getElementById(sectionId)) continue;
        document.getElementById(sectionId).style.display = "none";
        links[i].destination = sectionId;
        links[i].onclick = function() {
          showSection(this.destination);
          return false;
        }
      }
    }
    
    function servicesMenu() {
      if (!document.getElementsByTagName) return false;
      if (!document.getElementById) return false;
      if (!document.getElementById("services")) return false;
      var servicesNav = document.getElementById("services");
      var lnks = servicesNav.getElementsByTagName("a");
      for (var x=0; x<lnks.length; x++) {
        lnks[x].onclick = function() {
          for (var i=0; i<lnks.length; i++) {
        lnks[i].style.backgroundColor= "#3E5462";
     }
          this.style.backgroundColor = "transparent";
        }
      }    
    }
    
    addLoadEvent(prepareInternalnav);
    addLoadEvent(function(){showSection('intro')});
    addLoadEvent(servicesMenu);
    Hope you can shed some light on this and thanks a bunch for getting my above problem sorted, these forums are quite amazing.

    Pete.

  • #4
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Bump.

    Pete.


  •  

    Posting Permissions

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