Can not find element using id having special character in jQuery ?

If you have special characters (!”#$%&'()*+,./:;?@[\]^`{|}~) in your HTML element’s name or ID then it can not be find using jQuery find method.  You have to escape the character with two backslashes \\.

For example, if you have an element with id=”foo.bar”, you can use the selector $(“#foo\\.bar”)

// Does not work:
$( "#some:id" )
// Works!
$( "#some\\:id" )
// Does not work:
$( "#some.id" )
// Works!
$( "#some\\.id" )

 

 

 

How to load jQuery locally when CDN fails?

As per my last article What is a CDN?, we have seen that how using a CDN to delivery our CSS and Javascript we can speed up our page loading time.

Now let suppose in case CDN is down then our jQuery will not load and some of our website features will no longer work. So we need a way to load a local jQuery file if for some reason CDN jQuery fails to load.

Below given script code checks whether jQuery is loaded from Microsoft CDN or not, if not then it references the jQueryfile from your local folder.


<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

//If jQuery not loaded from CDN, then load from local folder
if (typeof jQuery == 'undefined') {
     document.write(unescape("%3Cscript src='jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E")); 
}

//Now, jQuery will be always available to use even if CDN fails
function test()
{
     alert($);
}

</script>

</head>
<body onload="test()">
<h1>Test page...</h1>
</body>
</html>

Programming is Easy…

How to create mouse over menu without jQuery/Javascript in HTML?

Sometime, we need to display a mouse over menu like in grid to edit/delete rows etc…
It can be done easly by just creating required menu options and set default display style to none and show menu on item’s/rows mouse over in css.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mouse over menu using div/css without jQuery and JavaScript</title>
    <style type="text/css">
        .itemsContainer
        {
            border: 1px solid red;
            height: 300px;
            width: 600px;
        }

        .item
        {
            height: 100px;
            width: 100px;
            float: left;
            margin: 10px;
        }

        .itemsContainer .item:nth-child(odd)
        {
            border: 1px solid green;
            background-color: gainsboro;
        }

        .itemsContainer .item:nth-child(even)
        {
            border: 1px solid gold;
            background-color: lavender;
        }

        .menu
        {
            list-style-type: none;
            margin-top: 0px;
            margin-left: 15px;
            display: none;
        }

            .menu li a
            {
                color: red;
                text-decoration: none;
            }

        .itemsContainer .item:hover .menu
        {
            display: block;
        }
    </style>
</head>
<body>
    <div class="itemsContainer">
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Programming is easy….

How to create auto height column using div

Sometime, we need to create a table using div tags. It can be done easly by just creating a continer div(that will be a continer for all columns) and add required child divs(i.e that will be treated as a columns) and set the child div’s(i.e column) style float to left.

It works great if column’s height are fixed and there is no requirement for column’s content change, but when column’s content increase/decrease dynamically then it becomes very difficult to manage all column’s heights. I had spent a whole day to manage all column’s heights using jQuery/JavaScript.

But later, I comes to know that it can be done easly using only CSS 🙂 (i.e no need any script).
It can be done as:-
1) Create a container div and set its style “display:table;”
2) Create child divs for columns and set these style “display:table-cell;float:left;”


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Auto height columns using div/css without jQuery and JavaScript</title>
    <style type="text/css">
        .table
        {
            display: table;
            border: 1px solid red;
        }

        .col
        {
            display: table-cell;
            width: 200px;
            height: 300px;
            border: 1px solid red;
            vertical-align: top;
        }

        .col_1
        {
            background-color: antiquewhite;
        }

        .col_2
        {
            background-color: aqua;
        }

        .col_3
        {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="col col_1">
            <textarea rows="5" cols="20">This is first column.</textarea>
        </div>
        <div class="col col_2">
            <textarea rows="5" cols="20">This is second column. </textarea>
        </div>
        <div class="col col_3">
            <textarea rows="5" cols="20">This is third column. </textarea>
        </div>
    </div>
</body>
</html>

Programming is easy….

 

Asynchronous requests in jQuery

As per my last post (What is Ajax ?), we have seen that the base of each asynchronous request is XmlHttpRequest object.

Now, Let’s look at the equivalent jQuery code for make synchronous and asynchronous requests.

jQuery offers an .ajax() method and various shorthands for accomplishing common tasks using AJAX.
Here’s the jQuery code:

 

$.ajax("google.com") // issue a 'GET' request to fetch google.com's home page
 .done(function(data) { // success handler (status code 200)
 console.log(data);
 })
 .fail(function(xhr) { // error handler (status code not 200)
 console.log("Error occurred: ", xhr.statusText);
});

The first line specifies the URL from which you want to request data. The code then specifies the callback
functions for the success and error conditions (jQuery takes care of checking for readyState and the status code).
Here we have not specify the type of request (GET) or whether it is asynchronous or not.
This is because jQuery uses GET by default and $.ajax() is asynchronous by default.
We can override these parameters (and more) to fine-tune your request:

 

$.ajax({
	url: "www.xyz.com",
	async: true, // false makes it synchronous
	type: "GET", // 'GET' or 'POST' ('GET' is the default)
	done: function(data) { // success handler (status code 200)
		console.log(data);
	},
	fail: function(xhr) { // error handler (status code not 200)
		console.log("Error occurred: ", xhr.statusText);
	}
});

For more info please visit:- http://api.jquery.com/jquery.ajax/

Note:- .done() and .fail() were introduced in jQuery 1.8. If you’re using an older version of jQuery, use .success() and .error(), respectively.

 

Programming is easy…