Make Elements Dynamic Without Defining Each This How-To function is at your command

ruben1405241511 · October 22, 2005

Welcome to my little How-To which shall help you to make your site more dynamic without all the hustle of defining the Javascript for each element.

On my homepage you can find a working (modifed) version, but it's German.

I give you an explained function, that you have to implement in your HTML-document-body as following

<body onload="init()">

My function takes her values from HTML-values inside the document. This allows you to define a proper HTML-document without all the JS-Code in it. I especially liked it, when working with a WYSIWYG editor, where it is much more comfortable to edit the HTML-values.
The values used by my function are the following:
â˘ Document Title â People often forget about the importance of this little Element in the header of your document. Especially when using frames they don't set it up at all.
â˘ Link Title â This is a very good way to describe a link more closely, but only few users read it. To bring it to their attention, I had a little box on top of my page, where the Title and some other information were displayed on mouse over. You can easily change my box to any field in on your page (alternatives are for example the status bar (default in my script) or a moving field above the link (requires some action).
â˘ Link Target â NO damn browser shows, what a link is going to open. This annoyed me, so my script also tells what kind of window it will open.
â˘ Form elements: It enables all form fields on the website to perform onFocus and onBlur actions
So be sure to set these with useful values, because they will draw more interest now.

var ur = document.title;function init() {	document.title = ".: " + ur + " :: GENERAL TITLE :.";	window.defaultStatus = "YOUR STATUS MESSAGE"; // set defaultstatus. permanent for this page	window.status = window.defaultStatus; // use defaultstatus. the status message will be changed later on.	if(document.getElementsByTagName) { // find all links and input fields and textareas. any tags can be added!   as = new Array();   as = document.getElementsByTagName("a");  // first for the links   for (i=0; i<as.length; i++) {  	as[i].onmouseover=mover; // set onmouseover for each link to use funktion mover()  	as[i].onmouseout=mout;  // set onmouseout for each link to use funktion mout()    }   inputs = new Array();   inputs = document.getElementsByTagName("input"); // now for the input fields (text, password, radio, check, etc.)   for (i=0; i<inputs.length; i++) {    if(inputs[i].type=="text" || inputs[i].type=="" || inputs[i].type==null || inputs[i].type=="password") {     inputs[i].onfocus=fokus; // set onfocus for each input to use function fokus()     inputs[i].onblur=draus; // set onblur for each input to use function draus()     }  	}   textareas= new Array(); // now for the textareas   textareas = document.getElementsByTagName("textarea");   for (i=0; i<textareas.length; i++) {    textareas[i].onfocus=fokus; // same as input    textareas[i].onblur=draus; // same as input  	}  }	}function mover() {  // sooo, what shall every link do, when it is touched by a mouse?  // First I find out some stuff about the link, that it is not clearly visible  tern = " (intern, "; // it is assumed that the link is inside your website  windtarg = "this window)"; // and opening in the same window	if(this.href.indexOf("http://")==1) { // but if the link starts with http:// then it is assumed that the link is extern  tern = " (extern, ";  }  if(this.target=="_blank") { // and if the target is _blank it shall open in a new window (if you are using frames, just repeat this part for every frame name  windtarg = "new window)";  	}	window.status = "link: " + this.title + tern + windtarg + " || " + this.href.substr(25,34); // the substr. thing is useful if you want to display a part of the path to your document. i did this, because the domain is always the same length and the last part of the path is the actual document. if you dont understand this: leave it out.	// you can set a lot of dynamic elements in your htmldocument to these values	return true;	}function mout() { // back to default fellas	window.status = window.defaultStatus;	return true;  }var bgc ="#003366";function fokus() { // an input field is focused. you can set up a whole firework of actions. i changed the logo for example. you might also want to change the text color. you need CSS-stylesheet knowledge for this.	bgc = this.style.backgroundColor;	this.style.backgroundColor = "#2c4157"; // change backgroundcolor	if(this.value==this.defaultValue) this.value = ""; // empty field from default value	}function draus() {	this.style.backgroundColor = bgc; // change background color back	if(this.value=="")this.value=this.defaultValue; // if the field was left empty, change back to default Value	}

You should put this code in a seperate JS-file called "all.js" for example and then implement it in every document between <head>and</head> by writing "<script type="text/javascript" src="all.js"></script>"

Then it will work as is and after you made your own modifications, you will love it.

Have Fun, Feel Free to ask questions!
Ruben

PS.: I modified this code to make it more general. I hope I didn't screw anything up (because it was working before), but it does not seem so.

Sign In

Make Elements Dynamic Without Defining Each This How-To function is at your command

Recommended Posts

ruben1405241511 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information