ViralPatel.net » JavaScript

STOP SOPA JQuery Plugin

Viral Patel — Wed, 18 Jan 2012 11:48:30 +0000

Right now, Internet is experiencing the biggest protest since its inception. We have seen people protesting against Companies, Government, Dictators etc. Also Internet has become their voices in form of Twitter & Facebook.

But today we saw something completely new. Major websites such as Wikipedia and Google are openly demonstrating their protest against new legislation bills SOPA and PIPA which is right now being voted in U.S. Congress. The Senate will begin voting on January 24th.

Well, if you do support the STOPSOPA cause here is a coolest thing to do. Add a black colored STOPSOPA banner on your website!!!!

Here’s is the deal. I have created a simple JQuery plugin which you can include at the end of your website. And voila!!! It adds black color banner on top of your webpage saying “I support #STOPSOPA campaign. Do you?”

Just include below javascript at the end of webpage:

That’s All!!

Please note that I haven’t tested this plugin for cross browsers. Let me know in case you find difficulties in adding.

Demo

StopSOPA WordPress Plugin

I have quickly assemble a small wordpress plugin to add StopSOPA message on your blog. Just in case you dont want to hack your lovely theme and add those javascripts, you can simply enable this plugin and voila; you have your own StopSOPA Blackout message.

Update: The StopSOPA plugin is now available at WordPress Plugin Directory: StopSOPA WP Plugin

Download StopSOPA Plugin

Facebook Style Scroll Fixed Header in JQuery

Viral Patel — Wed, 11 Jan 2012 12:22:41 +0000

While doing some UI changes of a website, we had to implement a FIX header which remains fix on top of screen while scrolling. Facebook has a similar header which remains on top of content.

Now for this, there are number of jQuery plugins available out there! But in our case we weren’t allowed to add any new plugins to the technology stack of application (I know it sucks ). So here is a small JQuery based solution to make a DIV of header fixed on top of the screen while scrolling.

Related: Mouse Scroll Events in JQuery

The HTML

Below is the HTML code. It contain a simple div #header which we want to freeze at the top. Note that we have included JQuery directly from jquery.com site (In my application we have included older version of jquery from out tech stack).

Scroll Fixed Header like Facebook in JQuery - viralpatel.net

Some dumb text to add scrolling in page

Some more dumb text to add scrolling in page

In above HTML, we added few lines “Some dumb text to add…” just to make page scrollable.

The JQuery

The JQuery code is pretty straight forward. Take a look:

We have added an event listener to “scroll” event. This handler function gets called each time scroll event is fired in browser.

Now we select the header element (highlighted in above code) and simply do some position stuff. We make the header div’s position fixed of static depending upon the state of scroll position. Also the top attribute is set to 0px in case we want to make it fix, when page is scrolled down.

Online Demo

Demo Download

Create ZIP Files in JavaScript

Viral Patel — Tue, 10 Jan 2012 08:44:11 +0000

Zip is a very useful file type if I must say most used. It is the most used file format for data compression and archiving. There are number utilities available to create/generate Zip file. Also most of the programming languages comes up with API supporting to generate Zip files. I have written a couple of articles for zipping/unzipping files in Java and PHP.

While browsing internet, I came up to a very interesting website http://jszip.stuartk.co.uk/. This is JavaScript based API to generate Zip files on the fly! It’s very simple to use. All you need to do is to include the jszip javascript file in your HTML document and call its API.

Let us see how to generate a simple ZIP file in JavaScript.

Hello world ZIP in JavaScript

Let us create a helloworld ZIP file which contains two text files, hello1.txt and hello2.txt.

Step 1. Import jszip JavaScript

Include the jszip javascript file in the HTML document where you want to generate ZIP files. You can download the jszip package and include it in HTML or directly include the jszip javascript through git repository.

Step 2. Generate Hello world ZIP

Following code snippet is HTML file which contains Javascript code to generate ZIP file.

In above code snippet, we have a button “Create Zip” which calls javascript function create_zip(). This function calls jszip API to generate ZIP file.

Online Demo

Check the online demo.

Demo Download

Filename Problem

If you have tried above demo in Firefox or Safari, you may have noticed the file that is generated has weird name: e.g. b77AewqA7.zip.part. This is because of existing bugs 367231 and 532230. However jszip comes with a unique workaround of this problem by using Downloadify.

