Archive for the 'AJAX / JavaScript / DOM' Category

A Charity Donation Recognition System Using PHP, MySQL, JavaScript And DOM

Recently asked on Yahoo! Answers:

Divide photo in 5,000 pieces with rollover text?
we are raising money and selling support tickets. To show our progress we are going to start with a black and white image split in 5,000 pieces then as each piece is sold we want to turn it into color.

When you roll over each piece the person who purchased that support ticket will have their name show up as well as a personal message.

any opinions on how this should be built? The admin section will all be managed manually, so we’ll just need a backend for the admin person to go in and make the changes manually.

This seemed an interesting challenge to me; not difficult, but with multiple steps that no beginner could hope to properly tackle on his own without some help.

This project calls on almost all the basic skills a competent Web developer should possess: Image editing; database design and simple queries; DOM manipulation; security and back-end systems, and therefore, it gives me my first real opportunity in quite some time to address a project in full scope.

As always, I’ll have a link to a working demo and code you can download at the end of this entry.

Read the rest of this entry »

Printing Sections Of A Web Page Using DIVs And JavaScript Remote Scripting

Recently asked on Yahoo! Answers:

Is there an equivalent of “window.print()” in JavaScript for printing individual elements out of a whole page?
For example:

Whole page: window.print
Individual Element: document.getElementById(’element’).print…

I don’t want to print a whole page, just an individual element.

This really intrigued me because it’s the first time I’ve had cause to use remote scripting with JavaScript. We’re going to use two standard XHTML pages — one, a parent, the other, a helper contained in a hidden iFrame, each with its own JavaScript function.

Let’s get to it, shall we? As always, a link to a working demo appears at the end of the article.

Read the rest of this entry »

A JavaScript Temperature Conversion Program

Recently asked on Yahoo! Answers:

Java Question?

I was wondering, is it possible to see the source code from an applet that is on a website? Or is it once it is on the internet so well protected nobody can get it? It goes about this applet:
http://chemistry.about.com/library/weekly/bltempconvert.htm
I am trying to make such a converter myself but am a bit stuck so would want to see if the code from that applet can help me a bit further.. if someone could give a raw version of the code for such an applet it would be even better

Actually, the script this questioner referenced is not a Java applet, it’s a simple JavaScript converter program, like hundreds of others out there. But copying it would be somewhat difficult to do, and his request, sent in a follow-up e-mail to me, was pretty specific:

I really hope you can help me. I need an applet that looks like something as in the link I put in my Question. Is there any way to see the source code from that applet? If not if it’s not too much work could you show me what the code for an applet with 3 text fields with 3 buttons and behind them is? Then the text fields must represent Celcius Fahrenheit and Kelvin and when you click the button it gives you the temperature in the other 2 measurements and clear your input to 0.

Again, it’s not an applet. And it would be infinitely problematic, not to mention counterproductive, to set as 0 the input the person entered, while trying to compute the new values.

So, I modified this request: Our JavaScript will compute the other two temperatures from any temperature we enter. But we’re not going to use a button to submit the request; we’re going to use the onchange event for the textboxes to trigger our function. And we’re going to set the background color for the computed values to be pink, so we know what we entered and what was computed by the script.

Read the rest of this entry »

A Simple Random Link JavaScript

Recently asked on Yahoo! Answers:

How do I make a link that takes the user to a random page?

I’ve seen a lot of sites that takes the user to a random page, like Wikipedia, or any site that does it, but I look at the link in the taskbar and it says something like www.example.com/example.html#, does the # have significance in something? Then how do I make a link that takes the user to a list of certain sites I have?

This is easily done in any Web programming language:

  1. Create an array of URLs you want to use as “random” elements.
  2. Generate a random number between 0 and one less than the length of the array.
  3. Select that array cell and echo it out as the href attribute of a link element.

For this demo, I will use JavaScript, since it doesn’t involve a server technology.

Read the rest of this entry »

An Image-Based ‘Checkbox’ Via JavaScript / DOM

Recently asked on Yahoo! Answers:

Use a custom image for check boxes???? Please help, I”m going insane over such a simple thing.?

Heya.

Don’t worry, I’m not really going insane - it’s just kind of frustrating because such a simple little thing is giving me trouble. I want to use custom images for check boxes on a HTML page.

The best way I can describe this is that I want a bright red flashing gif to be there by defualt, then for that to change to a green flashing gif when it’s clicked.

I don’t care if it’s done using a real checkbox, I don’t need it to actually work. I only need the picture to change when it’s clicked, and stay changed after that unless clicked again.

Apparently either it’s such a simple thing to do that no one has ever talked about it, or no one has ever needed to do it before and never given it any thought, because I’ve looked for help with this all afternoon and tried 6 different ideas of my own with no luck. I can write a fully functional & good looking page in notepad but not get a dumb little image to change when it’s clicked. Go figure.

Please help! Thank you :)

I’ve written about using JavaScript / Document Object Model (DOM) manipulation to change images onclick, onmouseover or via virtually any other event on many occasions. But it’s the idea of using an image as a checkbox that got me curious: Sure, we can change any image onclick, but can we also get the id attributes of all the checked items for use in form processing?

Yes, we can! So we’ll tackle this question in three parts: Example 1 will simply change images on click; Example 2 will let us find out which images are “checked,” via a JavaScript array; and Example 3 will assign the checked images to regular, old HTML check boxes, so you can process the form as you would via any HTML postback.

As always, I will provide links to working demos at the end of each example.

Read the rest of this entry »