Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS Problem

Posted on 1998-12-18
6
Medium Priority
?
149 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
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.

 

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 1440 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

722 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