Programming Tutorials

Could not load file or assembly 'System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The system cannot find the file specified

noreply@blogger.com (Adeel Fakhar) — Wed, 08 May 2013 10:48:00 +0000

Today i have got this asp.net nasty error, i fixed it and then decided to share it with you people. I was working on a website developed in asp.net version 2.0 but when i tried to run it through my friend's system (i had given a copy of website to him) then face this error.

To fix this error i simply installed asp.net ajax in that system and website come to life.

To solve issue without installing AJAX.NET:

Copy AjaxControlToolkit.dll and AjaxControlToolkit.pdb version 1.0.61025.0 from my system (in which asp.net ajax is installed) to ASP.NET App bin folder of my friend's system.

(i install my AjaxControlToolkit in C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\AjaxControlToolkit)

Copy System.Web.Extensions.dll (C:\WINDOWS\assembly\GAC_MSIL\System.Web.Extensions) and System.Web.Extensions.Design.dll (C:\WINDOWS\assembly\GAC_MSIL\System.Web.Extensions.Design) from my system to ASP.NET App bin folder of my friend's system.

Run the website and it's working fine.

How to avoid duplicate content in your WordPress blog

noreply@blogger.com (Adeel Fakhar) — Thu, 28 Mar 2013 09:44:00 +0000

Most of us simply know wordpress is a tool for developing blogs/websites(news based, tutorials based), they want to earn from their wordpress blog/website, they want it to rank high in google whenever user type any search query relevant to their website but when they purchase domain, install wordpress, deploy their website then never ever they compete against any search query in google, never get traffic and remain live in darkness and then they blame that it is happening due to use of wordpress, and they think lets develop website by using plain html with server side technology like php or asp.net for their dynamic purposes :)

People develop sites in wordpress and some of them earn significant revenue but most of them are even unable to come in google against any search query, any keyword. Why? This is happen because they have blacklisted in google due to duplicate content and they don’t know about it that they have been blacklisted. Another question that I think coming in your mind is that how can we get plenty of duplicate content if we write post ourselves but I want to clear your concepts that doesn’t matter you write any post yourself by unique content, still very soon you will be blacklisted due to duplicate content.

Now let me proof how you can be blacklisted due to duplicate content and from where that duplicate content is coming in your website.

All of you knows that wordpress blog contains Archive, Tags and Categories Sections. Now lets suppose I have written any post for instance in the month of march 2013, you can access that post by clicking on post title in the main page of your blog or can go to that post through Recent Posts section in your blog but my dear fellows that post is too accessible from Archive, Tags and Categories section in your blog.

Now question is how google mark it as a duplicate content? Answer is very simple, due to url. Google understand every url as a separate page, and if page is separate then content must be separate and unique. When you will click on March 2013 then the url will be http://www.yourwebsite.com/index.php/2013/03/, same issue you will find with Categories and Tags section.

Now how to avoid duplicate content in your WordPress blog?

One approach, which is foolish approach is to eliminate all these Sections from Blog, the reason why I say this as foolish approach because these all are the features of wordpress and due to these sections the user of your website can move anywhere, search any post, search post according to his interest and in response the bounce rate of your website will be significantly low.

Second approach which is professional approach is to use all these Features (Categories, Archives, Tags) in your blog but don’t allow google to index them, if google will not index it then you are 100% safe. You can safe yourself by writing following php code in the header.php file of your wordpress

<?php 

if((is_home() && ($paged < 2 )) || is_single() || is_page()){
    echo '';
} else {
    echo '';
}
?>

The best location to add this code snippet is just after <title>

Hopefully you will find this tutorial very handy. Your comments are welcome.

How to center align table or div using css

noreply@blogger.com (Adeel Fakhar) — Thu, 28 Mar 2013 06:53:00 +0000

In this tutorial we will learn how to center align div or table using css. You can center align both of these html tags by using <center> tag. However, in web browsers such as Firefox and Flock or websites which adhere to stricter standards like xHTML 1.0 Strict, align="center" will be ignored, as align attribute has deprecated in preference of styles attribute instead. For text only, align attribute can be substituted with text-align tag as a workaround, but for other elements such as image, it will continue to align to the left, and not center. Moreover, you should know how you can center align div or table using css.

By following strict web coding standard, in order to center a block-type object within another block type object, you have to use the following code on the object that you wants to be centered (i.e. on the inner object):

style="margin-left:auto; margin-right:auto;"

or,

style="margin:0 auto;"

So for aligning div tag on center, you will use following html code

This line of text will be centered

I hope you will find this tutorial very handy. Your comments are welcome.

Windows 7 Problem Steps Recorder, a screen capture tool

noreply@blogger.com (Adeel Fakhar) — Sat, 16 Mar 2013 05:57:00 +0000

In this tutorial you will get knowledge about one of the best screen capture tool available in Windows 7. The name of this tool is Problem Steps Recorder, you can use it to create step-by-step recordings of any problems you have. This is the marvelous feature of Windows 7 which Quality Assurance team can use as a substitute of the Snagit Software, which is another famous tool for screen capturing. Open Start menu and type psr.exe in Search/Run. Here launches your Problems Step Recorder:

Key Features and Functionality

It records the details of the events even your mouse clicks i.e. left and right as well.
You can add comments while recording.
It automatically takes the screenshots while you are recording.
It mentions the page links you have traversed.
It gives the detailed summary of all the events at the end.
It saves the output file in mht format which can be opened in IE.
It’s so simple that you can use and learn it yourself.

Hopefully you will find this tutorial very informative.

How to register dll

noreply@blogger.com (Adeel Fakhar) — Mon, 20 Feb 2012 17:56:00 +0000

In this programming tutorial you will learn how to register dll. It is quite easy as you just have to execute a simple command, but before knowing the command i want to tell you that you must have Administrator rights over the operating system (Windows).

