Thursday, 27 March 2014

Password Protected Webpage Using Javascript

Password Protected Webpage Using Javascript

The following is a nasty trick to create password Protected pages and redirect to the central page if the password is correct otherwise redirect to a error page.. 


<html>
<head>
<script type="text/javascript">
var password = "please";
var x = prompt("Enter in the password "," ");
if (x.toLowerCase() == password) {
  alert("Come right in \n \n You've entered in the right password");
  window.location = "index.htm";
}
else {
  window.location = "bad.htm";
}
</script>
<title></title>
</head>
<body>
</body>
</html>

Posted by at No comments:
Labels: , , ,

World Countries and Indian State Dropdownlist


World Countries and Indian State Dropdownlist


Here is a sample code which displays dropdownlist with all Country Name and the list of all States of India.. Modify it as per your requirement..

Country Dropdown:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Country Dropdown</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:DropDownList id="ddlCountry" runat="server">
<asp:ListItem Value="" Selected="True">Select Country</asp:ListItem>
<asp:ListItem Value="AF">Afghanistan</asp:ListItem>
<asp:ListItem Value="AL">Albania</asp:ListItem>
<asp:ListItem Value="DZ">Algeria</asp:ListItem>
<asp:ListItem Value="AS">American Samoa</asp:ListItem>
<asp:ListItem Value="AD">Andorra</asp:ListItem>
<asp:ListItem Value="AO">Angola</asp:ListItem>
<asp:ListItem Value="AI">Anguilla</asp:ListItem>
<asp:ListItem Value="AQ">Antarctica</asp:ListItem>
<asp:ListItem Value="AG">Antigua And Barbuda</asp:ListItem>
<asp:ListItem Value="AR">Argentina</asp:ListItem>
<asp:ListItem Value="AM">Armenia</asp:ListItem>
<asp:ListItem Value="AW">Aruba</asp:ListItem>
<asp:ListItem Value="AU">Australia</asp:ListItem>
<asp:ListItem Value="AT">Austria</asp:ListItem>
<asp:ListItem Value="AZ">Azerbaijan</asp:ListItem>
<asp:ListItem Value="BS">Bahamas</asp:ListItem>
<asp:ListItem Value="BH">Bahrain</asp:ListItem>
<asp:ListItem Value="BD">Bangladesh</asp:ListItem>
<asp:ListItem Value="BB">Barbados</asp:ListItem>
<asp:ListItem Value="BY">Belarus</asp:ListItem>
<asp:ListItem Value="BE">Belgium</asp:ListItem>
<asp:ListItem Value="BZ">Belize</asp:ListItem>
<asp:ListItem Value="BJ">Benin</asp:ListItem>
<asp:ListItem Value="BM">Bermuda</asp:ListItem>
<asp:ListItem Value="BT">Bhutan</asp:ListItem>
<asp:ListItem Value="BO">Bolivia</asp:ListItem>
<asp:ListItem Value="BA">Bosnia And Herzegowina</asp:ListItem>
<asp:ListItem Value="BW">Botswana</asp:ListItem>
<asp:ListItem Value="BV">Bouvet Island</asp:ListItem>
<asp:ListItem Value="BR">Brazil</asp:ListItem>
<asp:ListItem Value="IO">British Indian Ocean Territory</asp:ListItem>
<asp:ListItem Value="BN">Brunei Darussalam</asp:ListItem>
<asp:ListItem Value="BG">Bulgaria</asp:ListItem>
<asp:ListItem Value="BF">Burkina Faso</asp:ListItem>
<asp:ListItem Value="BI">Burundi</asp:ListItem>
<asp:ListItem Value="KH">Cambodia</asp:ListItem>
<asp:ListItem Value="CM">Cameroon</asp:ListItem>
<asp:ListItem Value="CA">Canada</asp:ListItem>
<asp:ListItem Value="CV">Cape Verde</asp:ListItem>
<asp:ListItem Value="KY">Cayman Islands</asp:ListItem>
<asp:ListItem Value="CF">Central African Republic</asp:ListItem>
<asp:ListItem Value="TD">Chad</asp:ListItem>
<asp:ListItem Value="CL">Chile</asp:ListItem>
<asp:ListItem Value="CN">China</asp:ListItem>
<asp:ListItem Value="CX">Christmas Island</asp:ListItem>
<asp:ListItem Value="CC">Cocos (Keeling) Islands</asp:ListItem>
<asp:ListItem Value="CO">Colombia</asp:ListItem>
<asp:ListItem Value="KM">Comoros</asp:ListItem>
<asp:ListItem Value="CG">Congo</asp:ListItem>
<asp:ListItem Value="CK">Cook Islands</asp:ListItem>
<asp:ListItem Value="CR">Costa Rica</asp:ListItem>
<asp:ListItem Value="CI">Cote D'Ivoire</asp:ListItem>
<asp:ListItem Value="HR">Croatia (Local Name: Hrvatska)</asp:ListItem>
<asp:ListItem Value="CU">Cuba</asp:ListItem>
<asp:ListItem Value="CY">Cyprus</asp:ListItem>
<asp:ListItem Value="CZ">Czech Republic</asp:ListItem>
<asp:ListItem Value="DK">Denmark</asp:ListItem>
<asp:ListItem Value="DJ">Djibouti</asp:ListItem>
<asp:ListItem Value="DM">Dominica</asp:ListItem>
<asp:ListItem Value="DO">Dominican Republic</asp:ListItem>
<asp:ListItem Value="TP">East Timor</asp:ListItem>
<asp:ListItem Value="EC">Ecuador</asp:ListItem>
<asp:ListItem Value="EG">Egypt</asp:ListItem>
<asp:ListItem Value="SV">El Salvador</asp:ListItem>
<asp:ListItem Value="GQ">Equatorial Guinea</asp:ListItem>
<asp:ListItem Value="ER">Eritrea</asp:ListItem>
<asp:ListItem Value="EE">Estonia</asp:ListItem>
<asp:ListItem Value="ET">Ethiopia</asp:ListItem>
<asp:ListItem Value="FK">Falkland Islands (Malvinas)</asp:ListItem>
<asp:ListItem Value="FO">Faroe Islands</asp:ListItem>
<asp:ListItem Value="FJ">Fiji</asp:ListItem>
<asp:ListItem Value="FI">Finland</asp:ListItem>
<asp:ListItem Value="FR">France</asp:ListItem>
<asp:ListItem Value="GF">French Guiana</asp:ListItem>
<asp:ListItem Value="PF">French Polynesia</asp:ListItem>
<asp:ListItem Value="TF">French Southern Territories</asp:ListItem>
<asp:ListItem Value="GA">Gabon</asp:ListItem>
<asp:ListItem Value="GM">Gambia</asp:ListItem>
<asp:ListItem Value="GE">Georgia</asp:ListItem>
<asp:ListItem Value="DE">Germany</asp:ListItem>
<asp:ListItem Value="GH">Ghana</asp:ListItem>
<asp:ListItem Value="GI">Gibraltar</asp:ListItem>
<asp:ListItem Value="GR">Greece</asp:ListItem>
<asp:ListItem Value="GL">Greenland</asp:ListItem>
<asp:ListItem Value="GD">Grenada</asp:ListItem>
<asp:ListItem Value="GP">Guadeloupe</asp:ListItem>
<asp:ListItem Value="GU">Guam</asp:ListItem>
<asp:ListItem Value="GT">Guatemala</asp:ListItem>
<asp:ListItem Value="GN">Guinea</asp:ListItem>
<asp:ListItem Value="GW">Guinea-Bissau</asp:ListItem>
<asp:ListItem Value="GY">Guyana</asp:ListItem>
<asp:ListItem Value="HT">Haiti</asp:ListItem>
<asp:ListItem Value="HM">Heard And Mc Donald Islands</asp:ListItem>
<asp:ListItem Value="VA">Holy See (Vatican City State)</asp:ListItem>
<asp:ListItem Value="HN">Honduras</asp:ListItem>
<asp:ListItem Value="HK">Hong Kong</asp:ListItem>
<asp:ListItem Value="HU">Hungary</asp:ListItem>
<asp:ListItem Value="IS">Icel And</asp:ListItem>
<asp:ListItem Value="IN">India</asp:ListItem>
<asp:ListItem Value="ID">Indonesia</asp:ListItem>
<asp:ListItem Value="IR">Iran (Islamic Republic Of)</asp:ListItem>
<asp:ListItem Value="IQ">Iraq</asp:ListItem>
<asp:ListItem Value="IE">Ireland</asp:ListItem>
<asp:ListItem Value="IL">Israel</asp:ListItem>
<asp:ListItem Value="IT">Italy</asp:ListItem>
<asp:ListItem Value="JM">Jamaica</asp:ListItem>
<asp:ListItem Value="JP">Japan</asp:ListItem>
<asp:ListItem Value="JO">Jordan</asp:ListItem>
<asp:ListItem Value="KZ">Kazakhstan</asp:ListItem>
<asp:ListItem Value="KE">Kenya</asp:ListItem>
<asp:ListItem Value="KI">Kiribati</asp:ListItem>
<asp:ListItem Value="KP">Korea, Dem People'S Republic</asp:ListItem>
<asp:ListItem Value="KR">Korea, Republic Of</asp:ListItem>
<asp:ListItem Value="KW">Kuwait</asp:ListItem>
<asp:ListItem Value="KG">Kyrgyzstan</asp:ListItem>
<asp:ListItem Value="LA">Lao People'S Dem Republic</asp:ListItem>
<asp:ListItem Value="LV">Latvia</asp:ListItem>
<asp:ListItem Value="LB">Lebanon</asp:ListItem>
<asp:ListItem Value="LS">Lesotho</asp:ListItem>
<asp:ListItem Value="LR">Liberia</asp:ListItem>
<asp:ListItem Value="LY">Libyan Arab Jamahiriya</asp:ListItem>
<asp:ListItem Value="LI">Liechtenstein</asp:ListItem>
<asp:ListItem Value="LT">Lithuania</asp:ListItem>
<asp:ListItem Value="LU">Luxembourg</asp:ListItem>
<asp:ListItem Value="MO">Macau</asp:ListItem>
<asp:ListItem Value="MK">Macedonia</asp:ListItem>
<asp:ListItem Value="MG">Madagascar</asp:ListItem>
<asp:ListItem Value="MW">Malawi</asp:ListItem>
<asp:ListItem Value="MY">Malaysia</asp:ListItem>
<asp:ListItem Value="MV">Maldives</asp:ListItem>
<asp:ListItem Value="ML">Mali</asp:ListItem>
<asp:ListItem Value="MT">Malta</asp:ListItem>
<asp:ListItem Value="MH">Marshall Islands</asp:ListItem>
<asp:ListItem Value="MQ">Martinique</asp:ListItem>
<asp:ListItem Value="MR">Mauritania</asp:ListItem>
<asp:ListItem Value="MU">Mauritius</asp:ListItem>
<asp:ListItem Value="YT">Mayotte</asp:ListItem>
<asp:ListItem Value="MX">Mexico</asp:ListItem>
<asp:ListItem Value="FM">Micronesia, Federated States</asp:ListItem>
<asp:ListItem Value="MD">Moldova, Republic Of</asp:ListItem>
<asp:ListItem Value="MC">Monaco</asp:ListItem>
<asp:ListItem Value="MN">Mongolia</asp:ListItem>
<asp:ListItem Value="MS">Montserrat</asp:ListItem>
<asp:ListItem Value="MA">Morocco</asp:ListItem>
<asp:ListItem Value="MZ">Mozambique</asp:ListItem>
<asp:ListItem Value="MM">Myanmar</asp:ListItem>
<asp:ListItem Value="NA">Namibia</asp:ListItem>
<asp:ListItem Value="NR">Nauru</asp:ListItem>
<asp:ListItem Value="NP">Nepal</asp:ListItem>
<asp:ListItem Value="NL">Netherlands</asp:ListItem>
<asp:ListItem Value="AN">Netherlands Ant Illes</asp:ListItem>
<asp:ListItem Value="NC">New Caledonia</asp:ListItem>
<asp:ListItem Value="NZ">New Zealand</asp:ListItem>
<asp:ListItem Value="NI">Nicaragua</asp:ListItem>
<asp:ListItem Value="NE">Niger</asp:ListItem>
<asp:ListItem Value="NG">Nigeria</asp:ListItem>
<asp:ListItem Value="NU">Niue</asp:ListItem>
<asp:ListItem Value="NF">Norfolk Island</asp:ListItem>
<asp:ListItem Value="MP">Northern Mariana Islands</asp:ListItem>
<asp:ListItem Value="NO">Norway</asp:ListItem>
<asp:ListItem Value="OM">Oman</asp:ListItem>
<asp:ListItem Value="PK">Pakistan</asp:ListItem>
<asp:ListItem Value="PW">Palau</asp:ListItem>
<asp:ListItem Value="PA">Panama</asp:ListItem>
<asp:ListItem Value="PG">Papua New Guinea</asp:ListItem>
<asp:ListItem Value="PY">Paraguay</asp:ListItem>
<asp:ListItem Value="PE">Peru</asp:ListItem>
<asp:ListItem Value="PH">Philippines</asp:ListItem>
<asp:ListItem Value="PN">Pitcairn</asp:ListItem>
<asp:ListItem Value="PL">Poland</asp:ListItem>
<asp:ListItem Value="PT">Portugal</asp:ListItem>
<asp:ListItem Value="PR">Puerto Rico</asp:ListItem>
<asp:ListItem Value="QA">Qatar</asp:ListItem>
<asp:ListItem Value="RE">Reunion</asp:ListItem>
<asp:ListItem Value="RO">Romania</asp:ListItem>
<asp:ListItem Value="RU">Russian Federation</asp:ListItem>
<asp:ListItem Value="RW">Rwanda</asp:ListItem>
<asp:ListItem Value="KN">Saint K Itts And Nevis</asp:ListItem>
<asp:ListItem Value="LC">Saint Lucia</asp:ListItem>
<asp:ListItem Value="VC">Saint Vincent, The Grenadines</asp:ListItem>
<asp:ListItem Value="WS">Samoa</asp:ListItem>
<asp:ListItem Value="SM">San Marino</asp:ListItem>
<asp:ListItem Value="ST">Sao Tome And Principe</asp:ListItem>
<asp:ListItem Value="SA">Saudi Arabia</asp:ListItem>
<asp:ListItem Value="SN">Senegal</asp:ListItem>
<asp:ListItem Value="SC">Seychelles</asp:ListItem>
<asp:ListItem Value="SL">Sierra Leone</asp:ListItem>
<asp:ListItem Value="SG">Singapore</asp:ListItem>
<asp:ListItem Value="SK">Slovakia (Slovak Republic)</asp:ListItem>
<asp:ListItem Value="SI">Slovenia</asp:ListItem>
<asp:ListItem Value="SB">Solomon Islands</asp:ListItem>
<asp:ListItem Value="SO">Somalia</asp:ListItem>
<asp:ListItem Value="ZA">South Africa</asp:ListItem>
<asp:ListItem Value="GS">South Georgia , S Sandwich Is.</asp:ListItem>
<asp:ListItem Value="ES">Spain</asp:ListItem>
<asp:ListItem Value="LK">Sri Lanka</asp:ListItem>
<asp:ListItem Value="SH">St. Helena</asp:ListItem>
<asp:ListItem Value="PM">St. Pierre And Miquelon</asp:ListItem>
<asp:ListItem Value="SD">Sudan</asp:ListItem>
<asp:ListItem Value="SR">Suriname</asp:ListItem>
<asp:ListItem Value="SJ">Svalbard, Jan Mayen Islands</asp:ListItem>
<asp:ListItem Value="SZ">Sw Aziland</asp:ListItem>
<asp:ListItem Value="SE">Sweden</asp:ListItem>
<asp:ListItem Value="CH">Switzerland</asp:ListItem>
<asp:ListItem Value="SY">Syrian Arab Republic</asp:ListItem>
<asp:ListItem Value="TW">Taiwan</asp:ListItem>
<asp:ListItem Value="TJ">Tajikistan</asp:ListItem>
<asp:ListItem Value="TZ">Tanzania, United Republic Of</asp:ListItem>
<asp:ListItem Value="TH">Thailand</asp:ListItem>
<asp:ListItem Value="TG">Togo</asp:ListItem>
<asp:ListItem Value="TK">Tokelau</asp:ListItem>
<asp:ListItem Value="TO">Tonga</asp:ListItem>
<asp:ListItem Value="TT">Trinidad And Tobago</asp:ListItem>
<asp:ListItem Value="TN">Tunisia</asp:ListItem>
<asp:ListItem Value="TR">Turkey</asp:ListItem>
<asp:ListItem Value="TM">Turkmenistan</asp:ListItem>
<asp:ListItem Value="TC">Turks And Caicos Islands</asp:ListItem>
<asp:ListItem Value="TV">Tuvalu</asp:ListItem>
<asp:ListItem Value="UG">Uganda</asp:ListItem>
<asp:ListItem Value="UA">Ukraine</asp:ListItem>
<asp:ListItem Value="AE">United Arab Emirates</asp:ListItem>
<asp:ListItem Value="GB">United Kingdom</asp:ListItem>
<asp:ListItem Value="US">United States</asp:ListItem>
<asp:ListItem Value="UM">United States Minor Is.</asp:ListItem>
<asp:ListItem Value="UY">Uruguay</asp:ListItem>
<asp:ListItem Value="UZ">Uzbekistan</asp:ListItem>
<asp:ListItem Value="VU">Vanuatu</asp:ListItem>
<asp:ListItem Value="VE">Venezuela</asp:ListItem>
<asp:ListItem Value="VN">Viet Nam</asp:ListItem>
<asp:ListItem Value="VG">Virgin Islands (British)</asp:ListItem>
<asp:ListItem Value="VI">Virgin Islands (U.S.)</asp:ListItem>
<asp:ListItem Value="WF">Wallis And Futuna Islands</asp:ListItem>
<asp:ListItem Value="EH">Western Sahara</asp:ListItem>
<asp:ListItem Value="YE">Yemen</asp:ListItem>
<asp:ListItem Value="ZR">Zaire</asp:ListItem>
<asp:ListItem Value="ZM">Zambia</asp:ListItem>
<asp:ListItem Value="ZW">Zimbabwe</asp:ListItem>
</asp:DropDownList>
    </div>
    </form>
