Solved

CSS Problem

Posted on 1998-12-18
6
142 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to dynamically set the form action using jQuery.

863 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now