JavaScript and client side scripting.
Moderator: General Moderators
timvw
DevNet Master
Posts: 4897 Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium
Post
by timvw » Mon Apr 03, 2006 3:59 pm
Hi, i'm playing with a bit of JavaScript...
Code: Select all
function addEvent(obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent) {
return obj.attachEvent('on' + evType, fn);
} else {
return false;
}
}
function change(element){
var e = document.getElementById(element);
if (e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
function hide(){
document.getElementById('pageoptions').style.display = 'none';
}
addEvent(window, 'load', hide);
addEvent(document.getElementById('pageoptionsbutton'), 'change', change('pageoptions'));
The problem is that the second addEvent doesn't seem to work.. So i wonder how i can pass a reference to the change function (with it's parameter).
Last edited by
timvw on Tue Apr 04, 2006 3:08 am, edited 1 time in total.
timvw
DevNet Master
Posts: 4897 Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium
Post
by timvw » Mon Apr 03, 2006 4:07 pm
Apparently i'm having a problem with the fact that the element is not found...
Code: Select all
addEvent(window, 'load', hide);
var e = document.getElementById('pageoptionsbutton');
if (e) {
addEvent(e, 'Click', change('pageoptions'));
} else {
alert('not found');
}
timvw
DevNet Master
Posts: 4897 Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium
Post
by timvw » Mon Apr 03, 2006 6:27 pm
I discovered
Yahoo! UI Library: Event and solved my problem as following
(for the time being,
demo up and running. Simply click the options button)
Code: Select all
function toggleDisplay(obj, elementID){
// lookup the element with the given ID
var e = document.getElementById(elementID);
// switch from none to ‘’ and vice-versa
if (e.style.display == ‘none’) {
e.style.display = ‘’;
} else {
e.style.display = ‘none’;
}
}
function load(){
// hide the pageoptions div
document.getElementById(‘pageoptions’).style.display = ‘none’;
// call toggleDisplay(event, ‘pageoptions’) when pageoptionsbutton is clicked
YAHOO.util.Event.addListener(document.getElementById(‘button’), ‘click’, toggleDisplay, ‘pageoptions’);
}
// run the load function when the onload event occurs
YAHOO.util.Event.addListener(window, ‘load’, load);
feyd | fixed link
Weirdan
Moderator
Posts: 5978 Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine
Post
by Weirdan » Tue Apr 04, 2006 2:43 am
In straight JS (without external libraries) you could do that using closure:
Code: Select all
function addEvent(obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent) {
return obj.attachEvent('on' + evType, fn);
} else {
return false;
}
}
function change(element){
var e = document.getElementById(element);
if (e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
addEvent(window, 'load', function(e) {
document.getElementById('pageoptions').style.display = 'none';
});
addEvent(document.getElementById('pageoptionsbutton'), 'change', function(e) { change('pageoptions'); });
timvw
DevNet Master
Posts: 4897 Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium
Post
by timvw » Tue Apr 04, 2006 3:08 am
Thx
I knew there had to be a way to do it..