Open a custom popup on browser window/tab close

<script type=”text/javascript”>
    window.onbeforeunload = function () {
        var returnval = confirm(“Do you want to leave this page?”);
        if (returnval == false) {
            return false;
        }
    };
</script>

Allow only numbers to be typed in a textbox [duplicate]

function onlyNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

Build a Calendar Using PHP, HTML, and CSS

One of the website features my customers love to provider their web users is an online dynamic calendar. An online calendar can be used for events, upcoming product specials, memos, and anything else you can think of. I’ve taken some time to completely rewrite the PHP event calendar so that I may share it with you.

The CSS

/* calendar */
table.calendar        { border-left:1px solid #999; }
tr.calendar-row    {  }
td.calendar-day    { min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover    { background:#eceff5; }
td.calendar-day-np    { background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number        { background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }

The above code is complete with IE6 hacks.

/* draws a calendar */
function draw_calendar($month,$year){

    /* draw table */
    $calendar = ‘<table cellpadding=”0″ cellspacing=”0″>’;

    /* table headings */
    $headings = array(‘Sunday’,’Monday’,’Tuesday’,’Wednesday’,’Thursday’,’Friday’,’Saturday’);
    $calendar.= ‘<tr><td>’.implode(‘</td><td>’,$headings).'</td></tr>’;

    /* days and weeks vars now … */
    $running_day = date(‘w’,mktime(0,0,0,$month,1,$year));
    $days_in_month = date(‘t’,mktime(0,0,0,$month,1,$year));
    $days_in_this_week = 1;
    $day_counter = 0;
    $dates_array = array();

    /* row for week one */
    $calendar.= ‘<tr>’;

    /* print “blank” days until the first of the current week */
    for($x = 0; $x < $running_day; $x++):
        $calendar.= ‘<td> </td>’;
        $days_in_this_week++;
    endfor;

    /* keep going with days…. */
    for($list_day = 1; $list_day <= $days_in_month; $list_day++):
        $calendar.= ‘<td>’;
            /* add in the day number */
            $calendar.= ‘<div>’.$list_day.'</div>’;

            /** QUERY THE DATABASE FOR AN ENTRY FOR THIS DAY !!  IF MATCHES FOUND, PRINT THEM !! **/
            $calendar.= str_repeat(‘<p> </p>’,2);
            
        $calendar.= ‘</td>’;
        if($running_day == 6):
            $calendar.= ‘</tr>’;
            if(($day_counter+1) != $days_in_month):
                $calendar.= ‘<tr>’;
            endif;
            $running_day = -1;
            $days_in_this_week = 0;
        endif;
        $days_in_this_week++; $running_day++; $day_counter++;
    endfor;

    /* finish the rest of the days in the week */
    if($days_in_this_week < 8):
        for($x = 1; $x <= (8 – $days_in_this_week); $x++):
            $calendar.= ‘<td> </td>’;
        endfor;
    endif;

    /* final row */
    $calendar.= ‘</tr>’;

    /* end the table */
    $calendar.= ‘</table>’;
    
    /* all done, return result */
    return $calendar;
}

/* sample usages */
echo ‘<h2>October 2013</h2>’;
echo draw_calendar(10,2013);

echo ‘<h2>November 2013</h2>’;
echo draw_calendar(10,2013);

The PHP is largely based upon one function that only requires the month and year of the calendar you’d like. It’s a sizeable function but obviously worth its weight in gold. Also note that I’ve identified a spot within the calendar where you should query the database to see if there are any events for that day. I use tables because they nicely stretch when one day in the week is longer than others. Working with absolute positioning and DIVs in the calendar is far too much hassle for a simple calendar.

Javascript : Call a javascript function after specific time period

var initDate = new Date();
var interval;
interval = window.setInterval(function () {
var now = new Date();
if (now.getTime() – initDate.getTime() < 8 * 60 * 60 * 1000 && now.getDate() == initDate.getDate()) {
yourFunction();
} else {
Console.log(“No Image”);
// Stop the interval
window.clearInterval(interval);
}
},1*60 * 1000);/**For Every one minute 1 * 60 * 1000*/

jQuery Allow Both Alphabets & Numrics Characters in Textbox using JavaScript

Introduction:

Here I will show how to allow only alphanumeric characters in textbox using JQuery or make textbox to allow only alphabets & numbers using JQuery.

Description:
 
In previous posts I explained jQuery allow alphabetic characters in textbox,  jQuery Allow only numbers in textbox, jQuery disable cut copy and paste options in textbox, jQuery Create Rounded Corners Textbox, jQuery slideUp, slideDown and slideToggle Example and many articles relating to JQuery, JavaScript, Asp.net. Now I will explain how to allow only alphanumeric characters in textbox using JQuery.

To allow only alphabets & numbers in textbox using JQuery we need to write the following code

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
    <title>jQuery Allow only alphanumeric characters in textbox</title>
    <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.2.js”></script&gt;
    <script type=”text/javascript”>
        $(function () {
            $(‘#txtNumeric’).keydown(function (e) {
                if (e.shiftKey || e.ctrlKey || e.altKey) {
                    e.preventDefault();
                } else {
                    var key = e.keyCode;
                    if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key >= 48 &&     key <= 57) || (key >= 96 && key <= 105))) {
                        e.preventDefault();
                }
                }
            });
        });
    </script>
</head>
<body>
    <div>
        <b>Enter Text:</b><input type=”text” id=”txtNumeric” />
    </div>
</body>
</html>

Javascript:Count characters in textarea

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script>
      function countChar(val) {
        var len = val.value.length;
        if (len >= 500) {
          val.value = val.value.substring(0, 500);
        } else {
          $('#charNum').text(500 - len);
        }
      };
    </script>
  </head>

  <body>
    <textarea id="field" onkeyup="countChar(this)"></textarea>
    <div id="charNum"></div>
  </body>

</html>

Javascript Start and Stop a Timer in JavaScript | Function Execution Start and Stop in JavaScript

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<title>Run JavaScript function at specific intervals of time</title>

<script type=”text/javascript”>

var count=0,chkfn=null;

function changeColor() {

// Call function with 1000 milliseconds gap

chkfn = setInterval(starttimer, 1000);

}

function starttimer() {

count += 1;

var oElem = document.getElementById(“divtxt”);

oElem.style.color = oElem.style.color == “red” ? “blue” : “red”;

document.getElementById(“pcount”).innerHTML = “Your Time Starts: ” + count;

}

function stoptimer() {

clearInterval(chkfn);

chkfn = null;

count = 0;

document.getElementById(“pcount”).innerHTML = ”;

}

</script>

</head>

<body>

<div id=”divtxt”>

<p id=”pcount” style=”font:bold 24px verdana”></p>

</div>

<button onclick=”changeColor();”>Start Timer</button>

<button onclick=”stoptimer();”>Stop Timer</button>

</body>

</html>

Javascrpt Generate Random Colors in JavaScript | Random Color Generator in JavaScript

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<title>Generate Random Colors using javascript</title>

<script type=”text/javascript”>

// Run function for every second of timer

setInterval(rgbcolors, 1000);

function rgbcolors() {

// rgb string generation

var col = “rgb(“

+ Math.floor(Math.random() * 255) + “,”

+ Math.floor(Math.random() * 255) + “,”

+ Math.floor(Math.random() * 255) + “)”;

//change the text color with the new random color

document.getElementById(“divstyle”).style.color = col;

}

</script>

</head>s

<body>

<form id=”form1″ runat=”server” >

<div id=”divstyle” style=”font:bold 24px verdana”>shaileshmanojsingh.wordpress.com</div>

</form>

</body>

</html>