You just have to run the following command

regsrv32 dllname-with-its-complete-path

you have to give dll name and its complete path where it exists, let's suppose we have a dll iTextSharp and it exists in project folder located in our D drive then the command will be

regsvr32 D:\Project\iTextSharp.dll

That's it. I hope you will find this tutorial very handy.

I love your feedback.

Uppercase and lowercase strings using jquery

noreply@blogger.com (Adeel Fakhar) — Tue, 18 Oct 2011 17:34:00 +0000

In this programming tutorial we will learn how to convert strings in uppercase and lowercase using jquery. It is not a difficult task in jquery. Jquery has two built-in functions for handling these two cases. Those two functions are .toUpperCase() and .toLowerCase(). Let's have a look over the example given below that demonstrates how to do so.

Convert string in uppercase

var name="Adeel Fakhar";//Very simple
var nameUpperCase=name.toUpperCase();

Output
ADEEL FAKHAR

Convert string in lowercase

var name="Adeel Fakhar";
var nameLowerCase=name.toLowerCase(); //Very simple

Output
adeel fakhar

So that's it. I hope you will find this tutorial very useful.

Stay tuned with nice-tutorials.blogspot.com for bundle of jquery tutorials.

I love your feedback.

Add new item in dropdown using jquery

noreply@blogger.com (Adeel Fakhar) — Tue, 18 Oct 2011 17:00:00 +0000

In this programming tutorial we will learn how to add new item in dropdown using jquery. It is quite easy in jquery. Let's have a look over the code snippet given below in which i will add a new country in dropdown when button is clicked.

Add new item in dropdown using jquery
before

After

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Add new item in dropdown using jQuery</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnClick").click(function () {
                var newCountry = $("#txtItem").val();
                if (newCountry.length > 0)
                    {
                    $("#ddlCountry").append($("<option>").val(newCountry).text(newCountry));
                    $("#txtItem").val("");
                   }
            });
        });
    </script>
</head>
<body>
    <div style="font-family:verdana;font-size:12px;">
   New Country: <input type="text" id="txtItem" />
 Country:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
 <select id="ddlCountry">
 <option value="Pakistan">Pakistan</option>
 <option value="China">China</option>
 <option value="United States">United States</option>
 </select>
        <input id="btnClick" type="button" value=" Add Country " />
    </div>
</body>
</html>

In this above mentioned example, i have a textbox, a dropdown and a button in my page. Country dropdown by default contains three countries which are Pakistan, China and United States. Now for adding new country such as Australia or india, i have written a code in document.ready(), that will execute when button's click event will be fired.

$("#ddlCountry").append($("<option>").val(newCountry).text(newCountry));

The above mentioned code snippet will dynamically add new item or in this example we can say new country to the dropdown using append() function of jquery, which is a built-in function in jquery.

So that's it. This is the way to add new item or element in dropdown using jquery.
I love your feedback.

Install php on windows server 2008 R2

noreply@blogger.com (Adeel Fakhar) — Mon, 17 Oct 2011 17:36:00 +0000

In this programming tutorial we will learn how to install php on windows server 2008 R2. Couple of weeks ago one of my colleague asked me to install php on windows server 2008 R2 as he had to deploy a website and I have done it successfully without any problem. Let’s have a look over how to accomplish our task.

Simply go to this tutorial Install PHP on Windows 7 with IIS 7 via FastCGI and that's it. You just have to repeat the steps that you have performed on Windows 7 in order to accomplish this task.

Note:-
Depending on your location you can set a specific date.timezone value by setting the date.timezone property in php.ini file:
date.timezone = "US/Central"

Don't forget to uncomment the date.timezone by removing its preceding semicolon.

So that's it.
Your feedback gives me energy.

Learn jquery from beginners to advanced level - part 3 (Final Part)

noreply@blogger.com (Adeel Fakhar) — Mon, 17 Oct 2011 16:46:00 +0000

Finally I am writing the third and last tutorial of this tutorial series. Again I am saying if you are new visitor and haven't read my first two tutorial of this series then please read those tutorials first. Click to read Part 1 and click to read Part 2. One thing I want to ensure you is that if you read and understand all of these three tutorials then you can say yourself the expert of jquery, and you can do any task in jquery with minimum effort. Ok. Now let's start right from there, where we were.

Events

When the DOM is ready…

$(document).ready(function(){
 //Your code will come here
});

Fires when the document is ready for programming.
Uses advanced listeners for detecting.
window.onload() is a fallback.

Attach Event

// execute always
$("div").bind("click", fn);
// execute only once
$("div").one("click", fn);

Possible event values:

blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error (or any custom event)

jQuery.Event object
Detaching Events

$("div").unbind("click", fn);

(Unique ID added to every attached function)

Events Triggering

$("div").trigger("click");

Triggers browser’s event action as well. Can trigger custom events. Triggered events bubble up.

Events Helpers

// attach / trigger
elem.blur(fn) / elem.blur()
elem.focus(fn) / elem.focus()
elem.click(fn) / elem.click()
elem.change(fn) / elem.change()

And many others…

Preventing Browser Default Action

// use different triggering function
$("div").triggerHandler("click");

// prevent default action in handler
function clickHandler(e) {
 e.preventDefault();
}

// or just return false
function clickHandler(e) {return false;}

Preventing Bubbling
// stop bubbling, keep other handler
function clickHandler(e) {
 e.stopPropagation();
}

// stop bubbling and other handlers
function clickHandler(e) {
 e.stopImmediatePropagation();
}

// or just return false
function clickHandler(e) {return false;}

Live Events (Attach events to dynamically created elements)

// attach live event
("div").live("click", fn);
// detach live event
("div").die("click", fn);

