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 :D
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:
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:
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.
background-attachment: fixed;
Now we can go on to telling the server the image we wish to use.
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:
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>
<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:
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:
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. :)
Enough of that nonsense and I'll try to be fun :D
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:
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:
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.
background-attachment: fixed;
Now we can go on to telling the server the image we wish to use.
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:
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>
<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:
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:
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. :)