|
JavaScript - Element.addeventlistener In Nested Div Problem
Code:
function offPar(){
alert(this.offsetParent.id);
}
function init(){
var mine = document.getElementById("mid");
var other = document.getElementById("inner");
mine.addEventListener("click", offPar, false);
other.addEventlistener("click", offPar, false);
}
window.addEventListener('load', init, false);
HTML :
<div id = "content">
<div id = "mid">
<div id = "inner">
<p class = "par">
</p>
</div>
</div>
</div>
I can add an event listener to the #mid div but I can't to the #inner div. Anyone now why this is? Sorry I can't provide more info. That's all I Know! TTFN John Similar TutorialsI've got the following problem. In IE if a contenteditable element is nested inside a hyperlink, clicking on the element prevents the hyperlink default behavior, i.e. navigation to another document. In FF it works fine. How can I solve the problem? Just removing the contentEditable attribute is not a solution since I want this behavior (navigation to another document) only when user clicks the content-editable element with pressed Ctrl key. Thanks. Okay, I'm really am not getting this. So I came here hopefully for some help. I'm just trying to register a simple click event onto a input element with addEventListener and attachEvent... My code: Code: function addEvent(type, func, elem) {
var netscape = document.getElementById && !document.all;
var ie = document.all;
if(netscape) {
elem.addEventListener(type, func, true);
}
else if(ie) {
elem.attachEvent('on'+type, func);
}
}
//Which is then call by
addEvent('click', someFunction, theElementObject);
So say I had the following code like so: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="./css/global.css" />
<script type="text/javascript">
function addEvent(type, func, elem) {
var netscape = document.getElementById && !document.all;
var ie = document.all;
if(netscape) {
elem.addEventListener(type, func, true);
}
else if(ie) {
elem.attachEvent('on'+type, func);
}
}
function clearTxt() {
var username = document.getElementById('username');
if(username.value == 'Screen Name') {
username.value = '';
}
}
addEvent('click', clearTxt, document.getElementById('username'));
</script>
</head>
<body>
<label for="username">Username:</label> <input name="username" type="text" value="Screen Name" id="username" maxlength="20" />
</body>
</html>
From what I can see and what I understand it should just on event of a click on the username input it should clear the username field. But instead I get a error message from IE saying, "null is null or not a object"???? Like that was any help. So could someone please help me figure out my misunderstanding of this method? Thanks, Jon W I'm trying to add an event handler for to my body, and for some reason which I can't figure out, it only works on Google Chrome. I wouldn't expect it to work in IE, but am wondering why it's not working in Firefox. Here's the relevant parts of the code: Javascript (in an external file) Code: var body = document.body;
body.addEventListener("load", Foo(), false);
function Foo(){
addEventListener(document.getElementsByName("start"),"click", alert("hello"), false);
}
HTML Code: <html> <head> <title>BREAKOUT!</title> <script src="breakout.js" type="text/Javascript" > </script> <LINK REL="stylesheet" HREF="breakout.css" TYPE="text/css"> </head> <body id="body"> <!-- etc.... --> I'm trying to understand how a custom object can call a function within itself. Say I have something like this: Code: function functiontest()
{
this.prop1 = '',
this.prop2 = '',
this.options = {initiallevels:0},
this.prop3 = '/blah',
this.prop4 = true,
this.function4 = function(x)
{
console.log(x)
},
this.init = function(options)
{
this.uid=options.uid
this.t=options.target
document.getElementById(this.t).addEventListener('click',function(){this.uid.function4(this.t)},false)
}
}
myfun1=new functiontest
myfun1.init({uid:'myfun1',target:'target1'})
myfun2=new functiontest
myfun2.init({uid:'myfun2',target:'target2'})
And the html: Code: <html> <head></head> <body> <div id="target1">T1</div> <br> <div id="target2">T2</div> </body> </html> I don't know what to put in the part in bold to set the click event listener and have it call function4 within the functiontest object. I've tried a bunch of different things and nothing worked. Please help, thanks! Is it possible to add events using addEventListener to multiple radio buttons with same id ? <input id="radId" type="radio" value="0" name="radioname">No <input id="radId" type="radio" value="1" name="radioname">Yes I tried to attach event using document.getelementByID BUT it always picks the first radio button. Is there a way around this, any help would be highly appreciated. Thanks I have created this statement and it does its job but not very efficient. How can I put this in a loop and populate the information that I want anonymously? I do not want to copy and paste this for every (id) there is on this page. Locate id get value and use same value to change the bgColor of the page Code: <input id="red" value="red">red
<input id="green" value="green">green
<script>
document.getElementById('red').addEventListener('click', function (e) {
inputColor = e.target.getAttribute('value'); document.bgColor = inputColor; }, true);
<script>
Your help will be much appreciated! Thanks! Hi folks, I'm having problem setting up event handling using member functions. Consider the following code snippet: Code: function Widget()
{
...
this.register = function()
{
...
document.getElementById(this.id).addEventListener('click', this.default_click_handler, false);
}
this.default_click_handler = function(event)
{
this.do_something_useful(); //<--???
}
this.do_something_useful = function()
{...}
}
However I don't manage to call do_something_useful(), I get a this.do_something_useful() is not a function error. What am I doing wrong? Any help is appreciated, Thanks, A. Hi, I have the following code: Code: function addHandlers()
{
var elementList = new Array();
elementList.push(new Element("newhomesdiv", "images/newhomes.png", "images/newhomes-over.png"));
elementList.push(new Element("additionsdiv", "images/additions.png", "images/additions-over.png"));
elementList.push(new Element("homeimprovdiv", "images/homeimprove.png", "images/homeimprove-over.png"));
elementList.push(new Element("aboutusdiv", "images/aboutus1.png", "images/aboutus-over1.png"));
for(var i = 0; i < elementList.length; i++)
{
var curNode = document.getElementById(elementList[i].parentId).firstChild;
var item = elementList[i];
if(curNode)
{
/*if(curNode.addEventListener)
{
curNode.addEventListener("mouseover", function(){makeCallback(item.parentId, item.hoverImage)}, false);
curNode.addEventListener("mouseout", function(){makeCallback(item.parentId, item.regImage)}, false);
}
else if(curNode.attchEvent)
{
curNode.attachEvent("onmouseover", function(){makeCallback(item.parentId, item.hoverImage)});
curNode.attachEvent("onmouseout", function(){makeCallback(item.parentId, item.regImage)});
}
else
{
curNode["onmouseover"] = makeCallback(item.parentId, item.hoverImage);
curNode["onmouseout"] = makeCallback(item.parentId, item.regImage);
}*/
curNode.onmouseover = makeCallback(item.parentId, item.hoverImage);
curNode.onmouseout = makeCallback(item.parentId, item.regImage);
}
}
}
function makeCallback(parId, image)
{
return function() {
changeImage(parId, image);
};
}
function changeImage(parId, image)
{
document.getElementById(parId).firstChild.src = image;
}
The curNode.onmouseover = makeCallback(item.parentId, item.hoverImage); works, but I want to use addEventListener and fallback to the other methods. I don't understand why the addEventListener and attachEvent parts doesn't work. Any ideas? Every time i click on one of the said elements, it puts "undefined" into the textbox each time i click on an element. it seems to me that the Key_Table[x] is not getting passed correctly. How do i make sure that this is getting passed correctly? Here's my Code: Code: <script type='text/javascript'>
// Startup Script
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", LoadEventListeners, false);
}
function LoadEventListeners()
{
var Key_Table = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
// Create event Listeners for the alphabetic keys
for(var x = 0; x < Key_Table.length; x++)
{
Key_Table[x] = document.getElementById(Key_Table[x]);
Key_Table[x].addEventListener("click",
function(){
InsertChar(Key_Table[x]);
},
false);
}
}
function InsertChar(Char)
{
alert("Char is:" + Char);
// Textbox data
document.getElementById('TextData').value = document.getElementById('TextData').value + Char;
}
</script>
On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this: igevt=function(evt){checkclosegal(evt)} window.addEventListener('keypress',igevt, false) and checkclosegal: function checkclosegal(evt) { if(evt.keyCode==27) { closebgeagal() window.removeEventListener('keypress',igevt, false) } } This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index? Please help, thanks! Hi there Im trying to create a function where i pass two element id's and my script populates it with events and anything else it may need to run but what i am finding is that i cant use this so that the instance of the object is kept what ends up happening is nothing at all what i would like to have happen is the code to work somthing like this... Code: <div id="iAmTheTargetId">
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>
and simply running that would then create the equivalent of doing Code: <div id="iAmTheTargetId" onmouseover="element.activate()" onmouseout="element.deactivate()" onmousemove="element.update(event)>
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>
But of course the code above won't actual add onmouseover and etc it just so you can see what i'm trying to achieve Code: /*
* triggerId
* the element in which the attributes will be applied to
*
* hoverBoxid
* the element in which will hover around the triggerId
*/
function hoverBox(triggerId,hoverBoxid){
this.triggerElement = document.getElementById(triggerId);
this.hoverBoxElement = document.getElementById(hoverBoxid);
if(this.triggerElement == null || this.hoverBoxElement){
return null;
}
self = this;
alert(this.triggerElement);
this.triggerElement.addEventListener('mouseover',function(){self.activate();},false);
this.triggerElement.addEventListener('mouseout',function(){self.deactivate();},false);
this.triggerElement.addEventListener('mousemove',function(){self.update(event);},false);
}
hoverBox.prototype = {
triggerElement : null,
hoverBoxElement : null,
state : false
};
hoverBox.prototype.activate = function(){
this.state = true;
};
hoverBox.prototype.deactivate = function(){
if(this.state != false){
this.hoverBoxElement.style.display = "none";
this.state = false;
}
};
hoverBox.prototype.update = function(evt){
if(this.state != false){
this.hoverBoxElement.style.display = "block";
this.hoverBoxElement.style.position = "absolute";
this.hoverBoxElement.style.top = (evt.clientY + 5)+ "px";
this.hoverBoxElement.style.left = (evt.clientX + 10)+ "px";
}
};
A quick note theses function will work by them selfs if you just do Code: <div id="target" onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)">
</div>
<div id="hover">
</div>
<script type="text/javascript">
var aHoverBox = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>
But not quite what I'm after i would like not to have to enter in Code: onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)" and have that done by the JavaScript Well i hope every thing makes scene sorry if i repeated my self just making sure you understand me Good day! Here is the problem, setting the slider to the site, here's an example: http://wowslider.com/best-jquery-sli...near-demo.html and do not connect different effects on this slider, such as buttons on the sides and smooth shifting slides. When you see the code generates this error: Uncaught TypeError: Cannot read property addEventListener' of undefined I do not know what this error, help, error on this site: http://uh219381.ukrdomen.com/ Or here's the code: http://uh219381.ukrdomen.com/themes/...1/wowslider.js sorry for my English I have the following HTML code: Quote: <form id="registration" action="/cgi-bin/registration.cgi" method="POST" onsubmit="return control()"> <fieldset> <legend>Fill up this module</legend> Private <input id="private" type="radio" name="type" value="private" onclick="return addPrivate()"/><br/> Community/Organization <input id="organization" type="radio" name="type" onclick="alert('Organization')"/><br/> <br/> and the following javascript code: Quote: function addPrivate() { var root = document.getElementById('registration'); var label1 = document.getElementById('label'); label1.appendChild(document.createTextNode('First Name: ')); var label2 = document.getElementById('label'); label2.appendChild(document.createTextNode('Last Name: ')); var label3 = document.getElementById('label'); label3.appendChild(document.createTextNode('Address*: ')); var label4 = document.getElementById('label'); label4.appendChild(document.createTextNode('Profession: ')); var div = document.createElement('div'); div.appendChild(label1); div.appendChild(label2); div.appendChild(label3); div.appendChild(label4); root.appendChild(div); } but div tag is not added. Where is the problem? Hi, im new to Js and i have this code: Code: var div = document.createElement("div");
div.id = field+count;
div.name = field+count;
div.class = "bubble_green";
var p = document.createElement("p");
p.appendChild(document.createTextNode('Question '+count));
div.appendChild(p);
field_area.appendChild(div);
assuming that the variables are all correct and working, why is only this produced: Code: <div id="question_3"><p>Question 3</p></div> instead of: Code: <div id="question_3" name="question_3" class="bubble_green"><p>Question 3</p></div> and is there a solution? I am trying to make images change as the user selects the option from the dropdown menu , I have called alert("test1"); alert("test2"); to check if the functions are being called but only the first one happens, can you please tell me what's wrong with the script. Here is the script:
Code: var oImageChooser;
addEvent( window, "load", initialize)
function initialize()
{
alert("test1");
var oImageChooser = document.getElementById("imageChooser");
addEvent(oImageChooser, "change", loadCached);
}
var imageLibrary = new Array();
imageLibrary["image1"] = new Image(120,90);
imageLibrary["image1"].src = "images/desk1.gif";
imageLibrary["image2"] = new Image(120,90);
imageLibrary["image2"].src = "images/desk2.gif";
imageLibrary["image3"] = new Image(120,90);
imageLibrary["image3"].src = "images/desk3.gif";
imageLibrary["image4"] = new Image(120,90);
imageLibrary["image4"].src = "images/desk4.gif";
function loadCached()
{
alert("test2");
var imgChoice = oImageChooser.options[oImageChooser.selectedIndex].value;
document.getElementById("thumbnail").src = imageLibrary[imgChoice].src;
}
here is the html Code: <html> <head><title>Image dropdown</title> <script type = "text/javascript" src = "experimento5.js"> </script> </head> <body onload = "initialize()"> <h1> Choose any image</h1> <img id = "thumbnail" src = "images/desk1.gif" > <form> <select id = "imageChooser"> <option value = "image1"> Bands</option> <option value = "image2"> Clips</option> <option value = "image3"> Lamp</option> <option value = "image4"> Erasers</option> </select> </form> </body> </html> I want a mouseout event to trigger only when I leave the parent element not when I mouseover a child element. I've been using the script from quirksmode but it can be hard to get working. Code: function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}
I have a function that needs to work only when the parent is moused out of. I didn't make this script. It's called by ondblclick="transition(document.getElementById('select1'),0,800,20)" in the html Code: function transition(ele,dirflag) {
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
var totDur = arguments[2] || 1000; // third argument, or one seconds
var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
var intrval = totDur/numSteps; // renamed so it can't conflict
ele.sopac = 0; // we start at 0
ele.shght = 50; // we start at 50px
ele.eopac = 1; // we end at 1
ele.ehght = 140; // we end at 140px
ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment opac
ele.ihght = (ele.ehght-ele.shght)/numSteps; // how much to increment hght
ele.copac = parseFloat(ele.copac,10) || ele.style.opacity || ele.sopac; // a val for current
ele.chght = ele.chght || parseInt(ele.style.height,10) || ele.shght; // a val for current
ele.dirflag = dirflag; // changed name to dirflag, stored for reference
if(ele.intrans) clearInterval(ele.intrans); // clear timeout if already running...
if(dirflag) { // 1 or true = increment
// alter visibility here to make an invisible item visible before starting
ele.style.display='block';
ele.intrans= setInterval(function() {
if(ele.copac<ele.eopac ) { // if mods needed
ele.copac=parseFloat(ele.copac,10)+parseFloat(ele.iopac,10); // increment
if(ele.copac>ele.eopac) ele.copac=ele.eopac; // error correction
ele.chght=parseFloat(ele.chght,10)+parseFloat(ele.ihght,10); // increment
if(ele.chght>ele.ehght) ele.chght=ele.ehght; // error correction
// set styles accordingly
ele.style.opacity = ele.copac;
ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
ele.style.height = ele.chght+'px';
} else {
clearInterval(ele.intrans); // we're done -- clear timeout
}
},intrval); // do it on intrval timeline
} else {
// 0 or false = decrement
ele.intrans= setInterval(function() {
if(ele.copac>ele.sopac || ele.chght>ele.shght) { // if mods needed
ele.copac=parseFloat(ele.copac,10)-parseFloat(ele.iopac,10); // decrement
if(ele.copac<ele.sopac) ele.copac=ele.sopac; // error correction
ele.chght=parseFloat(ele.chght,10)-parseFloat(ele.ihght,10); // decrement
if(ele.chght<ele.shght) ele.chght=ele.shght; // error correction
// set styles accordingly
ele.style.opacity = ele.copac;
ele.style.MozOpacity = ele.copac;
ele.style.KhtmlOpacity = ele.copac;
ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
ele.style.height = ele.chght+'px';
} else {
clearInterval(ele.intrans); // we're done -- clear timeout
// and make the item disappear here since it's done transitioning.
ele.style.display='none';
}
},intrval); // do it on intrval timeline
}
} // all done!
I tried to do this: Code: function transition(ele,dirflag,e){
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
var totDur = arguments[2] || 1000; // third argument, or one seconds
var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
var intrval = totDur/numSteps; // renamed so it can't conflict
ele.sopac = 0; // we start at 0
ele.shght = 50; // we start at 50px
ele.eopac = 1; // we end at 1
ele.ehght = 140; // we end at 140px
ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment
........
With this in the html onmouseout="transition(document.getElementById('select1'),1,800,20,event) but it doesn't work. the event isn't getting passed to the function. i have tried to move the event before document.getElementById and put e before ele in the function but it still doesn't work. Nothing fires at all. I've just added the quirksmode script to other functions in the past and had them work. I know this won't be the last time I need to stop problems with mouseover so can you give me some tips on what is going wrong. and please no script librarys. Hi guys, I am currently stuck up on something.. check this page http://dev.andrewfopalan.com/new_slider.html Well for starters.. I am trying to mimic this effect.. http://www.vogue.com/ The slider on the very top.. A quick preview of what I did was.. I used this plugin.. easyslider().. And then edited it.. since I am still learning jQuery and javascript.. so I made changes to the controls... usually the elements for design.. all I did was that.. The first problem was how to make it center like the one on the vogue.. so it was done... Second the masking problem.. I had alot of trouble thinking how I am going to do this.. because whenever I used absolute position on masks and the controls, everything is messed up on all browser.. So my problem primarily was how to make the effect like vogue mask, so what I did was used opacity on the list... and add a class active that regains the opacity 1 on the middle part of the slider.. so that was done.. My follow up problem is whenever I am navigating through the slider.. I add the "active" class on the next item on the list.. up until there I am fine.. but when I am at almost at the end, at the 5th slider, I am not getting the active class? and after a couple of clicks on the "next".. it wont navigate through... here's the code for the next button: Code: // this gets the current location of the active slider on the list..
$("a#"+options.nextId).click(function(e){
var id= $('.active').attr('id');
//this removes the "active" class on the slider.. and then goes to the next item on the list.. and then add the class "active" to the next image slide..
$("ul li:nth-child("+(id)+")").removeClass('active').next().addClass('active');
// this is the plugin's animation to move to the next slide..
animate("next",true);
Heres' the code for the animate Code: function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p},
{ queue:false, duration:speed, complete:adjust,
}
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
heres the adjust code function Code: function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
I am very still new to this jQuery thing.. but I am trying my best to learn.. Hope someone could teach me and help me on this... Code: var bakaBanner;
bakaBanner = document.getElementById('head');
if (bakaBanner) {
var str=/\/images\/banners\/[A-Za-z0-9_]+.[a-z]+/;
document.write(str.replace(/\/images\/banners\/[A-Za-z0-9_]+.[a-z]+/, "http://img218.imageshack.us/img218/5904/revyblacklagoon1.png"));
}
Alright, here's the deal... This is a script to be used in Greasemonkey. The page this is for changes their banner every 5 minutes, the name changes and it could be either jpg or png. I'm fairly certain my regex itself: \/images\/banners\/[A-Za-z0-9_]+.[a-z]+ Is correct... Here's an example of what it's looking through: Code: <div id="head" style="background-image: url(/images/banners/kiminitodoke.jpg);" > <div id="header_left"> <div id="rss"> My guess is that it has something to do with this line: document.write(str.replace(/\/images\/banners\/[A-Za-z0-9_]+.[a-z]+/, "http://img218.imageshack.us/img218/5904/revyblacklagoon1.png")); I'm new with Javascript, so I don't really understand why it's not working... :/ Hello I am fairly new to Javascript. I have a function which takes a string which consists of key value pairs and sets a form control based on key being the form element name and value being the value to set. eg string could be "key1=orange;key2=2;key3=whetever" Here is the function: function processresponse(frm, serverResponse) { var items = serverResponse.split(";"); for(var i = 0; i < items.length; i++) { var item = items[i]; var eqchar = item.search("="); if(eqchar != -1) { var key = item.slice(0, eqchar); var value = item.slice(eqchar+1); var elemname = key; if(document.getElementById(elemname) != null) { var type = frm.elements[elemname].type; if (type=="checkbox") { value == "1" ? frm.elements[elemname].checked=true : frm.elements[elemname].checked=false; } else if (type=="text"){ //do processing for text (text input) frm.elements[elemname].value = value; } else if(type=="select-one"){ //only one is openformmode - default to [0] - true if(value == "0" || value.length == 0) { frm.elements[elemname].options[0].selected = true; } else { frm.elements[elemname].options[1].selected = true; } } else { alert("unknown ctrl type: " + type + " name: " + frm.elements[elemname].name + " val: " + value + " key: " + key); } } //if(frm.getElementById(elemname) } } } The problem line is: var type = frm.elements[elemname].type; elemname is case sensitive so if for example the form element is called dog and the string elemname is Dog, then the line fails with Error: 'elements[...].type' is null or not an object So my check if(document.getElementById(elemname) != null) is insufficient to guard against this. I realise I could do a try catch but there must be a more legant way than that. How can I test the formname more reliably? Any ideas would be very welcome. Angus Hi, I have a small problem with a page I'm working on. I have an anchor tag inside a table that has a mouseover event that updates a contextual help box. I need to add a similar mouseover event to the anchor tag that does the same thing, but updates the help box with different text. The problem I have is that when the mouse is over the table, no matter if I move the mouse over the anchor, the help text only displays the message that is passed from the table's mouseover function call. I think the solution *may* be something to do with event bubbling, but I'm not exactly sure how to implement it. The code I'm dealing with is below: The code below is PHP. The table mouseover (for reference): Code: echo "<table class='cleanTable' width='100%' style='margin-top: 5px'";
echo " onMouseOver=\"updateHelpText('Message 1.');\" onMouseOut='clearHelpText();'>";
echo "<tr><th> </th><th> </th><th>First Name</th><th>Surname</th><th>Last Login</th></tr>";
The anchor mouseover: Code: echo "<tr class='cleanrow'><td><a href='newMember.php'><img border='0' src='images/icon_add.gif'></a></td><td></td>";
echo "<td colspan='3'><a class='workbenchLink' href='newMember.php' onMouseOver=\"updateHelpText('Message 2');\" onMouseOut='clearHelpText();'>Invite a new colleague...</a></td></tr>";
echo "</table>";
The function (javascript): Code: function updateHelpText(newText) {
document.getElementById("helpBox").innerHTML = "<h4> " + newText + "</h4>";
}
Any help with this would be great, thanks. |
|||||||