Short Note About HTML Anchor Bookmarks

This is totally rediculous, but it’s a fact. Some version of Microsoft Internet Explorer do not handle empty anchors at all! Unlike Firefox, Safari and the rest, IE simply doesn’t see them, so anchors lead to nowhere (top of the page). This is just a note for you (and me) to keep your anchors filled with something, at least a whitespace character ;)

1
2

<a name="bookmark"></a>Bookmark Text <!-- Bad! -->
<a name="bookmark">Bookmark Text</a> <!-- Good! -->

Keep that in mind ;) Cheers!

Facebook-style Lightbox with jQuery and Facebox

I recently came across an awesome plugin for jQuery which is called Facebox. Facebox produces a clean lightbox that can be a container for popup images, text and basically any HTML layout as well as AJAX powered content.

Facebox: Creating Facebook-like Dialogs

The problem with Facebox is the lightbox placement. The dialog itself is placed in the center of the page horizontally with a preset margin from the top, which looks good, but what I did notice is that the box containing the loading icon is being placed somewhere to the left part of the page. Well at least on Firefox 3.5.7.

I couldn’t help but noticing that FamSpam and StaffTool are using a different set of functions and styles for the lightbox placement and copying them into my code solved the issue.

The two functions are called getPageScroll() and getPageHeight() and are marked as quirksmode.com inside the code. The #facebox style in the CSS lacked a width: 100% which seems to have solved the issue for now. There’s also a certain overlay in the original version which includes an interesting IE6 hack:

1
2

height: expression(document.body.scrollHeight > document.body.offsetHeight ?
	document.body.scrollHeight : document.body.offsetHeight + 'px');

The versions at Stafftool and FamSpam however don’t mention any overlays in there code. Pretty messy, huh? Well, other than that, the plugin is very lightweight and cross-browser, works well in IE and closes the popup when pressing Esc, which unfortunately has to be hand-coded in other versions of the Facebook-style dialog boxes.

Grab the code at GitHub and enjoy: Facebox for jQuery.

jQuery Cycle: Pager and pagerAnchorBuilder

One very awesome and useful plugin for jQuery is jQuery Cycle, which pretty much works out of the box, but browsing through the second part of the Intermediate Demos we’ve seen a click transition called Pager, which is somewhat tricky.

Neat Transitions with the jQuery Cycle Plugin

Pager is nothing but a few links next to your cycling block with page numbers, which switch the cycle upon click. It’s very useful when you have to create, say a list of services a company provides, with sweet lightboxes (don’t confuse with the Lightbox plugin), perhaps with some images, cycling through their descriptions, yet we’d like our visitors to be able to switch through the services manually, without having to wait. This is exactly what the Pager transition does, but hey, who the hell would want page numbers instead of their services names?

This is where pageAnchorBuilder comes in, and it’s not quite obvious what has to be done to make this work. According to the jQuery Cycle documentation it’s:

pageAnchorBuilder – callback function for building anchor links: function(index, DOMelement)

So here’s a demonstration of how this would work. Let’s setup a quick cycle, with a few options. Perhaps you’ll need more than I listed below ;)

1
2
3
4

jQuery('#fade').before('<div id="nav" class="nav"></div>').cycle({
	pager: '#nav',
	pagerAnchorBuilder: paginate
});

So paginate is a callback function which takes two arguments, the index and the DOM element. Using the index will work just fine. Let’s see how this works with text:

1
2
3
4
5
6

function paginate(ind, el) 
{
	if (ind == 0) return '<span>Service One</span>';
	else if (ind == 1) return '<span>Service Two</span>';
	// and so on
}

I think that’s pretty straightforward once you understand how it works. Let’s try some images:

1
2
3
4

function paginate(ind, el) 
{
	return '<img src="http://whatever.com/services/service' + ind + '.jpg" />';
}

So name your images service0.jpg, service1.jpg, etc. And my favourite, CSS classes:

1
2
3
4

function paginate(ind, el) 
{
	return '<div class="service' + ind + '"></div>';
}

Then just add a few .service0, .service1, etc. classes in your stylesheet, voila! Hope that helps, and don’t forget about the other useful options. Cheers!

Inspired: Web Design Showcase October 2009

Browsing the Internet, reading Twitter streams, RSS feeds… I see billions of websites everyday (kidding) and there’s lots of stuff out there that inspires me everyday, so I’ve decided to run a new series called “Inspired” where I’ll post the most interesting stuff I come across (monthly, weekly, yearly, I don’t know yet, maybe I’ll close this down the very next day ;)

This is my first post in this series and I called it Web Design Showcase for October 2009. Since we’re talking about web design and design in general, I’ll keep this running in a gallery format, perhaps with a few comments for each entry (but not necessarily). I would also appreciate if you (the readers) would post a few links of something nice that you came across during the last few weeks, months, and perhaps you’ll make an entry for my next episode. But please, no offence, this is not a CSS gallery or anything, it’s stuff that I pick depending on personal tastes.

 

If you would like to visit any of the above websites just Google their names – they should come up eventually. I wouldn’t like to stuff the post with useless links and adverts ;) And yeah, the gallery looks terrific on Lightbox! Poor people that go blind searching for the “next” and “previous” buttons on Thickbox ;)

And Yet Another WordPress Theme for Inspiration ;)

My brand new creation: The Foller.me Theme for WordPress and I ain’t releasing it public ;)