Archives for November 2007

You are currently browsing 17 article(s) published in November 2007, please try the search if you can't fint what you're looking for.

jQuery Imgbox Plug-In

Monday, November 26, 2007

I'm working on a new version of this which will eventually show up on - In the mean time, please check out my image zoom plug-in. The code for the imgbox has been removed.

This plug-in will make any link pointing to an image (png, gif, jpg or bmp) open in the "Imgbox". The Imgbox centers on screen and displays whatever image the link was pointing to, together with the link's title, the image'a alt-attribute and a list of all other images in the same scope.

This way you can use imgbox to create "albums" of images by simply applying the imgbox to different sections of your site.
Say for example you have "Random Images" and "Holiday Pictures"-sections on your site, each wrapped in its own div, then you can use the imgbox to group each set of images like this:

$('#holiday-photos, #random-images').imgbox();

Do not target the links themselves as imgbox looks for links inside the element you tell it to.

It requires jQuery and my center plugin for jQuery and you can get the code here. The default styling of the imgbox can be found here but it's very easy to apply your own styling using the default as a guide.

One div[id] per Module

Sunday, November 25, 2007

A way I structure my markup more and more is one div with a semantic id-name around each module on the site. In almost all cases that's all you need to use divs and ids for, but you still see plenty of sites out there that suffer from class-and-id:itus.

With a (unique, obviously) id in a containing div around every module, styling it from CSS or scripting it or any of its children using Javascript becomes a breeze. Especially if you use a JS-library that supports CSS-selectors, like jQuery.

Something you see often is HTML like this:

<h2 id="recent-news-heading">Recent News</h2>

<ul id="recent-news-list">
    <li><a href="#">Bla di bla</a></li>
    <li><a href="#">Bla di bla</a></li>

If you wrap those elements in a div#recent-news, you'll be able to access them from both CSS and JS through simple selectors (#recent-news h2, #recent-news ul). Granted it is a tad slower (2 function-calls rather than 1) to fetch them with JS than if they have ids, but I prefer to keep my HTML clean and completely separated from the other two layers.

<div id="recent-news">

    <h2>Recent News</h2>

        <li><a href="#">Bla di bla</a></li>
        <li><a href="#">Bla di bla</a></li>


Besides, it makes your code look nicely structured in firebug if all you use ids and divs for are wrapping your modules :) Hopefully soon we'll be able to move all "grid-divs" (like #content, #sub-content, #etc) from out HTML to our CSS using the advanced layout module, that will be sooo sweet.

Opera Mini Better CSS-support than Opera?

Friday, November 23, 2007

I was checking my site in the Opera Mini 4 Simulator and noticed that Opera Mini has support for the :last-child pseudo class. Something that Opera (9.24) still does not have.

Opera Mini 4 Supports :last-child Opera 9.24 Does not Support :last-child


  • Comments are off
  • Filed under CSS, Other

jQuery Color Picker Plug-In

Friday, November 23, 2007

A simple colour-picker plug-in for jQuery. Use it like this: $('select[name="colour"]').colourPicker();

Where the XHTML looks like this:

<form method="post" action="">
        <label>Select a Colour<br />
            <select name="colour">
                <option value="ff0000">Red</option>
                <option value="00ff00">Green</option>
                <option value="0000ff">Blue</option>

And the colourPicker plug-in will turn the select in to a normal input[type="text"] and add a colour-picker icon to the right of it. Clicking the icon will bring up a dialog box allowing you to select any of the colours that were present in the select-element.

You can check it out in action here.

It requires jQuery and you can get the code here. The default styling of the colour-picker can be found here but it's very easy to apply your own styling using the default as a guide.

And as a bonus, here's a little PHP-function that will generate a list of "web-safe" colours:

