a_young_wife's_computerbook (Javascript and PHP): 2012

JQuery Input complete?

$(function(){
var passwordLength = $('#penewpass').val().length;
if(passwordLength == 0){
$('#penewpass').next('.error').css('display', 'inline');
$('#penewpass').change(function(){ $(this).next('.error').css('display', 'none');
});
}
});

JQuery validating email addresses

PHP:
<label class="label" for="email">E-mail: </label>
<input type="text" name="email" id="email" size="48" /><span class="error">please enter a valid e-mail address</span><br />
$regexEmail = '/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/';
var inputEmail = $(this).val( );
var resultEmail = regexEmail.test(inputEmail);
if(!resultEmail){
$(this).next('.error').css('display', inline');
}else
$(this).next('.error').css('display', 'none');
}
});

CSS:

.error {

display: none;

color: #FF0000;

font-size: 0.7em;

margin: 0px 0px 0px 5px;

}

JQuery focus function

Using this jQuery, the cursor can be placed wight into the form element that you would like the user to fill out.

(tabindex defines the order in which these elements should be selected based on clicking the Tab key)

Example 1:
<input type="text" name="user" size="24" tabindex="0"/>
$('input[tabindex="0"]).focus( );

JQuery a semitransparent "shade"

Creating a shaded background:

$('body').append('<div id="modalShade"></div>);

$('#modalShade').css('opacity', 0.7).fadeIn( );

JQuery selecting and binding

The following selects all the anchor (link) tags that have a class="joy" and binds (joins) it to the "click" event:

$('a.joy').click(function( ) {

return false;

});

/* Close the click function with the return false; method to keep the link from trying to load another page into the browser */

JQuery select HTML DOM

To select text keyed-in by the user in a textbox eg. <input name="username" type="text" size="48"/>,
use:

$('input[name="username"]')

JQuery tips

To increase the efficiency of jQuery, these are some tips:

Use a class or an id attribute to allow one to identify the item(s) more directly. eg. $('#id_name') or $('.class_name')
Cache the selector that is long and used many times. eg. var link=$("div ul li a"); To use it type: $(link)
Troubleshoot with Firebug (http://getfirebug.com/) and minify your code with the Google Closure Compiler(https://developers.google.com/closure/compiler/)
Troubleshoot 2:Use jsFiddle(http://jsfiddle.net/) to test a jQuery code.

JQuery DOM tree

The following is an example of retrieving the "value" of the second image:

HTML markup:

<div>
<ul>
<li><a href="joy.html"><img src="image1.jpg"/></a></li>
<li><a href="owl.html"><img src="image2.jpg"/></a></li>
</ul>
</div>

jQuery:

var nextImage=$('img[src"bar.jpg"]') //define the starting point
.closest('li') //travel up to the closest list item
.next( ) //move to the next list item
.find('img') //find the image tag in that line
.attr('src'); //grab the source attribute found in the image tag

So now variable nextImage contains image2.jpg.
Note that // are comments that will not be seen by the user.

JQuery's mantra

jQuery's mantra is " Write less, do more".
I fully support this good idea so I would be exploring more jQuery techniques.

For example, to select an element using its "id" attribute in JavaScript:

document.getElementByID('joy');

there is a high change that I might make a spelling mistake which would cause an error to my programme.

However for jQuery:

$('#joy');

short and simple:)

CSS3 Rounded Radius

CSS3 Colour gradients

Currently, these gradients are only supported in Safari and Chrome.

This is expected to change with time.

CSS3 positioning

CSS3 Columns

CSS3 Font Attributes

CSS3 embedding Fonts

How to get © symbol with the keyboard?

For Mac,

Press alt/option button + g = ©

CSS3 transform

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}

HTML5 "dropdown list"

<label>Select a color</label>
<input list="mylist" type="text">
<datalist id="mylist">
<option label="Red" value="Red">
<option label="Blue" value="Blue">
<option label="Green" value="Green">
</datalist>

HTML5 placeholder (text)

Placeholder is used to display the text which you would like to appear in the input box to guide the user as to what to enter.

<input name="Website" type="URL" placeholder="Enter your own Web Site Address">

HTML5 required (input)

If you add the attribute "required", then the form field is required.

<input name="FirstName" type="text" required>

HTML5 autofocus

The autofocus attribute can only be used one time in a form. It will get user's attention by "blinking" when the page opens.

<input type="text" autofocus>

HTML5 form input tags

Not all the HTML form tags are working as they should be in all the browsers. However, it is good to know what they are and hope that all the browsers will accept them soon.

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Go to this website for a closer look at the progress of implementing this tags in different browsers: http://www.quirksmode.org/html5/inputs.html

HTML5 - input="date"

This is a cool input type (input="date") but sadly - at the moment only limited browsers(eg. opera) are able to execute it. The other browsers will only implement it in 2014 or later.

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function processData(f1,f2,f3,f4,f5,f6){

 var v1 = document.getElementById(f1).value;

 var v2 = document.getElementById(f2).value;

 var v3 = document.getElementById(f3).value;

 var v4 = document.getElementById(f4).value;

 var v5 = document.getElementById(f5).value;

 var v6 = document.getElementById(f6).value;

 alert(v1+"\n"+v2+"\n"+v3+"\n"+v4+"\n"+v5+"\n"+v6);

 // Use Ajax-PHP to send the values to server storage

 // Ajax-PHP Video Tutorial - www.developphp.com/view.php?tid=1185

}

</script>

</head>

<body>

<h2>HTML5 + Javascript Date Time Form Input Types Tutorial</h2>

Date: <input type="date" name="field1" id="field1" /><br /><br />

Datetime local: <input type="datetime-local" name="field2" id="field2" /><br /><br />

Datetime: <input type="datetime" name="field3" id="field3" /><br /><br />

Month: <input type="month" name="field4" id="field4" /><br /><br />

Time: <input type="time" name="field5" id="field5" /><br /><br />

Week: <input type="week" name="field6" id="field6" /><br /><br />

<input type="button" onClick="processData('field1','field2','field3','field4','field5','field6')" value="Submit" />

</body>

</html>

HTML5 input="search"

<!DOCTYPE html>

<form style="background-color:orange">
<label>Input your search here</label>
<input type="search" name="search">
</form>
</html>

HTML5

Now I am reading - HTML 5, Designing Rich Internet Applications by Matthew David. On one hand I am delighted that HTML 5 has added many cool and useful tags/ commands like <input type="email">, on the other, I am a bit disappointed that they have "dropped" some of the older codes like <center> and <frames>. I will post some of cool tags/ commands found in HTML5.

Manipulating PHP strings

Strip out white spaces from either side of the string: trim(string);
Make sure that the first character is uppercase (eg. People's name): ucfirst(string);
Search for the first occurence of a string: strpos(string, pattern to match);
Search for the last occurence of a string: strrpos(string, pattern to match);
Search and replace a string: str_replace(string to search for, string to replace with, string/message);
Compare two strings. If the strings do not match then a non-zero value will be returned. If both strings match then a zero is returned: strcmp(string1, string2);
Split a string into an array. To be able to split a string into an array, there must be a separator. the space ' ' is the most common but for eg. files, the separator could be a tab or a colon: explode (string separator, string); explode(":", $passwd_line);
Convert new lines to HTML <br> tag: nl2br(string);

Learning PHP and MYSQL

Thanks to "Create Dynamic Web Pages Using PHP and MYSQL" by David Tansley for teaching me the basics of PHP and MYSQL.