 Make Elements Dynamic Without Defining Each, This How-To function is at your command |
Free Web Hosting > Computers & Tech > How-To's and Tutorials > Programming > Client Side Scripting > Javascript|
|
|
|
  |
  Oct 22 2005, 10:28 AM
Post
#1
|
|
|
Wheeeeeeee!  Group: Members Posts: 245 Joined: 19-October 05 From: DG, Belgium Member No.: 9,200  |
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 CODE <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. CODE 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. |
 |
 
|
|
Similar Topics
|
Lo-Fi Version | Time is now: 30th August 2008 - 12:31 PM |