This is usually referred to as AJAX, although most of it is javascript and HTML, and it is actually easier than it seems. In my opinion calling the hiding and showing of elements is not yet AJAX, because in my eyes ture AJAX communicates with the server in the background. We will only be changing CSS properties and element contents with javascript in this post to achieve our goal.

Let’s say you’re creating a form, and you want a way to explain what the fields do or what data they need to contain, but you don’t want to fill up too much space on screen, and you want to make it as unobtrusive as possible. In this case it would be cool to have a link with the anchortext “Explain”, which would expand a section which explains what the user needs to do.

As the first step, we need to create a div which will hold the explanation text, and a link which will unhide it for the user.

<a id="link1" href="javascript:display('show', 1)">Explain</a>
<div id="explanation1" style="display:none">This form let's you input your order details, please keep it short!</div>


As you can see I have given the div a unique identifier. This is needed so the javascript knows which div I want to change. I have added a number to the id because there might be many more explanations, these would receive different numbers. I have also given the link an id, with the same number at the end as the div. Once the user clicked the link, we want to change the link, so clicking it again will close the div.

The link contains “javascript:”, which indicates that this link doesn’t point to a page, but should execute javascript code, in our case a function (display), with two arguments. The first tells the javascript function which will execute that we want to show the div (as opposed to hiding it), the second is a numerical identifier, which should be the same as the number in the div’s id. Take a look at the javascript code below with the explanation afterwards.


<script type="text/javascript">

function display(action, id)
{
if (action == 'show')
{
document.getElementById("explanation"+id).style.display = "block";
document.getElementById("link"+id).href= "javascript:display('hide', "+id+")";
document.getElementById("link"+id).innerHTML = "Close";
}

if (action == 'hide')
{
document.getElementById("explanation"+id).style.display = "none";
document.getElementById("link"+id).href= "javascript:display('show', "+id+")";
document.getElementById("link"+id).innerHTML = "Explain";
}
}

</script>


As you can see, the two arguments are named “action” and “id”. The action argument will tell the script what we want to do (close the div or show it), the id argument will tell it which element we want to do it with. When you first click on the link the action is “show”, so let’s take a look at what’s happening there.

First of all, the script checks what the action is. It sees that it is “show”, so it executes three lines. the first line sets the div’s dispaly to block, which means that it will appear, you will be able to read the text. this is achieved by “grabbing” the element using its unique id. By specifying “document.getElementById(’theidhere’)” you can grab any element. In our case, we always grab the element “explanationX”, where X is the number beside it, given by the id argument. This id argument makes it possible to use one function for all the divs you want to open or close, so we won’t need to code the same function for all the different ids out there. The bit of code following specifies that we want to change the style, more specifically the display property, and we want to change it to “block”.

The second line grabs the link element, and instead of changing the style, it changes the address it points to (href), which in our case will be a new piece of javascript code. We change it to the exact same code, but instead of “show” as the action, we now have hide.

Line 3 grabs the same link element, but now changes the element contents. An element’s contents is always whatever is between the start and end tag, in a link’s case this is the anchor text. We change it from “Explain” to “Close” so the user knows that the div will disappear if he clicks the link again.

The three lines in case the action is “hide” do the exact same things, but change the values back, so if the user wants to open the div again he can do so.

That wasn’t so hard was it? The uses for these javascript methods are truly endless, from checking registration forms before submitting, to dynamically adding text to your site, you can do almost anything here, your imagination is truly the limit, so have fun!

Related posts

• Web Development: PHP – what role does it fill (1)
• View Javascript Sources with JSView (1)
• Remove adverts on Wikipedia (4)
• Preezo: Create Powerpoint Presentations Online (12)
• PHP – what it does and what it doesn’t (4)

Each section is divided into two subsections that link to the presentations and videos. The Powerpoint presentations have to be downloaded to your computer while the videos are embedded on the website itself. Most tutorials on the website are clearly aimed at users with some background knowledge.

If you take a look at the C++ tutorials in the Language section you see that they are not beginners tutorials for instance. The first tutorial is named C++ Threads while the second and last New Features in the Next C++ Standard. Nothing a beginner to C++ programming would want to start with.

The videos however are excellent, the C++ Threads video for instance has a playtime of 1 hour 29 minutes. Strangely though the other video which was hosted on Youtube is not available anymore which is the only video that was not available. All other videos were hosted on Google Video and ran fine.

The website has a Curriculum Search as well which should help to find teaching material. It’s basically a custom Google search.

Related posts

• Youtube Videos Get Automatic Captions. 1080p Videos Roll-Out (1)
• Youtube Insight: Find Out Who Is Embedding Your Youtube Videos (0)
• Yahoo vs. Google vs. Msn, Search commands compared (4)
• Xoopit To Become Yahoo Mail Exclusive (5)
• x Ways To Manipulate Websites In Firefox (6)

There is a choice of six template layout. Although, that is too little compared to powerpoint, I feel it is enough for normal usage. You can change your font (20 font types to choose from), change background color or even use a image as a background. Speaking about images; There is a option for you to load a picture from your desktop. I have seen too many web 2.0 sites that require you to load the picture/photo from a url which is very inconvenient.

You can view your slides in the normal view (powerpoint view) or the slide sorter view (see above). Within the slide sorter view, you can drag and drop the slides to change the order. Nice for a web app.
Slide show

You are able to view your slide show directly as you do your presentations by going to “view show”. The other 3 options are

1. Email Show – share you presentation through email
2. Publish Show – Publish your presentation for live viewing
3. Embed Show – Embed a presentation on your blog, like I have done below (only 3 slides for testing)

There are even cool slide transitions for you to play with. Good Stuff.

My main gripe with Preezo is that it cannot open existing powerpoint from your desktop. But to create a presentation from scratch, I totally recommended it. I think I will use this from now on.

This has been an entry from Yeong who runs his own blog Blogmunch.

Read More:

Preezo

Related posts

• Google Docs Templates (2)
• Watch three webcasts get vista and office for free (1)
• Remove Hidden Data tool for Office 2003 and Office XP (2)
• Office Web Apps (to be) Included Free In Windows Live (4)
• Office Live Workspace Beta (1)