jQuery

jQuery plug-ins and tutorials
There are 22 articles published in this category. Please try the search if you can't fint what you're looking for.

jQuery Pixastic Editor

Friday, April 17, 2009

I started playing around with the Pixastic JS Library a few days ago and thought it was really cool.

For those that don't know it's a JS library that allows you to apply different effects to images using the canvas)-element.

So, naturally I had to create a jQuery plug-in that wraps all this cool functionality in a neat little package :)

jQuery Pixastic Editor

The jQuery Pixastic Editor can be applied to any image in your document and inserts a completely stylable toolbar next to the image in question.

Have a look at an example

As usual I've set up a simple example-page, please have a look at the source for how to implement it. It requires a few other jQ-plugs and the options-form works best if you have the UI slider installed as well.

Without some sort of server-side script it's not possible to save the altered image as a new file, but the plug-in allows the user to click the modified canvas to open its dataURL in a new tab which allows him to then use the browser's save-functionality to save the image to their local machine.

It's dynamic like hell :)

The toolbar is automatically generated from all the actions currently in Pixastic.Actions. This means that your can download your own build of Pixastic and the plug-in will automatically adapt to whatever effects you've chosen.

Most of the effects require the you to set certain options, to avoid hard-coding each of the options for every effect I wrote a little PHP-script that parses the Pixastic website for information about each effect. When a new effect is added I run the script again and get the latest updates.

This means, however, that the options-form isn't exactly tailor made. Some of the options could very well be converted to drop-downs for usability, but it'll have to wait till next release.

I do look for certain things in the description of the option though like for example if anything like "X to|and Y" occurrs in the text I interpret that as min and max values for the option.

Any option with a min and max-value will get a jQuery UI Slider inserted beneath it (but only if the user of the plug-in has UI Slider installed).

Also, if the string "defaults to Z" occurrs I set Z to the default-value for that option.

I could (and will) probably solve the drop-down issue by looking for something like "one of "foo", "bar" and "baz"" as that is how the author of Pixastic most commonly describes options with several possible values.

Finally

There are a few more features I haven't mentioned like different styles etc also it's highly in beta and a lot could be added but do have a look and let me know what you think.

Oh and I've only tested it in FF3.

Laters!

  • Comments are off
  • Filed under jQuery

jQuery Drag to Select Plug-in

Monday, April 06, 2009

Use this plug-in to allow your visitors to select certain elements by dragging and dropping a "select box".

jQuery Drag to Select

It works very similar to how most OS:es allow you to select files and folders.

I've set up a simple demo, please check the source-code for the different options. It's still in semi-beta.

All my plug-ins will be re-released on andreaslagerkvist.com once it's finished (right now I'm pretty much just waiting for PHP5.3 to be released).

More than one draggable scroll container in jQuery UI

Thursday, March 12, 2009

jQuery UI's draggable plug-in has a scroll-setting which, if set to true, automatically scrolls the container of a draggable object.

The plug-in looks for the first parent-element with overflow set to either auto or scroll of the draggable element if the scroll-option is set to true.

But if you have one area with elements that you can drag onto another area you might want both the draggable and the droppable area to scroll when dragging occurrs.

Thus, I've made a few small changes to the scroll-function of the draggable plug-in which allows for the scroll-option to be a comma-separated list of CSS-selectors which will act as scroll container(s).

What I basically had to do was just wrap the whole functionality in a loop and store more than one overflow-object in an array.

The stuff you want to change to allow this starts with:

