How To Access HTML5 data- Attributes With JavaScript/JQuery

In HTML5 data- Attributes were introduced. They are a big improvement, because they allow you to store information within a HTML tag. They look like this:

<div id="abc" data-listsize="20"></div>

You see, the div tag is extended by a data-listsize attribute, which has the value 20. But how can you access this attributes with JavaScript? In this article I’ll show you both ways – with plain JavaScript and with jQuery.

Read more

3 Great HTML5 Attributes That Simplify Coding

HTML5 offers a lot of new features, which were, in my opinion, long overdue. In this article i will show you three great new HTML5 attributes which will make coding your HTML5 Website easier.

placeholder-Attribute

Do you know this placeholder texts within form fields like e.g. “Enter your email adress here”? Well with HTML5 you can add placeholders quite easily to your form fields. Just add the placeholder attribute to your form tag. No Javascript or other hacks needed anymore.

Read more

Display A HTML-List Horizontally

Normally a HTML-list is displayed vertically, which means that each entry is below the previous entry. But for some reasons you might want to display the list vertically, e.g. for a menubar.
Here is a simple way to do that.

For this example I’ll use the following list:

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

The result looks like this:

  • Item 1
  • Item 2
  • Item 3

Now, we add some CSS:

Read more

How To Load A Default Image In HTML, If Image Is Not Found

When creating HTML pages, it can always happen, that you include images into a page that can not be displayed. There are several reasons for this, for example when there is a typo in the source code or the image file has been moved or deleted. In this case, using the JavaScript event handler onerror … Read more

How To Alter Background Colours Of HTML Table Rows With jQuery

If you have long lists of data displayed as tables, it may be a bit confusing to read a line across its columns. But there is an easy way to make your tables more readable. Just alter the background-colour of your list line-by-line. In this post I’ll show you how to do this by using … Read more