</body>
</html>

Indian State Dropdown:


<html>
<head><title>Indian State List</title></head>
<body>
<select name=slist>
<option value="">------------Select State------------</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Orissa">Orissa</option>
<option value="Pondicherry">Pondicherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Tripura">Tripura</option>
<option value="Uttaranchal">Uttaranchal</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="West Bengal">West Bengal</option>
</select>
</body>
</html>
Posted by at 10 comments:
Labels: , ,

Create Dynamic Textbox Using Javascript

Create Dynamic Textbox Using Javascript


We can create dynamic Textboxes using the following Javascript Code Snippet.. Easy to Use..


<html>
<head>
<title>Dynamic Form</title>
<script type="text/javascript" >
function CreateTextbox()
{
var i = 1;
createTextbox.innerHTML = createTextbox.innerHTML +"<input type=text name='mytext'+ i/>"
createTextbox.innerHTML = createTextbox.innerHTML +"<input type=button value='Dynamci Button'+ i name='mytext'+ i/>"

}
</script>
</head>
<body>

<form name="form">
<input type="button" value="clickHere" onClick="CreateTextbox()"/>
<div id="createTextbox">

</div>
</form>
</body>
</html>

Posted by at 2 comments:
Labels: , , ,

Tabbed Look Using .Net Multiview Control

 