Currently supported events:

click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

Effects

Showing or Hiding Element

// just show
$("div").show();
// reveal slowly, slow=600ms
$("div").show("slow");
// hide fast, fast=200ms
$("div").hide("fast");
// hide or show in 100ms $(“div”).toggle(100);

Sliding Elements

$("div").slideUp();
$("div").slideDown("fast");
$("div").slideToggle(1000);

Fading Elements

$("div").fadeIn("fast");
$("div").fadeOut("normal");
// fade to a custom opacity
$("div").fadeTo ("fast", 0.5);

Fading === changing opacity

Detecting animation completion

$("div").hide("slow", function() {
  alert("The DIV is hidden");
});

$("div").show("fast", function() {
  $(this).html("Hello jQuery");
}); // this is a current DOM element

Every effect function has a (speed, callback) overload

Custom Animation

// .animate(options, duration)
$("div").animate({
    width: "90%",
    opacity: 0.5,
    borderWidth: "5px"
     }, 1000);

Chaining Animation

$("div").animate({width: "90%"},100)
  .animate({opacity: 0.5},200)
  .animate({borderWidth: "5px"});

By default animations are queued and than performed one by one

Controlling Animations Sync

$("div")
 .animate({width: "90%"},
      {queue:false, duration:1000})
 .animate({opacity : 0.5});

The first animation will be performed immediately without queuing

AJAX with jQuery

Loading content

$("div").load("content.htm");
// passing parameters
$("#content").load("getcontent.aspx",
     {"id":"33","type":"main"});

Sending GET/POST requests

$.get("test.aspx", {id:1},
  function(data){alert(data);});

$.post("test.aspx", {id:1},
  function(data){alert(data);});

Retrieving JSON Data

$.getJSON("users.aspx", {id:1},
  function(users)
  {
   alert(users[0].name);
  });

Retrieving JS Files

$.getScript("script.js",
  function()
  {
   doSomeFunction();
  });

Extending the Library

Adding Methods

// definition
jQuery.fn.printLine = function(s) {
 return jQuery(this).each(function() {   this.append("<div>"+ s +"</div>");
 });
};
// usage
$("#log").printLine("Hello");

Closure to solve the $ issue

(function ($) {
  jQuery.fn.printLine = function(s) {
 return $(this).each(function() {    this.append("<div>"+ s +"</div>");
 });
};
})(jQuery);

Custom Selectors

$.expr[‘:’].test = function(o, i, m, s) {
// o – current object in the selection
// i – loop index in the stack
// m – meta data about your selector
// s – stack of all the elements
// return true to include the element
// return false to exclude the element
};

So that's it. I tried my level best to teach you jquery from beginners to advanced level in this series of tutorials. Now just you have to practice more and more to get a grip on jquery.

I love your feedback.

Learn jquery from beginners to advanced level - part 2

noreply@blogger.com (Adeel Fakhar) — Wed, 12 Oct 2011 04:19:00 +0000

In this programming tutorial we will learn jquery from beginners to advanced level. If you are new visitor and haven't read my first tutorial of this series then first please read the tutorial Learn jquery from beginners to advanced level - part 1. Ok. Now let's start right from there, where we were.

Selectors demo

Document Traversal

A Selector returns a pseudo array of jQuery objects

$(“div”).length

Returns number of selected elements. It is the best way to check selector.

Getting a specific DOM element

 $(“div”).get(2) or $(“div”)[2]

Returns a 2nd DOM element of the selection

Getting a specific jQuery element

$(“div”).eq(2)

Returns a 2nd jQuery element of the selection

each(fn) traverses every selected element calling fn()

var sum = 0;
$(“div.number”).each(
		function(){
		  sum += (+this.innerHTML);
		});

this – is a current DOM element

each(fn) also passes an indexer

$(“table tr”).each(
	function(i){
		if (i % 2) 
			$(this).addClass(“odd”);
	});

$(this) – convert DOM to jQuery i - index of the current element

Traversing HTML

.next(expr) 	// next sibling

.prev(expr)		// previous sibling

.siblings(expr)	// siblings

.children(expr) // children

.parent(expr) 	// parent

Check for expression

$(“table td”).each(function() {
	if ($(this).is(“:first-child”)) {
		$(this).addClass(“firstCol”);
	}
});

Find in selected

// select paragraph and then find 
// elements with class ‘header’ inside 
$(“p”).find(“.header”).show();

 // equivalent to:
$(“.header”, $(“p”)).show();

Advanced Chaining

$(“<li><span></span></li>”) // li
	.find(“span”) // span
		.html(“About Us”) // span 
		.andSelf() // span, li
			.addClass(“menu”) // span,li 
		.end() // span 
	.end() // li 
	.appendTo(“ul.main-menu”);

Get Part of Selected Result

$(“div”).slice(2, 5).not(“.green”).addClass(“middle”);

HTML Manipulation

Getting and Setting Inner Content

$(“p”).html(“<div>Hello World!</div>”);

// escape the content of div.b
$(“div.a”).text($(“div.b”).html());

Getting and Setting Values

// get the value of the checked checkbox
$(“input:checkbox:checked”).val();

// set the value of the textbox
$(“:text[name=‘txt’]”).val(“Hello”);