zip = new JSZip();
zip.add("Hello.", "hello.txt");
Downloadify.create('downloadify',{
...
  data: function(){
    return zip.generate();
  },
...
  dataType: 'base64'
});

Hope this basic demo will help you get going with Client side ZIP file creation in JavaScript.

Create a Clearable TextBox with jQuery

Viral Patel — Wed, 23 Feb 2011 23:50:54 +0000

Recently I came across a wonderful article by David Walsh on Clearable Textboxes with Dojo Toolkit [link]. This is a simple implementation where a clear button (x) added in a textbox which lets user to clear the content of the textbox. I have seen this simple feature in many websites and feel its very useful to have. It increase the usability of form.

I thought to implement the same feature using jQuery. Here is a simple plugin that I wrote to add clearable feature to any textbox in your HTML form. All you need is to call clearable() method on the textbox. For example.

...
...



...
...

But by the definition the .text() returns all the text inside an element. What if you have an element which contains child elements and you want text of only the selected element ignoring all the child elements?

For example: Here we have a DIV which has text “A quick brown fox” and also contain a child DIV which has text “jumps over a lazy dog!”


	A quick brown fox
	
		jumps over a lazy dog!

What if you just want “A quick brown fox” and wants to ignore all the child element? Well, here is a simple solution using jQuery.

We clone the element that you want text of, then remove all the child elements from this cloned element and then returns the text of element.

I have written a small jQuery plugin “justtext” which you can use to get the text of element and ignore all child elements. Here is the code of justtext plugin.

jQuery.fn.justtext = function() {

	return $(this)	.clone()
			.children()
			.remove()
			.end()
			.text();

};

So the usage is just by calling justtext() method on any element.





	A quick brown fox
	
		jumps over a lazy dog!

Online Demo

Online Demo Link

Dynamically shortened Text with “Show More” link using jQuery

Viral Patel — Tue, 28 Dec 2010 12:40:07 +0000

Facebook user updates has a great functionality. If the comment text is larger than few characters, the extra words are hide and a show more link is presented to user. This way you can keep long text out of the view to user and stop the cluttering of page. Also interested users can click on more link and see the full content.

Here is a simple tutorial to achieve this using jQuery / Javascript.

The HTML

Below is the sample text. Each text is wrapped in a DIV tag. Note that we have added a class “more” in each div. This class will decide if a text needs to be shortened and show more link showed or not.


	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Vestibulum laoreet, nunc eget laoreet sagittis,
	quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
	Duis eget nisl orci. Aliquam mattis purus non mauris
	blandit id luctus felis convallis.
	Integer varius egestas vestibulum.
	Nullam a dolor arcu, ac tempor elit. Donec.


	Duis nisl nibh, egestas at fermentum at, viverra et purus.
	Maecenas lobortis odio id sapien facilisis elementum.
	Curabitur et magna justo, et gravida augue.
	Sed tristique pellentesque arcu quis tempor.


	consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
	Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
	Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.

The CSS

Below is the CSS code for our example. Note the class “.morecontent span” is hidden. The extra text from the content is wrapped in this span and is hidden at time of page loading.

a {
	color: #0254EB
}
a:visited {
	color: #0254EB
}
a.morelink {
	text-decoration:none;
	outline: none;
}
.morecontent span {
	display: none;
}
.comment {
	width: 400px;
	background-color: #f0f0f0;
	margin: 10px;
}

The Javascript

Below is the Javascript code which iterate through each DIV tags with class “more” and split the text in two. First half is showed to user and second is made hidden with a link “more..”.

You can change the behaviour by changing following js variables.

showChar: Total characters to show to user. If the content is more then showChar, it will be split into two halves and first one will be showed to user.
ellipsestext: The text displayed before “more” link. Default is “…”
moretext: The text shown in more link. Default is “more”. You can change to “>>”
lesstext: The text shown in less link. Default is “less”. You can change to “<<"

