PDA

View Full Version : Count down clock script



hackarena
05-13-2012, 08:07 PM
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.

ApacheTech
05-14-2012, 01:55 AM
HTML Markup:

<?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:


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.