Building efficient websites with AJAX
Picture Perfect
The previous examples have been restricted to simple HTML elements such as lists and tables. Widgets and functions that HTML does not provide natively can be programmed in JavaScript in combination with cascading style sheets.
Querying the mouse position allows the developer to implement tool tips and even drag and drop. Most JavaScript libraries include implementations.
This does not exhaust the capabilities of dynamic HTML, including graphics that legacy HTML could only implement by embedding bitmaps.
Figure 5 shows a tree structure drawn by JavaScript. Client-side dynamic graphics have a number of advantages compared with bitmaps: The resolution is not fixed and can thus be modified to reflect the browser's preset font size.
![](/var/linux_magazin/storage/images/linux-magazine.com/issues/2008/91/breezy-browsing/figure-5/430997-1-eng-US/Figure-5_large.png)
User input can be visualized without server interaction, thus reducing the load on the server. Normally, much of a web server's bandwidth is consumed by serving up graphics.
HTML Extensions
Basically, there are two approaches to using JavaScript to create graphics. The greatest feature scope is offered by the XML-based graphics languages SVG [8], Canvas [9], and Vector Markup Language (VML) [10]. They can be embedded in HTML like normal graphics, but also can add typical graphical elements – such as lines, areas, or text at run time. They can thus respond interactively to user input like dynamic JavaScript-modified HTML.
Drawing programs such as Inkscape [11] or Karbon [12] will help you create a draft.
Unfortunately, multi-browser support is not guaranteed: None of the popular browsers support all three formats referred to here.
Firefox can handle SVG and Canvas, Safari just Canvas, and Internet Explorer just VML.
Google JavaScript has two libraries for SVG [13] or Canvas [14]; however, support on the Windows platform is not guaranteed.
Tried and Trusted Tools
Many diagrams or graphs can be created with JavaScript and the standard HTML and CSS tools, such as the tree graph in Figure 5.
The boxes are made up of freely positioned CSS div elements. If em is used as a unit instead of px (pixel) for placing and sizing, the box height, width, and position are based on the size of the letter "m."
The whole graph will then scale to reflect the text size without any effort on the developer's part.
Users can also easily scale the graphic up and down in most browsers with the mouse wheel.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
![Learn More](https://www.linux-magazine.com/var/linux_magazin/storage/images/media/linux-magazine-eng-us/images/misc/learn-more/834592-1-eng-US/Learn-More_medium.png)
News
-
NVIDIA Released Driver for Upcoming NVIDIA 560 GPU for Linux
Not only has NVIDIA released the driver for its upcoming CPU series, it's the first release that defaults to using open-source GPU kernel modules.
-
OpenMandriva Lx 24.07 Released
If you’re into rolling release Linux distributions, OpenMandriva ROME has a new snapshot with a new kernel.
-
Kernel 6.10 Available for General Usage
Linus Torvalds has released the 6.10 kernel and it includes significant performance increases for Intel Core hybrid systems and more.
-
TUXEDO Computers Releases InfinityBook Pro 14 Gen9 Laptop
Sporting either AMD or Intel CPUs, the TUXEDO InfinityBook Pro 14 is an extremely compact, lightweight, sturdy powerhouse.
-
Google Extends Support for Linux Kernels Used for Android
Because the LTS Linux kernel releases are so important to Android, Google has decided to extend the support period beyond that offered by the kernel development team.
-
Linux Mint 22 Stable Delayed
If you're anxious about getting your hands on the stable release of Linux Mint 22, it looks as if you're going to have to wait a bit longer.
-
Nitrux 3.5.1 Available for Install
The latest version of the immutable, systemd-free distribution includes an updated kernel and NVIDIA driver.
-
Debian 12.6 Released with Plenty of Bug Fixes and Updates
The sixth update to Debian "Bookworm" is all about security mitigations and making adjustments for some "serious problems."
-
Canonical Offers 12-Year LTS for Open Source Docker Images
Canonical is expanding its LTS offering to reach beyond the DEB packages with a new distro-less Docker image.
-
Plasma Desktop 6.1 Released with Several Enhancements
If you're a fan of Plasma Desktop, you should be excited about this new point release.