[Tutorial] Basic DHTML Examples

ScottDiamond · 30-05-2007, 08:15 PM

In this tutorial I'll be making an attempt of getting DHTML Knowledge transferred to your head successfully. This will have to involve examples and commenting. Oh.

Enough of that nonsense and I'll try to be fun

DHTML Tutorial

Part One

I'm sure some of you have wondered how HabboValley has an image behind there content. Now, let's explain. The image is using CSS to keep it 'Fixed' on the page. This means it will not scroll when you scroll through the content. The image is in the background, and this is our CSS code:

HTML Code:

body
{
background-attachment: fixed;
background-image: url("IMAGEURL.gif");
background-repeat: no-repeat;
}

Explain:

We need to insert this code in our <head></head> tags if you wish for an internal CSS file. If external, place it in your external document. Look through your head tags for the <style></style> tags or add them in yourself. Create the following:

HTML Code:

body
{

}

We need to define 'body' to ensure it covers the body of the page. In body we have the basics of Backgrounds, Hyperlinks and Font Styles. Since this will be a Background image, we need to tell the server that it is, we also need to tell them it's going to be fixed.

HTML Code:

background-attachment: fixed;

Now we can go on to telling the server the image we wish to use.

HTML Code:

background-image: url("IMAGEURL.gif");

After that, we need to tell the server to repeat the image or not. We do not wish the image to be repeated, so we add:

HTML Code:

background-repeat: no-repeat;

That's it. Need any help I'm all open for PM's.

Part Two

This next part includes Javascript. We will be using the onload function. I'll be using the onload to display a Pop-Up! This is the code I'll be using:

HTML Code:

<html>
<head>
<script type="text/javascript">
function popup()
{
alert("Here is the Pop-Up, doing it's job on the page load!")
}
</script>
</head>
<body onload="popup()">
</body>
</html>

The browser can tell from this that it contains Javascript. This is said from <script type="text/javascript">.

We have now defined that it's going to be a Javascript document. We will not go on to define the function we will be using.

We're using the Pop-Up function, and need to tell the browser what that is. We can do so using this code:

HTML Code:

function popup()
{
alert("Here is the Pop-Up, doing it's job on the page load!")
}

popup() is the name I've given to this action. We need to go on to tell the browser what will happen on popup(), and do so with:

HTML Code:

alert("Here is the Pop-Up, doing it's job on the page load!")

We need to keep our action within the { and } brackets, to tell the browser when the action has finished.

Now we need to let the page display the pop-up. To do so, we need to add some HTML into <body></body> on our document.

Instead of having <body>, we need to place our action in there. We will add <body onload="popup()">. This tells our browser that on the loading of the page, an action will occur. This action being popup(), which we have already added alert() to!

Need any help on this? PM me!

Part Three is to come later on.

Mashi · 30-05-2007, 08:39 PM

aCE 9/10!

ScottDiamond · 30-05-2007, 08:56 PM

Part Three

In this section we will be using a button to refresh the page. When you click this button, the page will do what it says on the tine and refresh. This is the code we will be using:

HTML Code:

<html>
<head>
<script type="text/javascript">
function reload()
  {
  window.location.reload()
  }
</script>
</head>
<body>
<input type="button" value="Reload!" onclick="reload()" />
</body>
</html>

Again, this will be included in the <script></script> tags. Let's get to business.

We have named this action "reload()". In the reload() action, we are going to put the refresh code. window.location.reload() will do the trick! window.location. is used to determine the location you are going to visit next. If we add reload() to the end, it will reload the current location!

HTML Code:

function reload()
  {
  window.location.reload()
  }

We will move on to adding the button. To add a button, we need to add it as an "input" from a form. Due to the input not having two tags to the action, we add /> to the end instead of >.

HTML Code:

<input type="button" value="Reload!" />

input type="button" tells the browser how the input is going to be a button. To add text to the button, we add the "value" attribute. value="Reload!" will have 'Reload' on the button.

We have to now tell the browser that when you click the button, the action will begin. We will do this using the onclick attribute as we have learnt previously. We have to have the action name in our onclick script, so we will use onclick="reload()". Now our full input code will be:

HTML Code:

<input type="button" value="Reload!" onclick="reload()" />

Need any help or find any errors with my coding let me know.

Oni · 30-05-2007, 09:40 PM

Nice on scott, if this were invent he would post it line by line and we would be on about our 100th thread now.

ScottDiamond · 30-05-2007, 09:43 PM

Lol ty. Invent is helping me learn PHP - he's an amazing teacher over MSN

Oni · 30-05-2007, 09:44 PM

Originally Posted by ScottDiamond

Lol ty. Invent is helping me learn PHP - he's an amazing teacher over MSN

Ill assume you didnt say that.

Florx · 30-05-2007, 09:46 PM

wow - great work. simple and fantastic explanation. i can see a lot of time and effort has been put in.

should be moved to the tuts section =D

:Edzy · 30-05-2007, 09:47 PM

Originally Posted by ScottDiamond

Lol ty. Invent is helping me learn PHP - he's an amazing teacher over MSN

Lucky *******

ScottDiamond · 30-05-2007, 09:50 PM

Originally Posted by Ed

Lucky *******

All I'm doing is posting PHP Code I'm learning from w3 schools, techtuts and PHP.net and he corrects it if needed. ;P

Puma · 30-05-2007, 10:04 PM

INVENT! teach me php please

Thread: [Tutorial] Basic DHTML Examples

Thread Tools

[Tutorial] Basic DHTML Examples

Members who have read this thread: 0

Posting Permissions