CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: Count down clock script

  1. 05-13-2012, 08:07 PM #1
    hackarena
    hackarena is offline Junior Coders
    Join Date
    Apr 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Count down clock script

    Please check this http://jsfiddle.net/XQy9G/

    There are 3 sections on the page.

    1. The Html
    2. The Javascript
    3. The Result

    I don't know how to bring the javascript and html together in one page or maybe call the javascript from an onclick event.

    Please help again.

    This particular problem has given me headache to program.
    Reply With Quote Reply With Quote
  2. 05-14-2012, 01:55 AM #2
    ApacheTech
    ApacheTech is offline Regular Coders
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    HTML Markup:
    PHP Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <!-- Start Meta Block -->
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <meta name="description" content="Lorum Ipsum" />
        <meta name="keywords" content="comma, deliniated, list" />
        <meta name="robots" content="all,index,follow" />
        <meta name="msnbot" content="noodp" />
        <meta name="distribution" content="global" />
        <!-- End Meta Block-->
        <title>My Page Title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="myscript.js"></script>
    </head>

    <body onload="clearForms()" onunload="clearForms()">
        
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        
        <form id="form1" name="form1" method="post" action="check_combination.php">
            <table width="200" border="1" align="center">
                <tr>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="1" /></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="2"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="3"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="4"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="5"/></td>
                </tr>
                <tr>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="6"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="7"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="8"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="9"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="10"/></td>
                </tr>
                <tr>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="11"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="12"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="13"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="14"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="15"/></td>
                </tr>
                <tr>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="16"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="17"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="18"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="19"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="20"/></td>
                </tr>
                <tr>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="21"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="22"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="23"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="24"/></td>
                    <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="25"/></td>
                </tr>
                <tr>
                    <td height="23" colspan="5" align="center" valign="middle" class="label">&nbsp;</td>
                </tr>
                <tr>
                    <td height="28" colspan="5" align="center" valign="middle"><input type="button" value="Test length" id="test" /></td>
                </tr>
                <tr>
                    <td height="28" colspan="5" align="center" valign="middle"><input type="submit" name="button" id="button" value="Submit" /></td>
                </tr>
                <tr>
                    <td height="28" colspan="5" align="center" valign="middle"><input type="button" name="button" id="button2" value="Test hidden input value" /></td>
                </tr>
            </table>
            <p><input name="result" type="hidden" id="result" />
                
            </p></form>
        </body>    
    </html>

    myscript.js:
    PHP Code:
    function clearForms() {
        var     i;
        for (    i = 0;
        (    i < document.forms.length); i++) {
                document.forms[i].reset();
        }
    }

    //initial checkCount of zero
    var checkCount = 0;

    //maximum number of allowed checked boxes
    var maxChecks = 8;

    $(    document).ready(function() {

        $(    "#test").click(function() {
                alert($(':checked').length)
        });

        $(    ':checkbox[name=checkbox]').change(function() {

                //update checkCount
                checkCount = $(':checked').length;

            if (    checkCount >= maxChecks) {
                    //alert('you may only choose up to ' + maxChecks + ' options');
                    $(':checkbox[name=checkbox]').not(':checked').attr('disabled', true);
            } else {
                $(    ':checkbox[name=checkbox]:disabled').attr('disabled', false);
            }

            if (    this.checked) {
                $(    "td.label").append('<label>' + this.value + ' </label>');
            } else {
                $(    "td.label").find(':contains(' + this.value + ')').remove();
            }

            $(    'input[name="result"]').val($("td.label").text());

    /*
            I don't know what this code does.
            
            $('input[name="numbers"]').show(function() {
                $(this).val("");
                for (var i = 0; i < array.length; i++) {
                    if (i <= 7) {
                        $(this).val($(this).val() + " " + array[i]);
                    }
                }
            });
            */
            });

        $(    '#button2').click(function() {
                alert($('input[name="result"]').val());
        });

    }); 
    You might also want to pass it through a w3c validator, there are 31 errors in the HTML, I haven't checked the JavaScript. You're also using XHTML 1.0 Strict as a DOCTYPE. You may want to consider changing to XHTML 1.0 Transitional to give you more flexibility in your work, and you're only using version 1.4.2 of JQuery. Also, you're still not using a regular naming method for your id's. It makes it very difficult to debug. Have a look at Hungarian Notation for a start. For controls, I use a simplified version of that method, so buttons are prefixed "btn" and so forth, "btnDisplayHiddenData" instead of your "button2" for example.

    One other thing...

    Are you actually writing your site on that JSFiddle thing instead of using an IDE?

    If so, you seriously want to think about downloading a decent program to use. Notepad++, Netbeans, VS2010 Express... anything you can actually get some Intellisense and Validation on.

    JSFiddle is powerful and good for code snippets, but it's not designed as a WebDev IDE.
    Last edited by jscheuer1; 05-14-2012 at 08:11 AM. Reason: merge posts
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules