Adulterating twitter

Twitter is a simple yet very powerful platform for sharing status updates among the followers. At first its intention was for personal uses, but now it’s beyond personal, it’s being used for spreading business updates. Already the total number of twitter followers of a website is considered for the valuation of its traffic. The more followers you have the more value your website gains. To get more followers you need to follow more people.

To follow the followers of a popular person/website go to the “followers” page (for example the followers page of php_projects is http://twitter.com/php_projects/followers). On each page you’ll see 20 people. There you’ll see the follow button (a human head with + symbol) beside each follower. Click on that button and you’ll become a follower of that person. Twitter uses ajax for this action. So you can simultaneously click on all the follow buttons on that page. When you target to follow a large number of people your wrist will get stuck clicking on the follow buttons.

But you can make this process fully automated! As twitter uses jquery, a simple one line of jQuery code can trigger click event on all the buttons at once. I’m not sure if twitter is aware of that or not. If you use FireBug you can run the code from console tab.

jQuery("li.follow-action button").trigger("click");

Also you can do it directly from address bar. Just paste this code in your address bar, press enter and see the magic!

javascript:jQuery("li.follow-action button").trigger("click"); void(0);

Screen shot of the code in action:

Hope you’ll find it useful for your business.

Advanced cycle plugin integration

On my another post I mentioned that cycle is a great jQuery plugin. I use it very often for slideshow. Recently I used it on a project where the slideshow had many(20+) wallpaper sized images. So loading time was a great issue.

The default cycle integration includes all the images during page loading which is okay for small images, but highly affects the page loading time for high resolution images. cycle plugin is highly flexible! I fixed the issue by loading images dynamically one after another at the end of each slide, literally before the beginning of each slide.

Here is how I did it:

<div id="slideshow"><!-- slides will be added here --></div>

var gallery = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg", "images/13.jpg", "images/14.jpg"]; // and so on.. array of images
// Array clone function.
Array.prototype.clone = function () {
    var arr = new Array();
    for (var property in this) {
        arr[property] = typeof(this[property]) == 'object' ? this[property].clone() : this[property];
    }
    return arr;
}
var gal = null; // gal should be global as I'll use it inside onBefore function
$(function () {
    gal = gallery.clone(); // cloning the array is not mandatory, but doing so will keep the main array unchanged.
    $('#slideshow').empty().append('<img src="' + gal.pop() + '" /><img src="' + gal.shift() + '" /><img src="' + gal.shift() + '" />') // adding the last, first and second element of the array to the slideshow div, then start the cycle plugin.
    .cycle({
        startingSlide: 1,
        // this is required (1 is the 2nd slide) as the first slide is the last element of the array. if you use manual next/prev button clicking on #prev will show the first element.
        before: onBefore, // loads the next image at the beginning of each slide. (NOT all at once)
        next: "#next",
        prev: "#prev"
    });
    var totalSlideCount = 1 + gal.length;
    function onBefore(curr, next, opts, fwd){
        // at first addSlide is not defined, so we should return.
	if (!opts.addSlide) return;
	// if all the elements of the array are added no need to add them again!
        if (opts.slideCount == totalSlideCount) return;
	// shift or pop from slide array
        var nextSlideSrc = fwd ? gal.shift() : gal.pop();
	// add next slide
        opts.addSlide('<img src="' + nextSlideSrc + '" />', fwd == false);
    }
});

In this code above, cloning the array is optional. I used it as I needed the main array for later use. Probably you know if you use the global array reference to a local variable and apply pop()/shift()/push() functions to the local variable, the global one will be affected. cos the local variable is just a reference to the address of the global array variable.

At first the last, 1st and 2nd elements of the array are added to the #slideshow div and the cycle is started from the 2nd slide. Before starting of each slide onBefore function is called. The onBefore function adds new slide to the slideshow and stops when all the array elements are added to the slide.

You may use it for small size images also if you need to improve the page loading duration.

Print button for Google Map API

You can easily print google map from maps.google.com. But what about printing the map from gmap api you use on your own website? One way is to print the whole page which is not a good idea. Users want to print only the location of your business in a larger size for later purposes. Google map api does not provide any function to print the map or view it in printer friendly mode.

The only solution I found is using a simple javascript code for this purpose. At first place an image/text/button anywhere (obviously easily available to visitors) on the page that contains your map api. I prefer to use a small printer icon image. Apply onclick(inline or unobtrusive) event to the button to popup a page say print.html.

<img src="images/print.png" class="print" alt="print" title="print" onclick="window.open('print.html')" />

Now create an empty html document, name it print.html and put it in the root folder of your site. Place this simple javascript code inside body tag of print.html

<script language="javascript">
var contents = window.opener.document.getElementById("map_container");
document.write(contents.innerHTML);
window.print();
</script>

Replace the “map_container” with the #id you are using for your map container. That’s all, you are done!

This method is good enough for printing static google map layout. But you can not print driving direction as that line is drawn using canvas element. In fact you can not print the exact driving direction even from maps.google.com.

This is more or less a better solution for printing the map from your own website’s gmap api. Please lemme know if you know any smarter way to do it.