Sunday, 6 September 2015

Allow only numer input in textbox using jquery

Allow only numer input in textbox

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

var textIdList= ["#tbx", "#tbx1", "#tbx2"];

allowNumberOnly(textIdList);

});

function allowNumberOnly(textIdList){

alert(1);

for(i=0; i<textIdList.length; i++)

{

alert(textIdList[i]);

abc(textIdList[i]);

}

function abc(id){

$(function () {

alert(2);

$(id).bind("keypress", function (e) {

var keyCode = e.which ? e.which : e.keyCode

var result = (keyCode >= 48 && keyCode <= 57);

return result;

});

// Restricting the Paste into textbox

$(id).bind("paste", function (e) {

return false;

});

// Restricting the Cut from textbox

$(id).bind("cut", function (e) {

return false;

});

// Restricting the Copy from textbox

$(id).bind("copy", function (e) {

return false;

});

// Restricting the drag and drop any value into textbox

$(id).bind("drop", function (e) {

return false;

});

}

</script>

<style>

.important {

font-weight: bold;

font-size: xx-large;

}

.blue {

color: blue;

}

</style>

</head>

<body>

<h2 class="test">This is a heading</h2>

<p class="test">This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Try it

HTML5 storage

HTML local storage, better than cookies.

What is HTML Local Storage?

With local storage, web applications can store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

HTML Local Storage Objects

HTML local storage provides two objects for storing data on the client:

window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

Before using local storage, check browser support for localStorage and sessionStorage:

if(typeof(Storage) !== "undefined") {

    // Code for localStorage/sessionStorage.

} else {

    // Sorry! No Web Storage support..

}

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example

// StorelocalStorage.setItem("lastname", "Smith");

// Retrievedocument.getElementById("result").innerHTML = localStorage.getItem("lastname");

Try it Yourself »

Example explained:

Create a localStorage name/value pair with name="lastname" and value="Smith"
Retrieve the value of "lastname" and insert it into the element with id="result"

The example above could also be written like this:

// Store

localStorage.lastname = "Smith";

// Retrieve

document.getElementById("result").innerHTML = localStorage.lastname;

The syntax for removing the "lastname" localStorage item is as follows:

localStorage.removeItem("lastname");

Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!

The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter:

Example

if (localStorage.clickcount) {

    localStorage.clickcount = Number(localStorage.clickcount) + 1;

} else {

    localStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "You have clicked the button " +

localStorage.clickcount + " time(s).";

Try it Yourself »

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

The following example counts the number of times a user has clicked a button, in the current session:

Example

if (sessionStorage.clickcount) {

    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;

} else {

    sessionStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "You have clicked the button " +

sessionStorage.clickcount + " time(s) in this session.";

Try it Yourself »

Inject HTML content into an iframe object using javascript

How to inject HTML content into an iframe object using javascript?

function submitTryit() {

var t = document.getElementById("textareaCode").value;

var doc = document.getElementById('iframeResult').contentWindow.document;

doc.open();

doc.write(t);

doc.close();

}

</script>

Example:

<!DOCTYPE html>

<head>

<title>Tryit Editor</title>

<!--[if lt IE 8]>

<style>

.textareacontainer, .iframecontainer {width:48%;}

.textarea, .iframe {height:800px;}

#textareaCode, #iframeResult {height:700px;}

.menu img {display:none;}

</style>

<![endif]-->

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

color: #000000;

margin: 0px;

font-size: 100%;

}

#ads {

background-color: #ffffff;

height: 104px;

width: 100%;

margin-top: 0px;

min-width: 903px;

}

.container {

background-color: #f1f1f1;

width: 100%;

overflow: auto;

position: absolute;

top: 100px;

bottom: 0;

height: auto;

min-height: 250px;

min-width: 550px;

}

.textareacontainer, .iframecontainer {

float: left;

height: 100%;

width: 50%;

}

.textarea, .iframe {

height: 100%;

width: 100%;

padding: 15px;

}

.textarea {

padding-right: 7px;

}

.iframe {

padding-left: 7px;

}

.headerText {

width: auto;

float: left;

font-family: verdana;

font-size: 1em;

line-height: 2;

}

.seeResult {

float: right;

font-size: 15px;

background-color: #555555;

color: #ffffff;

border: 1px solid #555555;

padding: 0 15px;

line-height: 1.45;

width: auto;

cursor: pointer;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.seeResult:hover {

background-color: #ffffff;

color: #000000;

}

.seeResult:active {

background-color: #f1f1f1;

}

.textareawrapper {

width: 100%;

height: 92%;

background-color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.iframewrapper {

width: 100%;

height: 92%;

-webkit-overflow-scrolling: touch;

background-color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

#textareaCode {

background-color: #ffffff;

font-family: consolas,"courier new",monospace;

font-size: 15px;

height: 100%;

width: 100%;

padding: 8px;

resize: none;

border: none;

}

#iframeResult, #iframeSource {

background-color: #ffffff;

height: 100%;

width: 100%;

}

.footerText {

position: absolute;

bottom: 0;

font-family: verdana;

font-size: 0.8em;

width: 100%;

padding-right: 15px;

text-align: right;

height: 20px;

overflow: hidden;

}

.footerText a {

color: #000000;

}

.footerText a:hover {

text-decoration: none;

}

#tryitLeaderboard {

overflow: hidden;

text-align: center;

margin-top: 5px;

}

@media screen and (max-width: 768px) {

.container {

top: 100px;

}

.footerText {

display: none;

}

@media screen and (max-width: 728px) {

#tryitLeaderboard {

margin-top: 0;

}

.container {

top: 60px;

}

@media screen and (max-width: 467px) {

.container {

top: 50px;

}

@media only screen and (max-device-width: 768px) {

#textareaCode {

padding: 5px;

}

.iframewrapper {

overflow: auto;

}

.container {

min-width: 320px;

}

.textarea, .iframe {

height: 97%;

}

@media screen and (orientation:portrait) {

.textareacontainer, .iframecontainer {

height: 50%;

float: none;

width: 98%;

}

.textarea, .iframe {

height: 97%;

padding: 15px;

}

@media screen and (max-height: 700px) {

.footerText {

display: none;

}

</style>

if (window.addEventListener) {

window.addEventListener("resize", browserResize);

} else if (window.attachEvent) {

window.attachEvent("onresize", browserResize);

}

var xbeforeResize = window.innerWidth;

function browserResize() {

var afterResize = window.innerWidth;

if ((xbeforeResize < (970) && afterResize >= (970)) || (xbeforeResize >= (970) && afterResize < (970)) ||

(xbeforeResize < (728) && afterResize >= (728)) || (xbeforeResize >= (728) && afterResize < (728)) ||

(xbeforeResize < (468) && afterResize >= (468)) || (xbeforeResize >= (468) && afterResize < (468))) {

xbeforeResize = afterResize;

googletag.cmd.push(function () {

googletag.pubads().refresh([gptAdSlots[0]]);

});

}

</script>

function submitTryit() {

var t = document.getElementById("textareaCode").value;

var doc = document.getElementById('iframeResult').contentWindow.document;

doc.open();

doc.write(t);

doc.close();

}

</script>

<style>

</style>

</head>

<body>

<button class="seeResult" type="button" onclick="submitTryit()">See Result »</button>

</div>

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is the Test WorkSpace</h1>

</body>

</html>

</textarea>

</div>

<div class="headerText">Result:</div>

</div>

</div>

</div>

</body>

</html>

Try it

Encrypt/ Decrypt using Javascript

Encryption:

window.btoa(string) method

Example

var encryptedString=btoa("Hello World!");

alert(encryptedString); ==>> SGVsbG8gV29ybGQh (base-64 encoded string)

Decryption:

Example

var decryptedString=atob("SGVsbG8gV29ybGQh");

alert(encryptedString); ==>> Hello World!

Example:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to decode a base-64 encoded string.</p>

<p><strong>Note:</strong> The atob() method is not supported in IE9 and earlier.</p>

function myFunction() {

var str = "Hello World!";

var enc = window.btoa(str);

var dec = window.atob(enc);

var res = "Encoded String: " + enc + "<br>" + "Decoded String: " + dec;

document.getElementById("demo").innerHTML = res;

}

</script>

</body>

</html>

Try it

Get Query String Value using JavaScript

How to get Query String value using Javascript?

var qs = (function (a) {

if (a == "") return {};

var b = {};

for (var i = 0; i < a.length; ++i) {

var p = a[i].split('=', 2);

if (p.length == 1)

b[p[0]] = "";

else

b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));

}

return b;

})(window.location.search.substr(1).split('&'));

This will return the object. You can see the details using JSON.stringify(object) or access the query string property using object.propertyName

Try it

Tryit Editor

Edit This Code:

 <!DOCTYPE html>
 <html>
 <head>
 <title>Page Title</title>
 </head>
 <body>

 <h1>
This is the Test WorkSpace</h1>
</body>
 </html>

Result:

Wednesday, 2 September 2015

Restricting alphabets and special characters entry in a textbox using jquery

Restricting alphabets and special characters entry in a textbox and allowing only numeric value entry using jquery

$(document).ready(function(){

$("#tbx").addClass("tbxNumber");

});

$(function () {

$(".tbxNumber").bind("keypress", function (e) {

var keyCode = e.which ? e.which : e.keyCode

var result = (keyCode >= 48 && keyCode <= 57);

return result;

});

// Restricting the Paste into textbox

$(".tbxNumber").bind("paste", function (e) {

return false;

});

// Restricting the Cut from textbox

$(".tbxNumber").bind("cut", function (e) {

return false;

});

// Restricting the Copy from textbox

$(".tbxNumber").bind("copy", function (e) {

return false;

});

// Restricting the drag and drop any value into textbox

$(".tbxNumber").bind("drop", function (e) {

return false;

});

</script>

Example

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#tbx").addClass("tbxNumber");

});

$(function () {

$(".tbxNumber").bind("keypress", function (e) {

var keyCode = e.which ? e.which : e.keyCode

var result = (keyCode >= 48 && keyCode <= 57);

return result;

});

// Restricting the Paste into textbox

$(".tbxNumber").bind("paste", function (e) {

return false;

});

// Restricting the Cut from textbox

$(".tbxNumber").bind("cut", function (e) {

return false;

});

// Restricting the Copy from textbox

$(".tbxNumber").bind("copy", function (e) {

return false;

});

// Restricting the drag and drop any value into textbox

$(".tbxNumber").bind("drop", function (e) {

return false;

});

</script>

<style>

.important {

font-weight: bold;

font-size: xx-large;

}

.blue {

color: blue;

}

</style>

</head>

<body>

<h2 class="test">This is a heading</h2>

<p class="test">This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Try it Now

Tuesday, 25 August 2015

SQL Paging

SQL Paging Select Query

SELECT *
FROM (SELECT *
          FROM ( SELECT ROWNUM SNO
                      , RESULT.*
                   FROM (

SELECT DISTINCT PSD.PSD_SUMMARYID   PMD_SUMMARYID,
                                                  TO_CHAR(PSD.PSD_CREATEDTIME, :dateFormat) PSD_CREATEDTIME,
                                                  PSD.PSD_CREATEDTIME CREATEDTIME,
                                                  INS.INS_NAME INSURERNAME

                                    FROM [SCHEMA].PLC_PSD_PAYMENTSUMMARYDETAILS PSD
                                                INNER JOIN [SCHEMA].PLC_PMD_PAYMENTDETAILS PMD
                                                ON PSD.PSD_SUMMARYID = PMD.PMD_SUMMARYID
                                                INNER JOIN [SCHEMA].PLC_PLC_POLICY PLC
                                                ON PMD.PMD_POLICYID = PLC.PLC_POLICYID
                                                INNER JOIN [SCHEMA].MST_INS_INSURERMASTER INS
                                                ON INS.INS_INSURERID              = PSD.PSD_INSURERID
                                                WHERE PLC.PLC_APPLICATIONCLIENTKEY = :APPLICATIONCLIENTKEY
                                                AND PLC.PLC_DEALERID               = :PLC_DEALERID
                                                AND PMD.PMD_SUMMARYID IS NOT NULL
                                     order by PMD_SUMMARYID desc

) RESULT
                  WHERE ROWNUM <=(:Page_No*10) ORDER BY ROWNUM DESC )
         WHERE ROWNUM <=10 ORDER BY ROWNUM DESC
       )
ORDER BY SNO

Thursday, 6 August 2015

pointer-events:none Chrome, IE, FireFox solved

pointer-events:none property for Chrome, IE & Firefox

This property work fine in Chrome & Firefox.

Alternative for Internet Explorer is given below

$(document).on('mousedown', '.TopElement', function (e) {

            $(this).hide();
            var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
            $(this).show();
            $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

return false;

});

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
$(document).on('mousedown', '#divPointer', function (e) {

return false;

});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<div id="divPointer">
<input type="text" value="umesh" style="pointer-events:none"></input></div>
</body>
</html>

Wednesday, 5 August 2015

Track changes in a HTML form (DOM onchange Event handler)

How to track changes made in a HTML form?

Description: Bind an event handler to the "change" JavaScript event, or trigger that event on an element.

This method is a shortcut for .on( "change", handler ) in the first two variations, and .trigger( "change" ) in the third.

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea>boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

For example, consider the HTML:

<!doctype html>

<head>

<title>change demo</title>

<style>

div {

color: red;

}

</style>

</head>

<body>

<form>

<option>Chocolate</option>

<option selected="selected">Candy</option>

<option>Taffy</option>

<option selected="selected">Caramel</option>

<option>Fudge</option>

<option>Cookie</option>

</select>

</form>

$( "form" )

.change(function () {

var str = "";

$( "select option:selected" ).each(function() {

str += $( this ).text() + " ";

});

$( "div" ).text( str );

$("#divChange").text($("#tb").val());

})

.change();

</script>

</body>

</html>

For more information:

https://api.jquery.com/change/

Tuesday, 21 July 2015

Read and Write Object data from and to NotePad using C#

Read and Write data from and to NotePad

Is this possible by C#? Yes, this is possible by C#. Newtonsoft.Json.dll is needed for this.

Well a ViewModel is need to be declared and data will be read or written from or to notepad as a type of this ViewModel.

Writing an Object data into a notepad

public static void WrieDataToNotePad(string filePath, Object obj)

{

StreamWriter writer = new StreamWriter(filePath);

string jsonData = JsonConvert.SerializeObject(obj);

writer.Write(jsonData);

writer.Close();

}

Example:-

NotePadInteractor.WrieDataToNotePad(AppDomain.CurrentDomain.BaseDirectory + "AppData.txt", new NotePadData { RunApp=true,ModifiedMonth=DateTime.Today.Month});

Here NotePadData is a ViewModel.

If "AppData.txt" is not available in the above location(filePath), it’ll create a file with this name in that location. Data will be stored in JSON format in the .txt file and can be used later in an application as required.

Note:- JsonConvert.SerializeObject(obj) is a part of Newtonsoft.Json.dll

Reading an Object data from a notepad

public static NotePadData ReadNotePadData(string filePath)

{

try

{

StreamReader reader = new StreamReader(filePath);

string jsonData = reader.ReadToEnd();

reader.Close();

return JsonConvert.DeserializeObject<NotePadData>(jsonData);

}

catch(Exception ex)

{

return null;

throw ex;

}

If location provided in the filePath doesnot contain a file, with the given name then file not found exception will be encountered. So in order to handle this exception, codes need to be written in the catch block.

Type of ViewModel need to be given in this function JsonConvert.DeserializeObject<ViewModelName>(jsonData);

Obviously, this function is a part of Newtonsoft.Json.dll

DNK Gif

Labels

Sunday, 6 September 2015

Allow only numer input in textbox

What is HTML Local Storage?

HTML Local Storage Objects

The localStorage Object

Example

Example

The sessionStorage Object

Example

How to inject HTML content into an iframe object using javascript?

Example:

Encryption:

Decryption:

Example:

How to get Query String value using Javascript?

Wednesday, 2 September 2015

Restricting alphabets and special characters entry in a textbox and allowing only numeric value entry using jquery

Example

Tuesday, 25 August 2015

SQL Paging Select Query

Thursday, 6 August 2015

pointer-events:none property for Chrome, IE & Firefox

Example:

Wednesday, 5 August 2015

How to track changes made in a HTML form?

Tuesday, 21 July 2015

Read and Write data from and to NotePad

Writing an Object data into a notepad

Reading an Object data from a notepad