JQUERY IMAGE LOAD

Found a tutorial about image loading using Jquery written by Remy Sharp while trying to create the same function for company i am working at. Remy has publish the core script and here i will modify it to make it work for multiple images, and load in sequencing order.

Multiple Image Loading

First we create an HTML page which has list element with class “loading” which we’re going to define later in the CSS, the amount of the list element depend on how many images we need to put here, in this example i have 3 images.
Follow up the comments from my previous post about animate loading image with jquery which asking about how to populate images from the DOM instead of declare the image within the javascript codes manualy, so i made a little changes into the code since it seems to be easier for you all to adopt this into your website.

 Enjoyed this post? Subscribe to our RSS feeds!
<ul id="container">
  <li><img src="your_image_url.jpg"></li>
  <li><img src="your_image_url.jpg"></li>
  <li><img src="your_image_url.jpg"></li>
  <li><img src="your_image_url.jpg"></li>
</ul>

The css

ul li {
	width:112px;
    height:112px;
    list-style:none;
}
ul li.loading {
	background: url(spinner.gif) no-repeat center center;
}
#loadnote {
	position:absolute;
    top:0px;
    left:0px;
    background:red;
    padding:10px 15px;
    color:white;
}

The Javascript

$(function () {
	//@ my flicker link
	var flickr_set = 'http://www.flickr.com/photos/87187920@N00/';
	//@ id of div where the loading informations visible
	var _loadDivId = 'loadnote';
	//@ id of the ul container
	var _imgContainerId = 'container';
	//@ style of li loading (spinner image)
	var _imageLoadClassName = 'loading';
	//@ 

SCRIPTY2 THE SUCCESSOR TO SCRIPT.ACULO.US

scripty2 is divided into three parts, core, fx, and ui, and supports IE6+, Safari 3+, Firefox 3+, Chrome, Opera 10 and most WebKit-based browsers. 
Alpha notice: scripty2 is currently in alpha, and not feature-complete. The API is not final and subject to change.

  • scripty2 core

    Core contains various JavaScript and DOM extensions used by scripty2 fx and scripty2 ui, plus developer utility classes.

  • scripty2 fx

    The scripty2 effects framework provides for time-based transformations of DOM elements and arbitrary JavaScript objects. This is at the core of scripty2 and presents a refinement of the visual effects framework of script.aculo.us 1.

  • scripty2 ui

 

Getting started

  • scripty2 depends on Prototype 1.6.1 or later. For your convenience, a development copy and a minified version of Prototype is included in the distribution.To use scripty2, include this line in your HTML:
    <script src="prototype.scripty2.min.js" type="text/javascript"></script>

    For debugging, you can also include the libraries seperately:

    <script src="prototype.js" type="text/javascript"></script>
    <script src="s2.js" type="text/javascript"></script>

Help & Community

  • Want to discuss? Share feature ideas, problems, suggestions, praise? You’re welcome to do so on the scripty2 Google Group.Found a genuine bug? Please report in detail on our Lighthouse bug tracker..

    Interested in development? Check out the scripty2 repository on Github.

WELCOME FROM … GEOPLUGIN

Small script, showing how to add a welcome to your website visitors.

Demo right below this line

Welcome to our visitors from San Francisco, United States

Code to produce this

<script language="JavaScript" src="https://www.geoplugin.net/javascript.gp" type="text/javascript"></script>
  <h3><img src="/images/waving.gif"><script language="Javascript">
	document.write("Welcome to our visitors from "+geoplugin_city()+", "+geoplugin_countryName());
  </script></h3>

GOOGLEMAP MARKERS JQUERY FROM HTML LIST !

This is one of my favorite jQuery plugins, it has far reaching features. It’s ease of use and implementation means even novices can plot markers on Google Maps with absolute simplistic ease.

How it works

         <script>
           gmap = new GMap2(document.getElementById('map'));
           gmap.setCenter(new GLatLng(0, 0), 13);
           $('#brisbane').gmaplist(gmap);
         </script>

The list element to propgate the markers

<div id="map" style="display:none"></div>
         <ul id="brisbane">
           <li>Redcliffe, QLD</li>
           <li>Cornubia, QLD</li>
           <li>Birkdale, QLD</li>
           <li>Wellington Point, QLD</li>
           <li>Burpengary, QLD</li>
           <li>Jimboomba, QLD</li>
         </ul>
       </div>
 Enjoyed this post? Subscribe to our RSS feeds!

Options

The plugin accepts an options object. The following variables are accepted:

  • delay: The lookup delay in milliseconds.
    Geocoding lookups need to be throttled to prevent 602 errors. The default value of 100ms is typically good enough.
  • loadingGraphic: Path to a loading graphic
    The map is not displayed until all geocoding has been performed. This option is the path to a loading graphic
  • debug: Logs some debugging info to the console
    Currently logs each point result from the Google gatLatLng() hook

TIMEAGO A JQUERY PLUGIN

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago”).

The timeAGO jQuery plugin

Timeago was originally built for use with Yarp.com to timestamp comments.

  • Avoid timestamps dated “1 minute ago” even though the page was opened 10 minutes ago; timeago refreshes automatically.
  • You can take full advantage of page caching in your web applications, because the timestamps aren’t calculated on the server.
  • You get to use microformats like the cool kids.
  • Let’s see it working

     Enjoyed this post? Subscribe to our RSS feeds!

THE LEAGUE OF MOVEABLE TYPE – FONTS

We’re done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won’t have it. It’s time to raise our standards. Here, you’ll find only the most well-made, free & open-source, @font-face ready fonts.

What its about …

Like any revolution, we aim to make progress, and we need help. If you want to be a part of this free, open-source type movement, you should join us and contribute. If you have any questions about The League or the movement, –
get in touch.
Read Our Manifesto

Some Sample Fonts below

 …

HIGH-RESOLUTION BROWSER ICONS 32 BIT

You may want these for a presentation, a, blog post or for the site featuring your brand new awesome lightbox script (please no!). They are 32bit PNGs, each have their own official shadow treatment, and no background matte color.

Hi-Res Browser Icons in 32 bit

I came across this post today by Paul Irish, and found these ultra high resolution browser icons, you will love.

Have a Jaw Dropping Gander at these

Available in
256×256 256 x 256 browser icon (4)
128×128 128 x 128 browser icon (2)
64×64 64 x 64 browser icon (2)
32×32 32 x 32 browser icon (3)
16×16 16 x 16 browser icon (2)

Original Files and Post on Pauls website…

ROUNDED MENU WITH CSS3 AND JQUERY

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Similar to the spinner demo button we use

 Enjoyed this post? Subscribe to our RSS feeds!

To make things easier, we created two functions, one for expanding an item and one for collapsing it. The expand function will make the icon rotate 4 times around itself (360 times 4 are 1440). We will also make the item expand by animating an increase in its width. Then, we let the content appear, first the whole div and then the paragraph element.

The collapse function will rotate the icon back, decrease the width of the item and make the content disappear.

JQUERY FANCY DRAGGABLE CAPTCHA

Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.

jQuery draggable captcha

<script type="text/javascript">
            (
            function($){

                $.fn.shuffle = function() {
                    return this.each(function(){
                        var items = $(this).children();

                        return (items.length)
                            ? $(this).html($.shuffle(items,$(this)))
                        : this;
                    });
                }

                $.fn.validate = function() {
                    var res = false;
                    this.each(function(){
                        var arr = $(this).children();
                        res =    ((arr[0].innerHTML=="A")&&
                            (arr[1].innerHTML=="B")&&
                            (arr[2].innerHTML=="C")&&
                            (arr[3].innerHTML=="D")&&
                            (arr[4].innerHTML=="E")&&
                            (arr[5].innerHTML=="F"));
                    });
                    return res;
                }

                $.shuffle = function(arr,obj) {
                    for(
                    var j, x, i = arr.length; i;
                    j = parseInt(Math.random() * i),
                    x = arr[--i], arr[i] = arr[j], arr[j] = x
                );
                    if(arr[0].innerHTML=="1") obj.html($.shuffle(arr,obj))
                    else return arr;
                }

            })(jQuery);

            $(function() {
                $("#sortable").sortable();
                $("#sortable").disableSelection();
                $('ul').shuffle();

                $("#formsubmit").click(function(){
                    ($('ul').validate()) ? alert("Yeah, you are a human!") : alert("No, you are not a human!");
                });
            });
        </script>

 …

SUPER AWESOME CSS3 BUTTONS

One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.

The Objective

We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.
The button style

This is the default class that is applied to each button on our page. We can customise a button is by adding a chain of CSS classes, this way we can set the colour and size. You’ll see below that we have an overlay.png background image. This gives us the gradient effect if your still conscious about IE6 you’ll need to use a PNG transparency hack to make 24 bit PNG’s render correctly.

Another feature with CSS3 is RGBA.

This is the same as RGB but with an alpha layer allowing you to set the opacity of a colour. This allows us to easily change the background of our buttons containing div without us having to adjust the buttons style…