Solved

CSS Problem

Posted on 1998-12-18
6
144 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
  • 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

790 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