$(document).ready(function() {
	var showChar = 100;
	var ellipsestext = "...";
	var moretext = "more";
	var lesstext = "less";
	$('.more').each(function() {
		var content = $(this).html();

		if(content.length > showChar) {

			var c = content.substr(0, showChar);
			var h = content.substr(showChar-1, content.length - showChar);

			var html = c + '' + ellipsestext+ ' ' + h + '  ' + moretext + '';

			$(this).html(html);
		}

	});

	$(".morelink").click(function(){
		if($(this).hasClass("less")) {
			$(this).removeClass("less");
			$(this).html(moretext);
		} else {
			$(this).addClass("less");
			$(this).html(lesstext);
		}
		$(this).parent().prev().toggle();
		$(this).prev().toggle();
		return false;
	});
});

Online Demo

Click here to view demo

Download Source Code

Click here to download (ZIP, 2KB)

Update:
The above code is modified into jQuery plugin. Thanks to Jay. Following is the code.

jQuery Plugin

Code

jQuery.fn.shorten = function(settings) {
  var config = {
    showChars : 100,
    ellipsesText : "...",
    moreText : "more",
    lessText : "less"
  };

  if (settings) {
    $.extend(config, settings);
  }

  $('.morelink').live('click', function() {
    var $this = $(this);
    if ($this.hasClass('less')) {
      $this.removeClass('less');
      $this.html(config.moreText);
    } else {
      $this.addClass('less');
      $this.html(config.lessText);
    }
    $this.parent().prev().toggle();
    $this.prev().toggle();
    return false;
  });

  return this.each(function() {
    var $this = $(this);

    var content = $this.html();
    if (content.length > config.showChars) {
      var c = content.substr(0, config.showChars);
      var h = content.substr(config.showChars , content.length - config.showChars);
      var html = c + '' + config.ellipsesText + ' ' + h + '  ' + config.moreText + '';
      $this.html(html);
      $(".morecontent span").hide();
    }
  });
}

Download

Click to login jQuery Shorten plugin

Usage

Step 1: Include the jQuery plugin in your HTML

Step 2: Add the code to shorten any DIV content. In below example we are shortening DIV with class “comment”.


	This is a long comment text.
	This is a long comment text.
	This is a long comment text.
	This is a long comment text. This is a long comment text.

You may want to pass the parameters to shorten() method and override the default ones.

$(".comment").shorten({
	"showChars" : 200
});

$(".comment").shorten({
	"showChars" : 150,
	"moreText"	: "See More",
});

$(".comment").shorten({
	"showChars" : 50,
	"moreText"	: "See More",
	"lessText"	: "Less",
});

jQuery Ajax – Handling unauthenticated requests via Ajax

Viral Patel — Fri, 24 Dec 2010 10:12:54 +0000

Since few days I am working on a small project where I have to deal with lot of Ajax requests. The whole UI is designed such that only appropriate parts are refreshed with required information through Ajax.

The application needs user authentication before accessing any part of it. Although this is easy to achieve in any MVC based framework, its a whole new thing when dealing with Ajax requests.

In a normal request/response based MVC application, if a user is not authenticated and tries to view a webpage, the request is redirected to the Login page. Almost all MVC framework comes with this functionality. When the request gets redirected to Login page, the Status Code 403 (Forbidden) is set in HTTP header. 403 Forbidden is a HTTP status code returned by a web server when a user agent requests a resource that the server does not allow them to.

But when using Ajax for getting the content, if the request is redirected to Login page, it is difficult to handle this scenario.

Here is a simplest solution that can be implemented in your Ajax based application. Just add this code in your Javascript file.

    $(document).ready(
        function() {
            $("body").ajaxError(
                function(e,request) {
                    if (request.status == 403) {
                        window.location.reload();
                        //window.location.href = "/myapp/login";
                    }
                }
            );
        }
    );

In above code, we have added a handler function to ajaxError which gets called by jQuery whenever there is an error in the HTTP Response. The function checks if the status code is 403, if it is then it simply tries to reload the URL. This generate a new request to the server which automatically gets redirected to the login page. The only disadvantage of reloading the page is that you generate a new HTTP request which server has to handle and redirect to Login page.

You may wish to directly redirect user to login page from client code itself. Check the Line XX where we are changing the windows location and redirecting user. I personally dont like this method as you have to hard code the path for login page in javascript. I prefer using the previous solution to reload the page.

I am sure there must be several way of implementing this in Javascript. Share yours if you think you have a better one

Multiple Checkbox Select/Deselect using jQuery – Tutorial with Example

