9lessons Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos

In this post I want to suggest you 10 useful code snippets for web developers based on some frequetly asked questions I received in the past months for my readers. This collection include several CSS, PHP, HTML, Ajax and jQuery snippets. Take a look!

1. CSS Print Framework
Hartija is an universal Cascading Style Sheets Framework for web printing. To use this framework download the CSS file here and use this line of code into your web pages:

2. CSS @font-face
This snippet allows authors to specify online custom fonts to display text on their webpages without using images:

@font-face {
font-family: MyFontFamily;
src: url('http://');
}

3. HTML 5 CSS Reset

Richard Clark made a few adjustments to the original CSS reset released from Eric Meyers.

4. Unit PNG Fix

This snippet fixes the png 24 bit transparency with Internet Explorer 6.

5. Tab Bar with rounded corners

This code illustrates how to implement a simple tab bar with rounded corners:

6. PHP: Use isset() instead of strlen()
This snippet uses isset() instead strlen() to verify a PHP variable (in this example $username) is set and is at least six characters long. (via Smashing Magazine).

<?php

if (isset($username[5])) {
// Do something...
}

7. PHP: Convert strings into clickable url
This snippet is very useful to convert a string in a clickable link. I used this snippet for several tutorials; for example take a look at this link Simple PHP Twitter Search ready to use in your web projects where I used this snippet to convet into a clickable link all textual links contained in a tweet.

<? php
function convertToURL($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href=\"$1\" target=\"_blank\">$1</a>", $text);
$text = preg_replace("/[^a-z]+[^:\/\/](www\."."[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href="\\" target="\">$1</a>", $text);
$text = preg_replace("/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})" . "([A-Za-z0-9\!\?\@\#\$\%\^\&\*\_\-\=\+]*)" . "([\s|\.|\,\<])/i", "$1<a href=\"mailto:$2$3\">$2</a>$4",
$text);
return $text;
}
?>

8. jQuery: Ajax call

This is the most simple way to implement an Ajax call using jQuery. Change formId and inputFieldId with the ID of the form and input field you have to submit:

$("form#formId").submit(function() {
inputField = $('#inputFieldId').attr('value');
$.ajax({

type: "POST",
url: "yourpage.php",
cache: false,
data: "inputField ="+ inputField,
success: function(html){
$("#ajax-results").html(html);
}

});
return false;
});

});
</script>

9. CSS Layouts Collections

This page contains a collection of over 300 grids and CSS layout ready to use in your projects. Take a look, it's very useful.

10. Simple versatile multilevel navigation Menu
Several months ago I found this simple code (HTML + CSS + JavaScript for jQuery) to implement a versatile multilevel navigation menu (please send me the original source if you find it!). I think it's the simpler and faster way to do that. The result is something like this: