DHTML ONLINE » DHTML tutorial http://dhtmlonline.com HTML and DHTML tutorials Tue, 15 Sep 2009 09:37:55 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 DHTML Tutorial http://dhtmlonline.com/dhtml-tutorial/ http://dhtmlonline.com/dhtml-tutorial/#comments Tue, 15 Sep 2009 08:49:35 +0000 admin http://dhtmlonline.com/dhtml-tutorial/ DHTML is the art of making HTML pages dynamic!

DHTML is a combination of technologies used to create dynamic and interactive Web sites.

To most people DHTML means a combination of HTML, Style Sheets and JavaScript.

DHTML DOM Reference

At CodeDcode you will find a complete DHTML DOM reference of all the DOM objects, along with their properties and methods.

]]> http://dhtmlonline.com/dhtml-tutorial/feed/ 0 DHTML Introduction http://dhtmlonline.com/dhtml-introduction/ http://dhtmlonline.com/dhtml-introduction/#comments Tue, 15 Sep 2009 08:48:49 +0000 admin http://dhtmlonline.com/?p=11 DHTML is the art of making HTML pages dynamic!

DHTML is a combination of technologies used to create dynamic and interactive Web sites.

To most people DHTML means a combination of HTML, Style Sheets and JavaScript.

DHTML DOM Reference

At CodeDcode you will find a complete DHTML DOM reference of all the DOM objects, along with their properties and methods.

]]> http://dhtmlonline.com/dhtml-introduction/feed/ 0 DHTML CSS http://dhtmlonline.com/dhtml-css/ http://dhtmlonline.com/dhtml-css/#comments Tue, 15 Sep 2009 08:47:07 +0000 admin http://dhtmlonline.com/?p=10 Which Attributes can be Used with CSS-P?

First, the element must specify the position attribute (relative or absolute).

Then we can set the following CSS-P attributes:

  • left – the element’s left position
  • top – the element’s top position
  • visibility – specifies whether an element should be visible or hidden
  • z-index – the element’s stack order
  • clip – element clipping
  • overflow – how overflow contents are handled

Position

The CSS position property allows you to control the positioning of an element in a document.

position:relative

The position:relative property positions an element relative to its current position.

The following example positions the div element 10 pixels to the right from where it’s normally positioned:

div
{
position:relative;
left:10;
}

position:absolute

The position:absolute property positions an element from the margins of the window.

The following example positions the div element 10 pixels to the right from the left-margin of the the window:

div
{
position:absolute;
left:10;
}

Visibility

The visibility property determines if an element is visible or not.

visibility:visible

The visibility:visible property makes the element visible.

h1
{
visibility:visible;
}

visibility:hidden

The visibility:hidden property makes the element invisible.

h1
{
visibility:hidden;
}

Z-index

The z-index property is used to place an element “behind” another element. Default z-index is 0. The higher number the higher priority. z-index: -1 has lower priority.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

In the example above, if the h1 and h2 elements are positioned on top of each other, the h2 element will be positioned on top of the h1 element.

Filters

The filter property allows you to add more style effects to your text and images.

h1
{
width:100%;
filter:glow;
}

Note: Always specify the width of the element if you want to use the filter property.

The example above produces this output:

Header

Different Filters

Note: Some of the Filter properties will not work unless the background-color property is set to transparent!