function gwsc() {
$cs = array('00''33''66''99''CC''FF');

$i=0$i<6$i++) {
$j=0$j<6$j++) {
$k=0$k<6$k++) {
$c $cs[$i] .$cs[$j] .$cs[$k];
"<option value="$c">#$c</option>n";

Use it like this:

<select name="colour">
<?php gwsc(); ?>

Enjoy, and do leave some feedback.

jQuery Center Plugin

Tuesday, November 20, 2007

Here's a simple plugin you can use to center elements on the page.
To center an element you go: $('#my-div').center();

As center() uses position: fixed; to center elements there is no IE6 support.

Get the code here
As usual it requires jQuery.


The CSS3 Advanced Layout Module

Monday, November 19, 2007

I've only looked briefly at the new CSS3 advanced layout module, but what I've read seems really cool.
Using floats, absolute/relative positioning and (negative) margins you can create basically any layout without the use of tables. But many times your markup still reflects your layout.

The markup consists of is pretty much limited to 1, 2 or 3 column layouts due to the grouping of all sub-content widgets in the #sub-content div and everything else in the #content div. Using the new layout module I could place every widget in the #wrapper-div and still create fluid, scalable 1, 2, 3, 4, whatever-column layouts. I could move widgets around however I felt like without ever touching my markup.
With the new layout module in CSS3 complete separation of content and design is possible.


Friday, November 16, 2007

This has been a dream of mine for so long. Finally a common platform for mobile-phones!


  • Comments are off
  • Filed under Other

Using a Logical Document Outline

Tuesday, November 13, 2007

Using the 6 different heading-elements is very important for both SEO and accessibility but many websites out there completely ignore to use them or use them in a, to me, illogical way.
Many times people ignore to use them for, what I believe are, obvious headings and will simply use a strong-element (em and b are common as well) instead.
To me any kind of text that describes what a section of your site is about is a heading. If you check the source of you will notice that I use headings in almost every one of my modules. "Recent Comments", "Most Popular Articles" etc are all headings in my opinion.

The Web Developers Toolbar-plugin for Firefox has a feature called "View Document Outline" which will give you an outline of the headings in your document. It complains if the document does not start with a h1 (as it always should) and if a heading following another heading is anything but 1 higher, 1 lower or equal to the heading-level that preceded it.
Therefore I believe the following statements to be true:

  1. There must never be more than 1 h1 per document
  2. The h1 must appear before any other heading
  3. It is illegal to follow an hx element by anything but a hx, hx+1 or hx-1-element. (In other words a h2 -> h4 structure would be invalid)
  4. An hx heading is a sub-heading to any preceding hx-1 heading and a super-heading to any following hx+1 heading

So, if you can only use one h1 per document, and any following h2 will be a sub-heading to the h1 then the question "what is a heading to the entire site?" arises. My answer: the name of your site. The name of your site is the only thing that can be considered a super-heading to all other headings in the document. And every other heading in your document should be a h2 (unless of course it's a sub-heading to one of your h2s).

Here's what's document outline looks like (pretty much):

  • h1
    • h2 Navigation
    • h2 Recent Articles
      • h3 A recent article
      • h3 Another recent article
        • h4 Sub-heading to recent article
    • h2 Search
    • h2 Recent Comments
    • h2 Poll

To me that makes perfect sense. If "Search", "Recent Comments" or "Poll" were anything but h2s they'd be sub-headings to "Recent Articles", which, obviously, isn't correct.

The way I see it is, use h1 for you site's title. Place it before any other heading in your document. Use h2 for other headings (unless, of course, they are actually sub-headings to an h2 in which case they should obviously be h3s (and so on..)).

I do it like this because to me it makes sense. Loads more sense than placing random h3s or h5s in your document based on how valuable you believe they are. At least if you do it like this you have a reason. On many sites that use headings the author simply seems to have picked randomly what he felt was a good heading for that section. This way there are logical rules for which heading to use.

How do you do it? What do you think about this approach? Do tell.

jQuery Equal Height Elements Plugin

Sunday, November 11, 2007

This plug-in will make every matched element equal height by adjusting their min-height properties. Any padding/border will be taken in to account but this plug-in is not compatible with IE6 as it lacks support for min-height.

To make #content and #sub-content equal height you simply go: $('#content, #sub-content').equalHeight();
It's best to run equalHeight() on window.onload rather than $(document).ready() so that all images are loaded before the height is calculated.

It requires jQuery and you can get the code here.


jQuery Full Width Navigation Plug-in

Friday, November 09, 2007

In the (not so distant, hopefully) future, creating full width navigations will be a piece of cake using display: table, table-row and table-cell, but until certain browsers get up to speed with CSS here's a plug-in you can use to make any navigation created with the HTML-elements ul li and a full width.

Full Width Navigation jQuery Plugin

100% Valid XHTML Database Output with Markdown and HTMLEntities()

Wednesday, November 07, 2007

Editors not knowing HTML and messing up your markup can be a big problem for you if you care about validation.

There are numerous WYSIWYG editors out there, but most of them produce absolute crap code, and if you want valid and semantic XHTML they simply will not work.

Markdown is an absolutely brilliant text-to-HTML converter that everybody can learn in minutes.
In fact, you don't have to do anything special at all to produce semantically correct, valid XHTML 1.0 Strict (or HTML if you prefer).

The syntax for adding basic HTML-elements such as headings, lists and images takes about 2 minutes to learn, and is very similar to the way you add meaning to your emails and IM messages, using underscore for emphasis etc.

The problem with Markdown if you use it for user-input (as well as your own) is that it allows any type of HTML-code to be inserted. Of course this is not optimal for comments and other data anybody can submit.

Together with the PHP-function htmlentities(), however, you can always be sure to get 100% valid output.

Download NiceString and demo-files

We've Moved

Monday, November 05, 2007

We've Moved

Just a simple "We've Moved" image I used on some site ages ago..


Sunday, November 04, 2007


My first (and only) attempt at a face. The weapon is just something I made up but it's meant to look a little like a minigun. Not sure if it's that "Vietnam" though...

  • Comments are off
  • Filed under 3D Work

Using display: table to Create Full Width Navigations

Saturday, November 03, 2007

Sometimes you need a navigation to span the entire width of its parent:

Full width navigation

Because all types of navigations are nothing but lists of links they should always be marked up with the unordered list element (ul) with each navigation-item in its own li-element.

A very common way to display the list of links horizontally is to float each li-element to the left which will make them all appear on one row, but the total width of a row of floated elements is determined by the elements' margin, padding, border and contents so you have no real control over the width of your navigation-bar (unless, of course, you set a fixed width to each li).

Using the CSS display-property together with its table, table-row and table-cell values you can make an unordered list behave like a table and easily make the navigation-items take up the full width of your site.

Our House

Saturday, November 03, 2007

Our House

The top floor of my parent's house in Sunderbyn, Sweden. The colour of the books in the shelf really bring down the overall quality of this one. But it is a few years old.

  • Comments are off
  • Filed under 3D Work

Spooky House

Friday, November 02, 2007

Spooky House

Never finished this one either. I wanted to make it look cartoonish but still be 3D.

  • Comments are off
  • Filed under 3D Work

Silver Ball

Thursday, November 01, 2007

Silver Ball

A basic silver ball inspired by some old Hugo Boss cologne. The reflection is from "Our House".

Post It

From June 02 to April 23

  1. Mogrify is what you're looking for if you want to convert multiple images to multiple other images in ImageMagick
  2. Tommorrow, finally, the inFamous demo will be friggin availble on PSN!! Suweeeeeeeeet
  3. Fuck canvas is cool, I've started playing around with old 3D-shit again :)

November 2007

1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30

Recent Comments

  1. Andreas on jQuery Drag to Select Plug-in:
    @Steven Black - Woops :) I'll have ...
  2. Andreas on jQuery Drag to Select Plug-in:
    @Helder Silva - I've actually used ...
  3. Paul on jQuery Drag to Select Plug-in:
    Found a bug: (1) Do a drag selectio...
  4. Steven Black on jQuery Drag to Select Plug-in:
    Unless I'm missing something, the d...

Style Switcher

The style switcher allows you to change the look and feel of
Only CSS and JavaScript are changed. The XHTML stays the same.

For more information about the styles, check the styles page.


Random Quote

- Turbo

Random Images

Answer This!

Do you find the "scroll-pagination" annoying? (If you don't know what it is, scroll to the bottom of the first-page)

Blog Roll