.
 DHTML
and CSS tutorials
Custom Attributes in
HTML 5
HTML 5 supports a new "data" attribute you can add inside
elements to store arbitrary bits of information, to be later
parsed using JavaScript for example. This tutorial shows you how
to utilize this new attribute.
Getting global and external style sheet values in DHTML
This useful tutorial looks at how to use DHTML to retrieve
inherited CSS property values from global and external Style
Sheets
Creating a flashy image slideshow with IE Transitions
(IE)
IE transitions is a collection of prebuilt visual effects in IE that can be applied during content state changes. A step by step tutorial on creating a cross browser image slideshow that's enhanced visually in IE by taking advantage of IE Transitions.
Overview of CSS3 Structural
pseudo-classes
Structural pseudo-classes let you select and style child
elements of a container based on a variety of generic criteria,
such as the 3rd child, even/odd child elements, or even the nth
child element of a certain type. Learn all about them here.
W3C CSS Selectors API- The querySelector() and querySelectorAll()
methods
The querySelector() and querySelectorAll()
methods let you enter a CSS selector as a parameter and return
the selected elements as DOM elements. Think of them as
document.getElementById() on steriods.
Performing GET and POST
requests using Ajax
Ajax, once stripped of all its fanciness, basically describes
just two things- performing "GET" and
"POST" requests asynchronously. This tutorial explains
Ajax frankly and gently, while also covering the important
topics of fetching XML and JSON files using Ajax.
 Displaying RSS feeds
easily using Google Ajax Feed API
Displaying RSS feeds from other sites on your own
is a nice way to show constantly updated content automatically.
In this tutorial, we show you how to use Google Ajax Feed API to
display RSS feeds from other sites on your own easily and
without hosting the files on your own server.
Relying on DOM readiness to invoke a function (instead of window.onload)
In this tutorial I'll show you how to call a function as soon as
the document's DOM is ready for manipulation, versus via the
often slower window.onload event handler.
Fixed Content using CSS/
Dynamic Expressions
See how to use CSS's "fixed" positioning to render content that
doesn't move on the screen, plus how to simulate the effect in
legacy IE browsers (5 and 6) using dynamic expressions.
CSS Hacks- the good, the bad, and
the ugly
David provides a detailed look at your various options when it
comes to CSS hacks to fix those browser inconsistency woes, even
in IE7. The good and the bad aren't the only players in town!
Introduction to the TreeWalker object
of DOM
The TreeWalker object is a
powerful DOM2 object that lets you easily filter through and
create custom collections out of nodes in the document. This is
a comprehensive tutorial on how to utilize this object.
 RSS
Ajax JavaScript ticker
In this tutorial,
I'll show you how to combine RSS, Ajax, and JavaScript to create a live RSS
ticker.
Including the contents of an external page using Ajax
This tutorial looks at how to use Ajax to dynamically include
the contents of an external page onto the current one
automatically each time the page is requested. Think of it as
SSI client side!
Changing external style sheets using the DOM
Using the DOM, you can access and manipulate external style
sheets on the page, from adding/deleting rules to modifying
existing ones. This comprehensive tutorial shows you how.
Applying border & opacity to images onMouseover in CSS
Learn how to spruce up images on your webpage with a border or
opacity effect onMouseover, using CSS only.
Useful CSS shorthand properties
This tutorial looks at some commonly used CSS shorthand
properties that can save you both time and coding.
Custom CSS cursors
A comprehensive tutorial on all the available cursors at your
disposal in CSS (as of CSS2.1), plus using JavaScript to
manipulate the cursor.
Rotating regular HTML content using DHTML
One of the great nuisances of using JavaScript to display
content on demand is the requirement that everything be
contained in variables. See how DHTML can help shatter that
limitation, so regular HTML content can be dynamically rotated
and shown just the same.
Adding Generated Content in CSS2
Generated Content is an exciting new feature in CSS2 that lets
you insert string and image content, among other types of
content, onto the page dynamically using CSS. Learn all about
it in this tutorial.
Introduction
to Dynamic Properties (IE)
Dynamic Properties is a relatively unknown feature of IE5+
that allows you to substitute static values in your HTML with
dynamic expressions instead. Now that's what we call DHTML!
Rotating regular HTML content using DHTML
One of the great nuisances of using JavaScript to display
content on demand is the requirement that everything be
contained in variables. See how DHTML can help shatter that
limitation, so regular HTML content can be dynamically rotated
and shown just the same.
Manipulating
a XML file using DHTML
In this tutorial, we look at using DHTML
to retrieve and display a XML
file. This is useful when you need a client side method of including XML
files on your webpages.
Fading in text using the
DOM
Here we'll
learn to do with scripting what Java and Flash have
"been there done that" with- fade text gradually into view Brought to you by the new DOM
of IE5 and NS6.
Accessing HTML
attributes using the DOM
Among the many talents of the DOM is its ability to retrieve and modify
attributes inside HTML elements. Using just a small set of methods, you can
intuitively get the width of a DIV, change the src of an image, or even
remove the background image of the document!
Adding motion blur
to objects in IE5.5
A lot of DHTML effects these days involve objects animating around the page in some fashion. In, IE5.5+, you can increase the
realism of such events, by adding a motion blur to the object as it moves.
Manipulating image
opacity in Firefox
See how to change the opacity of any image in
Firefox, and create a script that fades an image in and out!
CSS
Media types and printer friendly pages
Learn about media types in CSS-2, and how it can be used to
easily produce printer friendly pages.
Comprehensive CSS Guide
This tutorial by will guide you, from the ground up, how to
code CSS (Cascading Style Sheets). Learn everything from the various ways of
defining style, to how to use them to manipulate font, background, margins,
and more. [Corresponding CSS reference sheet]
Specifying
page breaks for printing
With CSS (level 2), the grip webmasters have over their
webpages extends to the printer. This tutorial reveals how to insert
artificial page breaks for printing of your page in IE5 and NS6.
Scrollbar
coloring in IE 5.5+
Developers have long whined for the ability to alter the
browser's scrollbar colors, and in IE 5.5 (the latest version of IE as of
Nov 2000), that wish is granted. See how in this tutorial.
Adding drop caps effects to
your paragraphs using CSS
Learn to deploy the age-old drop caps effect of traditional print to your
paragraphs, in our latest web building tutorial!
5 cheap CSS tricks
Want to add some cool CSS effects to your site? We'll show you the source
code to five of the most popular (and cheapest) CSS tricks currently in use, so your site
can join in the CSS fun as well!
More tutorials
|
