Dynamic Table of Contents

In this article you will learn how you can employ DHTML to quickly and easily add a dynamic Table of Contents feature to your (lengthy) web pages.

Introduction

Whether managing a simple static HTML web site or a complex database-driven application, at some point every developer comes across the task of building a section with some form of content listing.
Company News, Products Features, Frequently Asked Questions, Blogs and Tech Notes are perfect examples of content listings.
All these various types of content have at least one thing in common: each of them has a listing of content blocks and needs a way of navigating between the listing items.

AJAX by examples: PHP Email with dynamic attachment

Introduction

One of the main advantages of AJAX is the ability to interact with the web server without loosing your current screen state.

Here is a real life example:

Let’s say you are working with your favorite web application. You have filled out bunch of form fields to generate a nice long report and you need to email this page as you see it to someone as an attachment –a Word document!

You can probably think of a number of ways to get this done, but here is an AJAX way – do it with a click of a button, staying exactly where you are and without launching external applications. Sounds interesting? Let’s get busy.

Creating a contacts application with AJAX part 2

In the first part of this tutorial, we looked at some of the theory behind AJAX, a new approach to building Web applications. AJAX uses XML, XSLT, XHTML and CSS, JavaScript and the DOM and the XMLHttpRequest object to create applications. The key advantage is that data loads asynchronously, so there’s no need to reload the page each time the user requests new data. This creates a more responsive application and an improved user experience.

In the second part of the tutorial, we’ll build a simple address book application. We’ll start by displaying a hyperlinked list of contacts. When we click each contact’s link, we’ll show the details of the contact below. We won’t need to reload the page each time we click a link, speeding up the browsing process

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options... and clicking the Delete Cookies... button on the General tab.

Interface Widgets Time picker Spinbox Component

Introduction

Those of us who use Visual Studio and similar tools for desktop application development are completely spoiled by the wide range of interface components available in the development environment. Sliders and menus, date pickers and datagrids – drag them, drop them, enter your parameters and off you go.
When it comes to building application interfaces for the Web and you are stuck with HTML (no Flash or JAVA) your options are rather limited to a pathetic drop of form elements.

Creating a contacts application with part 1

In this tutorial, we’ll look at a new approach to building Web applications called AJAX. What’s so great about AJAX? Basically, you can create applications that don’t require users to continually reload Web pages. The AJAX approach isn’t suitable for every application but it can really enhance the user experience in simple applications.

The tutorial is split into two parts. In part 1, we’ll cover some of the theory behind AJAX and look at its advantages compared with server-side applications. You’ll see how we can work with XML content in the Web browser using JavaScript. We’ll cover:

• Understanding AJAX?
• Using the XMLHttpRequest object

In part 2, we’ll create a very simple AJAX address book application that takes its content from a series of XML documents. The application will display a list of contacts from an XML document. When the user clicks a contact name, we’ll load the details from another XML document and display them WITHOUT refreshing the page in the browser.

The application will use several different technologies. First, we’ll use JavaScript with the XMLHttpRequest object to load the content into our application. We’ll style the content with CSS and we’ll generate XHTML from the XML documents using XSLT (Extensible Stylesheet Language Transformations) stylesheets. If you’re not familiar with XSLT, it transforms a source XML document into a results document. In our case, we’ll use it to create XHTML from an XML document.

If you have a good understanding of the technologies involved in AJAX, you may want to skip part 1 and move straight to part two. However, stick around if you want a refresher or are new to the area. We’ll start with some of the theory behind AJAX.

Building AJAX image gallery Part II

Introduction

In the first article of the series Building AJAX image gallery –Part I we have created the basic functionality for our AJAX/PHP image gallery. In this iteration we will add some new feature and improve upon the basis established earlier.
Right now we can only load images with the dimensions no larger than our image viewer pane. We also have to manually create thumbnails for all the images beforehand and make sure they all have the same height, which is the height of the thumbnail browser pane. On top of that the whole thing is a little ... dull, so adding a little pizzas definitely wouldn’t hurt.

Note: Check also the DMXzone own CSS Image Gallery extension for amazing pure CSS galleries and slideshows with a fluent navigation and image transitions!

Building AJAX/PHP image gallery - Part I

Introduction

Me personally? I am a Flash freak, I prefer Flash to anything else for the front-end development stuff. The trouble is you can’t always go Flash; there are a lot of situations where HTML is your only choice. In those situations AJAX is the next best thing after the sliced bread.