$.ui.plugin.add("draggable", "scroll", {

And you want to change it into (I've commented by changes)

$.ui.plugin.add("draggable", "scroll", {
    start: function(e, ui) {
        var o = ui.options;
        var i = $(this).data("draggable");
        var j = 0; // Added this for looping

        o.scrollSensitivity    = o.scrollSensitivity || 20;
        o.scrollSpeed        = o.scrollSpeed || 20;
        i.overflows            = []; // Added this to hold all the overflow elements

        // If the scroll-option is a string
        if (typeof(o.scroll) == 'string') {
            // Break out all the selectors and store the elements in the overflows-array
            var selectors = o.scroll.split(',');

            for (j = 0; selectors[j]; j++) {
                i.overflows.push({
                    overflowY: $(selectors[j]), 
                    overflowX: $(selectors[j])
                });
            }
        } else {
            // This is the same as before except I put it all in the first element of the overflows-array
            i.overflows[0] = {
                overflowY: function(el) {
                    do { if(/auto|scroll/.test(el.css('overflow')) || (/auto|scroll/).test(el.css('overflow-y'))) return el; el = el.parent(); } while (el[0].parentNode);
                    return $(document);
                }(this), 
                overflowX: function(el) {
                    do { if(/auto|scroll/.test(el.css('overflow')) || (/auto|scroll/).test(el.css('overflow-x'))) return el; el = el.parent(); } while (el[0].parentNode);
                    return $(document);
                }(this)
            };
        }

        // Added the loop so that this happens to all overflow-elements
        for (j = 0; i.overflows[j]; j++) {        
            if(i.overflows[j].overflowY[0] != document && i.overflows[j].overflowY[0].tagName != 'HTML') i.overflows[j].overflowYOffset = i.overflows[j].overflowY.offset();
            if(i.overflows[j].overflowX[0] != document && i.overflows[j].overflowX[0].tagName != 'HTML') i.overflows[j].overflowXOffset = i.overflows[j].overflowX.offset();
        }
        
    },
    drag: function(e, ui) {
        var o = ui.options;
        var i = $(this).data("draggable");
        var j = 0; // Added this for looping

        // Added this for-loop as well as put everything in the overflows-array
        for (j = 0; i.overflows[j]; j++) {        
            if(i.overflows[j].overflowY[0] != document && i.overflows[j].overflowY[0].tagName != 'HTML') {
                if((i.overflows[j].overflowYOffset.top + i.overflows[j].overflowY[0].offsetHeight) - e.pageY < o.scrollSensitivity)
                    i.overflows[j].overflowY[0].scrollTop = i.overflows[j].overflowY[0].scrollTop + o.scrollSpeed;
                if(e.pageY - i.overflows[j].overflowYOffset.top < o.scrollSensitivity)
                    i.overflows[j].overflowY[0].scrollTop = i.overflows[j].overflowY[0].scrollTop - o.scrollSpeed;
            } else {
                if(e.pageY - $(document).scrollTop() < o.scrollSensitivity)
                    $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
                if($(window).height() - (e.pageY - $(document).scrollTop()) < o.scrollSensitivity)
                    $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
            }

            if(i.overflows[j].overflowX[0] != document && i.overflows[j].overflowX[0].tagName != 'HTML') {
                if((i.overflows[j].overflowXOffset.left + i.overflows[j].overflowX[0].offsetWidth) - e.pageX < o.scrollSensitivity)
                    i.overflows[j].overflowX[0].scrollLeft = i.overflows[j].overflowX[0].scrollLeft + o.scrollSpeed;
                if(e.pageX - i.overflows[j].overflowXOffset.left < o.scrollSensitivity)
                    i.overflows[j].overflowX[0].scrollLeft = i.overflows[j].overflowX[0].scrollLeft - o.scrollSpeed;
            } else {
                if(e.pageX - $(document).scrollLeft() < o.scrollSensitivity)
                    $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
                if($(window).width() - (e.pageX - $(document).scrollLeft()) < o.scrollSensitivity)
                    $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
            }
        }
    }
});

So to use more than one scroll container simply specify the scroll options like so:

$('li').draggable({scroll: '#drop-area, #drag-area', refreshPositions: true});

I'm also setting refreshPositions to true so that the droppable's positions are recalculated when user drags (you can try it without to see the problem otherwise).

jQuery.com has this to say about refreshPositions: "Caution: This solves issues on highly dynamic pages, but dramatically decreases performance." so use with care.

Note that this is for version 1.5.3, not sure if this is fixed or if it looks even remotely similar in latest version.

An alternative to DIV overlays

Tuesday, February 10, 2009

When displaying a modal dialog it's pretty common to dim the rest of the page to focus the user's attention on the dialog in question.

A common way to solve the dimming is to overlay the entire page with a 100% wide, 100% high div-element with a little opacity and then display the dialog on top of the overlay.

Recently at work I tried a different aproach for solving the dim and it worked out quite nicely.

Instead of overlaying a semi-transparent div on top of the page I instead made the actual page semi-transparent and simply changed body's background to something a little darker.

The semi-transparent #wrapper and darker body are both styled under body.dimmed so whenever I need to dim out the page I simply give body a class of "dimmed".

The benefit here is that you don't need to play around with JS to create a div that always covers the entire viewport in every browser but instead you simply toggle a class-name on body.

Benefit number 2 is that since everything on your page (including the dialog) are contained within the body-element they too can be styled differently when body is dimmed and when it's not.

So the simple CSS turns out something like this:

/* Normal styling */
body {
    background: #369;
}

#wrapper {
    background: #fff;
    width: 960px;
    margin: 0 auto;
}

div.dialog {
    background: #fff;

    display: none;

    position: absolute;
    left: 50%;
    top: 15%;

    width: 400px;
    margin: 0 0 0 -200px;
}

/* Dimmed styling */
body.dimmed {
    background: #111;
}

body.dimmed #wrapper {
    opacity: .1;
}

body.dimmed div.dialog {
    display: block;
}

As you can see all you need to do now to display a centered dialog on top of a dimmed page is to give body a class of "dimmed". With jQuery it couldn't be easier:

$('<a href="#">toggle dialog</a>').appendTo('#content').click(function() {
    $(document.body).addClass('dimmed');
});

Happy coding!

Laters

Live ajax search using the Google search API

Monday, May 19, 2008

I realized the bogus-search-results script from Live Ajax Search jQuery Plug-in may not have been very satisfying to you visitors, so I thought I'd show you how to use the Google search API to create a real live ajax search on your site.

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:

<?php
require_once 'JSON.php';

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

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

    # The URL to the Google search API
    $url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=' .urlencode($_GET['q']) .'%20site:' .$site .'&rsz=large&start=' .$start;

    # Initiate CURL
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_REFERER, 'http://' .$site);
    $body = curl_exec($ch);
    curl_close($ch);

    # Decode the JSON returned (you need the JSON-class if json_decode is undefined)
    $body = json_decode($body);

    # Build array
    $i    = 0;
    $search_results = array();

    # Loop through all results
    foreach($body->responseData->results as $r) {
        $search_results['results'][$i]['title'] = $r->title;
        $search_results['results'][$i]['url'] = $r->url;
        $search_results['results'][$i]['content'] = $r->content;
        $i++;
    }

    # Loop through all the pages of results
    if(isset($body->responseData->cursor->pages)) {
        foreach($body->responseData->cursor->pages as $p) {
            $search_results['pages'][] = $p->start;
        }
    }

    # Make sure some results were returned
    if(isset($search_results['results'])) {
        ?>
        <h2>Search results for &quot;<?php echo @$_GET['q']; ?>&quot;</h2>

        <ol<?php echo @$_GET['start'] > 0 ? ' start="' .($_GET['start'] + 1) .'"' : '' ?>>
        <?php foreach($search_results['results'] as $sr) { ?>
            <li>
                <h3><a href="<?php echo $sr['url']; ?>"><?php echo $sr['title']; ?></a></h3>

                <p><?php echo $sr['content']; ?><br /><a href="<?php echo $sr['url']; ?>">Read more</a></p>
            </li>
        <?php } ?>
        </ol>

        <?php if(isset($search_results['pages'])) { ?>
            <ul>
            <?php $i = 0; foreach($search_results['pages'] as $p) { $i++; ?>
                <li>
                    <?php if((!isset($_GET['start']) && $p == 0) || (@$_GET['start'] == $p)) { ?>
                        <strong><?php echo $i; ?></strong>
                    <?php } else { ?>
                        <a href="/search/?q=<?php echo @$_GET['q']; ?>&amp;start=<?php echo $p; ?>"><?php echo $i; ?></a>
                    <?php } ?>
                </li>
            <?php } ?>
            </ul>
        <?php } ?>
        <?php
    }
    else {
        ?>
            <p><strong>Sorry, there were no results</strong></p>
        <?php
    }
}
?>

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:

