Web Development Blog

This example shows how to populate dropdown menus automatically with values from a JSON object using jQuery. Among other things, it demonstrates:

How to define a JSON object in Javascript
How to write a custom function in jQuery using $.fn
How to traverse a JSON object using jQuery
How to populate a dropdown menu dynamically using [...]

Continue reading Dropdown menu population using JSON and jQuery

This is a lazy fix to redirect any url that doesn’t exist (resulting in 404) to the homepage.
Add the following line of code into the .htaccess file inside the root directory of your website.
ErrorDocument 404 /

Continue reading Redirect to homepage when page not found

HTML

<input type="submit" id="submit" value="Search" />

CSS

#submit {
cursor: pointer;
}

Continue reading Change the arrow into a hand when hovering over ‘Submit’ button

In order to display a download dialog for pdf file rather than opening it in the browser, we can put the following snippet of code in a php file and name the file download.php.
The path to the pdf file is specified in $filename variable. You can also pass filename as a parameter in the [...]

Continue reading Display a download dialog for pdf in PHP

In header.php file of my WordPress theme, I have the following code to display a different header image for different pages.

<?php
if (is_page(‘about’)) {
$image = ‘image_about.jpg’;
} else if (is_page(‘projects’)) {
$image = ‘image_projects.jpg’;
} else if (is_page(’services’)) {
[...]

Continue reading How to display a different header image for different pages in WordPress

Javascript

$.fn.checkAvailability = function() {
$("#check-username").click(function() {
if ( $(‘#username’).attr("value") != ”) {
$(‘.loading’).show();
var username = $(‘#username’).val().toLowerCase();
$.get("check-username.php", { username:username } , function(data) {
[...]

Continue reading Check username availability using AJAX and jQuery

If you are hard-coding your navigation menu in WordPress rather than using wp_list_pages() template tag, you will need to add a class manually in order to highlight the current page it is on.
<li<?php if (is_page(‘gallery’)) : echo ‘ class="current_page_item"’; endif; ?>><a href="gallery/">Gallery</a></li>
Note: wp_list_pages() template tag automatically add current_page_item class to the <li> element [...]

Continue reading Highlight the current page link in WordPress

Problem in IE8:
The upper half of the <fieldset> border goes missing. This problem has been discussed here and shown here.
HTML:

<form action="login.php" method="post" id="login">
<fieldset>
<legend>Login</legend>
<label for="username" class="label">Username</label>
<input type="text" name="username" id="username"/>
<label for="password" class="label">Password</label>
<input [...]

Continue reading Fieldset and Legend bug in IE8

.transparency {
background: #f4f4f4;
opacity: 0.7; /* Modern Browsers, eg: Firefox, Safari, Opera, Chrome */
filter: alpha(opacity = 70); /* IE */
-moz-opacity: 0.7; /* Old Mozilla, eg: Netscape */
-khtml-opacity: 0.7; /* Old Safari */
zoom: 1; /* [...]

Continue reading Opacity in CSS

var input = “hello222″;
var ok = false;

var dob_regex = /^([0-9]){2}(\/){1}([0-9]){2}(\/)([0-9]){4}$/; // DD/MM/YYYY
var email_regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/; // email address
var username_regex = /^[\w.-]+$/; // allowed characters: any word . -, ( \w ) represents any word character (letters, digits, and the underscore _ ), equivalent to [a-zA-Z0-9_]
var num_regex = /^\d+$/; // numeric digits [...]

Continue reading 10 Examples of Basic Input Validation in Javascript