DNK Gif

Dot Net Knowledge

Labels

Sunday, 6 September 2015

Allow only numer input in textbox using jquery

Allow only numer input in textbox

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(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>
<input type="text" class="blue important" id="tbx"></input>
<input type="text" class="blue important" id="tbx1"></input>
<input type="text" class="blue important" id="tbx2"></input>
</body>
</html>

Posted by at No comments:
Labels:

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 »

Posted by at No comments:
Labels:

Inject HTML content into an iframe object using javascript

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

 <script type="text/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>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Tryit Editor</title>
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 8]>
    <style>
    .textareacontainer, .iframecontainer {width:48%;}
    .textarea, .iframe {height:800px;}
    #textareaCode, #iframeResult {height:700px;}
    .menu img {display:none;}
    </style>
    <![endif]-->

    <style type="text/css">
        * {
            -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>

    <script>
        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>
    <script type="text/javascript">
        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>
    <div class="container">
        <div class="textareacontainer">
            <div class="textarea">
                <div style="overflow:auto;">
                    <div class="headerText">Edit This Code:</div>
                    <button class="seeResult" type="button" onclick="submitTryit()">See Result »</button>
                </div>
                <div class="textareawrapper">
                    <textarea autocomplete="off" class="code_input" id="textareaCode" wrap="logical" spellcheck="false">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;This is the Test WorkSpace&lt;/h1&gt;

&lt;/body&gt;
&lt;/html&gt;
                    </textarea>
                </div>
            </div>
        </div>
        <div class="iframecontainer">
            <div class="iframe">
                <div style="overflow:auto;">
                    <div class="headerText">Result:</div>
                </div>
                <div class="iframewrapper">
                    <iframe id="iframeResult" class="result_output" frameborder="0" name="view"></iframe>
                </div>
            </div>
        </div>
        <script>submitTryit()</script>
    </div>
</body>
</html>

Posted by at No comments:
Labels:

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>

<button onclick="myFunction()">Try it</button>

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

<p id="demo"></p>

<script>
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>

Posted by at No comments:
Labels:

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

Posted by at No comments:
Labels:

Tryit Editor

Tryit Editor
Edit This Code:
Result:



































































Posted by at No comments:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(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>
<input type="text" class="blue important" id="tbx"></input>
</body>
</html>
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)