Viral Patel — Thu, 11 Nov 2010 07:08:34 +0000

Almost all the user interfaces that I have created had this functionality of selecting multiple items from a list to process them or delete them. Although its very very easy to implement this functionality in Javascript, using jQuery for this is real fun. I will show you a simple implementation of adding multiple checkbox select and deselect functionality to any webpage. We will have a table with some data in it and checkbox in each row. There will be a select all checkbox in the header of the table. If user select/deselect the selectall checkbox, all the checkbox in table will get selected or deselected accordingly. Now one more thing we would like here to add is, suppose user select all the checkbox one by one then the selectall checkbox should be automatically gets selected. And if user click selectall first and then unchecks any of the checkbox, then the selectall also should be unchecked automatically.

The HTML



	
	Multiple Checkbox Select/Deselect - DEMO


	Multiple Checkbox Select/Deselect - DEMO


	
	Cell phone
	Rating


	
	BlackBerry Bold 9650
	2/5


	
	Samsung Galaxy
	3.5/5


	
	Droid X
	4.5/5


	
	HTC Desire
	3/5


	
	Apple iPhone 4
	5/5

	Cell phone	Rating
	BlackBerry Bold 9650	2/5
	Samsung Galaxy	3.5/5
	Droid X	4.5/5
	HTC Desire	3/5
	Apple iPhone 4	5/5

The jQuery Code

Add following jQuery code in HEAD section of above HTML

Here in above code at line 05, we register a handler on click of selectall checkbox. On click of this checkbox, we check/uncheck all checkbox in the datatable.
Also check the link 13, where we check the selectall checkbox, if all the checkbox are selected manually. To get more idea, play with the below demo.

Online Demo

Click here to view Online Demo

Understanding jQuery animate() function

Viral Patel — Tue, 09 Mar 2010 12:38:15 +0000

jQuery animate() function is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple. First lets check the syntax of this function.

.animate( properties, [ duration ], [ easing ], [ callback ] )

properties: A map of CSS properties that the animation will move toward.
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
callback: A function to call once the animation is complete.

.animate( properties, options )

properties: A map of CSS properties that the animation will move toward.
options: A map of additional options to pass to the method. Supported keys:
- duration: A string or number determining how long the animation will run.
- easing: A string indicating which easing function to use for the transition.
- complete: A function to call once the animation is complete.
- step: A function to be called after each step of the animation.
- queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.
- specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

Lets learn the animate() function with set of examples.

First include the jQuery javascript library in your html file. Add following in your html tag:

For all the demos, we will use a sample DIV tag for animating. Following is the div code and its stylesheet.



Animate Height

Animate height/width

Animating height and width in jQuery is very easy. Lets assume you have a DIV that you want to animate i.e. increase the height.

$("#animate").click(function() {
	$("#content").animate(
			{"height": "80px"},
			"fast");
});

Demo 1:

Also following will be the code to animate Width of the element.

$("#animate").click(function() {
	$("#content").animate(
			{"width": "350px"},
			"fast");
});

Demo 2:

Animate opacity

$("#animate").click(function() {
	$("#content").animate(
			{"opacity": "0.15"},
			"slow");
});

Demo 3:

Moving elements using animate()




Move

$("#right").click(function() {
	$("#content").animate(
			{"left": "+=50px"},
			"slow");
});
$("#left").click(function() {
	$("#content").animate(
			{"left": "-=50px"},
			"slow");
});

Demo 4:

Callback Function

Callback functions are very useful to perform certain activity when the animation is completed. Also note here when multiple elements are mapped with the animation and we have specified a callback function. Then the callback will get called for each of the element.

Let us see an example where we use callback function to display a message when animation is completed.

$("#animate").click(function() {
	$("#content").animate(
			{"height": "100px", "width": "250px"},
			"slow", function(){
				$(this).html("Animation Completed");
			});
});

Demo 5:

Combine multiple animations

You may want to combine multiple animations. Following are few demos will help you understanding this.

Example 1: Animate both height and width at same time.
This example is pretty straight forward. You can animate both height and width at same time by specifying it in animate function. For example: In below code we specified height and width value in animate function.

$("#animate").click(function() {
	$("#content").animate(
			{"height": "100px", "width": "250px"},
			"slow", );
});

