Dynamic Drive Blog Here
DD Tab Menu- incorporating 5 CSS horizontal menus
Dynamic Drive Blog Here
CSS Equal Columns Height script (v1.01)
A common pitfall of a CSS based columns layout is that the columns do not share a common height. Unlike a table based layout where the height of the table itself dictates the height of all of its columns, CSS columns are independent of one another in that respect. Now, this can be problematic (from a design standpoint) when you wish to style one of your CSS columns in a way that should extend all the way down to the end of the layout, such as giving a side column an explicit background color, a surrounding border etc.
This is a generic "CSS Equal Columns Height" script that will dynamically set the participating columns' heights to that of the tallest column's height, creating a uniform columns height layout. Use this script on any of our CSS Layouts for example. It's a matter of plug and play! To use this script, just insert this line of code into the HEAD section of your CSS layout page:
<script src="equalcolumns.js" type="text/javascript"></script>
As you can see, it references the external .js file "equalcolumns.js", which you should download (right click and select "Save As") and then upload to your own site.
This script is configured by default to automatically work with all of the layouts in our CSS Layouts section, whether 2 columns or 3 columns, fluid or fixed. Just add the script to the HEAD of any of these pages, and that's it!
If you wish to use this script to equalize the columns of your own custom CSS layout, open up "equalcolumns.js", and refer to the line:
ddequalcolumns.columnswatch=["leftcolumn", "rightcolumn", "contentwrapper"]
Change "leftcolumn", "rightcolumn" etc to the IDs of the CSS columns you wish to equalize. The script will do a check first to see if each corresponding column actually exists.
Dynamic Drive Blog Here
CSS code contest #1
Here are the rules for the contest:
- Submit an original CSS example, whether it's a CSS menu, image effect, or skeleton CSS layout etc. Originality is defined as code that may be inspired by techniques found on the web but ultimately put together by yourself. Any images used must be 100% original.
- Your code must be 100% CSS based. No JavaScript allowed.
- Submissions are judged on the basis of practicality, coding style, and originality. For this first contest, I (ddadmin) will be the sole judge.
- The top 3 submissions will each receive an award. By submitting your code you understand and grant Dynamic Drive the right to include it in our library regardless.
- All entries submitted between now (July 21st) and August 21st are eligible.
The prizes for this event are as follows: 1st place: $50 Amazon gift certificate. 2nd place: $30 Amazon gift certificate. 3rd place: $20 Amazon gift certificate.
So what are you waiting for? To submit your CSS code for entry, you may either post it to our Code submission area, or via email (zip attachment or URL to code) to
Good luck!
Dynamic Drive Blog Here
Submit a DHTML or CSS code!
Dynamic Drive Blog Here
Ajax rating feature added to CSS Library
Just a note that you can now rate the CSS examples within the CSS Library. This is done via an Ajax rating interface that appears on each CSS example page. Votes are on a scale of 1 to 5, with 5 being the best. Note that you can only vote once, and due to caching, the results are not updated live, but every 30 minutes.
Please vote responsibly, and enjoy! If you find any bugs or have any suggestions regarding this feature, please post here.
Dynamic Drive Blog Here
Updating a JavaScript to be XHTML compliant
As a webmaster you've undoubtedly noticed the increasing shift in coding practices from HTML to XHTML on the web. If you're a professional web designer, you've probably even heard it first hand from your clients who demand their web pages be XHTML compliant. I get quite a lot of emails on a monthly basis asking for help in making a webpage that contains a DHTML script to be XHTML compliant. A common misconception is that this is a difficult process, which can be no further from the truth.
There are two ways to go about making a DHTML or JavaScript XHTML compliant, both should take no more than a few moments of your time.
Method 1: For inline JavaScript, wrap the code itself in the CDATA tag coupled with some clever use of JavaScript comments to let the validator know the content within the script should not be parsed for XHTML validity:
<script type="text/javascript"> /*<![CDATA[*/ //The JavaScript code itself //The JavaScript code itself // etc... /*]]>*/ </script>
As you can see, just wrap any inline JavaScript with the parts in red, and you're done. You may also choose to use an alternate version of the CDATA/ JavaScript comment code:
<script type="text/javascript"> //<![CDATA[ //The JavaScript code itself //The JavaScript code itself // etc... //]]> </script>
Either code wrappers work.
Method 2: The other method for making your JavaScript XHTML compliant is to remove the entire script from your page, and place its contents inside an external JavaScript file, then reference this file on your page:
<script type="text/javascript" src="myscript.js">
//Comment here
//Comment here
</script>
Where "myscript.js" contains the script itself minus the surrounding SCRIPT tags. Comments within the script tags are still allowed.
And there you have it. Now a JavaScript no longer has to trip up the XHTML validity of your pages!
