Introducing jSlider: A Content Slider plugin for JQuery

jSlider is a light weight JQuery plugin for content sliding. By content we mean everything: HTML code, Images, Advertisements etc etc. jSlider allows to put our content in simple <div>‘s, and then it automatically generates a content slider for you, which one can customize using various options provided.

Screenshot
Below is a screen shot of a content slider using jSlider:

jSlider

Download and Demo
jSlider is hosted at google code. Use the following links for demo and downloads:

Using jslider.jquery.js
Below is a sample html code which will be processed by jslider:

Sample input to jslider

    <div id="jslider">
      <div>
        <input type="hidden" value="Title for Content 1"/>
        <div>
          HTML Content # 1
        </div>
      </div>
      <div>
        <input type="hidden" value="Title for Content 2"/>
        <div>
          HTML Content # 2
        </div>
      </div>
      <div>
        <input type="hidden" value="Title for Content 3"/>
        <div>
          HTML Content # 3
        </div>
      </div>
      <div>
        <input type="hidden" value="Title for Content 4"/>
        <div>
          HTML Content # 4
        </div>
      </div>
      <div>
        <input type="hidden" value="Title for Content 5"/>
        <div>
          HTML Content # 5
        </div>
      </div>
    </div>

One must preserve the div structure as given in the example above. The hidden input values will be taken as heading for that block of content. If you want to have no heading or a common heading, fill this hidden input field appropriately.

Sample output from jslider

  <div id="jslider">
    <div class="slider">
      <h2>Title for Content 1</h2>
      <ul>
        <li class="selected">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <div class="content">
      <div class="block">
        <input type="hidden" value="Title for Content 1"/>
        HTML Content # 1
      </div>
      <div class="block">
        <input type="hidden" value="Title for Content 2"/>
        HTML Content # 2
      </div>
      <div class="block">
        <input type="hidden" value="Title for Content 3"/>
        HTML Content # 3
      </div>
      <div class="block">
        <input type="hidden" value="Title for Content 4"/>
        HTML Content # 4
      </div>
      <div class="block">
        <input type="hidden" value="Title for Content 5"/>
        HTML Content # 5
      </div>
    </div>
  </div>

Customizing jslider.jquery.js
jSlider provides following options for customization:

  1. width: Width of jslider div above, defaults to ‘610px’
  2. height: Height of jslider div above, defaults to ‘225px’
  3. slider_height: Height of slider div above (navigation bar), defaults to ’24px’
  4. content_height: Height of content div above, defaults to ‘180px’
  5. block_width: Width of block div inside content div’s above, defaults to ‘590px’
  6. block_padding: Padding of block div inside content div’s above, defaults to ’10px’
  7. animation_time: Time taken by 1 slide of content, defaults to 300 msec
  8. animation_type: Animation type, defaults to ‘linear’. Other option is ‘swing’

Rest of the options like various padding etc can be controlled using the css properties. View demo for more implementation details. This is my first jquery plugin and I am only 2 weeks old in jquery. If you find any bug or need any enhancement, you are most welcome.

fixed.js – Solution to IE6 “position:fixed” Bug

IE6 has been a bane for all frontend developers for years. An element can be positioned relative to the browser window using the style position:fixed, it does not move when the page is scrolled. You can do nice layout things (e.g. facebook chat bar) with this in most modern browsers but not for IE6 in windows until you use fixed.js

Sample Code for Facebook Type Chat Bar

<html>
  <head>
    <style type="text/css">
      body {
        margin:0px;
        padding:0px;
        height:1600px;
        position:relative;
      }
      #shoutbox {
        position:fixed;
        background-color:#F2F2F2;
        border-top:1px solid #CCCCCC;
        bottom:0px;
        left:0px;
        width:100%;
        height:25px;
      }
    </style>
    <script type="text/javascript" src="fixed.js"></script>
  </head>
  <body>
    <div id="shoutbox">
      <!-- Our Shoutbox -->
    </div>
  </body>
</html>

The above code will show you a bar at the bottom of the page, which remains fixed at the bottom even if you scroll the page.