In this article, as it follows from the title, we will build an AJAX-driven image gallery. Users would be able to pick from a list of gallery albums and load the album’s thumbnails. Selecting a thumbnail would display the corresponding image. All the albums along with the images will be physically stored on the web server. Using PHP as the server-side language our AJAX application will read and display the content of the folders on the fly thus eliminating the need of creating and maintaining the gallery database.
Of course (as you would expect from AJAX) there will be no page refreshes as the whole point here is to create a cool, desktop-like experience (right?).

I have many times created and used similar applications in Flash. This and the following articles is an attempt to a certain extent mimic Flash behavior.

Note: Check also the DMXzone own CSS Image Gallery extension for amazing pure CSS galleries and slideshows with a fluent navigation and image transitions! 

The DOM and Nodes

As we all know by now, using the DOM is a powerful technique for manipulating the behaviour layer. It allows you do use unobtrusive techniques as well, while giving you powerful access to everything on your page, with the ability to alter, create or destroy it at will.

The key to using the DOM most effectively is to make generous use of methods that manipulate the nodes in a document. Without understanding these methods and techniques, your DOM scripting will not get very far. But what is a node and why do I want to manipulate it? Let’s find out.

Hacking around with JavaScript

Introduction

Quite often when building web pages we tend to rely on certain techniques trying to make the users “play by the rules” and utilize the web pages in a predictable way. In fact, we rely on them so much that sometimes we forget that their power can be turned against our purpose.
Indeed, JavaScript, “the great and the mighty” can become a dangerous weapon in skillful hands and used not to our advantage.

Once you realize how easy it is for a “total stranger” to “beat up” your web page you may decide to review your good techniques and utilize other tools to strengthen the “line of defense”.

Most of the tricks described in this article are pretty basic and can be put to use by a novice programmer.
After reading the article you will learn a few tricks which may help you with the following:

• Debugging your own web applications
• Bypassing bugs and glitches when using web sites built by someone else
• Minimizing chances for someone trying to use some of those techniques on your web pages.
• Staying informed of the various possibilities and being prepared to take corresponding actions.

Ajax: Ready States, PHP and Arrays

Last week we built a basic filmstrip application using Ajax. It was neat to see the images and descriptions coming in asynchronously, but it wasn’t a very extendable application of Ajax. What if we wanted to add new images? And what about all the hard coded JavaScript? There ought to be something we can do to make this type of application more robust.

In fact, there are a few things that we can do to toward that end. First of all we can make use of a server side language (we’ll use PHP) to figure out how many images (and what they are) on our server. We can also make generous use of arrays, both in JavaScript and PHP to do some of the data handling. Essentially, we want to think in a more object oriented way.

Lastly, we can make use of the xmlHTTPObject’s ReadyState property to keep the user informed of the progress when loading new elements into their view.

Ajax Part 2: The Ajax Filmstrip

Last week we saw the very basics of Ajax, we’ve learned to make asynchronous requests to the web server, thus freeing us from reloading a web page. This allows us to have much more of an “application like” feel to our web pages – or web application pages.

Last week we simply verified a username and presented a message to the user. Nice and useful, but not extremely exciting. What if we wanted to deal with images? Adding images to the ballgame opens our creative minds and gets the juices flowing! Furthermore, we’d like to think in a slightly more object oriented way than just stacking up loads of functions to do our dirty work. Pretty soon we’ll find we’ve added new functionality but also tons of overhead to our pages. We want to avoid that.

For this lesson we’re going to build a very basic (and I mean basic) version of the Windows “Filmstrip” functionality.

Introduction to AJAX

In the last six months there has been a lot of talk (read “hype”) about something people are calling “Web 2.0.” What they mean when they throw these buzzwords around is that there are some exciting new technologies that will transform the Internet into something we hoped it would be the first time around.

Whether or not this turns out to be true, the fact is that there are some interesting things being done with technology these days, and lucky for us – they include JavaScript! One of the foremost technologies being bandied about is something called AJAX, which is an acronym for “Asynchronous JavaScript + XML,” and it actually isn’t all that new. What is new is the way it is being used and the technologies with which it is being paired.

AJAX as a catchphrase was coined by Jesse James Garrett of Adaptive Path. With a company called 37 Signals, they have made some early use to bring these techniques to the forefront in the web development world. You can read a longer introduction to the concept written by Garrett himself if you like, but we will focus on the basics as an introduction coupled with JavaScript.