The Latest
HTML5: Wrap Block-Level Elements with A’s
HTML5 presents a simpler line of thought with HTML than XHTML. And quite honestly, it’s a much needed simplification. One of those simplifications is the ability to wrap block-level elements like DIVs, H-tags, and P’s with basic A elements. You read that correctly: wrap block-level elements with A tags.
HTML5 Code
<body> <a href="/about-page.php"> <div class="article"> <h1>About David Walsh</h1> <p> I'm a 27 year old Web Developer and jQuery & MooTools Consultant working from Madison, Wisconsin. I am Founder and Lead Developer for Wynq Web Labs. I don't design the websites, I just make them work. </p> </div> </a> </body>
There you have it. A simple A element wrapping DIVs, H1′s, and P’s. Note that you may not wrap A elements with larger A elements.
Build HTML Tables From MySQL Tables with PHP
I was recently completing a project which required that I build a series of HTML tables which would represent all of the tables within a MySQL database. I didn’t have anything created but after a few minutes I had exactly what I needed. Hopefully this helps you out!
The CSS
table.db-table { border-right:1px solid #ccc; border-bottom:1px solid #ccc; }
table.db-table th { background:#eee; padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; }
table.db-table td { padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; }
The CSS I’m styling the table with is as basic as it gets — style as you wish!
Multiple File Upload Input
More often than not, I find myself wanting to upload more than one file at a time. Having to use multiple “file” INPUT elements is annoying, slow, and inefficient. And if I hate them, I can’t imagine how annoyed my users would be. Luckily Safari, Chrome, and Firefox have implemented a method by which users can upload multiple files within one INPUT element.
The HTML
<!-- IMPORTANT: FORM's enctype must be "multipart/form-data" --> <form method="post" action="upload-page.php" enctype="multipart/form-data"> <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" /> </form>
Simply adding the multiple attribute allows for multiple files to be uploaded via one INPUT element. If you’re a stickler for validation, you’ll want to assign the multiple attribute a value of multiple.
Using SCRIPT’s defer Attribute
One of the seldom used attributes within the HTML tag library is the defer attribute on SCRIPT elements. As you can probably tell by the name of the attribute, defer instructs the contents of the script tag to not execute until the page has loaded. Take a look!
Deferring Your Scripts
<script> //do stuff (runs first) </script> <script defer="defer"> //do stuff, but defer it (runs last) </script> <script> //do more stuff (runs second) </script>
The deferred SCRIPT element’s code will execute once the rest of the page’s resources have loaded. What does this mean? Be sure that your document doesn’t rely on any of the code within the script during page load. In the example above, the middle block will execute once the page has loaded even though it appears before the last block.
Sexy Link Transformations with CSS
I was recently visiting MooTools Developer Christoph Pojer’s website and noticed a sexy link hover effect: when you hover the link, the the link animates and tilts to the left or the right. To enhance the effect, the background color of the link is changed. I scoped out his JavaScript file to see how he created the effect but there were no link effects in it — the effects were being created with just CSS!