PDA

View Full Version : [DHTML & CSS] DOM control replacements



adamstrags
02-09-2007, 03:27 AM
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...

<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...

<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 ;)

shachi
02-09-2007, 03:51 AM
Got an error on the listbox(or multi box switch):



zzid.text[zzk].charAt is not a function
[Break on this error] if(zzid.text[zzk].charAt(0) != "<"){


The borders flicker when moving the mouse(that is when the mouse is over any other element than the main div.

Otherwise, good work!

adamstrags
02-09-2007, 04:08 AM
thanks shachi - just clearing that up now :) should be sorted in a little while

ps - concerning the flicker - that depends on if you want to use a main frame behind the form (as I have done) you can simply not create the 'frame' control to avoid this issue. I put one in for demo purposes, but I think it would look better just to float the controls in a normal page.

edit - multi switch issue is solved:D

pps - ni shi zhong guo ren ma?

shachi
02-09-2007, 08:52 AM
That's much better. There still are some things missing though.

a) I suggest you to zip up the demo, images and script for ease of download,
b) add a multi-selection functionality to list-label.

I didn't get "ni shi zhong guo ren ma?" ;)

adamstrags
02-09-2007, 09:35 AM
a) I suggest you to zip up the demo, images and script for ease of download
I've done this now - it's been added to the first post - it only contains a simple example to save on space at DD forums, but it contains a separated style sheet, the js file and the images folder.


b) add a multi-selection functionality to list-label.
If I understand correctly you mean...
'drop' = drop down select - can choose one value
'?' = drop down select | can select multiple values
'list' = list box select - can choose one value
'multi' = list box select - can choose multiple values
That the '?' control doesn't yet exist.
And you are completely right - I will get around to coding this at some point along with another few changes and hopefully a form builder package in php allowing people to position controls and set attributes with ease and then churn out the appropriate css, js and html necessary.
One current issue is that the .js file takes care of every control type's creation and manipulation. What I want to do is have a php constructed .js, .css, .html and image folder tailored to the specific sites needs. Depending on the complexity of people's forms this will drastically cut the file sizes. (Although right now, for functionality I think the file sizes are actually pretty small)


I didn't get "ni shi zhong guo ren ma?" ;)
In that case your answer is 'no'. I was asking if you are Chinese since 'shachi' could mean many things in mandarin pinyin and you're online at the same time as me.
"sha" could mean...
sand, shark, kill, yarn, stop, stupid, a moment, tall building
"chi" could mean...
eat, flog, sneer, late, hold, spoon, pond, relax, speed, shame, tooth, extravagant, deprive, ablaze, wing, shout
So your name could mean any combination of the two depending on intonation. i.e. Sharktooth or Stupid spoon. (I know which one I prefer). ;)


Thanks for the comments - much appreciated.