Tabbed Look Using .Net Multiview Control


Here is a trick to display tabbed menu using Multiview control and little bit CSS styling..


<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server"><title>Tabbed pages</title>
        <style type="text/css">
            .style1
            {
                height: 31px;
            }
        </style>
          <style type="text/css">
        .Initial
        {
            display: block;
            padding: 4px 18px 4px 18px;
            float: left;
            background: url("Images/InitialImage.png") no-repeat right top;
            color: Black;
            font-weight: bold;
        }
        .Initial:hover
        {
            color: White;
            background: url("Images/SelectedButton.png") no-repeat right top;
        }
        .Clicked
        {
            float: left;
            display: block;
            background: url("Images/SelectedButton.png") no-repeat right top;
            padding: 4px 18px 4px 18px;
            color: Black;
            font-weight: bold;
            color: White;
        }
    </style>

    </head>
    <body>
        <form id="form" runat="server">
            <table cellspacing="10">
                <tr>
                    <td class="style1"><asp:LinkButton ID="Link1" runat="server" CssClass="Initial">Package</asp:LinkButton></td>
                    <td class="style1"><asp:LinkButton ID="Link2" runat="server" CssClass="Initial">Itenary</asp:LinkButton></td>
                    <td class="style1"><asp:LinkButton ID="Link3" runat="server" CssClass="Initial">Link 3</asp:LinkButton></td>
                </tr>        
            </table>
            <asp:MultiView ID="MyMultiView" runat="server">
                <asp:View ID="View1" runat="server">
                    Tab 1 - insert your content here
       
                   
                   
                </asp:View>
                <asp:View ID="View2" runat="server">
                    Tab 2 - insert your content here
                   
           
                   
                </asp:View>
                <asp:View ID="View3" runat="server">
                    Tab 3 - insert your content here
                   
                   
                   
                </asp:View>
            </asp:MultiView>
        </form>
    </body>
