Articles tagged 'JavaScript'

Blog Projects

Chained Selects Stable Release

Chained is now stable and in feature freeze. In 2.x.x version class support will be removed. Next major version will use data attributes will be used instead. After all, it is 2014 already!

Legacy syntax removed

Stable version removes legacy syntax. It is not 100% compatible with 0.9.x branch. You must pass all options to remote version as JavaScript object. Example of all possible options below.

$("#series").remoteChained({
    parents : "#mark",
    url : "/api/series.json",
    depends : "#series",
    loading : "Loading...",
    bootstrap : {
        "" : "--",
        "series-3" : "3 series",
        "series-5" : "5 series",
        "series-6" : "6 series",
        "series-7" : "7 series",
        "selected" : "series-3"
    }
});

Class based version does not have any configuration. You only need to pass parent selector.

$("#engine").chained("#series, #model");

Continue reading >>


Chained Selects for Zepto

New version of Chained mostly updates the remote version. Plugin now supports both Zepto and jQuery. You can avoid initial AJAX requests by bootstrapping select values. You can configure extra values to be sent to server. Since plugin now accepts more configuration options new prettier syntax was implemented. Lastly support for Bower was added.

Zepto support

Since plugin uses :selected you must also include Zepto selector extension. It is not included by default.

<script src="zepto.js"></script>
<script src="zepto.selector.js"></script>
<script src="jquery.chained.js"></script>

After this you can use the plugin as you normally would.

Continue reading >>


Lazy Load 1.9.0 Released

CSS background images

You can now lazyload CSS background images. Bind the plugin to non image element and it will automatically change the background-image style attribute when element is scrolled into view. You can also use effects.

<div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>

$("div.lazy").lazyload({
    effect : "fadeIn"
});

Continue reading >>


Lazy Load 1.8.0 Released

This version of Lazy Load is just a bugfix release. Minor release number bump is there because I pulled a new feature in last minute and I did not want to mess up my git branching. Bugfix usually does not normally warrant for the minor bump.

Bugs fixed

Plugin now works correctly when using many instances and they have different container.

$("#column-1 img").lazyload({ container: $("#column-1") });
$("#column-2 img").lazyload({ container: $("#column-2") });
$("#column-3 img").lazyload({ container: $("#column-3") });

Continue reading >>


Lazy Load 1.7.0 Released

Previous version of Lazy Load gained traction pretty fast. Good patches were submitted to GitHub. This version of plugin mostly concentrates on speed optimization and event handlers.

New Events

Two new events were added. Handler for appear event is called when image appears to viewport but before it is loaded. Handler for load event is called when image is loaded. Both event handler receive two parameters. First parameter elements_left is numbers of images left to load. Second parameter settings is the settings passed to Lazy Load plugin. Inside both handlers this refers to the image dom element.

$("img.lazy").lazyload({
    appear : function(elements_left, settings) {
        console.log(this, elements_left, settings);
    },
    load : function(elements_left, settings) {
        console.log(this, elements_left, settings);
    }
});

Continue reading >>


Lazy Load 1.6.0 Released

After neglecting the code for a while I was finally able to release new version of Lazy Load plugin. Changes are not dramatic but there is one important thing. New browsers load image even if you remove the src attribute with JavaScript. Because of this you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”>

All code regarding the old behavior where you could just include plugin code in your page and it would automagically lazyload your images was removed.

Continue reading >>


iPhone Controlled HTML5 Logo and Color Cube

When Apple released iOS 4.2 end of last year I was on a boat trip to Finland. For me the most interesting features were added to Safari browser. I wanted to learn about WebSockets. New DeviceOrientation API just begged to be abused. I had an idea to control the content of laptop browser by tilting and rotating the phone. I had working but ugly code before ship arrived to Helsinki.

If you have short attention span go straight to the HTML5 logo demo.

Code has been sitting on my hard drive since. I cleaned it up during last couple of days. Also added additional eye candy by using the oh-so-hot-at-the-moment HTML5 logo.

Continue reading >>


Chained Selects jQuery Plugin

Latest usage and examples can be found from separate chained selects project page. There is also a demo page.


