UltraMega Blog

Data Storage with jQuery

The jQuery data functions provide a clean way to store information for any kind of use. You can assign any amount of data to an element on the page and access it later by referencing the element. Like everything in jQuery, this is very easy to use.

In the following examples, we will be using an element with the id db to store information about fruit.

Store something:

// Store the current fruit
$("#db").data("fruit", "orange");
// Store an array of fruit info
$("#db").data("orange", { type: "citrus", color: "orange" } );

Fetch something:

// Find out what the current fruit is
var fruit = $("#db").data("fruit"); // orange
// Get the type of the current fruit
var type = $("#db").data("orange").type; // citrus

Remove something:

// Remove all fruit data

Modifying Templates Using DOMDocument In PHP

In the previous post, Generating HTML5 Documents Using DOMDocument In PHP, we explored the PHP DOMDocument class by generating an HTML5 page completely within PHP. Now, we'll look at a more practical application that involves modifying an existing template. The template gives us a good starting point so we can focus on generating only the dynamic parts of the page.

Tagged as: , , Continue reading

Generating HTML5 Documents Using DOMDocument In PHP

PHP 5 includes a powerful set of DOM manipulation classes that gives you full control over HTML and XML documents. This functionality behaves very similar to JavaScript's DOM manipulation engine. In this tutorial, we'll explore the DOMDocument class by generating an entire HTML5 page without writing a single bit of raw markup. This may not be practical for most applications, but it should give you a good idea of how the basic DOMDocument methods work.

Tagged as: , , Continue reading

Saving Time With jQuery

jQuery is a popular JavaScript library that greatly simplifies developing advanced JavaScript applications. It is extremely powerful and lightweight at the same time. I've been using it for the first time on a current project, and I really like it.

jQuery supports all major browsers, has a small file size, and is used by major websites such as Google! Here is the description from their website:

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development."


Reloading Images Using JavaScript

There are some situations where you want to reload an image without refreshing the page containing it. This is especially handy with CAPTCHA images, where you might want to give the user the option to get a new code in case the first is too hard to read.

It sounds simple enough, but then there is browser caching that you need to work around. Fortunately, this problem is easy to solve just by altering the URL of the source, adding a unique string to the end (such as a timestamp) as a GET parameter. Here is a little JavaScript function that will accomplish this:


Toggle Display of Page Elements with JavaScript

This mini tutorial explains how to show/hide elements on a web page using JavaScript. There are many reasons why you would want to do this, and luckily it is very simple.

All it takes is changing the display CSS property. Setting display: block; (the default for div tags) makes it visible, and display: none; makes it hidden. The advantage to using display is that other items on the page will move to close the void left by the hidden object.