Example 2: Queuing the animations.

$("#animate").click(function() {
	$("#content")
		.animate({"height": "100px"}, 500)
		.animate({"width": "250px"}, 500);
});

Demo 6:

Queuing of Events

In above demo (Demo 6) we saw that when we queued up the events with multiple .animate() method call, the animation is actually queued up. i.e. it completes the first animation and then proceed with next. Let see an example were we use queue parameter to disable queuing. In following example we have set parameter queue to false. The code is exactly same as demo 6, only change we added is queue = false. Also note that queue parameter is added with second argument.

$("#animate").click(function() {
	$("#content")
		.animate({"height": "100px"}, {"queue": false, "duration": 500})
		.animate({"width": "250px"}, 500);
});

Demo 7:

JavaScript Array Remove an Element

Viral Patel — Wed, 27 Jan 2010 09:59:50 +0000

Following is an example of JavaScript where we will remove elements from an array with Index and Value. There are different methods in JavaScript that we can use to remove elements. We will use splice() method.

Remove Array element by Index

First we will see an example were we will remove array element by its index. For this we can define a generic function removeByIndex().

function removeByIndex(arr, index) {
	arr.splice(index, 1);
}

In above code we used javascript splice() method to remove element at an index. splice() method takes two argument. First is the index at which you want to remove element and second is number of elements to be removed. In our case it is 1.

To test the above code lets define a simple array and remove one of the element.

test = new Array();
test[0] = 'Apple';
test[1] = 'Ball';
test[2] = 'Cat';
test[3] = 'Dog';
alert("Array before removing elements: "+test);
removeByIndex(test, 2);
alert("Array after removing elements: "+test);

Also you may want to define removeByIndex method with an array so that you call it directly. For example, in following example, we have define an array test and its method removeByIndex().

test = new Array();
//define removeByIndex method as part of the array
Array.prototype.removeByIndex = function(index) {
	this.splice(index, 1);
}
test[0] = 'Apple';
test[1] = 'Ball';
test[2] = 'Cat';
test[3] = 'Dog';
alert("Array before removing elements: "+test);
test.removeByIndex(2);
alert("Array after removing elements: "+test);

Remove Array element by Value

You may want to remove array element by its value and not index. This can be easily done by iterating through it and comparing the values, if a match is found we can remove that element by splice() method.

function removeByValue(arr, val) {
	for(var i=0; iThe above code can be written as part of array also:
test = new Array();
Array.prototype.removeByValue = function(val) {
	for(var i=0; iEnjoy…
Related Posts
Multiple Checkbox Select/Deselect using jQuery – Tutorial with Example
Creating a dynamic menu-planning page and shopping list
Dynamically add button, textbox, input, radio elements in html form using JavaScript.
Calling JavaScript function from String
Increase performance of website by compressing JavaScript.
How to: Capture browser close button event or exiting the page in javascript.
Dynamic combobox-listbox-drop-down using javascript

ViralPatel.net » JavaScript

STOP SOPA JQuery Plugin

StopSOPA WordPress Plugin

Related Posts

Facebook Style Scroll Fixed Header in JQuery

The HTML

Scroll Fix Header like Facebook in JQuery

The JQuery

Online Demo

Related Posts

Create ZIP Files in JavaScript

Hello world ZIP in JavaScript

Step 1. Import jszip JavaScript

Step 2. Generate Hello world ZIP

Online Demo

Filename Problem

Related Posts

Create a Clearable TextBox with jQuery

Online Demo

Related Posts

Dynamically shortened Text with “Show More” link using jQuery

The HTML

The CSS

The Javascript

Online Demo

Download Source Code

jQuery Plugin

Code

Download

Usage

Related Posts

jQuery Ajax – Handling unauthenticated requests via Ajax

Related Posts

Multiple Checkbox Select/Deselect using jQuery – Tutorial with Example

The HTML

Multiple Checkbox Select/Deselect - DEMO

The jQuery Code

Online Demo

Related Posts

Understanding jQuery animate() function

Animate height/width

Animate opacity

Moving elements using animate()

Callback Function

Combine multiple animations

Queuing of Events

Related Posts

JavaScript Array Remove an Element

Remove Array element by Index

Remove Array element by Value

Related Posts