exscale.se

jQuery Image Viewer Plugin

Wednesday, February 28, 2007

Please check out the improved version of this plugin, "imgbox". The code for the ImageViewer has been removed.

Here's a simple "image-viewer" for jQuery.
It's quite similar to lightbox only probably not half as advanced.

Usage is quite simple, simply go $('#image-container').ImageViewer(); and all images that are children to #image-container will now "pop-up" in the image viewer.

All images in the same scope (in this example the #image-container div(?)) will be navigatable from the image-viewer.

There may be plenty of bugs and ways to optimize, but it works ok and i'm fed up wiv working on it for now.

Check our the example page for source code and... examples.

Update

I've created a tiny version of the image-viewer that's not as buggy as the big one. The previous one had problems in everything but FF it seems, but this one's been tested in FF, Opera and IE6 (should prolly work fine in 7 as well).

The new version does not include any image-navigation though, and is triggered on anchor-elements with a class of "pop-up".

Check out the example page for the code...

Update 2

Well, i fixed the original, "big" version. It's been tested in Opera, FF and IE6. For some weird reason it doesn't work properly in Opera when used on my site. On the example-page it works fine though, so it must be some other JS i'm using that's fucking with it.

Anyway, check it out.

• Comments are off
• Filed under Javascript, jQuery, Progressive Enhancement

Content Flipper Javascript Function

Wednesday, February 28, 2007

Note: This code was outdated and quite shit so I've removed the example page. Check out my jQuery Paginate Plugin instead.

Created this at work recently.
It's a function you can use to add a navigation bar to the bottom of a div, containing other divs, and with it you can navigate through the divs with back and forward buttons.

It's very similar to normal tabs, only instead of tabs there's a nav-bar.

• Comments are off
• Filed under Javascript, Progressive Enhancement

Completely Unobtrusive jQuery Tabs

Monday, February 26, 2007

As i've mentioned before i've started using quite a lot of jQuery, and some of its plugins.
Among them the Tabs-plugin by Klaus Hartl.

It's an amazing plugin that is extremely easy to use and works very well. What annoyed me a bit was the fact that it requires you to put an unordered list at the top of all you tab-content, with links pointing to all the tab-content-containers.
To me it seemed that list was completely unnecessary if javascript was disabled (i mean, it's not like people don't know how to use the scroll).
So i though, fuck, I'll generate the list from javascript.

So here you have it, a completely unobtrusive tabs-plugin (that uses the normal tabs()-plugin).

The titles in the tabs are generated from:

1. The title-attribute of the div it is pointing to
2. Or, the first heading in the div
3. Or, the id of the div, str-replaced so it looks a bit nicer (this asumes you use foo-bar syntax for naming IDs and classnames)

The list is automatically inserted before the FIRST tab-content (the first div).

Check out the example and have a look at the source for the erm.... source.

Oh yea, the main reason i created this is cus i've been thinkin about tabbing my sub-content in future designs, and now i can do that without having to change the XHTML. Luvely Jubbely.

Update: If you don't want to add title-attributes to all your divs in your (x)html-code, you can very easily use javascript to do it instead.
Before executing the AutoTabs() function, do something like this:
$('#id-of-div').attr('title', 'Whatever you want the tab to say');

• Comments are off
• Filed under Javascript, jQuery, Progressive Enhancement, Web Standards

CSS Wish List

Thursday, February 22, 2007

Often times when programming CSS i think of stuff i would really like to see in future versions of the language.
I know some (most?) of these have been mentioned around the web before, but these are the ones I would really like to see in the future.

• Continued...
• Comments are off
• Filed under CSS

Satan Golga 2

Tuesday, February 20, 2007

Det här är så jävla kul.
Missa inte "då och då":et och "inlåst på min måne" hahahe.

• Comments are off
• Filed under Funny Stuff

O'Sullivan's Ameezing 147

Saturday, February 17, 2007

I know this is really old, and you've probably already seen it if you're at all interested in snooker. But i really wanted to put it on my site cus i reckon it's fuckin wicked!

• Comments are off
• Filed under Other

Fade an Entire Design Using jQuery

Saturday, February 17, 2007

I've been using jQuery lately at work to create some pretty cool effects and tabs, and I must say I'm starting to like it more and more.

I had an idea to morph a website's design from one to another, so i created this little test (Click anywhere on the page to fade to the other design).
It didn't turn out exactly as cool as I first had hoped, because all I really do is fade out body, change its class and fade it back in.
You could however potentially animate every CSS attribute that differs in the two design, and create a really fuckin neat morph.
I could not be arsed though, cus that would mean putting all the CSS in the js-file.

Also the fade is a bit sketchy. I don't understand why the "Round" design jumps up and down like that, but i guess it's something i have to live with.

I can't use this on my style-switcher though, because changing a style on my site not only changes CSS attributes, but includes other JS-files etc.
And also i can't be arsed to go through every design i've made and put a body.design-n in front of every selector.

Anyhoo, check it out.

Edit: i just realized that instead of changing the class of the body (and having to use body.design-n in the CSS) one could simply change the href attribute of the link element with media "screen".
I can't be bothered to change the example though.

• Comments are off
• Filed under CSS, Javascript, jQuery

A Really Old School Design

Thursday, February 01, 2007

Just finished coding this really old-school design i initially made a couple of years ago.
It looks horibble, but it was a pretty good CSS excersise to get my current HTML to look like that through CSS.
I actually had to use some JS aswell to add a div for the bottom-left image in the content-area (home/archives etc).

I had the 2 year old source code zipped up and saved for reference, but the page wouldn't render properly in FF, which isn't strange when you consider the code; table based design, inline styles, attribute values without quotes etc.
I tried it in IE7 and there it rendered just fine. Too bad IE has better support for crappy code, than for modern standards.

Anyway, it's pure CSS now so check it out on the styles page or click here to apply it right away

Laters

• Comments are off
• Filed under CSS, Design, Old School, Web Work