dfinlen
asked on
CSS Problem
Well I am new to CSS and am having mucho troubles with my script. I'm trying to have my page slide in from the sides. I have set up two DIV tags and have asingned each of them a class and a ID. The ID's are firsthalf and secondhalf. Then I have a script run when the onload event for the body tag occurs. The script is suppose to increment and decrement the respective halves LEFT property. I am getting an error in my script saying there is no object named firsthalf. I have tride and tride for the last two hours and can not find the problem. If anyone could help I would be very thankfull and give you all my measly points. The pages are below.
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<link rel="STYLESHEET" href="Bttn Styles.css" TYPE = "text/css">
<SCRIPT LANGUAGE=javascript>
<!--
function w_onload()
{
var i = 0
var moving = true
//msgbox(firstHalf.style.l
while(moving)
{
i = i + 1
//msgbox(temp1)
firsthalf.style.left = firstHalf.style.left + 1
secondHalf.style.left = secondHalf.style.left - 1
if (firstHalf.style.left > 0)
firstHalf.style.visible = "visible";
if (secondHalf.style.right<10
secondHalf.style.visible = "visible";
if ((firstHalf.style.left >=33) || (secondHalf.style.left >= 66))
moving = false;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="w_onload()">
<H1 ID = "Kill">I'm gona kill this computer</H1>
<DIV CLASS="lside" ID="firstHalf" >
Hello
</DIV>
<br><br><br>
<DIV CLASS="rside" ID = "secondHalf" >
World
</DIV>
<P> </P>
</BODY>
</HTML>
//////////////////////////
Here is the css file
//////////////////////////
<STYLE>
DIV.lside
{
FONT-FAMILY: Arial;
LEFT: 5%;
POSITION: absolute;
TOP: 60%;
VISIBILITY: hidden
}
DIV.rside
{
COLOR: black;
FONT-FAMILY: Arial;
LEFT: 100%;
POSITION: absolute;
TOP: 60%;
VISIBILITY: hidden
}
</STYLE>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<link rel="STYLESHEET" href="Bttn Styles.css" TYPE = "text/css">
<SCRIPT LANGUAGE=javascript>
<!--
function w_onload()
{
var i = 0
var moving = true
//msgbox(firstHalf.style.l
while(moving)
{
i = i + 1
//msgbox(temp1)
firsthalf.style.left = firstHalf.style.left + 1
secondHalf.style.left = secondHalf.style.left - 1
if (firstHalf.style.left > 0)
firstHalf.style.visible = "visible";
if (secondHalf.style.right<10
secondHalf.style.visible = "visible";
if ((firstHalf.style.left >=33) || (secondHalf.style.left >= 66))
moving = false;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="w_onload()">
<H1 ID = "Kill">I'm gona kill this computer</H1>
<DIV CLASS="lside" ID="firstHalf" >
Hello
</DIV>
<br><br><br>
<DIV CLASS="rside" ID = "secondHalf" >
World
</DIV>
<P> </P>
</BODY>
</HTML>
//////////////////////////
Here is the css file
//////////////////////////
<STYLE>
DIV.lside
{
FONT-FAMILY: Arial;
LEFT: 5%;
POSITION: absolute;
TOP: 60%;
VISIBILITY: hidden
}
DIV.rside
{
COLOR: black;
FONT-FAMILY: Arial;
LEFT: 100%;
POSITION: absolute;
TOP: 60%;
VISIBILITY: hidden
}
</STYLE>
ASKER
Edited text of question
DHTML is case sensitive, and so is JavaScript.
firsthalf != firstHalf
firsthalf != firstHalf
ASKER
The problem I'm receiving is before that line that had a case sensitive error. Line 21 still is giving me an error the error is "Error: Object Expected". Thanks for the Help.
ASKER
line 22: should read
firstHalf.style.left = firstHalf.style.left + 1
firstHalf.style.left = firstHalf.style.left + 1
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER