PDA

View Full Version : Auto link Parent div with child A's href

barkermn01
10-28-2010, 03:41 PM
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

<script type="text/javascript">
/*
*/
var ParentClickLinks = [];
function childLinksCheck() {
var elements = document.getElementsByTagName('a');
for (var i = 0; i < elements.length; i++) {
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=0; c<parts.length; c++){
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>
jmrker
10-29-2010, 04:22 AM
It works very well for a child with <a> tag. :thumbsup:

Question ... :confused:
Can it be modified to perform an 'onclick=...' function with a different child tag?
Like <div>, <span>, <li> etc?
barkermn01
11-01-2010, 08:38 AM
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!

<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/the-ultimate-getelementsbyclassname-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
jmrker
11-02-2010, 03:45 AM
Do you have some small HTML example program(s) showing how to use the function?
:confused:
barkermn01
11-02-2010, 01:16 PM
Do you have some small HTML example program(s) showing how to use the function?
:confused:

<!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 i = 0; i < elements.length; i++) {
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=0; c<parts.length; c++){
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>