mouseover with delay (using hoverIntent plugin)

Standard

hoverIntent is a plug-in that attempts to determine the user’s intent… like a crystal ball, only with mouse movement! It works like (and was derived from) jQuery’s built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user’s mouse slows down enough before making the call.

Why? To delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent.

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("#demo3 li").hoverIntent( config )

Download hoverIntent r6 (fully-commented, uncompressed)

Download hoverIntent r6 (minified)

Advertisements

Trigger Google conversion by binding with some event

Standard
var google_conversion_id = 1234567890;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "";
var google_conversion_value = 0;

var conversionLabels = {
  'order-success': "conversoin_label_here"
};


function trackConversion(label) {
  google_conversion_label = conversionLabels[label];

  document.write = function(text) {
    $('#content').append(text);
  };
  $.getScript('https://www.googleadservices.com/pagead/conversion.js');
};

/* then somewhere in your ui code: */
trackConversion('order-success');

Post to your Facebook wall using Javascript SDK

Standard

Step1:

<div id="fb_div">
    <h3>Post to your Facebook wall:</h3> <br />
    <textarea id="fb_message" name="fb_message" cols="70" rows="7"></textarea> <br />
    <input type="button" value="Post on Wall" onClick="post_on_wall();" />
</div>

Step 2:

window.fbAsyncInit = function()
{
    FB.init({
        appId  : 'xxxxxxxxxxxxxxx',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true , // parse XFBML
        oauth : true // Enable oauth authentication
    });


};

function post_on_wall()
{
    FB.login(function(response)
    {
        if (response.authResponse)
        {
            alert('Logged in!');

            // Post message to your wall

            var opts = {
                message : document.getElementById('fb_message').value,
                name : 'Post Title',
                link : 'www.postlink.com',
                description : 'post description',
                picture : 'http://2.gravatar.com/avatar/8a13ef9d2ad87de23c6962b216f8e9f4?s=128&amp;d=mm&amp;r=G'
            };

            FB.api('/me/feed', 'post', opts, function(response)
            {
                if (!response || response.error)
                {
                    alert('Posting error occured');
                }
                else
                {
                    alert('Success - Post ID: ' + response.id);
                }
            });
        }
        else
        {
            alert('Not logged in');
        }
    }, { scope : 'publish_stream' });
}

Step3:
create a div with id=”fb-root” and paste below code after this div

<div id="fb-root"></div>

Step4:

(function() {
    var e = document.createElement('script');
    // replacing with an older version until FB fixes the cancel-login bug
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    //e.src = 'scripts/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

keyup function with delay

Standard

 

This code will execute a function after the user has stopped typing for a time of 1000ms. Hence the function will not be called on each keyup event. Great!!!

jQuery(function(){
    var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

    $('input').keyup(function() {
        delay(function(){
            alert('Time elapsed!');
        }, 1000 );
    });

});

JQuery Multi fileupload

Standard

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.



Download
View Demo

jQuery UI Multiselect by Michael

Standard

First off, you can visit the demo to see the widget in action.

The script depends on jQuery 1.3 and jQuery UI 1.7 and is style-able using Themeroller. It works in an unobtrusive fashion, by just turning html multiple select inputs into a sexier equivalent. There’s no extra markup needed.


Download Link: http://github.com/michael/multiselect/zipball/master

Reference: http://quasipartikel.at/2009/05/10/jqueryui-multiselect/