</html>

Posted by at No comments:
Labels: , , ,

Internal Search Using Jquery/ Search within Webpage Using Jquery

 

Internal Search Using Jquery/ Search within Webpage Using Jquery


Here is a way to search a text/string present inside a page by typing the keyword in the textbox. Here We are using Jquery file and little bit of CSS.


<!DOCTYPE html>
<html>
<head>
  <title>Internal Search Using Jquery</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>


  <style type='text/css'>
    #all_text span
{
    text-decoration:underline;
    background-color:yellow;    
}

  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#searchfor').keyup(function(){
         var page = $('#all_text');
         var pageText = page.text().replace("<span>","").replace("</span>");
         var searchedText = $('#searchfor').val();
         var theRegEx = new RegExp("("+searchedText+")", "igm");    
         var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
         page.html(newHtml);
    });
});//]]>  

</script>


</head>
<body>
      <input type="text" id="searchfor"/>
    <p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</p>
  
</body>


</html>

Posted by at No comments:
Labels: , , ,

Insert Text/String at Cursor Position inside Textbox/TextArea Using Javascript

 

Insert Text/String at Cursor Position inside Textbox/TextArea Using Javascript


The following trick can be used to insert Random text wherever the blinking cursor is present on the click of Button..



<html>
<head>
<script>
function getCaret(el) {
    if (el.selectionStart) {
        return el.selectionStart;
    } else if (document.selection) {
        el.focus();

        var r = document.selection.createRange();
        if (r == null) {
            return 0;
        }

        var re = el.createTextRange(),
            rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);

        return rc.text.length;
    }
    return 0;
}