How does fixed.js help me?

  1. fixed.js is smart enough to invoke only if the browser is IE6 on Windows machine. This is achieved by these two lines of code in fixed.js.
    /*@cc_on
    @if (@_win32 && @_jscript_version>4)
  2. It specifically tells IE6 how to render elements with position:fixed attributes. Which are otherwise ignored by IE6.
  3. For remaining browsers, fixed.js go to sleep silently. Doesn’t do any processing.

Download fixed.js
fixed.js is developed and maintained at doxdesk.com. Click here to download fixed.js

Happy Coding!

Facebook type image rotation and more using PHP and Javascript

If you are a facebook geek like me, you must have noticed till now the image rotate functionality in the photo albums. Facebook allows you to rotate images 90 degree clockwise and anti-clockwise after image upload. If you haven’t tried that till now, below is a screenshot for your convenience.

facebook-image-rotate

Question:
But the question is how does facebook team succeed doing this in one click. Today I tried looking around for a solution over internet and I came across the inbuilt imagerotate functionality in PHP.

Problem:
Unfortunately the problem is that even if you have GD Library extension enabled in PHP, imagerotate function just doesn’t work. After some research I found that to enable imagerotate function inside PHP, you need to compile and build PHP manually and enable imagerotate while installing PHP. You can check your PHP installation support for imagerotate using the following command line:

php -r "var_dump(function_exists('imagerotate'));"

Solution:
Since I didn’t want to touch my current installation of PHP, ImageMagick came to my rescue. Below I will show you how did I achieve cloning facebook’s 90 degree rotation functionality and also added a custom degree rotation (functionality usually seen in collage tools).

Demo:
You can try a live demo of the application here:
http://abhinavsingh.com/webdemos/imagerotate/

facebook-image-rotate-using-php-javascript

Source Code:
Before you go ahead and try this demo, you will need to install imagemagick on your system. On debian and ubuntu this can be achieved by the following command:

apt-get install imagemagick

To make sure installation is alright, run the following command from the shell:

convert -version

You should see something like this:

Version: ImageMagick 6.2.4 02/10/07 Q16 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2005 ImageMagick Studio LLC

Convert is a command line utility provided by imagemagick. Read more about convert here.

The source code consists of the following files and folders:

  • index.php : Generates the Frontend UI part for the application
  • action.php : Responsible for handling requests and rotating image using imagemagick library
  • style.css : Used for styling the UI
  • script.js : Used for handling the horizontal slider
  • images : This folder contains all the required images for the application. The image which we will be rotating left and right is “me.jpg”

action.php

  // Image Path
  $image = "images/me.jpg";
  $original = "images/me-original.jpg";

  if($_POST['restore']) {
    exec("cp ".$original." ".$image);
  }
  else if($_GET['left'] == 1 || $_GET['right'] == 1 || $_POST['degree']) {
    // Rotation Degree
    if(isset($_GET['left'])) $degree = -90;
    if(isset($_GET['right'])) $degree = 90;
    if(isset($_POST['degree'])) $degree = $_POST['degree'];

    // rotate image
    if(is_numeric($degree)) exec("convert ".$image." -rotate ".$degree." ".$image);
  }

From the UI, a user can pass 4 kind of requests:

  • Rotate Image 90 degree clockwise by clicking the button on bottom right corner
  • Rotate Image 90 degree anti-clockwise by clicking the button on bottom right corner
  • Rotate Image x degree, by choosing the value of x using horizontal slider on bottom left
  • Restore the image back to the original self

action.php handles the incoming 4 cases, calculates $degree to rotate and passes as a parameters to the command line utility provided by imagemagick.

Download Code:
Download the complete source code from here:
http://abhinavsingh.googlecode.com/files/image-rotate-application.rar
Unzip into a folder, and make the images directory writable.
PS: Application not tested on IE browser

Don’t forget to share and leave a comment if you liked the post.
Cheers!

Toggle : A Javascript game, anyone up for the challenge?

This weekend I came across a game made using java applets. Initially looked like its possible to solve it, but slowly we realized that there might be no solution to this game. Finally I decided to clone it using javascript and see if you can solve the same.

Toggle

PS: Tested on all browsers except IE

Modes:
I included a custom mode in this game. Original game had only the classic mode.

  • Classic Mode: When you click a square in classic mode, that clicked square and all neighbourhood squares toggle their colors (excluding diagonal neighbours).
  • Custom Mode: In custom mode, when you click a square, the clicked square and all neighbourhood squares toggle their colors (including diagonal neighbours).

Rules:

  • Destination is to fill all the squares with black color.
  • Ideally game should be played in a single mode only. However I have provided an option where you can switch modes in between the game. So you are free to either play it in a single mode throughout, or switch modes as and when you feel is the requirement
  • If you are finally able to make it, click view history, copy the steps you followed to conquer this game and post it as a comment to this blog post

Source Code:
The source code consists of toggle.js and toggle.css. Find below the source code, and towards the end, find how to embed the same on your page/blog.

toggle.css

/*

  Script: toggle.css
  Author: Abhinav Singh mailsforabhinav[at]gmail[dot]com
  Website: http://abhinavsingh.com
  Code license: GNU General Public License v3

*/
.box {
  border:1px solid #000000;
  cursor:pointer;
}
.boxColored {
  border:1px solid #FFFFFF;
  background: #000000;
  cursor:pointer;
}

