How hash-based/pushState navigation works

For hash-based navigation, the visitor's position in a virtual navigation space is stored in the URL hash, which is the part of the URL after a 'hash' symbol (e.g.,/my/app/#category=shoes&page=4). Whenever the URL hash changes, the browser doesn't issue an HTTP request to fetch a new page; instead it merely adds the new URL to its back/forward history list and exposes the updated URL hash to scripts running in the page. The script notices the new URL hash and dynamically updates the UI to display the corresponding item (e.g., page 4 of the "shoes" category).

This makes it possible to support back/forward button navigation in a single page application (e.g., pressing 'back' moves to the previous URL hash), and effectively makes virtual locations bookmarkable and shareable.

PushState is an HTML5 API that offers a different way to change the current URL, and thereby insert new back/forward history entries, without triggering a page load. This differs from hash-based navigation in that you're not limited to updating the hash fragment — you can update the entire URL.

Sort Items in Dropdown List Using Jquery

HTML:

<form id="form1" runat="server">
<div class="smallDiv">
<h2>Click on the Sort Button to Sort the DropDownList </h2>
<asp:DropDownList ID="DDL" runat="server" >
<asp:ListItem Text="Item3" Value="3"></asp:ListItem>
<asp:ListItem Text="Item1" Value="1"></asp:ListItem>
<asp:ListItem Text="Item4" Value="4"></asp:ListItem>
<asp:ListItem Text="Item5" Value="5"></asp:ListItem>
<asp:ListItem Text="Item2" Value="2"></asp:ListItem>
</asp:DropDownList>
<br /><br />
<asp:Button ID="btnSort" runat="server" Text="Sort" />
<p id="para"></p>
<br /><br />
Tip: Items are sorted in an Ascending order
</div>
</form>

Jquery:

<script type="text/javascript">
$(function() {
$('input[id$=btnSort]').click(function(e) {
e.preventDefault();
var sortedDdl = $.makeArray($('select[id$=DDL] option'))
.sort(function(o, n) {
return $(o).text() < $(n).text() ? -1 : 1;
});
$("select[id$=DDL]").html(sortedDdl).val("1");
$("#para").html("Items were Sorted!");
$(this).attr("disabled", "disabled");
});
});
</script>

Explanation:

In the code shown above, when the user clicks on the Sort button, the <option> elements are converted to an array using $.makeArray().

$.makeArray($('select[id$=DDL] option'))

The JavaScript built-in sort() function is used on this array, which does an in-place sort of the array.

$.makeArray($('select[id$=DDL] option'))
.sort(function(o, n) {
return $(o).text() < $(n).text() ? -1 : 1;
});

The final step is to empty the contents of the DropDownList and then use the .html() to replace the existing <options> with the sorted <options>.

$("select[id$=DDL]").empty().html(sorted)

The val("1") sets the first option as selected, after the sorting has been done.

Show and Hide ASP.NET Panels with Animation using jQuery

HTML:

<form id="form1" runat="server">
<div class="smallDiv">
<h2>Click on a Radio Button to Display/Hide the
Contents of a Panel</h2>
<asp:RadioButtonList ID="rbl" runat="server" class="tbl">
<asp:ListItem Text="Toggle" Value="0"></asp:ListItem>
<asp:ListItem Text="SlideUpDown" Value="1"></asp:ListItem>
<asp:ListItem Text="SlideToggle" Value="2"></asp:ListItem>
<asp:ListItem Text="Animate" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<br />
Tip: Each RadioButton produces a different animation
</div>
<br /><br />
<div class="bigDiv">
<asp:Panel ID="panelText" runat="server" CssClass="panel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc urpis nunc, placerat ac, bibendum non,  ellentesque nec, odio. Nulla fringilla aliquet nibh. Donec placerat, massa id commodo ornare, justo lectus faucibus leo, in aliquam nisl quam varius
</asp:Panel>
</div>
</form>

Jquery Script:

<script type="text/javascript">
$(function() {
var $radBtn = $("table.tbl input:radio");
var $panel = $('div.panel');
$radBtn.click(function() {
var value = $(':radio:checked').val();
switch (value) {
case '0':
$panel.toggle('slow');
break;
case '1':
if ($panel.is(":hidden")) {
$panel.slideDown("fast");
} else {
$panel.slideUp("fast");
}
break;
case '2':
$panel.slideToggle('slow');
break;
case '3':
$panel.animate({
height: 'toggle',
margin: 'toggle',
opacity: 'toggle'
}, 500);
break;
default: ;
}
});
});
</script>

