The Latest

HTML5: Wrap Block-Level Elements with A’s

Published by David Walsh on Monday, July 26, 201031 Comments

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

Published by David Walsh on Wednesday, July 21, 201011 Comments

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

Published by David Walsh on Monday, July 19, 201018 Comments

Multiple File Upload

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

Published by David Walsh on Friday, July 16, 20106 Comments

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

Published by David Walsh on Wednesday, July 14, 201024 Comments

CSS Transformation Links

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!



© David Walsh 2007-2010. Contact David Walsh. Powered by the remarkable MooTools JavaScript framework.