Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 152
  • Last Modified:

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.left)

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<100)
            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>&nbsp;</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>
0
dfinlen
Asked:
dfinlen
  • 4
  • 2
1 Solution
 
dfinlenAuthor Commented:
Edited text of question
0
 
dfinlenAuthor Commented:
Edited text of question
0
 
PBallCommented:
DHTML is case sensitive, and so is JavaScript.
 firsthalf != firstHalf


0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
dfinlenAuthor Commented:
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.


0
 
dfinlenAuthor Commented:
line 22: should read
firstHalf.style.left = firstHalf.style.left + 1
0
 
PBallCommented:
ok, next point, chuckle.

1.

i dunno what platform you doing this for.  I only do IE (geez..how many times have I said this :) ), so...

when doing calculation, use posLeft / posTop and not left / top.

left and top will return string value (say 10px instead of just 10).  posLeft / posTop will return the numeric value.

object.style.posLeft is the right syntax for IE.  for Netscape I think it's something like document.object.posLeft or document["object"].posLeft.  Again, am not sure.

2.
there is no such thing as style.right (time to take a look at those CSS reference :) for positioning there are only top, left, width, height and theirs pos... counterparts: posTop, posLeft, posWidth, posHeight (again, I am talking IE, Netscape is probably different).

there is also no style.visible, however there is style.visibility.  I suggest you take a look at the CSS properties such as one that has been posted on microsoft workshop site (www.microsoft.com/workshop/default.asp) and navigate to HTML, DHTML, and CSS. Copy them, print them, post the on the wall, etc. etc.  Trust me, it's easier than trying to remember the whole damn thing.

Next, just a quick note:
You can declare a CSS entry for ID, thus eliminating the need to create a DIV.class and shorten things a bit.

#firstHalf {
:
:
:
}

#secondHalf {
:
:
:
}

and just do
<DIV ID=firstHalf>....</DIV>
etc.

Hope that will give you enough arsenal till the next time I get rejected hehe.

Oh yeah, might want to consider using setTimeout/setInterval instead of doing all of those in one shot with while which will lock up processor time (meaning if you make a mistake of eternal looping, your pc is toasted, well or you have to do CTRL-ALT-DEL to stop the process).

Moving thing to setTimeout/setInterval is not that difficult, just need to initialize a global var for the current Left and Right and for each iteration, inc/dec/do calc on those global var instead of local var.

i.e.

<script>
var Count = 0

function doCount()
{
   Count++;

   if (Count < 500)
     setTimeout("doCount()",250);  //call doCount every 250
miliseconds
}

</script>

<body onLoad="doCount()">



</body>
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now