Counting Button Clicks With JavaScript

Sometimes you need to know how many times the user clicks on an element. The most common solution is to create a counter as a global variable but with jQuery, you can prevent polluting the global scope by using data()to store the counter.

 
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com
    /ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8/>
    <title>JS Bin</title>
</head>

<body>
<button>Click me</button>
</body>

</html>


<script>
    $('button')
        .data('counter', 0)
        .click(function () {
            var counter = $(this).data('counter');
            $(this).data('counter', counter + 1);
            alert($(this).data('counter'));
        });
</script>


Result:





















by



at





No comments:
  


















Tags
,
,
,
,
,

























Preload Images On Your Website With JavaScript












This code will prevent your site form taking more time to load. This kind of situation looks bad but is also unprofessional. All you have to do is add your images to the preloadImages section and you are ready to roll.




<script type="text/javascript">

    var images = new Array();

    function preloadImages(){

        for (i=0; i < preloadImages.arguments.length; i++){

            images[i] = new Image();

            images[i].src = preloadImages.arguments[i];

        }

    }

    preloadImages("logo.jpg", "main_bg.jpg", 
        "body_bg.jpg", "header_bg.jpg");

</script>












by



at





No comments:
  


















Tags
,
,
,
,
,


























Calendar Using JavaScript













<html>
<head>

    <style type="text/css">
        span.label {
            color: black;
            width: 30px;
            height: 16px;
            text-align: center;
            margin-top: 0;
            background: #ffF;
            font: bold 13px Arial
        }
        span.c1 {
            cursor: hand;
            color: black;
            width: 30px;
            height: 16px;
            text-align: center;
            margin-top: 0;
            background: #ffF;
            font: bold 13px Arial
        }
        span.c2 {
            cursor: hand;
            color: red;
            width: 30px;
            height: 16px;
            text-align: center;
            margin-top: 0;
            background: #ffF;
            font: bold 13px Arial
        }
        span.c3 {
            cursor: hand;
            color: #b0b0b0;
            width: 30px;
            height: 16px;
            text-align: center;
            margin-top: 0;
            background: #ffF;
            font: bold 12px Arial
        }
    </style>

    <script type="text/javascript">

        function maxDays(mm, yyyy) {
            var mDay;
            if ((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)) {
                mDay = 30;
            }
            else {
                mDay = 31
                if (mm == 1) {
                    if (yyyy / 4 - parseInt(yyyy / 4) != 0) {
                        mDay = 28
                    }
                    else {
                        mDay = 29
                    }
                }
            }
            return mDay;
        }

        function changeBg(id) {
            if (eval(id).style.backgroundColor != "yellow") {
                eval(id).style.backgroundColor = "yellow"
            }
            else {
                eval(id).style.backgroundColor = "#ffffff"
            }
        }

        function writeCalendar() {
            var now = new Date
            var dd = now.getDate()
            var mm = now.getMonth()
            var dow = now.getDay()
            var yyyy = now.getFullYear()

            var arrM = new Array("January", "February", "March",
                "April", "May", "June", "July", "August",
                "September", "October", "November", "December")

            var arrY = new Array()
            for (ii = 0; ii <= 4; ii++) {
                arrY[ii] = yyyy - 2 + ii
            }
            var arrD = new Array("Sun", "Mon", "Tue",
                "Wed", "Thu", "Fri", "Sat")

            var text = ""
            text = "<form name=calForm>"
            text += "<table border=1>"
            text += "<tr><td>"
            text += "<table width=100%><tr>"
            text += "<td align=left>"
            text += "<select name=selMonth onChange='changeCal()'>"
            for (ii = 0; ii <= 11; ii++) {
                if (ii == mm) {
                    text += "<option value= " + ii + " Selected>"
                        + arrM[ii] + "</option>"
                }
                else {
                    text += "<option value= " + ii + ">"
                        + arrM[ii] + "</option>"
                }
            }
            text += "</select>"
            text += "</td>"
            text += "<td align=right>"
            text += "<select name=selYear onChange='changeCal()'>"
            
            for (ii = 0; ii <= 4; ii++) {
                if (ii == 2) {
                    text += "<option value= " + arrY[ii] + " Selected>"
                        + arrY[ii] + "</option>"
                }
                else {
                    text += "<option value= " + arrY[ii] + ">"
                        + arrY[ii] + "</option>"
                }
            }
            text += "</select>"
            text += "</td>"
            text += "</tr></table>"
            text += "</td></tr>"
            text += "<tr><td>"
            text += "<table border=1>"
            text += "<tr>"
            for (ii = 0; ii <= 6; ii++) {
                text += "<td align=center><span class=label>" + 
                   arrD[ii] +
                    "</span></td>"
            }
            text += "</tr>"
            aa = 0
            for (kk = 0; kk <= 5; kk++) {
                text += "<tr>"
                for (ii = 0; ii <= 6; ii++) {
                    text += "<td align=center><span id=sp" + aa +
                        " onClick='changeBg(this.id)'>1</span></td>"
                    aa += 1
                }
                text += "</tr>"
            }
            text += "</table>"
            text += "</td></tr>"
            text += "</table>"
            text += "</form>"
            document.write(text)
            changeCal()
        }
        function changeCal() {
            var now = new Date
            var dd = now.getDate()
            var mm = now.getMonth()
            var dow = now.getDay()
            var yyyy = now.getFullYear()
            var currM = parseInt(document.calForm.selMonth.value)
            var prevM
            if (currM != 0) {
                prevM = currM - 1
            }
            else {
                prevM = 11
            }
            var currY = parseInt(document.calForm.selYear.value)
            var mmyyyy = new Date()
            mmyyyy.setFullYear(currY)
            mmyyyy.setMonth(currM)
            mmyyyy.setDate(1)
            var day1 = mmyyyy.getDay()
            if (day1 == 0) {
                day1 = 7
            }
            var arrN = new Array(41)
            var aa
            for (ii = 0; ii < day1; ii++) {
                arrN[ii] = maxDays((prevM), currY) - day1 + ii + 1
            }
            aa = 1
            for (ii = day1; ii <= day1 + maxDays(currM, currY) - 1; ii++) 
           {
                arrN[ii] = aa
                aa += 1
            }
            aa = 1
            for (ii = day1 + maxDays(currM, currY); ii <= 41; ii++) {
                arrN[ii] = aa
                aa += 1
            }
            for (ii = 0; ii <= 41; ii++) {
                eval("sp" + ii).style.backgroundColor = "#FFFFFF"
            }
            var dCount = 0
            for (ii = 0; ii <= 41; ii++) {
                if (((ii < 7) && (arrN[ii] > 20)) || ((ii > 27) &&
                     (arrN[ii] < 20))) {
                    eval("sp" + ii).innerHTML = arrN[ii]
                    eval("sp" + ii).className = "c3"
                }
                else {
                    eval("sp" + ii).innerHTML = arrN[ii]
                    if ((dCount == 0) || (dCount == 6)) {
                        eval("sp" + ii).className = "c2"
                    }
                    else {
                        eval("sp" + ii).className = "c1"
                    }
                    if ((arrN[ii] == dd) && (mm == currM) &&
                        (yyyy == currY)) {
                    eval("sp" + ii).style.backgroundColor = "#90EE90"
                    }
                }
                dCount += 1
                if (dCount > 6) {
                    dCount = 0
                }
            }
        }
    </script>
</head>

<body>
<script type="text/javascript">writeCalendar()</script>
</body>

</html>


Result:






















by



at





No comments:
  


















Tags
,
,
,
,
,
,

















        

      









Subscribe to:
Posts (Atom)







Labels




php
(35)


javascript
(31)


phpjavascript
(30)


jquery
(23)


html
(20)


mysql
(14)


database
(9)


codeigniter
(4)


json
(4)


bar chart
(2)


calendar
(2)


column chart
(2)


framework
(2)


google maps
(2)


query
(2)


tables
(2)


url
(2)


dropdown
(1)










Popular Posts