Here at Switch On The Code, we've written several Javascript tutorials, but we didn't realize that some of our readers might not have much experience combining HTML and Javascript into a working page. This tutorial is going remedy that. We're going to start from the very beginning and show you how to get your Javascript and HTML to work together.
The code I'm going use as an example comes from an earlier sliding panels tutorial. This tutorial has a lot of HTML and Javascript interaction and I think it's a good place to start.
Let's begin with a completely blank HTML document.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Javascript is added to your HTML document through the use of a script tag. This tag can either point to a file containing your code, or you can actually put the source right in between the tags. This tutorial will demonstrate both.
For sliding panels, the first thing we need to do is include the generic animation code created from an earlier tutorial. I saved the code from that tutorial to a Javascript file named animation.js. Included Javascript files should go into the head of your document.
<html>
<head>
<title></title>
<script type="text/javascript" src="animation.js"></script>
</head>
<body>
</body>
</html>
Now your webpage can access functions and code contained in the file animation.js. Now we need the code that controls the sliding of our panel. In this case, we're going to just put that code inside another script tag without using a Javascript file.
<html>
<head>
<title></title>
<script type="text/javascript" src="animation.js"></script>
<script type="text/javascript">
function slideExample1(elementId, headerElement)
{
var element = document.getElementById(elementId);
if(element.up == null || element.down)
{
animate(elementId, 0, 20, 150, 0, 250, null);
element.up = true;
element.down = false;
headerElement.innerHTML = 'vvv';
}
else
{
animate(elementId, 0, 20, 150, 130, 250, null);
element.down = true;
element.up = false;
headerElement.innerHTML = '^^^';
}
}
</script>
</head>
<body>
</body>
</html>
Here you can see how Javascript code can be put inline between two script tags. I'm using version 1 of our generic animation code, since we'll be releasing a much more in-depth tutorial on how to use version 2 in the near future.
The last thing we need is some HTML for our Javascript code to manipulate.
<html>
<head>
<title></title>
<script type="text/javascript" src="animation.js"></script>
<script type="text/javascript">
function slideExample1(elementId, headerElement)
{
var element = document.getElementById(elementId);
if(element.up == null || element.down)
{
animate(elementId, 0, 20, 150, 0, 250, null);
element.up = true;
element.down = false;
headerElement.innerHTML = 'vvv';
}
else
{
animate(elementId, 0, 20, 150, 130, 250, null);
element.down = true;
element.up = false;
headerElement.innerHTML = '^^^';
}
}
</script>
</head>
<body>
<div style="position:relative;
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader1"
style="position:absolute;
width:150px;
height:20px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="slideExample1('examplePanel1', this);">
^^^
</div>
<div id="examplePanel1"
style="position:absolute;
width:150px;
height:130px;
top:20px;
left:0px;
background:#a6bbcd;
overflow:hidden;">
Content
</div>
</div>
</body>
</html>
That HTML code is straight from the sliding panel example. If you were to copy the above code and paste it into an HTML file, you would get a working sliding panel. I hope this helps anyone out there who is trying to use our Javascript tutorials but doesn't have experience creating web pages that use Javascript.
09/27/2007 - 23:49
I greatly appreciate this.For me, XHTML was a decently straight forward language, then looking at JS I was completely confused.
I may not know how to write JS, but this was a very large help.
Thank you.
11/17/2007 - 17:53
Doesn't work well in IE7 but works fine in Firefox. IE7 shows a bar at the bottom of tab.
11/17/2007 - 21:18
The bar you're seeing is a security warning. If you run the script from your computer, you'll see the warning. You just have to click the bar and allow scripts to run. These don't show up when the site is loaded from the web.
03/10/2009 - 21:18
Hi,
Still doesn't work properly in IE7 while works fine in Firebox. When I click slide up, the examplePanel1 doesn't disappear thoroughly. It still displays the minimum part of panel showing word "Content".
I also tried other modes of slide up/down (verticle, etc) and they are working fine in IE7, only this horizontal mode has this problem.
11/02/2009 - 12:07
hello,
thanks, this is a great tutorial.
one question, do these styles have to be in-line?
11/02/2009 - 13:57
Absolutely not. In fact, they probably shouldn't be. I made them inline for an earlier tutorial so you could easily see what styles were being applied to what elements.
11/02/2009 - 14:47
ok, then i took out the inline styles and tried to change the names but failed to make it work.
here is the code:
function coolSlider(elementId, headerElement)
{
var element = document.getElementById(elementId);
if(element.up == null || element.down)
{
animate(elementId, 0, 20, 150, 0, 250, null);
element.up = true;
element.down = false;
headerElement.innerHTML = 'down';
}
else
{
animate(elementId, 0, 20, 150, 130, 250, null);
element.down = true;
element.up = false;
headerElement.innerHTML = 'up';
}
}
</script>
<style>
#topbox {
position:absolute;
width:150px;
height:20px;
top:0px;
left:0px;
background: #000000;
text-align:center;
color:#FFFFFF;
border: 1px dashed #FFFFFF;
}
#bottombox {
position:absolute;
width:150px;
height:130px;
top:20px;
left:0px;
background:#FFFFFF;
overflow:hidden;
border: 1px dashed #000000;
color: 000000;
}
.bigbox {
position:relative;
width:150px;
height:170px;
top:0px;
left:0px;
}
</style>
<div class="bigbox">
<div id="topbox" onclick="coolSlider('bottombox', this);">
^^^
</div>
<div id="bottombox">
Content
</div>
</div>
11/02/2009 - 15:28
It looks like you're missing the animation code. You can download it at the bottom of this tutorial.
11/02/2009 - 21:09
yeah thats right, i didn't include that in the question, but i do have that there. could there be another problem?
11/03/2009 - 09:10
When you click the header, does the browser report any errors?
11/03/2009 - 11:17
no, it does not. it seems that the header works, but the bottom box does not collapse.
11/03/2009 - 12:06
So it looks like the style properties on elements aren't set when the style is applied like this. The animation code gets NaN for the position and size when it attempts to read them. If you move the styles inline, or set them using JS, it will work. Otherwise, I'd recommend checking out our jQuery sliding panels tutorial.
11/03/2009 - 17:06
ok, thanks for all the help.