toggle.js

/*

  Script: toggle.js
  Author: Abhinav Singh mailsforabhinav[at]gmail[dot]com
  Website: http://abhinavsingh.com
  Code license: GNU General Public License v3

*/
Array.prototype.unique = function(b) {
  var a = [], i, l = this.length;
  for(i=0; i<l; i++) {
    if(a.indexOf(this[i], 0, b) < 0) { a.push(this[i]); }
  }
  return a;
};
var $ = {
  html: '',
  cid: 'container',
  xBoxes: 5,
  yBoxes: 5,
  boxWidth: 50,
  boxHeight: 50,
  version: 'classic',
  history: Array(),
  init: function() {
    var tmp = '';
    for(var i=0;i<this.yBoxes;i++) {
      for(var j=0;j<this.xBoxes;j++) {
        tmp += '<div onclick="$.toggle(this)" name="box" id="box-'+i+'-'+j+'" style="position:absolute; left:'+(j*this.boxWidth)+'px; top:'+(i*this.boxHeight)+'px; height:'+this.boxHeight+'px; width:'+this.boxWidth+'px" class="box">';
        tmp += '</div>';
      }
    }
    tmp += '<div style="position:absolute; top:'+((this.yBoxes*this.boxHeight)+5)+'px; left:0px;">';
    tmp += '  <b style="float:left">Version:</b> ';
    tmp += '  <select style="float:left" id="version" onchange="$.version = this.options[this.selectedIndex].value;">';
    tmp += '    <option value="classic">Classic</option>';
    tmp += '    <option value="custom">Custom</option>';
    tmp += '  </select>';
    tmp += '  <div style="float:left; padding-left:20px; text-decoration:underline; cursor:pointer;" onclick="alert($.history.unique())">View History</div>';
    tmp += '</div>';
    document.getElementById(this.cid).innerHTML = tmp;
  },
  toggle: function(t) {
    this.history.push((t.id.toString()).replace('box-',''));
    id = t.id; ids = id.split("-");
    xid = parseInt(ids[1]); yid = parseInt(ids[2]);

    for(var l=xid-1; l<=xid+1; l++) {
      for(var m=yid-1; m<=yid+1; m++) {
        if(l>=0 && l<this.xBoxes && m>=0 && m<this.yBoxes) {
          if(this.version == "classic") {
            if((l == xid-1 && m == yid-1) || (l == xid+1 && m == yid-1) || (l == xid-1 && m == yid+1) || (l == xid+1 && m == yid+1)) {

            }
            else {
              var boxid = document.getElementById('box-'+l+'-'+m);
              if(boxid.className == "box") boxid.className = "boxColored";
              else if(boxid.className == "boxColored") boxid.className = "box";
            }
          }
          if(this.version == "custom") {
            var boxid = document.getElementById('box-'+l+'-'+m);
            if(boxid.className == "box") boxid.className = "boxColored";
            else if(boxid.className == "boxColored") boxid.className = "box";
          }
        }
      }
    }
  }
}
$.init();