// select or check lists or checkboxes
$(“#lst”).val([“NY”,”IL”,”NS”]);

Handling CSS Classes

// add and remove class
$(“p”).removeClass(“blue”).addClass(“red”);

// add if absent, remove otherwise
$(“div”).toggleClass(“main”);

// test for class existance
 if ($(“div”).hasClass(“main”)) { 
// Your code will come here

}

Inserting new Elements

// select > append to the end
$(“h1”).append(“<li>Hello World</li>”);

// select > append to the beginning
$(“ul”).prepend(“<li>Hello World</li>”);

// create > append/prepend to selector

$(“<li/>”).html(“9”).appendTo(“ul”);

$(“<li/>”).html(“1”).prependTo(“ul”);

Replacing Elements

// select > replace
$(“h1”).replaceWith(“<div>Hello</div>”);

// create > replace selection
$(“<div>Hello</div>”).replaceAll(“h1”);

Replacing Elements while keeping the content

$(“h3”).each(function(){
	$(this).replaceWith(“<div>” + $(this).html() 
					+ ”</div>”);
	});

Deleting Elements

// remove all children
$(“#mainContent”).empty();

// remove selection
$(“span.names”).remove();

// change position
$(“p”).remove(“:not(.red)”).appendTo(“#main”);

Handling attributes

$(“a”).attr(“href”,”home.htm”);
// <a href=“home.htm”>…</a>

// set the same as the first one
$(“button:gt(0)”).attr(“disabled”,$(“button:eq(0)”).attr(“disabled));
// remove attribute - enable
$(“button”).removeAttr(“disabled”)

Setting multiple attributes

$(“img”).attr({
		“src” : “/images/smile.jpg”,
		“alt” : “Smile”,
		“width”  : 10,
		“height” : 10
});

CSS Manipulations

// get style
$(“div”).css(“background-color”);

// set style 
$(“div”).css(“float”, “left”);

// set multiple style properties
$(“div”).css({“color”:”blue”,
			 “padding”: “1em”
			 “margin-right”: “0”,
			 marginLeft: “10px”});

Dimensions

// get window height
var winHeight = $(window).height();

// set element height
$(“#main”).height(winHeight);

//.width() – element
//.innerWidth() – .width() + padding

//.outerWidth() – .innerWidth() + border
//.outerWidth(true) – including margin

The default unit is Pixel (px)

Positioning

// from the document
$(“div”).offset().top;

// from the parent element
$(“div”).position().left; 

// scrolling position
$(window).scrollTop();

So that's it, i try my level best to let you learn jquery from beginners to advanced level with small and handy examples. Third and Final part of this tutorial series will come soon. Stay tuned.

Your feedback always provides me lot of energy.

ASP.NET HyperLink - Set alt tag of the image

noreply@blogger.com (Adeel Fakhar) — Fri, 07 Oct 2011 18:34:00 +0000

In this programming tutorial we will learn how to set the alt tag of an image that has been set by asp.net hyperlink using its ImageUrl property which is

HyperLink.ImageUrl

Couple of days ago i am working over a project in which i am fixing the issues reported by SEO Tool Kit (use for site analysis) which is installed in IIS 7 (You can Install it in IIS 5 and IIS 6 as well). The SEO Tool kit is very much helpful if you want to check the errors and violations of the website that are damaging the ranking of your website or specific web pages in the search engine, especially in google. I got lot of violations about alt tag is missing, when i was fixing all these violations then i got an asp:Hyperlink that contains an image which alt tag was missing, i checked all the possible properties of the asp:hyperlink to give alt tag to the image, like ToolTip property but i was fail to achieve what i want, moreover the HyperLink control doesn't have an AlternateText property.

Then surfing the internet i got the solution and it was quite easy and surprised to me. The solution was to give text between starting and ending tag of the asp:hyperlink and then that text will become the alt of the image, like given below

<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/Images/proceed.gif" 
                        NavigateUrl="~/Welcome.aspx">Proceed

So that's it. The word Proceed will become the alt tag of the image located inside the hyperlink.

Stay tune with nice-tutorials.blogspot.com because in future i will write very informative and detailed tutorials about SEO Tool kit, which is used for analysis of website to improve its ranking in the major search engines. Also i will tell you how to deploy a website in windows 2008 R1, you can then open your own hosting company as well if you have servers that are capable to run the websites :). But still bottom line is to stay tune with nice-tutorials.blogspot.com

Do comment. Your feedback gives me energy.

spell checker in jquery using php

noreply@blogger.com (Adeel Fakhar) — Wed, 05 Oct 2011 17:09:00 +0000

In this programming tutorial we will learn how to perform spell checking in jquery using php. For this i will use a jquery plugin which is called jquery-spellchecker. By god, i have tried many spell checkers but there are lot of problems in them, some spell checkers that i like was not free of cost, some was not cross browser compatible then i found this spell checker which is pretty good. This jQuery plugin is used to check the spelling of a chunk of text, using google's spell checking service. The plugin also gives you the option of using pspell. If you are able to use pspell then you will have great control over your dictionary to manage spells of words. To communicate with google's api or pspell, php will be used.

The plugin comes with 2 default behaviours:

If bound to a HTML element other than textarea, the plugin will highlight the incorrectly spelt words. Clicking on those incorrect words will bring up the suggest box.
If bound to a textarea element, the plugin will add the incorrectly spelt words after the textarea. Clicking on those incorrect words will bring up the suggest box.

Server side script
As i told you above, the plugin uses PHP script that supports two type of spell checking engines: php's pspell extension for aspell, or google's spell checking services (API).

using pspell requires you to have aspell installed on the server, as well as the PHP pspell extension using google requires minimal server adjustments.
Note:-

The example PHP file uses the json_encode function, which requires the json package. This package comes default with PHP 5 >= 5.2.0. If you have an older version of PHP then you can install this package via PECL, or use a custom json library.

If you would like to use a different server side language, let's suppose asp.net then wait for my next tutorial, i have working example of this plugin with asp.net, jquery and google's spell checking api in my system and soon it will be uploaded in the form of tutorial.

Check chunk of text:-

checkspelling.php?engine=pspell
Request:
Content type: application/x-www-form-urlencoded;charset=UTF-8
Data: text="a chunk of text without any punctuation"
Response:
Content type: application/json
Example response: ["bbad","speltt","wwords"]
Get suggestions for a word:

checkspelling.php?engine=pspell

Request:
Content type: application/x-www-form-urlencoded;charset=UTF-8
Data: suggest="word"
Response:
Content type: application/json
Example response: ["suggest","snuggest","soggiest"]

Supported languages

Pspell

What is pspell??? Good question, ok :) Pspell is simply a php wrapper to the GNU aspell spell checker. So supporting large range of languages is as easy as installing the relevant aspell language dictionary. These dictionary packs are available in most GNU/Linux distro repositories. In debian/ubuntu, you can install a new dictionary in a following way:
sudo apt-get install aspell-LANG
(you have to replace LANG with the language code)

If you want to search for a particular language dictionary then you can use apt-cache:
sudo apt-cache search aspell

or view the aspell supported languages page.

Don't forget to restart apache after successfully installation of new dictionaries. If you having problems getting pspell to work with personal dictionaries, view the php errors!

Note:- Aspell also works like charm in windows

Google API
I couldn't find any information for the languages google supports, but probably there are lot of languages and in my next tutorial you will see that i will use asp.net with google api to perform spell checking via this jquery plugin.

Usage
Include the following in the head section of your html document:

<link href="css/spellchecker.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="js/jquery.js" type="text/javascript">
</script>
<script src="js/jquery.spellchecker.js" type="text/javascript">
</script>

Defaut usage

// initiate the spell checker on an element, fire the 'check' function
$("textarea#text-content").spellchecker("check");

Plugin options: (all optional)

$("textarea#text-content")
.spellchecker({
        url: "checkspelling.php",       // default spellcheck url
        lang: "en",                     // default language 
        engine: "pspell",               // pspell or google
        addToDictionary: false,         // display option to add word to dictionary (pspell only)
        wordlist: {
                action: "after",               // which jquery dom insert action
                element: $("#text-content")    // which object to apply above method
        },      
        suggestBoxPosition: "below",    // position of suggest box; above or below the highlighted word
        innerDocument: false            // if you want the badwords highlighted in the html then set to true
});

You only want to execute the above code after an event has occured:

// initiating the spell checker is not necessary if using the default plugin options
$("a.check-spelling").click(function(e){
        e.preventDefault();
        $("textarea#text-content").spellchecker("check");
});

This jquery plugin will fire off a callback function after it has finished checking words:

$("a.check-spelling").click(function(e){
        e.preventDefault();
        $("textarea#text-content").spellchecker("check", function(result){
                // if result is true then there are no incorrectly spelt words
                if (result) alert('There are no incorrectly spelt words.');
        });
});

And for removing all spellchecker html, just do the following:

$("textarea#text-content").spellchecker("remove");

Source
jquery.spellchecker

Simple Demo
Demo

So that's it. I hope you will love this spell checker in jquery using php.
I love your feedback.

Firefox 7 release - Enjoy better browsing

noreply@blogger.com (Adeel Fakhar) — Fri, 30 Sep 2011 19:58:00 +0000

Another release of firefox in this year - Firefox 7. Firefox 7 has been released by Mozilla at 27 September 2011. Firefox 7 is actually the first version of the rapid release cycle that is showing big improvements over previous versions. Mozilla claims in its official website about Firefox 7 in these wordings "Made to make the Web a better place".

Firefox 7 arrives with lot of new features. Mozilla managed to improve memory usage of the Firefox drastically (that’s the organization’s word), courtesy of Mozilla's MemShrink project. According to blog post by Nicholas Nethercoate over at Mozilla:

Firefox 7 uses less memory than Firefox 6 (and 5 and 4): often 20% to 30% less, even in some cases 50% less. In particular, Firefox 7′s memory usage will stay steady if you leave it running overnight, and it will free up more memory when you close many tabs.

Saving 50% memory usage is a big achievement. Probably even more important is that the browser won’t feel like eating up all the RAM over time anymore, which is definitely a super stuff, considering that the browser has a reputation for being memory inefficient.

The change log lists addition features

Better Javascript garbage collection.
Rendering backend that speeds up Canvas operations on Windows. Implements Azure Direct2D for Canvas which increases canvas-based animations in HTML5.
Support for text-overflow: ellipsis.
Web Timing specification.
Faster bookmark.
Password changes syncing when using Firefox Sync.

In addition to the memory improvements, there are also are fixes for 11 security vulnerabilities in Firefox 7, including eight critical flaws.

MFSA 2011-45 Inferring Keystrokes from motion data
MFSA 2011-44 Use after free reading OGG headers
MFSA 2011-43 loadSubScript unwraps XPCNativeWrapper scope parameter
MFSA 2011-42 Potentially exploitable crash in the YARR regular expression library
MFSA 2011-41 Potentially exploitable WebGL crashes
MFSA 2011-40 Code installation through holding down Enter
MFSA 2011-39 Defense against multiple Location headers due to CRLF Injection
MFSA 2011-38 XSS via plugins and shadowed window.location object
MFSA 2011-37 Integer underflow when using JavaScript RegExp
MFSA 2011-36 Miscellaneous memory safety hazards (rv:7.0 / rv:1.9.2.23)

Enjoy web browsing with firefox 7.

Google is celebrating 13th Birthday with doodle

noreply@blogger.com (Adeel Fakhar) — Tue, 27 Sep 2011 08:23:00 +0000

Today Google is celebrating 13th Birthday with doodle. The search engine giant and number one website (alexa rating) on the internet, Google has just turned 13 today and celebrating by dedicating itself a Google birthday Doodle, marking the 13th anniversary of awesomeness.

Its my perception that no one cannot imagine life without Google. Google search along with its many other awesome services are playing an important role in our life. People love to use Gmail, people love to use Google Adsense, people love to use Google Docs, people love to use Google Analytics, People love to use Blogger and now google has officially launched Google Plus which is targeting Social Network giant the Facebook.

Research conducted by Nielsen earlier this month showed that US internet surfers spend more time on Facebook than any other website on internet.

At the same time, Google is enjoying a 90% share of the global internet search market, according to the most recent figures from metrics firm StatsCounter, although its share varies considerably by country yet Google is number one in Search Engine market.

The seed bowed by Larry Page, Sergey Brin, and Eric Schmidt – the three key persons who founded Google in September 1998, is now become a tree which is giving the shadow and fruits to the world at same time. “Google” itself has become a synonym for “web search”.

Well done Google. Keep Going.

Set alt attribute to images dynamically using jquery

noreply@blogger.com (Adeel Fakhar) — Mon, 26 Sep 2011 17:27:00 +0000

In this programming tutorial, we will learn how to set alt attribute to images dynamically using jquery. Once again i say, in jquery doing so is quite easy :). Let's have a look over how to do so.

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("img:not([alt])").each(function () {
		$(this).attr('alt', 'image here');
                //alert($(this).attr("src"));
            });
        }); 
        </script>

By using the jquery's built-in attr() function, the above mentioned code snippet will check each and every image in the body of your web page and assign alt attribute dynamically to those images in which alt attribute is missing. Right now i am assigning image here as a hard coded value of alt attribute, but you can assign the image name as a value of alt attribute as well, depends upon your requirement.

Note:- After applying the above mentioned code, please check the required change in source code by using firebug because if you check the source code by right clicking the web page then you will not find any change made by the above mentioned code, as jquery doesn't change the original html of the web page. I can understand most of you are well aware of firebug but those my brothers that don't know about firebug, definitely i will write a tutorial for them very soon.

So that's it. I hope you will find this tutorial very handy.

I love your feedback.

How to increase uplaod file size in php

noreply@blogger.com (Adeel Fakhar) — Mon, 26 Sep 2011 16:54:00 +0000

In this programming tutorial we will learn how to increase upload file size in php. Doing so is quite easy in php by changing some default values in php.ini file or in .htaccess file, depends upon your hosting situation. php.ini file is the configuration file that contains all the settings related to your website. So let's have a look over how to accomplish what we want.

How to increase uplaod file size in php
You have to update the values of post_max_size and upload_max_filesize in php.ini file. Since post_max_size is the limit for all the content of your post, many developers want post_max_size to be a multiple of upload_max_filesize to allow multiple files to be uploaded, but this is not necessary. The upload module limits the size of a single attachment to be less than either post_max_size, or upload_max_filesize, whichever is smaller. The default value for upload_max_filesize is 2 MB, and default value for post_max_size is 8 MB.

For instance, to increase the limit on uploaded files to 10 MB:

Perform below mentioned changes to the php.ini file. Remember, for some hosts this is a system-wide setting.

upload_max_filesize = 10M
post_max_size = 10M

So that's it. I hope you will find this tutorial very handy.

I love your feedback.

How to set attribute of any element in jquery

noreply@blogger.com (Adeel Fakhar) — Sat, 24 Sep 2011 05:18:00 +0000

Sometimes it becomes our requirement to set the attribute of any element using jquery. For instance, in my next tutorial i will teach you how to set the alt attribute of images that doesn't contain the alt attribute. Its very easy in jquery by using its attr() function which is built-in in jquery.Let's have a look over the example given below.

How to set attribute of any element in jquery

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.divclass{
font-family:verdana;
font-size:12px;
color:green;
}
</style>
</head>
<body>
	<div id="myDiv">Welcome to nice-tutorials.blogspot.com</div><br/>
	<span></span>
<script language="javascript" type="text/javascript">
$("#myDiv").attr('class', 'divclass');
</script>
</body>
</html>

Output:-
Welcome to nice-tutorials.blogspot.com

In the above mentioned code snippet i have decalred a css class which is divclass and then by using built-in attr() function of jquery i assigned divclass to the div having id of myDiv. Using this behavior of attr() function we can set one or more attributes for the set of matched elements.

So that's it.

I love your feedback.

Get class name of any element in jquery

noreply@blogger.com (Adeel Fakhar) — Sat, 24 Sep 2011 04:53:00 +0000

In this programming tutorial we will learn how to get class name of any element in jquery. It is quite easy in jquery by utilizing its built-in attr() function. This attr() function is quite handy. Let's have a look over the following code snippet.

Get class name of any element in jquery

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.divclass{
font-family:verdana;
font-size:12px;
color:green;
}
</style>
</head>
<body>
	<div id="myDiv" class="divclass">Welcome to nice-tutorials.blogspot.com</div><br/>
	<span></span>
<script language="javascript" type="text/javascript">
var divClassName=$("#myDiv").attr("class");
$("span").html("Div's class is <strong>"+divClassName+"</strong>")
</script>
</body>
</html>

Output:-
Welcome to nice-tutorials.blogspot.com

Div's class is divclass

In the above given code snippet i declare a css class .divclass and assign it to the div myDiv then using built-in attr() function of jquery i get the class name and display the class name in the span just after the div element. attr() function gets the value of an attribute for the first element in the set of matched elements.

So that's it. This is the way to get class name of any element in jquery.

I love your feedback.

Stay tune with nice-tutorials.blogspot.com

Remove a word in a text using jquery

noreply@blogger.com (Adeel Fakhar) — Fri, 23 Sep 2011 19:39:00 +0000

In this programming tutorial we will learn how to remove a word in a text using jquery. Jquery is very powerful and we can achieve this task quite easily in it with the help of built-in replace() function. Let's have a look over the following code snippet that illustrates how to do so.

Remove a word in a text using jquery

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div id="myDiv">Welcome to nice-tutorials.blogspot.com</div>

<script langiage="javascript" type="text/javascript">
var el = $("#myDiv");
//replace(/word to remove/ig, "");
el.html(el.html().replace(/to/ig, ""));
</script>

</body>
</html>

In the above given example we are removing the word to from div's inner html, so the output will be

Output:-
Welcome nice-tutorials.blogspot.com

So that's it. This is the process to remove a word in a text using jquery.

I always love your feedback.

Stay tune with nice-tutorials.blogspot.com for millions of tutorials of jquery :)

Facebook updates its friend list system targeting Google+

noreply@blogger.com (Adeel Fakhar) — Fri, 23 Sep 2011 05:22:00 +0000

Facebook has updated its Friend Lists system to target Google Plus's Circles features.

By adding this, users will now have more control over how their connections are grouped, with some lists, such as family and work, created automatically.

Although Facebook remains the world's most popular social network, Google+ is expected to hit 100m users this year.

The company has been rolling out a range of new features in recent weeks.

The new Smart Lists feature of facebook will create categories totally based on the relationship between a user and their friends. For example, anyone sharing the same workplace will be designated a colleague. Likewise school friends. New "close friends" and "acquaintances" lists will allow Facebook members to filter who they see updates from.

There will be inevitable comparisons to the widely praised Circles feature on Google's social network, which lets users group together people they are following.

Anyway Mike Schroepfer, Facebook's vice president of engineering said the changes were part of the site's gradual evolution. "We've had friend lists since 2007. Groups we made in 2010. We've been experimenting with lots of different ways to share for many, many years now," he told BBC News.

Is Twitter threatening?

While the new friend list setting are an apparently minor change to an existing system, their introduction may provide clues to Facebook's longer term strategy.

On a superficial level, the changes appear to be aimed at users who are attracted by the ability to create groups using Google Circles.

However, coupled with recent updates to the system for sharing content on Facebook, there is also a challenge to Twitter.
By encouraging users to think about attaching different privacy levels to things they post, and to categorise whose status updates they see, Facebook seems to be preparing to encourage more public feeds, visible to anyone online.
Such a strategy could ultimately lead to a Twitter-style "follow" system, where users can sign-up to updates from non friends.
Facebook's Mike Schroepfer said that the company would always offer the option to remain private.

"There are things that people share that they don't want others to see - a personal thought or something with their family, and there is no value in having that shared more publicly," he said.

However, he hinted that more public postings would also play a part in the site's future.

"There's definitely a value in serendipity and getting a chance to connect people. That's a lot of what our product is about."

Courtesy of bbc.

Get the total number of matched elements in jquery

noreply@blogger.com (Adeel Fakhar) — Wed, 21 Sep 2011 19:22:00 +0000

In this programming tutorial we will learn how to get the total number of matched elements in jquery. As we all know, jquery is a very powerful javascript library and its selectors play very vital role to select any DOM element. In some cases we need to know the total number of matched elements, for this, let's have a look over the following code snippet.

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div>Welcome to nice-tutorials.blogspot.com</div><br/>
	<div>Welcome to nice-tutorials.blogspot.com</div><br/>
	<span></span>

<script language="javascript" type="text/javascript">
$("span").html("There are <strong>" + $("div").size() + "</strong> divs in this page.");

</script>

</body>
</html>

Output:-
Welcome to nice-tutorials.blogspot.com
Welcome to nice-tutorials.blogspot.com
There are 2 divs in this page.

Note:-
The .size() method is functionally equivalent to the .length property; however, the .length property is recommended because it does not have the overhead of a function call.

So that's it. This is the code to get the total number of matched elements in jquery.

I love your feedback.

Disable right click contextual menu in jquery

noreply@blogger.com (Adeel Fakhar) — Wed, 21 Sep 2011 18:39:00 +0000

In this programming tutorial we will learn how to disable right click contextual menu in jquery. Jquery is a very powerful javascript library and makes things very easier to work with. So let's have a look over how to do so.

$(document).ready(function(){
 $(document).bind("contextmenu",function(e){
        return false;
    });

});

So that's it, this above written jquery code snippet will disable right click contextual menu, moreover, it will also disable the contextual menu when you press key(Application Key) between the alt and ctrl keys in QWERTY keyboard of your pc.

I love your feedback.

Server.Transfer vs Response.Redirect

noreply@blogger.com (Adeel Fakhar) — Mon, 19 Sep 2011 18:02:00 +0000

In this programming tutorial we will learn the difference between server.transfer and response.redirect. Server and Response both are objects in ASP.NET use for redirecting the users from one page to another or from one website to another website. Server object provides methods and properties for various tasks related to a server. Transfer is a method of the Server object and it sends information of the current state to another .aspx file for processing. Response object describes methods and properties related to a server’s response. Redirect is a method of the Response object and it sends a message to the browser making it connect to a different URL. Although both the Server.Transfer and Response.Redirect can be used to transfer a user from one page to another yet they are different to each other.

What is Response.Redirect?

Redirect is a method of the Response object. When the Response method is called, it sends the HTTP code 302 and the URL of the requested web page to the user's browser. The HTTP code 302 informs the user’s browser that the requested resource is located under a different URL. So when the browser receives the code, it instantly opens the resource in the new location. The requested web page can reside on the same server (Same Website) as the page that contained the request or it could be located in some other server (Some other website). When requesting a web page residing on the same server, Response method can be used as follows:

Response.Redirect(“Welcome.aspx”);

When requesting a web page residing on another server (another website), Response method can be used as follows:

Response.Redirect(“http://www.yourwebsite.com/Welcome.aspx”);

What is Server.Transfer?

Transfer is a method of the Server Object. When the Transfer method is called, the original request is modified to transfer in to some other page in the same server. When a new page is requested using the Server.Transfer, URL shown in the user’s browser does not change. This is because the transfer happens in the server side and the browser does not have any knowledge about the transfer. If we use the second overload for Server.Transfer(string path, bool preserveForm) and sets the second parameter as true, posted form variables and query strings can be made available to the second page.

Difference between Server.Transfer and Response.Redirect

Response.Redirect can be used to redirect the user to a web page in another server (another website) whereas Server.Transfer can only be used to redirect the user to web pages on the same server (same website).
Response.Redirect makes a roundtrip to the server, while Server.Transfer changes the focus of the web server to a different web page. Therefore, by using Server.Transfer we can save server's resources.
Transfer, properties of the previous page can be accessed from the new page but this is only possible with server.transfer.
Finally, Response.Redirect changes the URL in the address bar of the browser when the new page is accessed but when using the Server.Transfer the original URL is retained and the content of the page is just changed. So the user cannot use it to bookmark the new page as it always refer to the first content that comes with that url.

So that's it. I hope you know better understand the difference between Response.Redirect and Server.Transfer.

I love your feedback.

format date time in sql server using getdate() function

noreply@blogger.com (Adeel Fakhar) — Sat, 17 Sep 2011 04:59:00 +0000

In this programming tutorial we will learn how to format date or date time in sql server. As a web developer i know how important this task is because at any time we may get request from our client to display date in any report of our project according to the format that suits him. We must know different formats of date time. So let's have a look over how to do so.

format date time in sql server using getdate() function

Here's a list of the different date formats that come standard in SQL Server as part of the CONVERT function. It is important to note that the output of these date formats are of VARCHAR data types, so if you have to compare any dates that are in varchar data type then again you have to convert them in datetime data type.

SELECT convert(varchar, getdate(), 100)  -- mon dd yyyy hh:mmAM (or PM)

Output:-
Sep 16 2011 5:55PM

SELECT convert(varchar, getdate(), 101)  --mm/dd/yyyy

Output:-
09/16/2011

SELECT convert(varchar, getdate(), 102)  --yyyy.mm.dd

Output:-
2011.09.16

SELECT convert(varchar, getdate(), 105)  --dd-mm-yyyy

Output:-
16-09-2011

SELECT convert(varchar, getdate(), 106)  --dd mon yyyy

Output:-
16 Sep 2011

SELECT convert(varchar, getdate(), 107)  --mon dd, yyyy

Output:-
Sep 16, 2011

SELECT convert(varchar, getdate(), 103)  --dd/mm/yyyy

Output:-
16/09/2011

SELECT convert(varchar, getdate(), 104)  --dd.mm.yyyy

Output:-
16.09.2011

SELECT convert(varchar, getdate(), 108)  --hh:mm:ss

Output:-
17:57:08

SELECT convert(varchar, getdate(), 109)  --mon dd yyyy hh:mm:ss:mmmAM (or PM)

Output:-
Sep 16 2011 5:57:19:720PM

SELECT convert(varchar, getdate(), 110)  --mm-dd-yyyy

Output:-
09-16-2011

SELECT convert(varchar, getdate(), 111)  --yyyy/mm/dd

Output:-
2011/09/16

SELECT convert(varchar, getdate(), 112)  --yyyymmdd

Output:-
20110916

SELECT convert(varchar, getdate(), 113)  --dd mon yyyy hh:mm:ss:mmm

Output:-
16 Sep 2011 17:59:30:943

SELECT convert(varchar, getdate(), 114)  --hh:mm:ss:mmm(24h)

Output:-
17:59:44:887

SELECT convert(varchar, getdate(), 120)  --yyyy-mm-dd hh:mm:ss(24h)

Output:-
2011-09-16 17:59:55

SELECT convert(varchar, getdate(), 121)  --yyyy-mm-dd hh:mm:ss.mmm

Output:-
2011-09-16 18:00:13.497

SELECT convert(varchar, getdate(), 126)  --yyyy-mm-ddThh:mm:ss.mmm

Output:-
2011-09-16T18:00:28.987

SELECT replace(convert(varchar, getdate(), 111), '/', '')  --yyyy mm dd

Output:-
20110916

SELECT convert(varchar(7), getdate(), 126)   --yyyy-mm

Output:-
2011-09

SELECT right(convert(varchar, getdate(), 106), 8) -- mon yyyy

Output:-
Sep 2011

So this is the way to format date or date time in sql server using getdate() function.

I love your feedback.

Google Gravity

noreply@blogger.com (Adeel Fakhar) — Fri, 16 Sep 2011 05:10:00 +0000

I love google because google is always a fun and easy to use. Now, you can play with Google. Ricardo Cabello a designer/developer has developed Google Gravity. A fun filled site, in which the elements of the Google Home page are subjected to gravitational force and they fall down in front of your eyes, as illustrated in given below screenshot.

Despite all fun you can still use Google Gravity to search the web. You can play with all elements in Google Gravity, like the Google logo or the search box or links or buttons. You can drag them and throw them or do whatever you like.

Google Gravity is the best example of the power of html 5.

What requires for Google Gravity

To enjoy this fun you need to have Google Chrome (Web Browser developed by Google) installed in your computer. Although it works in Safari and in Firefox too but its working best in Google Chrome.
Once you have installed Google Chrome then you are ready to enjoy the fun.
Log on to www.google.com or its regional version (www.google.pk etc.)
In the Google search type Google Gravity.
Now Press the I am feeling Lucky button below the Search bar, on the right or click on very first link or click on this link to enjoy the fun Google Gravity.
Now watch what happens :)

Play with Google Gravity and share your experience with me. I always love your feedback.