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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts

    Auto link Parent div with child A's href

    Hello all this has come in so useful in our office after i wrote it years ago so i though i would post it on here for every one to use

    WHAT IT DOES
    this script allows you to set the link of a parent div,li,table-cell to that of a child <a> tag

    HOW TO USE
    This system is so simple to use all you have to do is on the tag you would like the parent to act as if it were the link just add the class parentLinkActive to it this dose not prevent you from using your own classes it will search the class for the parentLinkActive and not inter-fear with the other classes. then just run the function i use it onLoad of the body but if using with jQuery stick it in the document ready

    E.G
    <div id="parent"><a class="parentLinkActive" href="javascript:alert('hello');">Say Hello</a></div>

    This now when ever any one click on the div parent it will act like the a link

    SOURCE CODE
    PHP Code:
    <script type="text/javascript">
    /*
    */
    var ParentClickLinks = [];
    function 
    childLinksCheck() {
        var 
    elements document.getElementsByTagName('a');
        for (var 
    0elements.lengthi++) {
            var 
    currEl elements[i];
            var 
    pos currEl.className.indexOf('parentLinkActive');
            if (
    pos != -1) {
                var 
    parent currEl.parentNode;
                
    ParentClickLinks[ParentClickLinks.length] = currEl.href;
                
    parent.className parent.className " click_"+(ParentClickLinks.length 1);
                
    parent.addEventListener('click', function () {
                    var class = 
    this.className;
                    var 
    parts = class.split(' ');
                    for(var 
    c=0c<parts.lengthc++){
                        if(
    parts[c].indexOf('click_') != -1){
                            var 
    indexs parts[c].split('_');
                            var 
    pos indexs[1];
                            
    document.location ParentClickLinks[pos];
                        }
                    }
                }, 
    false);
                
    currEl.href "javascript:return false;";
                
    parent.style.cursor currEl.style.cursor;
            }
        }
    }
    /* add "childLinksCheck();" to onload of body */
    </script> 
    Working towards a Internet where we don't have website just browser applications Kill the Hyper-link and say hello to 3D Games in the browser :)

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Does it work with other child tags?

    It works very well for a child with <a> tag.

    Question ...
    Can it be modified to perform an 'onclick=...' function with a different child tag?
    Like <div>, <span>, <li> etc?

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    Thanks for that i have changed it to support onclick (but this is untested so if you would be so kind to test for me)

    Changes
    What class to use!
    PHP Code:
    <body onload="childLinks();"> <!-- This will still use parentLinkActive -->

    <
    body onload="childLinks('activeParent');"> <!-- This will now use activeParent or what ever you set --> 
    The Engine
    The Engine gets its elements using getElementsByClassName this might not work in some old browsers so just add
    http://robertnyman.com/2008/05/27/th...ame-anno-2008/

    As requested support for onclick

    This supports both onclick="javascript:doSomething();" and onclick="return doSomething();"
    This then allows you to prevent running the href Code if your onclick has returned false;

    Please don't think you have to use any thing on that project as it's only going to hold code for developers to use
    Last edited by barkermn01; 11-02-2010 at 01:16 PM.
    Working towards a Internet where we don't have website just browser applications Kill the Hyper-link and say hello to 3D Games in the browser :)

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Request for example(s)...

    Do you have some small HTML example program(s) showing how to use the function?

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by jmrker View Post
    Do you have some small HTML example program(s) showing how to use the function?
    PHP Code:
    <!DOCTYPE HTML>
    <
    html>
    <
    head>
        <
    script type="text/javascript">
        
    ParentClickLinks = [];
        
    ParentHrefLinks = [];
        function 
    childLinks(className){
            if(
    typeof(className) == "undefined"){
                
    className "parentLinkActive";
            }
            var 
    elements document.getElementsByClassName(className);
            for (var 
    0elements.lengthi++) { 
                var 
    currEl elements[i];
                
    ParentClickLinks[ParentClickLinks.length] = currEl.onclick
                
    ParentHrefLinks[ParentHrefLinks.length] = currEl.href
                
    parent elements[i].parentNode;
                
    parent.className parent.className " click_"+(ParentClickLinks.length 1);
                
    parent.addEventListener('click', function () { 
                        var class = 
    this.className
                        var 
    parts = class.split(' '); 
                        for(var 
    c=0c<parts.lengthc++){ 
                            if(
    parts[c].indexOf('click_') != -1){ 
                                var 
    indexs parts[c].split('_'); 
                                var 
    pos indexs[1]; 
                                var 
    retState ParentClickLinks[pos]();
                                if(
    retState == false){
                                    return 
    false;
                                }
                                if(
    typeof(ParentHrefLinks[pos]) != "undefined"){
                                    
    document.location ParentHrefLinks[pos]; 
                                }
                            } 
                        } 
                    }, 
    false);
                    
    currEl.href "javascript:return false;"
                    
    currEl.onclick "javascript:return true";
            }
        } 
        
    </script>
    </head>
    <body onload="childLinks();">
    <div style="background-color:blue; height:100px">
        <div class="parentLinkActive" onclick="alert('hello World');">Hello world</div>
    </div>
    </body>
    </html> 
    Working towards a Internet where we don't have website just browser applications Kill the Hyper-link and say hello to 3D Games in the browser :)


  •  

    Posting Permissions

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