How to embed toggle on my page/blog?

  • Simply copy the js and css files from above or download them from here: toggle.js, toggle.css
  • Include the two on your page/blog. toggle.js automatically calls up $.init() on load. $.init() method will look for a div with id $.cid on you page, and populate the game in the same div. Hence make sure you have a div with id $.cid on the page.
  • $.xBoxes, $.yBoxes, $.boxWidth, $.boxHeight are a few tunable parameters you may want to play with

Happy Toggling!

SEO Analyzer v 1.2 – Adding support for Bing along with Google and Yahoo

On May 28, 2009 Microsoft announced Bing which has now replaced Live search. And within 2 week of it’s release, Bing seems to have leapfrog Yahoo search in U.S.

With Bing coming up as a strong contender to Google and Yahoo search engines, I have added support for Bing in SEO Analyzer v 1.2. This will enable you to analyze a site’s ranking for a particular keyword on Bing search engine, along with Yahoo and Google search engines.

seoanalyzer-bing-support

SEO Analyzer Future Roadmap:

  • Saving reports on spreadsheets
  • Comparing two sites for a list of keywords
  • Keyword density extraction tool

Happy SEO Analysis!

Getting Google Page Rank using Javascript – For Adobe AIR Apps

Last week while working on SEO Analyzer v 1.1 desktop application, I faced a challenge of getting google page rank for a particular site using javascript. I am not sure if someone has already done this before, but I thought of sharing this javascript code for all adobe air and web developers out there.

googlepagerank.js