function InsertText() {
    var textarea = document.getElementById('txtArea');
    var currentPos = getCaret(textarea);
    //alert(currentPos);
    var strLeft = textarea.value.substring(0, currentPos);
    var strMiddle = "-- Hello World --";
    var strRight = textarea.value.substring(currentPos, textarea.value.length);
    textarea.value = strLeft + strMiddle + strRight;
}
</script>
<title>Insert Text @ Cursor Position</title></head>
<body>
<textarea id="txtArea" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
<button onclick="InsertText();">Insert Text</button>
</body>
</html>

Posted by at 1 comment:
Labels: , ,

Sunday, 16 March 2014

Persist Visitors' history based upon Username using Javascript


Persist Visitors' history based upon Username using Javascript


The below trick will allow your visitors to keep the track of their last visit information etc. It will store those information of the browser cookies of the user.. Refer the Code Snippet for more details..


<html><head>
<title>Javascript prompt for name</title>
</head><body>
<script type="text/javascript">
      var expDays = 30;
      var exp = new Date(); 
      exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
      
      function Who(info){
       // Who
        var VisitorName = GetCookie('VisitorName')
        if (VisitorName == null) {
         VisitorName = prompt("Who are you?");
         SetCookie ('VisitorName', VisitorName, exp);
        }
      
       return VisitorName;
      }
      
      function When(info){
       // When
            var rightNow = new Date()
        var WWHTime = 0;
        WWHTime = GetCookie('WWhenH')
        
        WWHTime = WWHTime * 1

        var lastHereFormatting = new Date(WWHTime);  // Date-i-fy that number
               var intLastVisit = (lastHereFormatting.getYear() * 10000)+(lastHereFormatting.getMonth() * 100) + lastHereFormatting.getDate()
               var lastHereInDateFormat = "" + lastHereFormatting;  // Gotta use substring functions
               var dayOfWeek = lastHereInDateFormat.substring(0,3)
               var dateMonth = lastHereInDateFormat.substring(4,11)
               var timeOfDay = lastHereInDateFormat.substring(11,16)
               var year = lastHereInDateFormat.substring(23,25)
               var WWHText = dayOfWeek + ", " + dateMonth + " at " + timeOfDay // display
      
      
       
        SetCookie ("WWhenH", rightNow.getTime(), exp)
      
       return WWHText;
      }
      
      function Count(info){
       var psj=0;
       // How many times
        var WWHCount = GetCookie('WWHCount')
        if (WWHCount == null) {
         WWHCount = 0;
        }
        else{
         WWHCount++;
        }
        SetCookie ('WWHCount', WWHCount, exp);
      
      
       return WWHCount;
      }
      
      
      
      function set(){
       VisitorName = prompt("Who are you?");
       SetCookie ('VisitorName', VisitorName, exp);
       SetCookie ('WWHCount', 0, exp);
       SetCookie ('WWhenH', 0, exp);
      }
      
      
      function getCookieVal (offset) {  
       var endstr = document.cookie.indexOf (";", offset);  
       if (endstr == -1)    
        endstr = document.cookie.length;  
        return unescape(document.cookie.substring(offset, endstr));
      }
      
      function GetCookie (name) {  
       var arg = name + "=";  
       var alen = arg.length;  
       var clen = document.cookie.length;  
       var i = 0;  
       while (i < clen) {    
       var j = i + alen;    
       if (document.cookie.substring(i, j) == arg)      
        return getCookieVal (j);    
        i = document.cookie.indexOf(" ", i) + 1;    
        if (i == 0) break;   
       }  
       return null;
      }
      
      function SetCookie (name, value) {  
       var argv = SetCookie.arguments;  
       var argc = SetCookie.arguments.length;  
       var expires = (argc > 2) ? argv[2] : null;  
       var path = (argc > 3) ? argv[3] : null;  
       var domain = (argc > 4) ? argv[4] : null;  
       var secure = (argc > 5) ? argv[5] : false;  
       document.cookie = name + "=" + escape (value) + 
       ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
       ((path == null) ? "" : ("; path=" + path)) +  
       ((domain == null) ? "" : ("; domain=" + domain)) +    
       ((secure == true) ? "; secure" : "");
      }
      
      function DeleteCookie (name) {  
       var exp = new Date();  
       exp.setTime (exp.getTime() - 1);  
       // This cookie is history  
       var cval = GetCookie (name);  
       document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
      
      }
      //  End Script -->
      
      </script><script>
       document.write("Hello <b>" + Who() + "</b>. You've been here <b>" + Count() + "</b> time(s). Last time was <b>" + When() +"</b>.")
      </script><p><br><a href="JavaScript:set()">Change name</a></p><p>&nbsp;</p>