Photo Dan Barbus

Recently I needed to do chained select navigation for a project. It was relatively simple. I did not want to go through hassle of setting up Ajaxified database queries. I liked API of Dependent Select. However I needed to make small modification to suit my needs. I quickly realized it is faster to write the plugin from scratch than trying to understand the original code. I also felt original version had too many lines of code for such a simple plugin. Bit later Chained was born

What is Chained?

Chained is simple jQuery plugin for chained selects. It does not make external AJA(X|H) queries for setting content of child selects. Instead it uses classnames of select options to decide content. As a bonus it is usable even with JavaScript disabled. However with JavaScript disabled there is one catch, all options will be shown to user.

Chained is great when you need something simple and quick. If you have long and complicated select trees you are better off with traditional “Make an AJAX database query to build next select” approach. Good option is Select Chain written by Remy Sharp.

Continue reading >>


Tuning Lazy Loader

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”>
Good thing is you can now put all your JavaScript to the end of the page. If you want to support non JavaScript browsers there is an extra step. You must include original image inside <noscript> tag. For more information read the documentation.

I just committed two patches to Lazy Load plugin sent by users. Jeremy Pollock contributed a patch improving scroll behaviour. Before when you scrolled quickly long way down all images above the browser top were loaded. New behavior is to load only those which are currently visible on the screen.

Continue reading >>


Verify Estonian Isikukood With JavaScript

Yesterday I had to verify Estonian national identification number with JavaScript. The formula is pretty simple. You just have to read it through couple of times to understand. If you need other languages Dmitri Smirnov has examples in PHP, Java and...

Continue reading >>


Lazy Load Inside Container

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”>
Good thing is you can now put all your JavaScript to the end of the page. If you want to support non JavaScript browsers there is an extra step. You must include original image inside <noscript> tag. For more information read the documentation.

Matthew Crumley contributed nice patch to Lazy Load plugin which makes it work with containers. If you have a container which has a scrollbar.

#container {
    height: 600px;
    overflow: scroll;
}

Continue reading >>


Search jQuery API Docs from Spotlight

Yesterday Priit Haamer of Fraktal notified me about Spotlight searchable Ruby on Rails documentation he had made. Absolutely brilliant idea. When I saw it I knew I have to do same thing for jQuery.

Note: Last update to jQuery Spotlight dictionary was done 19th November 2009. I try to update the docs every month.

Why Is It cool?

You can just hit Apple + Space to enter spotlight and search for jQuery function.

Press and hold Apple + Control + D over any function in TextMate (or Safari, iChat, Mail etc.) to get info popup.

Continue reading >>


Lazy Load With Effects

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real...

Continue reading >>


Lazy Load Sideways

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Lazy Load plugin has been quite popular recently. Atleast two Prototype ports have been created. First one by Edd Couchmann. Second one by Bram Van Damme. Congrats guys. Now Prototype people can enjoy lazy loading sweetness too.

I just added most requested feature. Sideways lazy loading of images in wide pages. I guess you could also call it right of fold.

Continue reading >>


Lazy Load Images jQuery Plugin

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. After reading YUI introduction I though this is cool! After reading through source thought changed to this needs some jQuery simplicity So I stole borrowed couple of great ideas from Matt’s code. Result is Lazy Load plugin for jQuery.

Continue reading >>


Preload Images Sequentially With jQuery

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Here is a small code snippet I use for preloading images for mouseovers. It uses $(window).bind("load", function() { xxx }) to wait until all page elements have finished loading. This includes all images. If you use $(document).ready() it would start preloading images while other elements are still loading. This will make rest of the page feel slow.

Code below searches for all images with class hover. Then it adds _on to image name and pushes it to preload queue. When page has finished loading, images in preload queue get loaded. Loading happens sequentially one by one. Thus reducing stress to server.

Preloading code is based on mailing list post by Luke Lutman. Note that currently this code throws stack overflow with IE when there is more than 15 images to be preloaded. I am currently working on version which avoids this problem.

Continue reading >>


CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

Mika Tuupola is a Member of the Leanpub Affiliate Program.

© 2014 Mika Tuupola.