var googlepagerank = {
	hexdec: function(hex_string) {
	    hex_string = (hex_string+'').replace(/[^a-f0-9]/gi, '');
	    return parseInt(hex_string, 16);
	},
	count: function( mixed_var, mode ) {
	    var key, cnt = 0;
	    if( mode == 'COUNT_RECURSIVE' ) mode = 1;
	    if( mode != 1 ) mode = 0;
	    for (key in mixed_var){
	        cnt++;
	        if( mode==1 && mixed_var[key] && (mixed_var[key].constructor === Array || mixed_var[key].constructor === Object) ){
	            cnt += count(mixed_var[key], 1);
	        }
	    }
	    return cnt;
	},
	sizeof: function( mixed_var, mode ) {
	    return googlepagerank.count( mixed_var, mode );
	},
	ord: function(string) {
	    return (string+'').charCodeAt(0);
	},
	strlen: function(string) {
	    var str = string+'';
	    var i = 0, chr = '', lgth = 0;
	    var getWholeChar = function (str, i) {
	        var code = str.charCodeAt(i);
	        var next = '', prev = '';
	        if (0xD800 <= code && code <= 0xDBFF) {
	            if (str.length <= (i+1))  {
	                throw 'High surrogate without following low surrogate';
	            }
	            next = str.charCodeAt(i+1);
	            if (0xDC00 > next || next > 0xDFFF) {
	                throw 'High surrogate without following low surrogate';
	            }
	            return str[i]+str[i+1];
	        } else if (0xDC00 <= code && code <= 0xDFFF) {
	            if (i === 0) {
	                throw 'Low surrogate without preceding high surrogate';
	            }
	            prev = str.charCodeAt(i-1);
	            if (0xD800 > prev || prev > 0xDBFF) {
	                throw 'Low surrogate without preceding high surrogate';
	            }
	            return false;
	        }
	        return str[i];
	    };
	    for (i=0, lgth=0; i < str.length; i++) {
	        if ((chr = getWholeChar(str, i)) === false) {
	            continue;
	        }
	        lgth++;
	    }
	    return lgth;
	},
	substr: function(f_string,f_start,f_length ) {
			f_string += '';
			if(f_start < 0) {
					f_start += f_string.length;
			}
			if(f_length == undefined) {
					f_length = f_string.length;
			} else if(f_length < 0){
					f_length += f_string.length;
			} else {
					f_length += f_start;
			}
			if(f_length < f_start) {
					f_length = f_start;
			}
			return f_string.substring(f_start, f_length);
	},
	zeroFill: function(a, b){
		z = googlepagerank.hexdec(80000000);
		if (z & a) {
			a = (a >> 1);
			a &= (~ z);
			a |= 0x40000000;
			a = (a >> (b - 1));
		}
		else {
			a = (a >> b);
		}
		return a;
	},
	mix: function(a, b, c){
		a -= b; a -= c; a ^= (this.zeroFill(c, 13));
		b -= c; b -= a; b ^= (a << 8);
		c -= a; c -= b; c ^= (this.zeroFill(b, 13));
		a -= b; a -= c; a ^= (this.zeroFill(c, 12));
		b -= c; b -= a; b ^= (a << 16);
		c -= a; c -= b; c ^= (this.zeroFill(b, 5));
		a -= b; a -= c; a ^= (this.zeroFill(c, 3));
		b -= c; b -= a; b ^= (a << 10);
		c -= a; c -= b; c ^= (this.zeroFill(b, 15));
		return new Array(a, b, c);
	},
	ch: function(url){
		length = googlepagerank.sizeof(url);
		a = 0x9E3779B9;
		b = 0x9E3779B9;
		c = 0xE6359A60;
		k = 0;
		len = length;
		while (len >= 12) {
			a += (url[k + 0] + (url[k + 1] << 8) + (url[k + 2] << 16) + (url[k + 3] << 24));
			b += (url[k + 4] + (url[k + 5] << 8) + (url[k + 6] << 16) + (url[k + 7] << 24));
			c += (url[k + 8] + (url[k + 9] << 8) + (url[k + 10] << 16) + (url[k + 11] << 24));
			m = this.mix(a, b, c);
			a = m[0]; b = m[1]; c = m[2];
			k += 12;
			len -= 12;
		}
		c += length;
		switch (len) {
			case 11: c += (url[k + 10] << 24);
			case 10: c += (url[k + 9] << 16);
			case 9:  c += (url[k + 8] << 8);
			case 8:  b += (url[k + 7] << 24);
			case 7:  b += (url[k + 6] << 16);
			case 6:  b += (url[k + 5] << 8);
			case 5:  b += (url[k + 4]);
			case 4:  a += (url[k + 3] << 24);
			case 3:  a += (url[k + 2] << 16);
			case 2:  a += (url[k + 1] << 8);
			case 1:  a += (url[k + 0]);
		}
		m = this.mix(a, b, c);
		return m[2];
	},
	strord: function(string){
		var result = new Array();
		for (i = 0; i < googlepagerank.strlen(string); i++) {
			result[i] = googlepagerank.ord(string[i]);
		}
		return result;
	},
	gethash: function(url) {
		return this.ch(this.strord("info:" + url));
	},
	getpr: function(baseurl) {
		var query = "";
		query += "http://toolbarqueries.google.com/search";
		query += "?client=navclient-auto";
		query += "&hl=en";
		query += "&ch=6"+googlepagerank.gethash(baseurl);
		query += "&ie=UTF-8";
		query += "&oe=UTF-8";
		query += "&features=Rank";
		query += "&q=info:"+baseurl;

		var req = new XMLHttpRequest();
		req.onreadystatechange = function(){
			if (req.readyState == 4) {
				var str = req.responseText;
				var pagerank = googlepagerank.substr(str, 9, 2);
				alert(pagerank);
			}
		}
		req.open('GET', query, true);
		req.send(null);
	}
}

How to use script in an adobe air application


	
        Google Page Rank
        
        
		
	
    

    

How to use script in an web applications
This script cannot be used directly for web applications, mainly because of cross domain XHR limitations. However the script can be modified to use with proxy script provided at developer.yahoo.com

Please Note: Getting google page rankings is/might be illegal as per google's policy. If you use this script from webservers, possibilities are google might block your server IP Address. However with adobe air applications (desktop apps), risk is minimized.

Enjoy and Do leave a comment.

SEO Analyzer – Version 1.1 – What’s New?

While SEO Analyzer v 1.0 focused primarily on getting page ranks and analyzing back links to your site url, SEO Analyzer v 1.1 adds another feather to the cap. It allows you to achieve following analysis:

Feature List:

  • Get google page rank for input site url
  • Get all backlinks to the input site url
  • Get the exact href tag (rel=”nofollow”, target=”_blank”, etc) used by the back linking sites
  • Get google page rank for the back linking sites
  • Get google and yahoo ranking for the input site for keyword(s)
  • And a lot more ….

