Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Learning DHTML stuff... 1

Status
Not open for further replies.
snoopy75

snoopy75

Technical User
Joined
Aug 24, 2001
Messages
340
Location
US
Alright, I know I can do this:
Code: 
<td id=&quot;cell4&quot; onMouseOver=&quot;cell4.style.backgroundcolor='#00FF00'&quot; onMouseOut=&quot;cell4.style.backgroundcolor=''&quot;>Hello</td>
... and I know I can do this:
Code: 
<style>
<!--
.hilite {
	border: 1px solid #000000;
	background-color: #FFFF00;
	color: #0000FF;
}
-->
</style>
<td id=&quot;cell2&quot; onMouseOver=&quot;cell2.className='hilite'&quot; onMouseOut=&quot;cell2.className=''&quot;>is</td>
... but I don't like having to put all that code in every single <td> tag I have in my humongous table, so what I want to know is if there is some way to do something like this:
Code: 
<style>
<!--
td {
     onMouseOver=&quot;this.style.backgroundcolor='#00FF00'&quot;
     onMouseOut=&quot;this.style.backgroundcolor=''&quot;
}
//-->
</style>
Any suggestions? :-)

--Ryan
 
Sort by date Sort by votes
refer to this thread. It will show you how to do this in a cell
thread215-378042 A language that doesn't affect the way you think about programming is not worth knowing.
admin@onpntwebdesigns.com
 
Upvote 0 Downvote
Well... yeah, I know how to highlight a cell. What I'm asking is, is there a way to apply JavaScript events to html elements in the same manner as applying style properties? To expound upon my above example, instead of this:
Code: 
<style>
<!--
.hilite {
    border: 1px solid #000000;
    background-color: #FFFF00;
    color: #0000FF;
}
-->
</style>
<td id=&quot;cell2&quot; onMouseOver=&quot;cell2.className='hilite'&quot; onMouseOut=&quot;cell2.className=''&quot;>is</td>
... I want to be able to do this:
Code: 
<style>
<!--
.hilite {
    border: 1px solid #000000;
    background-color: #FFFF00;
    color: #0000FF;
}
td {
     onMouseOver=&quot;this.style.backgroundcolor='#00FF00'&quot;
     onMouseOut=&quot;this.style.backgroundcolor=''&quot;
}
-->
</style>
<td id=&quot;cell2&quot;>Hello</td>
... so that every <td> tag by default picks up an onMouseOver and an onMouseOut event wihtout having to explicitly define them in the tag. Am I just wishing, or is this something that can be done?

--Ryan
 
Upvote 0 Downvote
css can't do that for you. However if you really want to optimise code you can use event handlers. Here is a very messy example (messy because I want it to work with mozilla and IE6) I just did to show you.
<html>
<head>
<title>Events testing page 1</title>
<script>

// library code start
function removeEvent(o, type, listener, useCapture)
{
return ((o.removeEventListener) ? o.removeEventListener(type, listener, useCapture) : o.detachEvent(&quot;on&quot; + type, listener)) ;
}

function addEvent(o, type, listener, useCapture)
{
return ((o.addEventListener) ? o.addEventListener(type, listener, useCapture) : o.attachEvent(&quot;on&quot; + type, listener)) ;
}

if (!document.all && !Event.prototype.srcElement)
{
eval(&quot;Event.prototype.srcElement getter=function(){return((this.target.nodeType==1)?this.target:this.target.parentNode)}&quot;)
}
// library code end. this part could be put in a .js file

function hilite(event)
{
target = event.srcElement ;
target.style.backgroundColor = &quot;#00FF00&quot;
addEvent(target, &quot;mouseout&quot;, unlite, true);
}

function unlite(event)
{
target = event.srcElement ;
target.style.backgroundColor = &quot;transparent&quot;
}

function makeAllTdsHilite()
{
tds = document.getElementsByTagName(&quot;td&quot;);

for(var i = 0; i < tds.length; i++)
{
addEvent(tds, 'mouseover', hilite, true)
}
}

</script>
</head>
<body onload=&quot;makeAllTdsHilite()&quot;>

<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>


</body>
</html>

I hope this helps. Gary Haran
 
Upvote 0 Downvote
Interesting. Unfortunately, when I tried it out, I got the following error message:
Code: 
Line: 14
Char: 9
Error: Object doesn't support this property or method
Code: 0
URL: [URL unfurl="true"]http://localhost/equipment/testpage.htm[/URL]
Line 14 is in the addEvent function. I'm not familiar with some of the things you've done, so I don't know why I could be getting an error. Any ideas?

Thanks, though, for that makeAllTdsHilite function. Very instructive. :-)

--Ryan
 
Upvote 0 Downvote
Nope, I'm using IE6.

I &quot;cleaned&quot; up your code to make it only IE-compliant to see what would happen, and this is the working code I ended up with:
Code: 
<html>
  <head>
    <title>Events testing page 1</title>
    <script language=&quot;JScript&quot;>
      function hilite(event)
      {
        target = event.srcElement ;
        target.style.backgroundColor = &quot;#00FF00&quot;;
      }

      function unlite(event)
      {
        target = event.srcElement ;
        target.style.backgroundColor = &quot;transparent&quot;
      }

      function makeAllTdsHilite()
      {
        tds = document.getElementsByTagName(&quot;td&quot;);

        for(var i = 0; i < tds.length; i++)
        {
		  tds.item(i).attachEvent(&quot;onmouseover&quot;, hilite);
		  tds.item(i).attachEvent(&quot;onmouseout&quot;, unlite);
        }
      }
      </script>
  </head>
  <body onload=&quot;makeAllTdsHilite()&quot;>

    <table>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>


  </body>
</html>
So I know the attachEvent method works. It must be something else on line 14... I don't know. A star for you, though, for pointing me in the right direction. :-)

--Ryan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question Question
SoThink DHTML Menu Conversion
Replies
0
Views
996
trevil620
trevil620
tqeonline
  • Locked
  • Question Question
On Text Change - DO STUFF
Replies
5
Views
211
feherke
feherke
ckdoublenecks
  • Locked
  • Question Question
Just learning - I need help with this code
Replies
3
Views
170
Cajunaut
Cajunaut
Griffyn
  • Locked
  • Question Question
executing a function after page load with DHTMLX
Replies
0
Views
83
Griffyn
Griffyn
BobMCT
  • Locked
  • Question Question
Learning AJAX by example?
Replies
2
Views
109
BobMCT
BobMCT

Part and Inventory Search

Sponsor

Back
Top