<form method="get" action="/search.php">

    <p>
        <label for="q">Search</label> 
        <input type="text" name="q" id="q" /> 
        <input type="submit" value="Find" />
    </p>

</form>

The Ajax-magic

And now hijax that form:

<script type="text/javascript" src="http://aframework.googlecode.com/svn/trunk/__core/Modules/Base/1-jquery-1.2.1.js"></script>
<script type="text/javascript" src="http://aframework.googlecode.com/svn/trunk/__core/Modules/Base/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://aframework.googlecode.com/svn/trunk/__core/Modules/Base/jquery.liveSearch.js"></script>
<script type="text/javascript">
    $('#q').liveSearch({ajaxURL: '/search-results.php?q='});
</script>

</body>

I've set up an example-page and you can also download the example-files.

Enjoy!

Woopsy

Seems curl_init isn't available from my host (bummer). The example should still work for you locally though,and hopefully live as well (unless you suffer from the same limitations).

jQuery Live Ajax Search Plug-in

Friday, May 16, 2008

Use this plug-in on an input[type="text"] and it will display search-results based on the input's contents on key-up.

The search-results box is fully customizable using CSS and its contents is completely up to you.

I've set up a simple example with some bogus search-results.

You use it like:

$('input[name="q"]').liveSearch({ajaxURL: 'my-search-results.php?q='});

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.

