...

View Full Version : Event Listener



martynball
07-21-2010, 12:16 AM
Dammit, for some reason this script has stopped working :/

When I click the links with the ID's of "login_dialog" and "register_dialog" a div should be shown... I'm using an event listener to do this.



function listener_items() {
//Text field background
addEvent(document.getElementById('input_username'), "click", add_username_password);
addEvent(document.getElementById('input_username'), "blur", remove_username_password);
addEvent(document.getElementById('input_password'), "click", add_username_password);
addEvent(document.getElementById('input_password'), "blur", remove_username_password);

//Switch between forms
addEvent(document.getElementById('dialog_login'), "click", login_dialog_login);
addEvent(document.getElementById('dialog_register'), "click", login_dialog_register);
addEvent(document.getElementById('dialog_recovery'), "click", login_dialog_recovery);

//Display Dialog
addEvent(document.getElementById('login_dialog'), "click", navbar_login);
addEvent(document.getElementById('register_dialog'), "click", navbar_register);

//Close Dialog
addEvent(document.getElementById('close_dialog'), "click", login_dialog_close);
}

//Login dialog, login form input fields background text
var add_username_password = function() { add_input_text(this); };
var remove_username_password = function() { remove_input_text(this); };

//Login dialog buttons
var login_dialog_login = function() { display_form('login'); };
var login_dialog_register = function() { display_form('register'); };
var login_dialog_recovery = function() { display_form('recovery'); };

//Close dialog
var login_dialog_close = function() { display_dialog('login', 'hidden'); };

//Navigation bar buttons
var navbar_login = function() { display_dialog('login', 'visible'); };
var navbar_register = function() { display_dialog('register', 'visible'); };

//This function attaches events to elements.
var addEvent = function( elm, evt, fun ) {
if ( elm.addEventListener ) {
elm.addEventListener( evt, fun, false );
} else if ( elm.attachEvent ) {
elm.attachEvent( 'on' + evt, fun );
} else {
elm [ 'on' + evt ] = fun;
}
};

addEvent ( window, "load", listener_items );

//Display/Hide login dialog
function display_dialog(dialog, fun) {
//Define the active menu item style
var active_style = "border-right-width:3px; width:113px; border-right-color:#33CCFF; color:#FFFFFF;";

//Creat array with all forms
var formsHide = Array("login","register","recovery"); var i = 0;

document.getElementById('wrapper').setAttribute('style', 'visibility:' + fun);
for ( i = 0; i < formsHide.length; i++ ) {
if ( formsHide[i] == dialog && fun == 'visible' );
document.getElementById("dialog_" + dialog).setAttribute('style', active_style);
document.getElementById(formsHide[i] + "_form").setAttribute('style', 'visibility:visible');
formsHide.splice(i, 1);
}
document.getElementById(formsHide[i] + "_form").setAttribute('style', 'visibility:hidden');
}
}

//Put text in fields if there is not data, also switch text field to password field
//when focused on. Switch back to text field if no text is entered.
function add_input_text(obj) {
var id = obj.id.split("input_");
document.getElementById(id[1]).innerHTML = '';
}
function remove_input_text(obj) {
if (obj.value.length == 0) {
var id = obj.id.split("input_");
var id2 = id[1].substr(0, 1).toUpperCase() + id[1].substr(1);
document.getElementById(id[1]).innerHTML = id2;
}
}
function display_form(form) {
//Define the active menu item style
var active_style = "border-right-width:3px; width:113px; border-right-color:#33CCFF; color:#FFFFFF;";

var forms = Array("login", "register", "recovery");
for ( c = 0; c < forms.length; c++ ) {
if ( forms[c] == form ) {
document.getElementById( forms[c] + "_form" ).style.visibility = "visible";
document.getElementById("dialog_" + forms[c]).setAttribute('style', active_style);
document.getElementById("dialog_" + forms[c]).setAttribute('class', 'overlay_table' + ' ' + forms[c] + ' active');
forms.splice(c, 1);
}
}
for ( c = 0; c < forms.length; c++ ) {
document.getElementById("dialog_" + forms[c]).setAttribute('style', '')
document.getElementById( forms[c] + "_form" ).style.visibility = "hidden";
document.getElementById("dialog_" + forms[c]).setAttribute('class', 'overlay_table' + ' ' + forms[c]);
}
}


HTML:


<span><a href="#" id="login_dialog" style="color:#33CCFF;">Login</a></span>
<span><a href="#" id="register_dialog">Register</a></span>

martynball
07-21-2010, 12:32 AM
Oh and I know that all of that code needs to be optimized and better names given to things Lol. Bit of a mess at the moment.

Beagle
07-21-2010, 03:49 AM
Use FireFox and open the error console. What errors are you getting?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum