1 Attachment(s)
[DHTML & CSS] DOM control replacements
1) CODE TITLE: DOM control replacements
2) AUTHOR NAME/NOTES: adamstrags
3) DESCRIPTION:
Tired of those browser defined ugly DOM controls?
These controls are completely stylable and contain a lot more functionality than the usual DOM controls.
edit - added features over and above standard dom controls...
a) text areas have a maxlength utility built in
b) text areas stretch as content is entered an reshrink to defined size afterwards
c) 'list', 'drop' and 'multi' controls (the equivalents of select inputs) can take images or text.
d) hover styles highlight controls
e) COMPLETELY STYLABLE!
f) sizes and layouts can be precisely set allowing for changes without affecting other elements on the page (all controls float in absolute divs)
g) no IE issues with rendering controls over upper layers of document (that's one of the many annoying IE bugs when using DOM controls, they're always rendered last)
h) controls can be created, rendered and deleted with ease and all attributes except the id/name, control type and controlname (all set by you) can be changed all with one line of code using built in functions.
i) and much more that I've forgotton.
4) URL TO CODE:
For a working example (far more complicated than anyone might need) check:
http://adamstrags.ifastnet.com/zzdoms/zzdoms.html
For a brief explanation of how to create, manipulate and delete controls along with a full list of control attributes check:
http://adamstrags.ifastnet.com/zzdoms/attributes.html
The current images set can be found here:
http://adamstrags.ifastnet.com/zzdoms/zzdomsimages/
These images and the css can be changed to give any style you want.
edit - I have added a zip attachment to this post containing...
i) zzdomsdemo.html (a very simple demo with only 1 button - see the full demo above and attributes file to see the full range of possibilities)
ii) a seperated zzdoms.css style sheet
iii) the zzdoms.js file
iv) a folder containing all the images used which can be edited for your own style.
Installation:
1) upload zzdoms.js file to your server
2) upload the images folder with your images to the server (edited however you want, but keep the same image names).
3) either use the seperate zzdoms.css and link to it from your html (as shown in the zipped up demo above or leave it in the HTML head section as with the full demo at http://adamstrags.ifastnet.com/zzdoms/zzdoms.html.
4) MAKE SURE TO include these two lines of code in the HTML documents in which you want to use the controls...
Code:
<script type="text/JavaScript">var zzif="zzdomsimages/"</script>
<script type="text/JavaScript" src="zzdoms.js"></script>
The first line should link to your images folder (include the / at the end). You can use a relative path like above or a complete URL.
The second line should link to the zzdoms.js file (again, relative or full URL).
5) ALSO include the preload script call directly under the <body> tag...
Code:
<script type="text/JavaScript">zzpreload()</script>
6) Remember to create the controls in the header and render them at least once in the body. They can be re rendered after editing attributes as many times as you want from scripts called anywhere.
Make sure you read all the attributes file, notes and look at the source code of the example HTML page for the css and necessary links to javascript files, scripts and image locations.
Enjoy!
Tested in mozilla firefox 1.5.0.9 and IE 6 - web standards compliant.
edit - would be interested to see what people get from this. If you create a new css and image set please let me know ;)