Property Argument Description Example
alpha opacity
finishopacity
style
startx
starty
finishx
finishy		 Allows you to set the opacity of the element filter:alpha(opacity=20, finishopacity=100, style=1, startx=0,
starty=0, finishx=140, finishy=270)
blur add
direction
strength		 Makes the element blur filter:blur(add=true, direction=90, strength=6);
chroma color Makes the specified color transparent filter:chroma(color=#ff0000)
fliph none Flips the element horizontally filter:fliph;
flipv none Flips the element vertically filter:flipv;
glow color
strength		 Makes the element glow filter:glow(color=#ff0000, strength=5);
gray none Renders the element in black and white filter:gray;
invert none Renders the element in its reverse color and brightness values filter:invert;
mask color Renders the element with the specified background color, and transparent foreground color filter:mask(color=#ff0000);
shadow color
direction		 Renders the element with a shadow filter:shadow(color=#ff0000, direction=90);
dropshadow color
offx
offy
positive		 Renders the element with a dropshadow filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
wave add
freq
lightstrength
phase
strength		 Renders the element like a wave filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray none Renders the element in black and white with reverse color and brightness values filter:xray;

Background

The background property allows you to select your own background.

background-attachment:scroll

The background scrolls along with the rest of the page.

background-attachment:fixed

The background does not move when the rest of the page scrolls.

]]> http://dhtmlonline.com/dhtml-css/feed/ 0 DHTML Document Object Model http://dhtmlonline.com/dhtml-document-object-model/ http://dhtmlonline.com/dhtml-document-object-model/#comments Tue, 15 Sep 2009 08:45:57 +0000 admin http://dhtmlonline.com/?p=7 The Document Object Model gives us access to every element in a document.

Note: Most of the DHTML examples require IE 4.0+, Netscape 7+, or Opera 7+!

How to access an element?

The element must have an id attribute defined and a scripting language is needed. JavaScript is the most browser compatible scripting language, so we use JavaScript.

<html>
<body>
<h1 id="header">My header</h1>
<script type="text/javascript">
document.getElementById('header').style.color="red"
</script>
</body>
</html>

The script changes the color of the header element, and produces this output.

My header

]]> http://dhtmlonline.com/dhtml-document-object-model/feed/ 0 Event handlers http://dhtmlonline.com/event-handlers/ http://dhtmlonline.com/event-handlers/#comments Tue, 15 Sep 2009 08:45:08 +0000 admin http://dhtmlonline.com/?p=5 With an event handler you can do something with an element when an event occurs: when the user clicks an element, when the page loads, when a form is submitted, etc.

<h1 onclick="style.color='red'">Click on this text</h1>

The example above defines a header that turns red when a user clicks on it.

You can also add a script in the head section of the page and then call the function from the event handler:

<html>
<head>
<script type="text/javascript">
function changecolor()
{
document.getElementById('header').style.color="red"
}
</script>
</head>
<body>
<h1 id="header" onclick="changecolor()">
Click on this text</h1>
</body>
</html>

HTML 4.0 Event Handlers

Event Occurs when…
onabort a user aborts page loading
onblur a user leaves an object
onchange a user changes the value of an object
onclick a user clicks on an object
ondblclick a user double-clicks on an object
onfocus a user makes an object active
onkeydown a keyboard key is on its way down
onkeypress a keyboard key is pressed
onkeyup a keyboard key is released
onload a page is finished loading. Note: In Netscape this event occurs during the loading of a page!
onmousedown a user presses a mouse-button
onmousemove a cursor moves on an object
onmouseover a cursor moves over an object
onmouseout a cursor moves off an object
onmouseup a user releases a mouse-button
onreset a user resets a form
onselect a user selects content on a page
onsubmit a user submits a form
onunload a user closes a page
]]> http://dhtmlonline.com/event-handlers/feed/ 0 DHTML Summary http://dhtmlonline.com/dhtml-summary/ http://dhtmlonline.com/dhtml-summary/#comments Tue, 15 Sep 2009 08:44:25 +0000 admin http://dhtmlonline.com/?p=3 DHTML Summary

This tutorial has taught you how to use DHTML to create more dynamic and interactive Web sites.

You have learned how to use the combination of HTML, CSS and JavaScript to animate HTML documents.

Now You Know DHTML, What’s Next?

The next step is to learn about the HTML DOM and ASP.

HTML DOM

The HTML DOM defines a standard way for accessing and manipulating HTML documents.

The HTML DOM is platform and language independent and can be used by any programming language like Java, JavaScript, and VBScript.

ASP

While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP file are executed on the server.

With ASP you can dynamically edit, change or add any content of a Web page, respond to data submitted from HTML forms, access any data or databases and return the results to a browser, customize a Web page to make it more useful for individual users.

Since ASP files are returned as plain HTML, they can be viewed in any browser.

]]> http://dhtmlonline.com/dhtml-summary/feed/ 0