|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
April 18th, 2005, 12:39 PM
|
||||||
|
||||||
client side JavaScript: iterating over elements and hooking event handlers
the code below is iterating over all span elements in the page, search for elements having specific attribute (in this case "mycolor" attribute) and once found, hook custom event handler to the span element mouseover and mouseout events, which use the attribute value to change the font color.
note: custom attributes must contain small case letters only, for example "MyColor" is illegal and won't work for standard browsers. the attribute value can be any string. Code:
<html>
<head>
<title>javascript sample code</title>
<script language="javascript" type="text/javascript">
//hook the window load event ("event" argument will be automatically populated by standard browsers)
window.onload=function WindowLoad(event) {
//get list of all span elements:
var arrElements = document.getElementsByTagName("span");
//iterate over elements:
for (var i=0; i<arrElements.length; i++) {
//get pointer to current element:
var element=arrElements[i];
//check for desired attribute:
if (element.attributes["mycolor"]) {
//found... hook element with our global event handler:
element.onmouseover=MyMouseOver;
element.onmouseout=MyMouseOut;
}
}
}
function MyMouseOver(event) {
//read IE event:
if ((typeof event == "undefined")||(!event))
event = window.event;
//read sender element:
var objSender=event.target||event.srcElement;
//maybe non IE and non standard browser:
if (!objSender)
return false;
//read attribute:
var strColor=objSender.attributes["mycolor"].value;
objSender.style.color = strColor;
}
function MyMouseOut(event) {
//read IE event:
if ((typeof event == "undefined")||(!event))
event = window.event;
//read sender element:
var objSender=event.target||event.srcElement;
objSender.style.color = "black";
}
function Print(_ob) {
var m="", j;
for (j in _ob) {
m += j + ": " + _ob[j] + ", ";
}
alert(m);
}
</script>
</head>
<body>
<span>just ordinary span.</span><br />
<span mycolor="blue">try to move the mouse over me.</span><br />
<span mycolor="red">no, move the mouse over me!</span>
</body>
</htm>
|
|
#2
April 18th, 2005, 04:29 PM
|
||||
|
||||
|
Wow, I had no idea that you can add your own attributes to things. Opens up a whole new set of possibilities.
Elija
|
|
#3
April 19th, 2005, 02:05 AM
|
||||||
|
||||||
|
indeed... I found out about it couple of years ago it was quite amazing. you can also add anything you want into existing web page at run time it's even more amazing - however, I found out about lower-case attribute names only recently, when something just refused to work on Firefox... after hours of debugging I found that irritating thing - but when thinking about its logic, it make sense as it's part of xhtml standard.
|
|
#5
April 19th, 2005, 07:58 AM
|
||||||
|
||||||
|
this is true for custom tags - but I can use my own attributes with the current version of Firefox, so I assume it's true for any standard browser.
|
|
#6
April 20th, 2005, 04:05 AM
|
||||
|
||||
|
I added a couple of attributes to some "a" elements in a script I am writing and I have a couple of comments to make.
1. It definately works in Firefox and IE6 2. It made what I was trying to achieve very simple. 3. Kudos to Shadow Wizard for mentioning it I also tried a custom element, called book and added some css. xhtml Code:
<book>This is the title of the book</book> css Code:
book {font-family: tahoma; font-size: 20px; font-weight: bold; }
This work fine using the xhtml1.1 strict dtd in Firefox but was although the content was rendered by IE, the element and styling were ignored. So I guess IE defines the X in XHTML as "sort of extensible" Elija
|
|
#7
April 20th, 2005, 04:27 AM
|
||||||
|
||||||
|
to make it work in IE you have to add such thing in the html main tag:
Code:
<html xmlns:mytags> then, have such tag and style: Code:
<style type="text/css">
mytags\:book {font-family: tahoma; font-size: 20px; font-weight: bold; }
</style>
<mytags:book>This is the title of the book</mytags:book>
the above works for both IE and Firefox. for more details about xmlns attribute: http://msdn.microsoft.com/workshop/...rties/xmlns.asp dunno exactly why Microsoft did this, probably because IE still can't handle xml - so you have to explicitly tell it "here is xml, deal with this".
|
|
#8
April 20th, 2005, 04:30 AM
|
||||||
|
||||||
|
by the way, having this you can treat your custom tag like any other tag and even get list of its child tags using client side code. you can have full xml part in your page and access it using pure client side code - pretty useful sometimes.
|
|
#9
April 21st, 2005, 12:09 AM
|
||||
|
||||
|
Man, isn't it just as easy to use CSS?
|
|
#10
April 21st, 2005, 12:10 AM
|
||||
|
||||
|
Actually, like 10x easier.
|
|
#11
April 21st, 2005, 07:46 AM
|
||||||
|
||||||
|
CSS and JavaScript are two different entities - most of the things you can with JS you can't do with CSS
|
|
#12
April 21st, 2005, 03:48 PM
|
||||
|
||||
|
I've already got to use this in a project at work - It made something complicated really simple, reducing a day or so's effort to just under an hour!!
Elija (who feels like a kid in a candy store)
|
|
#13
April 22nd, 2005, 07:30 AM
|
||||||
|
||||||
|
lol!! (kid ah?
 )you can transfer the hours you saved for yourself into reputation points you know - dragons are always hungry! 
|
|
| Viewing: ASP Free Forums > Programming > Code Bank > client side JavaScript: iterating over elements and hooking event handlers |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