Explanation:

In this sample, I will demonstrate to you 4 different ways of displaying and hiding the content of a Panel. The selectors are cached into variables as shown below:

var $radBtn = $("table.tbl input:radio");
var $panel = $('div.panel');

In the first method, we use toggle() which toggles the visibility of all matched elements without an animation.

$panel.toggle('slow');

The second method uses slideUp() to hide, and slideDown() to display the matched elements in a sliding motion.

if ($panel.is(":hidden")) {
$panel.slideDown("fast");
} else {
$panel.slideUp("fast");
}

The third method simplifies the technique adopted in the second method by using slideToggle(), which toggles the visibility of all matched elements using a sliding motion. Since we are using the same radio button to trigger the event, slideToggle() is more relevant here, rather than using slideUp or slideDown().

$panel.slideToggle('slow');

And finally the fourth method that shows how to make custom animations by using animate(). In this example, we are animating some style properties (height, margin and opacity) of the Panel.

$panel.animate({
height: 'toggle',
margin: 'toggle',
opacity: 'toggle'
}, 500);

Fit Iframe to Screen Size

My HTML page body looks like below.

<body>
<div id="wrapper">
<div id="top-contact"><img src="http://mysite.com.au/images/logo.png" width="232" height="59" alt="Contac No" /></div>
<div id="top-menu">  &nbsp; <a href="landing.aspx">Landing  </a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;<a href="OnTimeLearning.aspx">Learn OnTime</a>&nbsp;&nbsp;&nbsp;|
</div>
<iframe src="https://mysite.ontimenow.com" width="100%" class="myIframe"></iframe>
<div id="fotter-ontime">© 2013 RED ROCK Software Solutions</div>
</div>
</body>

I have two div tags for the header and the footer in between i have the iframe. Now we need to set the iframe size to fit any screen size.

Using Jquery i'm going to reduce the heights of the two div tags on the header and footer and the width ratio is set to 100%.

<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script language="javascript">
$(document).ready(function () {
var height = $(window).outerHeight() - ($("#top-menu").outerHeight() + $("#fotter-ontime").outerHeight());
$('.myIframe').css('height', height + 'px');
})
</script>

What is web storage in HTML5?

The term web storage refers to HTML5’s client-side data-storage mechanism. Web storage allows you to store data on the client side as key-value pairs. The W3C recommended a web storage size limit of 5MB per origin (see the section “Security Considerations for Web Storage” to learn more about origins). However, individual browsers may slightly deviate from this limit. For example, IE8 allows web storage of up to 10MB.

Although both web storage and cookies store data on the client side, they work differently. Cookies are passed between client and server with each and every request from a given web site. On the other hand,
web storage is never passed to the server automatically. If you need to transmit data from web storage to
the server-side code, you must resort to a programmatic approach such as jQuery calling server-side code
or a hidden form field. Additionally, unlike cookies, you can’t set an expiration time for web storage. You
either need to write code to delete stale items or count on the user to delete the stale items using an option
in the browser.

Web storage comes in two flavors: session storage and local storage. These two types are exposed as sessionStorage and localStorage attributes of the window object, respectively. As you might have guessed,
session storage is persisted as long as the current browser (or its tab) instance is running. The moment you
close the browser instance (or tab), the data is removed. If you load the web site again later, it can’t accessany of the previously stored data. Session storage is suitable for a single transaction. Local storage, unlike session storage, stores data across multiple instances of the browser and also beyond the current session. In summary, web storage is good choice if

• You need to store data exceeding the size limits of cookie-based storage.
• You don’t need to pass data to and from the server with every request.
• You don’t need to set any specific expiration time for the data.

However, web storage may not be a good choice if

• You wish to store a huge amount of data.
• Your data can’t be easily stored as key-value pairs (binary data or BLOBS, for example).
• Data to be stored is sensitive.

Enabling Spell-Check in HTML Form

In HTML5 we can use spellcheck attribute in textarea HTML element to enable the spell check ability. By setting it to true it'll enable the spell check ability and setting it to false will disable the spell check ability.

<textarea id="textarea1" rows="5" cols="50" spellcheck="true"></textarea>