</body>
</html>

Posted by at No comments:
Labels: , ,

Change Page Background Colour Every 5 Second Using Javascript


Change Page Background Colour Every 5 Second Using Javascript


So here I am with a trick which will change the background colour of your page every 5 seconds.. You can use the script to change the background image at a particular interval..


<html>
<head>
<title>Change Page Background Every 5 seconds</title>

<script type="text/javascript">

// Description: Randomly change background color every 5 seconds

function setbackground()
{
window.setTimeout( "setbackground()", 5000); // 5000 milliseconds delay

var index = Math.round(Math.random() * 9);

var ColorValue = "FFFFFF"; // default color - white (index = 0)

if(index == 1)
ColorValue = "FFCCCC"; //peach
if(index == 2)
ColorValue = "CCAFFF"; //violet
if(index == 3)
ColorValue = "A6BEFF"; //lt blue
if(index == 4)
ColorValue = "99FFFF"; //cyan
if(index == 5)
ColorValue = "D5CCBB"; //tan
if(index == 6)
ColorValue = "99FF99"; //lt green
if(index == 7)
ColorValue = "FFFF99"; //lt yellow
if(index == 8)
ColorValue = "FFCC99"; //lt orange
if(index == 9)
ColorValue = "CCCCCC"; //lt grey

document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;

}
</script>