Installation:

Demonstration:

Here in pictures is a small demonstration of what all can be achieved with SEO Analyzer 1.1:

1. Start SEO Analyzer v 1.1
seoanalyzerv11-1

2. Enter Site url you want to analyze and keywords (optional) for which you want to analyze
seoanalyzerv11-2

3. Hit Enter or Analyze to start analysis – All backlinks
seoanalyzerv11-3

4. Get input site’s ranking for analyzed keywords
seoanalyzerv11-4

To-Do’s:

  • Export the keyword analysis results as CSV file
  • Compare keyword analysis results for two sites
  • Find appropriate keywords for a particular web page

Enjoy SEO Analysis,
Awaiting Your Feedbacks 😀

Introducing SEO Analyzer

SEO Analyzer is a desktop based application build specifically for page rank checking and link analysis for seo purpose. It is built using Adobe AIR.

Note: SEO Analyzer v 1.1 is out. Read more about it here

Installation:

Features:
The tool currently provides the following features:

  • Retrieve Page Rank for a particular web url
  • Get all incoming links for the entered url
  • Get page rank for the sites linking back to the entered url

seoanalyzer

Suggestions for future enhancements are welcomed.

Using Image Maps in Javascript – A Demo Application

Past month I was busy with project back in office, JAXL web chat client and photolog – a custom made wp-plugin for converting it into a photo blog. As I am close to finish them all, I am back to blogging after more than a month.

Here I would like to demonstrate a cool technique which I explored while working for the india elections site. We decided to have a cool india map where we could show data for each state. Though flash is always the best method to go with for such applications (and finally we did it with flash :D) I wanted to explore if we can do the same thing efficiently with javascript.

Not being a javascript expert, I first moved to various friends expert in javascript and they told me about image map technique in javascript. I did some research, read various blog posts and finally came up with the application below. (I will be demonstrating the application and challenges you will face while building such application, for basics of image map kindly search for it, you will get many tutorials on web on javascript image maps)

Challenges I faced:
Javascript image map technique utilizes the (x,y) co-ordinates which you provide to javascript. Depending upon the input (x,y) co-ordinates, javascript will build an image map over the image. When I was building this application, the biggest challenge was how to get the pixel by pixel border for each and every state. I don’t know dreamweaver, photoshop or any other software which can tell me this. Moreover, even if I knew, I was not sure how much effort will it require to note down each and every pixel lying on the state borders. Finally to counter this problem I came up with a javascript, which makes this task 99% easier.

Using javascript to detect image borders pixel by pixel:
Javascript image map requires pixel to be given in the following format (x1,y1,x2,y2,….,xn,yn). So I wrote a javascript which will automatically generate the current pixels of your mouse, in above format as you move it.

Lets try this out. Click here to open this javascript hack. Click CNTR++ (i.e. zoom into your browser) as many times as you can. You will now have a very enlarged and a bit blurred india map in front of you. But good thing is you can clearly move your mouse over state borders. This javascript gets enabled on your 1st mouse click on the map. So choose a state and click your mouse on its border. Now start moving your mouse on this state’s border till you come back to the same point, where you started. Click 2nd time on that point to disable this javascript function and WOW! Below you have the border pixel positions in the required format to be used straight with javascript image maps. Copy and paste that to get a final image map like this.

View the final image map file by clicking here.

edges.html


  
    
  
  
    

Study the source of the final application by visiting here and use the above javascript to extract edge information of your map file. I know there are some questions unanswered but I will wait for your comments to answer them 😀

PS: By demoing my application here, I permit you to use this sample code for any purpose. However I do not permit you to copy paste the indian map images for your personal or professional sites or works.

A Light Weight Javascript calendar for your websites and blogs

Hello Everyone,

Well you can find a lot of such calendars out there in the market, and this is yet another one for you. I made this to embed with my scheduling calendar which you can find here. Calendar with auto notification and demo

Check out the source code from the google code repository:
svn checkout http://abhinavsingh.googlecode.com/svn/trunk/ abhinavsingh-read-only