Solved

CSS Problem

Posted on 1998-12-18
6
147 Views
Last Modified: 2013-11-19
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
Comment
Question by:dfinlen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 

Author Comment

by:dfinlen
ID: 1840786
Edited text of question
0
 

Author Comment

by:dfinlen
ID: 1840787
Edited text of question
0
 
LVL 6

Expert Comment

by:PBall
ID: 1840788
DHTML is case sensitive, and so is JavaScript.
 firsthalf != firstHalf


0
Industry Leaders: 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!

 

Author Comment

by:dfinlen
ID: 1840789
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
 

Author Comment

by:dfinlen
ID: 1840790
line 22: should read
firstHalf.style.left = firstHalf.style.left + 1
0
 
LVL 6

Accepted Solution

by:
PBall earned 360 total points
ID: 1840791
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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question