Three Column Responsive Layout

Back in the day, creating multiple columns in HTML was easy; a <table> tag, a couple of <tr> and <td> tags, and Bob’s your uncle.

These days, there’s CSS to consider. A tableless web design philosophy that is superior to the old table method. An ever-growing number of phones and tablets with varying screen sizes that means one size does not fit all. Continue reading “Three Column Responsive Layout”

Easy jQuery Tooltip

Yesterday I went looking for a simple jQuery tooltip, uh, tool, for a website I was working on.  Finding one that wasn’t overly-complicated proved to be more of a challenge than I anticipated.  For the coding noob (e.g. yours truly), “Keep It Simple, Stupid” is the phrase that pays, and most of the ones I came upon tried to do too much and offered too many customization options.

Eventually I stumbled on the self-proclaimed “Simplest jQuery Tooltip Ever“, and I can’t argue with the sentiment.  All you need is jQuery, the additional JavaScript file provided at the link above, and some basic CSS styling (also provided).

Here’s some example code:

<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js"   type="text/javascript"></script>
</head>
<body>
<a href="#" title="This is the text that will appear
when you roll over the link">Roll over this link</a>
</body>
</html>

Let’s break it down…

<link href="style.css" type="text/css" rel="stylesheet">

… calls the stylesheet that contains a reference to the id selector “#tooltip”.  It has some basic styling info (position, border, background, etc.), but nothing too fancy.

<script src="jquery.js" type="text/javascript"></script>
<script src="main.js"   type="text/javascript"></script>

This first line calls the jQuery library, the second calls main.js, which contains the tooltip code. (Not sure if this qualifies as a jQuery plugin or not…)

<a href="#" title="This is the text that will appear
when you roll over the link">Roll over this link</a>

This is your standard HTML hyperlink, with a couple of differences.  The text contained in the title field is what will be displayed when a visitor hovers over the link.  The href field can contain an actual link; in this case it just points back to the current page.

Doesn’t get much simpler than that!

References: