CS 50.12 HTML 5 :: Interactive Web Pages

Lab Activities

Mobile Emulators

Opera - http://www.opera.com/developer/tools/mobile/
Apple - http://www.testiphone.com
Google android: http://developer.android.com/sdk/index.html

Javascript for making forms work consistently across browserss

I recomend you place all this code in a scripts folder: Here is the file organization within the scripts folder.

javascript files

Here is the code you place in the head of the document which calls on all the .js files you just downloaded to our computer

<!-- add the script for jquery -->
<script src="scripts/jquery-1.6.4.min.js"></script>

<!-- add the script and styles for jqueryui -->
<script src="scripts/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="Stylesheet" type="text/css" href="scripts/jquery-ui-1.8.16.custom.css" />

<!-- add the script for the webforms2 support -->
<script type="text/javascript" src="scripts/jquery.webforms2.js"></script>

<!-- add the script and styles for the spinner control -->
<link rel="Stylesheet" type="text/css" href="scripts/ui.spinner.css" />
<script type="text/javascript" src="scripts/ui.spinner.min.js"></script>

<!-- add the script and styles for the modernizr -->
<script type="text/javascript" src="scripts/modernizr-1.7.js"></script>
<!--Please note I renamed this file after downloading it from the web, if you don't do that just change the code to reflect the file name-->

<!-- add the script and styles for placeholder -->
<script src="scripts/placeholder.js"></script>

Here is code that adds more funtionality to IE and other browsers that don't suport the new form code

<script type="text/javascript">
$("document").ready(function () {
if (!Modernizr.input.placeholder) {
makePlaceholders();
}

if (!Modernizr.inputtypes.number) {
var $numerics = $("input[type=number]");
$numerics.each(function () {
var thisNum = $(this);
thisNum.spinner({
min: thisNum.attr("min"),
max: thisNum.attr("max"),
step: thisNum.attr("step")
});
});
}

if (!Modernizr.inputtypes.date) {
var $dates = $("input[type=date]");
$dates.each(function () {
var thisDate = $(this);
thisDate.datepicker({
minDate: thisDate.attr("min"),
maxDate: thisDate.attr("max"),
dateFormat: "yy-mm-dd"
});
});
}
});
</script>

Sample Form with Javascript code, please take a look at the form in IE and let me know how it performs. It seems to have modified behavior in the other browsers.

For a point of reference we can compare it to the form without Javascript