Javascript

I had so much fun playing around with canvas when I built the Pixastic Editor that I decided to port my really old 3D-engine, Kukk3D, to JS.

Click the image to view a demo

At the moment it's really basic even though it has support for faces (something that the old one never had) as well as lines and vectors.

You can add any type of object you like to the scene, move it around and re-render it. To animate you'd wanna do this X times per second, usually through a setTimeout.

A basic example:

<canvas id="kukk3d"></canvas>

<script type="text/javascript">// Initiate the engine, pass in the canvas-ID and set width and heightKukk3D.init('kukk3d', 640, 480);

// Create an object// You can create any object you like or use one of the presets in objectSkeletonsvar cube = Kukk3D.addObject(Kukk3D.objectSkeletons.cube());

// Now that the scene contains something, let's render it// You can pass in a color-object as the only argument to render// in order to fill the scene with a background-colorKukk3D.render({r: 0, g: 0, b: 0, a: 1});

This example requires PHP and if you're running any version below 5.2 you'll need Michal Migurski's JSON-class as well.

The PHP (and HTML erm..)

The Google search API is basically just a URL you pass a search-query to and it returns a JSON with results.
I won't go in to too specific details about the API, if you wish to know more please refer to the documentation.

Create a search-results.php file and put the following code in it:

<?phprequire_once 'JSON.php';

# Your site URL$site = 'exscale.se';

# Make sure a search-query was enteredif(isset($_GET['q'])) {# Are we on the first page?$start = isset($_GET['start']) ? $_GET['start'] : 0;

As the search-results.php-file doesn't contain any DOCTYPE, html, head or body-elements it is obviously not valid HTML. How you implement the search-results on your own site differs depending on what type of site-structure you've got set up. Regardless you should probably be able to figure it out.

If you do include some sort of head/foot-templates in the search-results make sure not to include them if it's an ajax-call (isset($SERVER['HTTPXREQUESTEDWITH'])).

I'm going to assume the search-results.php will be included from a search.php-file in the root of your site. So visiting /search.php would display the search-results (provided a query is set) along with whatever else your site consists of, but visiting just /search-results.php will only output the results.

The HTML form

Now all you need to do is set up a form that submits a get-request to search.php:

The ajaxURL-parameter should point to your back-end search-results. Whatever you see when you visit that address in your browser will be put in the search-results div.
If you don't use $_GET['q'] for the search-query you need to change the "?q="-part to, for example, "?searchTerm=".

The bogus-search-results.php-file used in the example looks like this, but yours can look however you want.

It's pretty much the same only I skipped the shadows for incapable browsers (completely relying on box-shadow) but in contrast it's only about 90 lines of code (compared to a whoppin 761+318 that is FancyZoom), and it hopefully won't mess with your other JS as it's all wrapped in the jQuery-object and doesn't use any global vars. Imgzoom also validates in JSLint, so compression isn't be a problem (around 1k compressed).

Instead of the typical $('selector').plugIn()-jquery-plugin this one is run through $.imgzoom(); and, like imgbox and FancyZoom, applies to all links that points to images.

You can not, however, avoid zooming images using the rel-attribute, as you can with FancyZoom, and imgzoom does not group images or add any type of navigation the way imgbox does.

Imgzoom uses event bubbling rather than "hard-coded" events on anchors. This way dynamically inserted images (ajax or not) will also open in the imgzoom plug-in.

It works in exactly the same way as the CSS-compressor. Create a new instance, pass the directory(ies) you want to look for .js-files in and then call the pack-method.

$jsc = new JSCompressor('js/');echo $jsc->pack();

Reducing the number of HTTP requests the browser needs to make is essential for performance. Together with full packing of all the code, file-size is often reduced by up to 70% and the number of HTTP requests always down to 1.

I'm working on a new version of this which will eventually show up on AndreasLagerkvist.com - 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.

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.

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.

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.

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.

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.

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:

The title-attribute of the div it is pointing to

Or, the first heading in the div

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).

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');

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.

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.