Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Event Listener

  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post

    Event Listener

    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.

    Code:
    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:
    Code:
    <span><a href="#" id="login_dialog" style="color:#33CCFF;">Login</a></span>
    <span><a href="#" id="register_dialog">Register</a></span>
    Last edited by martynball; 07-21-2010 at 12:31 AM.

  • #2
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post
    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.

  • #3
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Use FireFox and open the error console. What errors are you getting?


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •