Programming Tutorials

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.

JQuery - $ is not defined error

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

In this programming tutorial we will learn how to fix this JQuery - $ is not defined error. There are various reasons behind this error. Let's have a look on those reasons.

JQuery - $ is not defined error

You have JavaScript running before the web page is fully loaded, and as such, before jQuery is fully loaded.
Your JavaScript file is not being properly loaded into your web page.
You might have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.

If you have firebug installed then you should also check the net panel to see if the file is actually being loaded properly. If not, it will be highlighted red and will say "404" beside it. If the file is loading properly, that means the issue is number 3.

Please confirm that all the javascript code is being run inside a code block such as:

$(document).ready(function () {
  //your code comes here
});

This will ensure that your code is being loaded after jQuery has been initialized.

One more thing that you must check is that you are not loading any jquery plugins before you load jQuery. Plugins extend the "$" object, so if you load a plugin before loading jQuery core, then you'll get the error you described.

So that's it. This is the way to get rid of this JQuery - $ is not defined nasty error.

I hope you will find this tutorial very interesting.

I love your feedback.

Difference between .ToString() and Convert.ToString()

noreply@blogger.com (Adeel Fakhar) — Wed, 14 Sep 2011 17:50:00 +0000

In this programming tutorial we will learn the difference between .ToString() and Convert.ToString() in asp.net. It is most commonly asked question in interview for a web developer post.

The only basic difference between them is Convert.ToString() function handles null while .ToString() does not handle null, in fact .ToString() will throw a NULL reference exception error. So for good coding practice always use Convert.ToString().

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

I love your feedback.

Count rows of all tables in a sql server database

noreply@blogger.com (Adeel Fakhar) — Wed, 14 Sep 2011 17:17:00 +0000

In this programming tutorial we will learn how to count rows of all tables in a sql server database. we can find out all the tables present in a database along with their row count with the help of system tables.

Count rows of all tables in a sql server database

Select tbl.name, si.rows from sysindexes si
inner join sys.tables tbl on si.id = tbl.object_id and indid < 2

Sys.tables has each and every information about all the tables in a given database. While sysindexes contains all the information of all the indexes present in the database.

si.rows of the sysindexes give the row count associated with the given index.

Tbl.name gives the table name and comes from the sys.table.

si.id and tbl.object_id gives the unique ID associated with each table present in the database.

As far as indid is concerned, it stands for the ID of the index, 1 is for clustered index and (> 1) is for nonclustered index.

For SQL 2000 we need to do little modification in order to get the desired results.

select tbl.name, dd.rows from sysindexes dd

inner join sysobjects tbl on dd.id = tbl.id where dd.indid < 2 and tbl.xtype = 'U'

So that's it. This is the way to count rows of all tables in a ms sql server database.

I love your feedback.

.XXX web domain registration starts

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

.XXX web domain registration starts. Companies and celebrities are being given the chance to safe their names from porn hijacking ahead of the launch of the .xxx web domain.

Brands/Celebrities can now request to have their name blocked from use with the new suffix, which goes live next year.

Existing adult sites can also submit their application to reserve a place on .xxx
The "red light" suffix is intended to make it easier to find or avoid sexually explicit material online.
ICM Registry, which is administering the launch, said it hoped to "promote a responsible approach to adult content".

Brand and IP holders wanting to register now have 50 days - a so-called "sunrise period" - to submit their application.

For security purpose, Companies and individuals that do not want their name associated with pornography will be able to pay a one-off fee of between $150 and $300 (£100 to £200), depending on which company they register their domain with. For instance, UK adult star Teresa May might wish to bid for a .xxx domain, whereas UK home secretary Theresa May might consider protecting her name.
Conflicts over exact matching names will go through an arbitration process.

"Win, win, win"

Companies are under no obligation to go .xxx, according to ICM Registry's chief executive Stuart Lawley.

But those that did would contribute to an overall "win, win, win" situation, with benefits for adult content providers, web users in search of pornography, and those wishing to avoid it.

"Regardless of what your personal views are on the existence of pornography on the internet, at least .xxx will give people the information they need to make a choice," said Mr Lawley.

However, Jerry Barnet, chairman of the Adult Industry Trade Association, warned that anti-pornography activists would likely increase their efforts to block online adult content.

"I have mixed feeling about it," he told BBC News. "From the industry and freedom of speech point of view, I'm concerned that pro-censorship and morality campaigners will use this as an excuse to try and introduce some form of censorship.

"But from a business point of view it's kind of good for us because there are new names available, and that makes branding and site naming more interesting," he added.

Malware issues

ICM Registry does not process the applications directly. Firms must first approach a standard domain registrar in their home country, such as Go Daddy or Enom.

To ensure the registered porn sites do not harbour malware or present any other cyber security-related threats, ICM said they will be scanned daily by security firm McAfee - something that would make them safer to visit than many non-xxx sites.

The websites will be overseen by the International Foundation for Online Responsibility, and will be fitted with an electronic label to allow parents to adjust their browser settings and make sure children do not have access to certain sites.

After the sunrise period is over, a "land rush" period will run for 17 days, allowing prospective adult sites to register for the remaining .xxx addresses.

Following that, anyone else will be able to submit an application for non-reserved names on a first come, first served basis.

Source by BBC

No value given for one or more required parameters. Import to excel error

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

In this programming tutorial we will learn how to fix this nasty error: No value given for one or more required parameters. Import to excel error. Few days ago one of my friend asked me to provide the code that import excel data to gridview. I gave him the link of the import excel data to gridview tutorial but he suddenly asked me that he is getting the above mentioned error. I checked his code and fixed the error. Let's have a look over how i fixed this error.

No value given for one or more required parameters. Import to excel error

             OleDbConnection oconn = new OleDbConnection(@"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + Server.MapPath("~/test.xlsx") + ";Extended Properties=Excel 12.0;");
            oconn.Open();
            //Getting records from Sheet1 of excel file. As you know one excel file may have many sheets, in this case we are getting data from Sheet1                   
            string sqlQuery = "select * from [Sheet1$] where [user_name]=Lauren";
            OleDbCommand ocmd = new OleDbCommand(sqlQuery, oconn);
            DataSet ds = new DataSet();
            OleDbDataAdapter odapt = new OleDbDataAdapter(ocmd);
            odapt.Fill(ds);

My friend was showing the above mentioned code that it was giving this error: No value given for one or more required parameters. I checked the code and found below mentioned line as a guilty line, causing the error.

string sqlQuery = "select * from [Sheet1$] where [user_name]=Humaira Shafique";

The column(Parameter) user_name in excel file was containing string data so the value of column in where clause should be enclosed in single quote like given below.

string sqlQuery = "select * from [Sheet1$] where [user_name]='Humaira Shafique'";

This fix my friend's error but there are some more reasons that cause this error, these are

Parameter name not spell correctly.
Case-Sensitivity issue in parameter (firstname instead of FirstName)

So that's it. I love your feedback.