Toggle checkboxes with jQuery and Prototype JS

Sometimes you work with forms having a long list of checkboxes, in such scenarios a “Check All” or “Toggle Selection” button comes handy. Such button can save your time by toggling your selection with one click.
Continue reading “Toggle checkboxes with jQuery and Prototype JS”

nl2br equivalent JavaScript function

PHP provides a useful function nl2br that inserts HTML line breaks before all newlines \n in a string. Many times we want to utilize this functionality in JavaScript, although there is no nl2br  equivalent JavaScript function but we can create a custom function using regular expressions. Below is JavaScript equivalent for nl2br.

function nl2br(str, is_xhtml) {
	var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />'	: '<br>';
	return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag	+ '$2');
}

mouseover with delay (using hoverIntent plugin)

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.
Continue reading “mouseover with delay (using hoverIntent plugin)”

Trigger Google conversion on some event

Normally Google conversion code is added in header or footer of the “Thank you for your purchase” pages. A conversion is logged when someone lands on such thank you pages. But what if you want to notify Google about a conversion when a certain event is triggered like Sigup, Buy Now or Register button is clicked.
Continue reading “Trigger Google conversion on some event”

Post to your Facebook wall using Javascript SDK

Step1:

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

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;amp;d=mm&amp;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

&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;

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

 

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

});