</head>
<body onload="setbackground();"> 
</body>
</html>

Posted by at No comments:
Labels: , ,

Change Page Background Colour Based Upon Current Time Using Javascript

Change Page Background Colour Based Upon Current Time Using Javascript


Use the following code snippet to change the background colour of your page based upon the Current System Time.. You can modify the code to change the background image of page based upon the time..


<html>
<head>
<title>Change Page Background Colour Based Upon Current Time</title>

<script type="text/javascript">
var now = new Date();
var hours = now.getHours();

//Place this script in your HTML heading section

document.write('It\'s now: ', hours, '<br><br>');
document.bgColor="#CC9900";

//18-19 night
if (hours > 17 && hours < 20){
document.write ('<body style="background-color: orange">');
}
//20-21 night
else if (hours > 19 && hours < 22){
document.write ('<body style="background-color: orangered">');
}
//22-4 night
else if (hours > 21 || hours < 5){
document.write ('<body style="background-color: #C0C0C0;">');
}
//9-17 day
else if (hours > 8 && hours < 18){
document.write ('<body style="background-color: #616D7E">');
}
//7-8 day
else if (hours > 6 && hours < 9){
document.write ('<body style="background-color: skyblue">');}
//5-6 day
else if (hours > 4 && hours < 7){
document.write ('<body style="background-color: steelblue">');
}
else {
document.write ('<body style="background-color: white">');
}
</script>

</head>
<body>
</body>
</html>

Posted by at No comments:
Labels: , ,

Reload Page Button Using Javascript


Reload Page Button Using Javascript


Sometime we need a reload button to get the updated information or to perform certain activities on page load event. In such scenarios this Javascript Page reload button can be used to achieve such goals.. 

Refer the Code Snippet below which refreshes the current time whenever the Reload button is pressed..


<html>
<head>
<title>Reload Page Button</title>
<script>

var d=new Date();
document.write(d);

</script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<INPUT Type="button" VALUE="Reload Page" onClick="history.go(0)">
</body>
</html>

Posted by at No comments:
Labels: ,

Display Current Time on Page using Javascript


Display Current Time on Page using Javascript


Use the following Code-Snippet to display Current Time using Javascript...


<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
<title>Display Current Time</title>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)
loading..
back to top