<h2>Search results for &quot;<?php echo @$_GET['q']; ?>&quot;</h2>

<ol>
    <?php for($i = 0; $i < 10; $i++) { ?>
        <li>
            <h3><a href="#">Lorem ipsum <strong><?php echo @$_GET['q']; ?></strong> lorem</a></h3>

            <p>Lorem ipsum dolor sit amet lorem <strong><?php echo @$_GET['q']; ?></strong> ro the lorem in lipsum dolor sitamus <strong><?php echo @$_GET['q']; ?></strong> lorem ipsum?<br /><a href="#">Read more &raquo;</a></p>
        </li>
    <?php } ?>
</ol>

You can as usual get the code and the default styling from google code. Have fun. Oh, and it requires dimensions.

Numeric DLs jQuery Plug-in

Monday, March 31, 2008

This little plug-in will add numbers to definition-descriptions (<dd>) if there are more than one for a term (<dt>).

Take this code for example:

<dl>
    <dt>Jug</dt>
    <dd>A small pitcher.</dd>
    <dd>Vulgar Slang. A woman's breasts.</dd>
    <dt>Bird</dt>
    <dd>The animal of the skies</dd>
</dl>

Using the plug-in (like so: $.numericDLs();) would result in the following output:

Jug
(1) A small pitcher.
(2) Vulgar Slang. A woman's breasts.

Bird
The animal of the skies

Perhaps this could be done with pure CSS? Counters and generated content perhaps..

You can as usual get the code from my Google Code repository. Have fun!

Update

Tobias mentions a CSS-solution in the comments and after some playing around I managed to make it identical to the JS-one:

dl dt {
    counter-reset: i;
}

dl dd + dd, 
dl dd ~ dd:not(:last-child) {
    counter-increment: i;
}

dl dd + dd:before, 
dl dd ~ dd:not(:last-child):before {
    content: "(" counter(i) ") ";
}

Only real browsers though obviously.

jQuery Vibrate Plug-in

Thursday, March 27, 2008

This simple plug-in makes elements on the page vibrate.

I built it for a project at work and to be frank I think this sort of stuff is no better than the 90s blink-element but perhaps someone will find it useful.

Use it like:

$('#my-annoying-ad').vibrate();

Get the code here

Enjoy.... or not..

jQuery external link favicons plugin

Wednesday, February 27, 2008

Inspired by "the CSS Guy's" Hyperlink Cues with Favicons I created a jQuery plug-in that does the same.

What it does is appends favicon-images (if there is one, else a default image will be used) to all external links on the site.

It's mega-tiny (like 20 lines of code (less than a k unpacked) and you use it like:

$.favicons();

You can check it out in action here and get the code from my google code SVN repository .

Enjooooooy

jQuery Image Zoom Plug-in

Monday, February 11, 2008

Inspired by Cabel Sasser's FancyZoom I created my own version for jQuery.

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.

Have a look at the example-page and get the source here. Imgzoom requires the dimensions plug-in for jQuery.
The default styling for imgzoom can be found here and you'll need this icon as well:
Close imgzoom

Enjoy!

Submit form using ajax jQuery plug-in

Sunday, January 20, 2008

This plug-in will prevent your form's default action on submission and instead submit all data using XHR. Use it like this:

// submit the '#contact form'-form using XHR, then update the #contact-element with the response
$('#contact form').ajaxSubmit('#contact');

It will submit to the form's action using the form's method unless specified differently when calling the plug-in.
The plug-in will submit any element in the form that has a name-attribute to the URL specified in action.

The ajaxSubmit plug-in takes two arguments, the first is either a string containing a CSS-selector pointing to the element that should be updated with the response, or a custom callback-function that will run after ajax-response is ready. The response will be passed to the callback function.

