...

View Full Version : Global function Possible??



ubh
09-11-2008, 10:50 AM
How would I go about calling a function if any div box was clicked?
with out having a onclick="function()" attribute in the div tag its self.

abduraooft
09-11-2008, 11:18 AM
Hi there... this will help you to get started.

<script type="text/javascript" >
window.onload=function(){
var divs=document.getElementById('wrap').getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
divs[i].onclick=function(){
alert(this.innerHTML);
}
}
</script>

<div id="wrap">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</div>

ubh
09-11-2008, 11:42 AM
abduraooft excellent work and awesome response time!!

I played around with it and took off the window.onload to simply added a name to the function.

This way when a DOM function such as, "creating a new div" in "wrap" is preformed everything still works.

Sort of like a refresher on whats inside the "wrap" after a DOM function is preformed.



<script type="text/javascript" >
function setDivEvent(){
var divs=document.getElementById('wrap').getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
divs[i].onclick=function(){
alert(this.id);
}
}


function createNewDivBox()
{
var divID = prompt('you must name this box before it can be created.','');
var getWrap = document.getElementById("wrap");
var newDivBox = document.createElement("div");
newDivBox.style.width="256px";
newDivBox.style.height="256px";
newDivBox.style.backgroundColor="#000"
newDivBox.setAttribute('class','myBox');
newDivBox.setAttribute('id',divID);
getWrap.appendChild(newDivBox);
setDivEvent();
}
</script>




<div id="wrap">
<div id="first">div1</div>
<div id="second">div2</div>
<div id="third">div3</div>
</div>
<button type="button" onclick="createNewDivBox()">ADD DIV BOX</button>


Thanks again m8!

ubh
09-11-2008, 03:44 PM
Hey one last question abduraooft, the below example show a little snag I found when trying to exstend this out a little further.

When you run the below code, there are now two div boxes in "wrap" one parent div and one child div.

when you click on the parent div you get alerted the parent div's ID. However if you click the child div you get alerted both child div's ID and then parent div's ID. Would it be possible to alert the clicked divs ID only?



<html>
<head>
<style type="text/css">
div:hover{
border:thin dashed #FF0;
}

#wrap:hover{
border:none;
}

#parentDiv {
width:256px;
height:256px;
background-color:#333;
}

#childDiv {
width:200px;
height:200px;
background-color:#666;
}
</style>

<script type="text/javascript" >
function setDivEvent(){
var divs=document.getElementById('wrap').getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
divs[i].onclick=function(){
alert(this.id);
}
}
</script>
</head>

<body onload="setDivEvent()">
<div id="wrap">
<div id="parentDiv">
<div id="childDiv"></div>
</div>
</div>
</body>
</html>

ubh
09-12-2008, 12:31 AM
Bumpp

abduraooft
09-12-2008, 05:55 AM
I don't think it's possible by the above method, as the inner div is a part of the outer div, and any click in the inner div would trigger the outer div also.

vwphillips
09-12-2008, 12:49 PM
<html>
<head>
<style type="text/css">
div:hover{
border:thin dashed #FF0;
}

#wrap:hover{
border:none;
}

#parentDiv {
width:256px;
height:256px;
background-color:#333;
}

#childDiv {
width:200px;
height:200px;
background-color:#666;
}
</style>

<script type="text/javascript" >

function setDivEvent(){
var divs=document.getElementById('wrap').getElementsByTagName('div');
for(var i=0;i<divs.length;i++)

divs[i].onclick=function(){ Limit(this); }
}

function Limit(obj){
var zxce=window.event||arguments.callee.caller.arguments[0];
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
alert(obj.id)
}

</script>
</head>

<body onload="setDivEvent()">
<div id="wrap">
<div id="parentDiv">
<div id="childDiv"></div>
</div>
</div>
</body>
</html>

ubh
09-12-2008, 02:42 PM
vwphilips,

THANK YOU SO MUCH M8!!

I just on the trail to the cancelBubble but would of never gotten this far.
I must say very slick!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum