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 8 of 8
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    Global function Possible??

    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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Hi there... this will help you to get started.
    Code:
    <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>
    Code:
    <div id="wrap">
     <div>div1</div>
     <div>div2</div>
     <div>div3</div>
    </div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    ubh (09-11-2008)

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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.

    Code:
    <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>
    Code:
    <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!
    Last edited by ubh; 09-11-2008 at 11:47 AM.

  • #4
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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?

    Code:
    <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>
    Last edited by ubh; 09-12-2008 at 12:32 AM.

  • #5
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Bumpp

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,524
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • The Following 2 Users Say Thank You to vwphillips For This Useful Post:

    abduraooft (09-13-2008), ubh (09-12-2008)

  • #8
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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!!


  •  

    Posting Permissions

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