The second argument is a config-object where you can set action, method and loading. They default to form's action, form's method and 'Loading...'. The loading-var is used to replace the text in the submit-button. You may wanna change to 'Sending...' or something similar if that is more appropriate.

You can get the latest version of the jQuery ajaxSubmit plug-in here.

Ok, enjoy.

Live form-validation jQuery plug-in

Sunday, January 20, 2008

This plug-in adds valid/invalid icons next to form-controls and validates them as user types.

It requires PHP for the validation so your server needs to have PHP installed.
An easy way to check if PHP is installed is to create a file (foo.php), put:

<?php
    phpinfo();
?>

in it, upload it to your server and then go to the file in your browser and see what it says.
There should be a load of information if you have PHP installed.

The form-validator requires you use some common names for your form-inputs.
There's only three fields specified at the moment; 'name', 'email' and 'message'. But if you're not completely unfamiliar with PHP you should have no problem adding more of your own.
Also, if you prefer 'content' or 'comment' or something instead of 'message', simply open the FormValidator PHP-class, find the line that defines the message-validation and rename to whatever you like.
Anything passed to the FormValidator that isn't defined in the class will always return true.

Now, to validate a form using jQuery you will obviously need your HTML form (the plug-in looks for input[type="text"] and textarea) set-up, and a .js-file that initiates the plug-in:

$(document).ready(function() {
    $('#contact form').liveValidation({
        validIco: 'gfx/validIco.gif',        // url to valid icon
        invalidIco: 'gfx/invalidIco.gif',    // url to invalid icon
        action: 'AjaxFormValidator.php'        // url to php-file
    });
});

You can download a zip with the 2 required PHP-files, a couple of valid/invalid icons, an example PHP-file as well as jQuery and the live validation plug-in here. Or you can always get the latest version of the plug-in here together with the two needed PHP-files: FormValidator and AjaxFormValidator.

Have fun!

Only show top-links if they are needed using jQuery and Dimensions

Wednesday, January 16, 2008

A link in the footer pointing to the top of your site is quite common and, as most people don't know about/use PgUp (or something similar), can be helpful, ... although perhaps we should educate users instead and stop replicating browser/os-behavior, like so many suggest we do with print-links and such.

Nevertheless, here's a little snippet of jQuery that will hide top-links on your site unless they're needed (ie, there's a visible scrollbar).

The function needs to know what your top-links are pointing to, but if you don't supply a value it defaults to '#'. Which is what I always link my top-links to as every browser I've ever come across takes you to the top of the page when you click a link with an href-attribute-value of '#'.

function hideTopLinks(topLinksHref) {
    var href = topLinksHref || '#';
    var topLinks = $('a[href="' +href +'"]');

    if($(window).height() >= $(document).height()) {
        topLinks.each(function() {
            topLink = $(this);
            if(topLink.is(':only-child')) {
                topLink.parent().hide();
            }
            else {
                topLink.hide();
            }
        });
    }
}

You may wanna put that function in your project object (whoa, what a rhyme!), I, for example, keep that function in aFramework.general.hideTopLinks();

Have fun!

jQuery Imgbox Plug-In

Monday, November 26, 2007

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.

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.

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="">
    <p>
        <label>Select a Colour<br />
            <select name="colour">
                <option value="ff0000">Red</option>
                <option value="00ff00">Green</option>
                <option value="0000ff">Blue</option>
            </select>
        </label>
    </p>
</form>

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:

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

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

Use it like this:

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

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 jquery.center.js.
As usual it requires jQuery.

Enjoy.

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.

Enjoy!

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

Ajax/Hijax Rating Exempel

Wednesday, April 18, 2007

Det är mycket snack om ajax nu för tiden, och jag tänkte bara visa ett simpelt exempel på hur man använder ajax på "rätt" sätt. Dvs, det är tillgängligt även om användaren inte har JS aktiverat.

Kolla in exmplet live här.

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.

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

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.

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

March 2010

S M T W T F S
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 31

Recent Comments

  1. Vlad on A follow-up to "An alternative to div overlays":
    I'll try this.....
  2. Steve on jQuery Live Ajax Search Plug-in:
    This is a great script but I've got...
  3. Frank on jQuery Live Ajax Search Plug-in:
    Hey, sounds like a great plugin! I ...
  4. Andreas on jQuery Drag to Select Plug-in:
    @Paul - I didn't take into account ...

Style Switcher

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

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

Categories

Random Quote

This left does not terminates in first floor - Lift sign

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