Favicon jQuery Introduction

jQuery Introduction

Hide

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

// JavaScript Document $(function() { /*$( "#clickMe" ).on( "click", function( event ) { alert("Hello World."); });*/ $("#clickMe").click(function() { $( "#myParagraph" ).toggle(); if($( "#myParagraph" ).is(':visible')){ $( "#clickMe" ).html("Hide"); }else{ $( "#clickMe" ).html("Show"); } }); $( "#hello" ).click(function() { var person = prompt("Please enter your name", "Harry Potter"); $( "#myWelcome" ).html("Welcome " + person); }) }) Form is empty HTML Data validation
Log In Form

CSS @charset "utf-8"; /* CSS Document */ .error{ background-color:red; color:white; } .error::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: white; opacity: 1; /* Firefox */ } JS // JavaScript Document $(function() { $("#myForm").submit(function (event){ var email = $("#email").val(); var msg = null; var fault = false; if(email==""){ fault=true; msg = "Email field is empty."; $("#email").focus(); } if (!~email.indexOf("@")){ //do a check to see if the text string contains a '@'. fault = true; msg += "Email field does not contain an '@'."; $("#email").focus(); } if(fault==true){ //error exists $("#email").addClass("error"); $( "#email" ).after( "" + msg + "" ); //alert(msg); event.preventDefault(); }else{ $("#email").removeClass("error"); } }); }); WIREFRAME IDEAS Untitled Document
logo

Latest media releases.

Aug
5

Main page content

■ Fred Bloggs

Limited content will go here. This content usually will be generated by a database....

Aug
27

Main page content

■ Fred Bloggs

Limited content will go here. This content usually will be generated by a database....

CSS @charset "utf-8"; /* CSS Document */ *{ background: transparent; border: 0 none; font-size: 100%; margin: 0; padding: 0; outline: 0; vertical-align: top; } main{ width:90%; margin: 0 auto; background-color:silver; padding:10px; } .flex-container { display: flex; flex-direction: row; } section{ min-height:300px; width:flex; flex-grow:1.5; padding:10px; } aside{ width:300px; min-height: 300px; justify-content: flex-end; } .blue{ background-color:blue; } .white{ background-color:white; } .green{ background-color:green; } .red{ background-color:red; } .gray{ background-color:#ABABAB; } .darkGray{ background-color:#383838; } article{ float:left; width:100%; display:block; } article div.articleDtg{ width:75px; height:100px; border: 4px solid red; border-radius:20px; overflow:hidden; font-family:arial; float:left; margin: 0 25px 40px 0; } article div.articleDtg div.articleMonth{ height:40px; background-color:red; /*background: linear-gradient(0deg, rgba(255,103,94,1) 0%, rgba(163,1,1,0.7315301120448179) 100%);*/ color:white; text-align:center; font-size:25px; text-transform: uppercase; padding-top:3px; } article div.articleDtg div.articleDay{ height:85px; background-color:white; color:black; text-align:center; font-size:50px; margin-top:-5px; } article h2{ margin-left:20px; font-size:24px; display:block; font-family:arial; } article address{ margin:7px 0 0 20px; font-size:12px; display:block; font-family:arial; } article p{ margin:15px 0 0 20px; font-size:16px; display:block; font-family:arial; } article address.author{ } Validation HTML jQuery Validation

Regex class

JS // JavaScript Document function validateEmail(email) { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if(re.test(email)){ //true - all good $("#myEmailInput").removeClass("error"); $("#myForm").find("#emailErrorSpan").remove(); }else{ //alert("Oh no!"); $("#myEmailInput").focus(); $("#myEmailInput").addClass("error"); if($("#emailErrorSpan").length){ //already exists. Do nothing }else{ $('You must enter a valid email address!').insertAfter($("#myEmailInput")); } } return re.test(email); } function validateTel(no) { var re = /^\(?(?:\+?61|0)(?:(?:2\)?[ -]?(?:3[ -]?[38]|[46-9][ -]?[0-9]|5[ -]?[0-35-9])|3\)?(?:4[ -]?[0-57-9]|[57-9][ -]?[0-9]|6[ -]?[1-67])|7\)?[ -]?(?:[2-4][ -]?[0-9]|5[ -]?[2-7]|7[ -]?6)|8\)?[ -]?(?:5[ -]?[1-4]|6[ -]?[0-8]|[7-9][ -]?[0-9]))(?:[ -]?[0-9]){6}|4\)?[ -]?(?:(?:[01][ -]?[0-9]|2[ -]?[0-57-9]|3[ -]?[1-9]|4[ -]?[7-9]|5[ -]?[018])[ -]?[0-9]|3[ -]?0[ -]?[0-5])(?:[ -]?[0-9]){5})$/; if(re.test(no)){ //true - all good $("#myMobileInput").removeClass("error"); $("#myForm").find("#mobileErrorSpan").remove(); }else{ //alert("Oh no!"); $("#myMobileInput").focus(); $("#myMobileInput").addClass("error"); if($("#mobileErrorSpan").length){ //already exists. Do nothing }else{ $('You must enter a valid Australian mobile number!').insertAfter($("#myMobileInput")); } } return re.test(no); } function validatePassword(pw){ //to be completed } function validate(data){ $(data).each(function(){ //console.log( index + ": " + $(this).attr('type') ); //console.log( "Val is: " + $(this).val()); //let error = false; if($(this).prop('required') || $(this).val()!=""){ if($(this).attr('type')=="email"){ validateEmail($(this).val()) } if($(this).attr('type')=="password"){ validatePassword($(this).val()); } if($(this).attr('type')=="tel"){ validateTel($(this).val()); } } }); } $(document).ready(function(){ $("#submit").submit( function(e){ console.log("got here"); if(!validate("#myForm input")){ e.preventDefault(); } }); $(":input").keyup(function(){ validate(this); }) }); CSS @charset "utf-8"; /* CSS Document */ body{ /*background-color:#666;*/ } fieldset{ width:500px; margin:0 auto; } input{ padding:20px; font-size:24px; border-radius:15px; } label{ font-size:24px; } button{ clear:both; display:block; margin:0 auto; padding:20px; font-size:24px; border-radius:15px; } .error{ /*background-color:#FFCCCD;*/ border: thin solid #F00; } .error::placeholder{ color:red; } input:focus,input:active, button:active, button:focus{ outline: none; border: thin solid #F00; border-radius:15px; } .errorSpan{ display:block; width:80%; margin:0 auto; clear:both; border: thin solid #F00; border-radius:15px; background-color:#FFCCCD; padding:10px; } Mobile Email Checka HTML jQuery Validation

Regex class

CSS @charset "utf-8"; /* CSS Document */ body{ /*background-color:#666;*/ } fieldset{ width:500px; margin:0 auto; } input{ padding:20px; font-size:24px; border-radius:15px; } label{ font-size:24px; } button{ clear:both; display:block; margin:0 auto; padding:20px; font-size:24px; border-radius:15px; } .error{ /*background-color:#FFCCCD;*/ border: thin solid #F00; } .error::placeholder{ color:red; } input:focus,input:active, button:active, button:focus{ outline: none; border: thin solid #F00; border-radius:15px; } .errorSpan{ display:block; width:80%; margin:0 auto; clear:both; border: thin solid #F00; border-radius:15px; background-color:#FFCCCD; padding:10px; } JS // JavaScript Document function validateEmail(email) { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } function validateMobile(no) { var re = /^\(?(?:\+?61|0)(?:(?:2\)?[ -]?(?:3[ -]?[38]|[46-9][ -]?[0-9]|5[ -]?[0-35-9])|3\)?(?:4[ -]?[0-57-9]|[57-9][ -]?[0-9]|6[ -]?[1-67])|7\)?[ -]?(?:[2-4][ -]?[0-9]|5[ -]?[2-7]|7[ -]?6)|8\)?[ -]?(?:5[ -]?[1-4]|6[ -]?[0-8]|[7-9][ -]?[0-9]))(?:[ -]?[0-9]){6}|4\)?[ -]?(?:(?:[01][ -]?[0-9]|2[ -]?[0-57-9]|3[ -]?[1-9]|4[ -]?[7-9]|5[ -]?[018])[ -]?[0-9]|3[ -]?0[ -]?[0-5])(?:[ -]?[0-9]){5})$/; if(re.test(no)){ //true - all good $("#myMobileInput").removeClass("error"); $("#myForm").find("#mobileErrorSpan").remove(); }else{ //alert("Oh no!"); $("#myMobileInput").focus(); $("#myMobileInput").addClass("error"); if($("#mobileErrorSpan").length){ //already exists. Do nothing }else{ $('You must enter a valid Australian mobile number!').insertAfter($("#myMobileInput")); } } return re.test(no); } $(document).ready(function(){ $("#myBtn").submit( function(event){ if(!validateEmail($("#myInput").val())){ event.preventDefault(); } }); $("#myBtnMobile").click( function(){ //alert ("The input returned: " + validateMobile($("#myMobileInput").val())); validateMobile($("#myMobileInput").val()); }); $("#myMobileInput").keyup(function(){ validateMobile($("#myMobileInput").val()); }) }); Calendar Validation and POP UP HTML Form
Log in
JS // JavaScript Document $(function(){ $("#myForm").submit(function(e){ checkEmail(e); //checkPassword(e); }) $("#email").keyup(function(e){ checkEmail(e); }) function checkEmail(e){ var email = $("#email").val(); var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if(re.test(email)){ $("#email").removeClass("error"); } else{ $("#email").attr('placeholder', 'Please enter an email.'); $("#email").addClass("error"); $("#email").focus(); e.preventDefault(); } } var date = new Date(); $("#dtg").datepicker({ dateFormat: 'dd/mm/yy', autoPick: false, startDate: date.getDate(), changeMonth: false, changeYear: false, autoHide: true, onSelect: function (selectedDate) { alert($("#dtg").val()); } }); }) CSS /* CSS Document */ #square{ width:100px; height:100px; border:solid thin black } .error{ background-color:#FF9FA0; } SLIDER HTML Wireframe

Header


This is the main section

Japanese Singer
Figure 1. - Ms Kyoto.

Awesome Show by Ms Kyoto and Fred Bloggs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Great Australian Bight
Figure 2. - Great Australian Bight.

Great Australian Bight

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Article 3

Article 4

JS // JavaScript Document var slideIndex = 0; function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 1000); // Change image every 5 seconds } CSS /* CSS Document */ * { margin: 0; padding: 0; font-family:Verdana, Geneva, sans-serif; } header{ width:100%; height:125px; background-color:#999; } nav{ width:80%; height:30px; float: right; background-color:#ccc; } div#sliderContainer{ clear:both; width:100%; max-height:400px; min-height:400px; background-image:url(../images/slider/20180128_145046.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; z-index:0; } .enableBlur{ filter: blur(3px); } .disableBlur { filter: blur(0); } div#slider{ margin: -400px auto 0 auto; width:800px; max-height:400px; min-height:400px; overflow:hidden; z-index:1; } main{ width:100%; display:flex; } section{ margin-right:20px; flex: 1 1 auto; background-color: white; width:100%; /*height:500px; will be removed*/ } aside{ background-color:#CCC; height:500px; /*will be removed*/ width: 320px; flex: 0 0 auto; } footer{ width:100%; height:300px; /* will be removed*/ background-color:black; color:white; } section h2{ margin:20px 0 20px 30px; } article{ width:100%; min-height:240px; margin: 10px; /*background-color:#ccc;*/ border:thin #E9E9E9 solid; border-radius: 10px; } article h3{ display: block; padding: 20px 0 20px 15px; } article time, article p{ margin: 20px 20px 15px 15px; } article time{ background:url(../images/bullet.png) no-repeat; padding-left:30px; } article p{ text-align:justify; line-height: 166%; } article figure{ float:right; top: 0; right:0; margin: 10px 10px 10px 20px; } article figure img.responsive { width: 300px; height: auto; } article figure img.zoom{ opacity:1; transition: all 0.25s ease-in-out; } article figure img.zoom:hover{ opacity: 0.2; } aside img.responsive{ width: 100%; height: auto; } #slider div.mySlides{ width: 100%; } #slider div img.mySliderWidth{ width: 100%; } CHeat HTML