Abdullah Yahya

Here’s a simple example of adding AJAX functionality to you website using jQuery.

[cc lang=”javascript”]

$(document).ready(function() {
$.ajax({
type: “GET”,
url: “http://www.somedomain.com/path/to/script.php”,
error: function () {
// do something
},
success: function(data, textStatus, jqXHR) {
console.log(data);
// do something
}
});
});

[/cc]

Since the call to http://www.somedomain.com/path/to/script.php happens behind the scenes, use Firebug’s Network tab to see what the response is from that call.

To learn more about the features included in jQuery’s AJAX functionality, visit

jQuery.ajax()

Many hosting services say they guarantee 99% uptime. But how would you really know without checking your site every often. Pingdom is a popular web service that allows you to automate this by telling it to ping your website every specified interval (e.g. 1 minute). Based on certain settings, you can have it notify you when your site is down. You can give it a URL to a page to ping. But, don’t give it your home page since that would inflate your Google Analytics (or other statistics software) home page visit count. Instead, specify a URL to a unlinked page like http://www.yoursite.com/pingtest.htm

 

Back in the day (a few years ago), if I needed to parse content from an HTML source, I’d write a script that would search for tokens / identifiers in the code to mark the start and end points and then use string manipulation functions to extract what I’d need. Now, a much easier way is to use Simple PHP DOM Parser which lets you select elements jQuery style and process them easily in PHP. Here’s an example from their website:

[cc lang=”php”]
// Create DOM from URL
$html = file_get_html(‘http://slashdot.org/’);

// Find all article blocks
foreach($html->find(‘div.article’) as $article) {
$item[‘title’] = $article->find(‘div.title’, 0)->plaintext;
$item[‘intro’] = $article->find(‘div.intro’, 0)->plaintext;
$item[‘details’] = $article->find(‘div.details’, 0)->plaintext;
$articles[] = $item;
}

print_r($articles);
[/cc]

Many websites uses gradients (the blending of colors from one color to another) to create nice visual effects. Sometimes, it’s not easy find what colors to fade to. I came across this web site that fixes that problem. Check it out.

http://0to255.com/

If you have pasted some text into a web page and it doesn’t wrap, here’s one way to fix that.

[cc lang=”css”]
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}[/cc]

Recently, I needed to search all URLs in a document in Dreamweaver and wrap them with <a> tags to turn them into links. The URLs themselves would be the text to click on. In Dreamweaver, you can use regular expressions and capture matches for use in replacements as follows:

[cc lang=”html”]SEARCH: ((https?|ftp|file)://S+)
REPLACE:  $1[/cc]

Notice I wrapped the SEARCH regex with parentheses ( ) to capture that match and use it in the REPLACE using $1. If I had more parentheses to capture other matches, I could use them in the REPLACE using $2, $3, and so on.

Make sure you have “Regular Expressions” checked when you do this.

I’ve begun to start using console.log() to display variable values in Firebug’s console window to help with debugging. After everything was working in Firefox and Chrome, I noticed my javascript wasnt’ working at all in IE. Turns out IE doesn’t support console.log().

Reminder to self: Comment out all “console.log()” references before deploying.

This is the 2nd time I’ve come across this. Hopefully I won’t have to five more times before it sticks.

If you’d like to specify your own list bullets using images or special characters, here’s one way to do it. In your CSS, add the following code which removes the default list style, adds a small black right-pointing triangle and a space before your list content, and colors lists items.
[cc lang=”css”]ol,ul{
list-style:none;
}

ul li:before {
content:”25B8 020″;
}

ul li {
color:#0066cc;
}[/cc] Continue reading Custom CSS List Bullets Using :before and content

If you’d like to use a font in your website that isn’t already included on most computers, you can import them using @font-face in your CSS. In the following example, I’m importing the Lucida Grande font. The first block is for the normal font weight and the second is for bold. If a visitor already has the Lucida Grande font on their computer, the website will automatically use it instead of download the fonts from ../fonts into their browser’s cache. This is done by specifying the “local” commands. Continue reading Importing / Using Non-Standard Fonts in a Website