Having trouble with Linear Animation - what did I do wrong?

Hi There. I'm a student trying to learn JavaScript via an online University that has basically no support for when I get stuck so I'm looking for a little help here with an assignment if I can.

I'm supposed to create a re-design of their computer science website (on a mini-scale), but incorporate various types of menus. The menu I am having trouble with is my sliding menu which uses linear animation. I'm not sure what I've done wrong.

Below are my current functions to move the menu in a horizontal line to the right, emerging from behind another object to make it visible. When the link on the page is clicked it calls the showSlideMenu() function passing the id of the div to be animated and "slide" to the right into the function as the id parameter:

function getSideMenuX(id){
menu = document.getElementById(id);
xLoc = parseInt(menu.style.left);
return xLoc;
}

function shiftMenu (id, incX) {
menu = document.getElementById(id);
menu.style.left = getSideMenuX(id) + incX + "px";
}

function showSlideMenu(id) {
menuLoc = getSideMenuX(id);
if (menuLoc < 380) {
menuLoc.style.zIndex="4";
shiftMenu(id, 10);
setTimeout("showSlideMenu(id)", 10);
}
}

Funny thing is I copied it almost verbatim from my textbook (changing variable and function names only) yet it does not work. Before anyone says that id is a reserved word or term, my textbook used it too as the name of the parameter passed into the functions and it did not have an error in the animation tutorial. So I am wondering if there is something I did wrong?

The menu itself is contained in a div that is positioned with css using relative positioning and it has the second highest z-index value (the object it is hiding behind and sliding out from behind having the highest z-index value).

Also the assignment calls for me to use a table for the main area and display of the site. So the div content is actually within a table cell in the html code. I don't know if this would be causing a problem or not.The cell itself has a set width using the width property in css. However I don't see that this should be a problem as the div menu object should slide to the right over top of the next table cell when the showSlideMenu() function is called.

Can anyone shed some light on this for me? I am very confused and have not found much in the way of help in my google searches or emailing my instructors, so I'd appreciate any help I can get here.

 

Hi,

the problem is in calling the function showSlideMenu(id) via your setTimeout. Variable id is actually local string, but you're sending reference to global object. It would work in this way if you use instead of value of id the reference to element - document.getElementById(id). So in your case you need to rewrite the setTimeout line, to treat id as a string :

setTimeout("showSlideMenu('"+id+"')", 10);

Code (markup):

Good luck with your studies

 

lp1051: I tried implementing your line of code there but the problem still persists. I get the same logical error, no browser errors, but no sliding menu appearing either

 

ok true, there's another bug:

menuLoc.style.zIndex="4";

Code (markup):

cannot be, because variable menuLoc is the position of your menu (number), not the element itself. So you cannot set style.zIndex to it. For that get first the element :

document.getElementById(id).style.zIndex="4";

Code (markup):

Any better?
If still nothing, check that you're calling your function showSlideMenu('some_id') after the page load, or at least after the menu. And also menu should have set position relative or absolute to move over the page.

 

Not sure I understand entirely so let me explain what I think you mean, please correct me if I am wrong.

My menuLoc variable is only storing the coordinates of the div container but doesn't affect the z-index property? If I understand correctly the reference to the element was stored in the variable menu local only to the getSideMenuX function, so after that I have to create another reference to change the z-index? Is that right?

 

Hi,
yes, exactly. If you are not sure why, look at a piece of your function showSlideMenu(id).

function showSlideMenu(id) {
1. menuLoc = getSideMenuX(id);
2. if (menuLoc < 380) {
3. menuLoc.style.zIndex="4";
 shiftMenu(id, 10);
 setTimeout("showSlideMenu('"+id+"')", 10);
}
}

Code (markup):

Line 1. - variable menuLoc is the result of function getSideMenuX(id); which is...?

function getSideMenuX(id){
menu = document.getElementById(id);
xLoc = parseInt(menu.style.left);
return xLoc;
}

Code (markup):

... parseInt() is built-in javascript function, that parses a string and returns an integer, so xLoc is integer and so must be menuLoc. Exactly the left position from edge of parent element. Let's say it is 150 (px).

Line 2. - if (menuLoc < 380) again you compare number against menuLoc

Line 3. - menuLoc.style.zIndex="4"; - you could look at this like - 150.style.zIndex=4; and that doesn't make a sense. You want to change or set zIndex of the element, right? To achieve that I suggested to use :

document.getElementById(id).style.zIndex="4";

Code (markup):

Hope it helps

 

My showSlideMenu() function now looks as follows:

function showSlideMenu(id) {
menuLoc = getSideMenuX(id);
if (menuLoc < 380) {
document.getElementById(id).style.zIndex="4";
shiftMenu(id, 10);
setTimeout("showSlideMenu("+id+")", 10);
}
}


but still, no menu sliding out into view. I am thoroughly confused. Not sure how what you've labeled as Line 2 is an error because 380 is an integer being compared to menuLoc which is also an integer, so that shouldn't be an error. I have tried adding the set of single quotes to the setTimeout line but that doesn't work either. I dunno if it's the fact I must use a table for this that's messing everything up or what but it's very stressful. This is the only part of my project that is not working. I really, really hate logical errors.

 

Hi,
ok I'm not sure what caused your problem, so I will post the whole working code. It is just moving single DIV, not menu, but you can compare it with what you have, and hopefully find the issue....

<html>
<head>
<script type="text/javascript">
function getSideMenuX(id){
 menu = document.getElementById(id);
 xLoc = parseInt(menu.style.left);
 return xLoc;
}

function shiftMenu (id, incX) {
 menu = document.getElementById(id);
 menu.style.left = getSideMenuX(id) + incX + "px";
}

function showSlideMenu(id) {
 menuLoc = getSideMenuX(id);
 if (menuLoc < 380) {
  document.getElementById(id).style.zIndex=4;
  shiftMenu(id, 10);
  setTimeout("showSlideMenu('"+id+"')", 10);
 }
}
</script>
</head>
<body>
<div id="move_me" style="position:absolute;left:20px;z-index:5;">whatever text inside element</div>

<script type="text/javascript">showSlideMenu('move_me')</script>

</body>
</html>

HTML:

 

Hi There,

The only difference I am seeing between what you posted above and what I posted prior to that is the extra set of quotes in the setTimeout line, which I have tried adding in but still it isn't animating/moving and pulling the div (the div and it's contents are the menu).

Your HTML is a bit off as the div is nested in a table cell. The HTML looks more like the following for the body section of it:

<body>
<div id="container">
<table>
  <th colspan =2 id="banner"><img src = "images/banner.gif" /></th>
  <tr>
    <td colspan=2 id="topMenu">[I]content[/I]</td>
  </tr>
  <tr>
    <td id="sideMenu">
      <div id ="menu">
         <p class="sideBar"><a href="javascript:showSlideMenu('menu1')">[I]Option 1[/I]</a></p>
         <p class="sideBar"><a href="option2.html">[I]option 2[/I]</a></p>
      </div>
      <div id ="menu 1">
          <p class ="sideBar"><a href ="choice1.html">Choice 1</a></p>
          <p class = "sideBar"><a href="choice2.html">Choice 2</a></p>
      </div>
    </td>
    <td>
      [I]Content[/I]
    </td>
  </tr>
</table>
</div>
</body>

Code (markup):

My css coding is in a separate file, however, the div id-ed as "menu" has a higher z-index value than the div id-ed "menu1" which is hidden behind "menu". The idea is that when the link in "menu" with the text link "option 1" is clicked, that "menu1" will slide out to the right from behind "menu" into view beside "menu". But it's not doing that and I don't know why.

 

Hi,
it doesn't work from many reasons. The biggest bug is in div. The position of your div needs to be absolute or relative, left position needs to be set or the command needs to be changed into something like:

xLoc = parseInt(menu.style.left||0);

Code (markup):

. However, it is possible that it is in your CSS. Next is

id ="menu 1"

Code (markup):

- should be

id="menu1"

Code (markup):

as you are calling javascript:showSlideMenu('menu1'). Btw. It is not good habit to use ids or names with spaces, try underscore instead.

<body>
<div id="container">
<table>
  <th colspan =2 id="banner"><img src = "images/banner.gif" /></th>
  <tr>
    <td colspan=2 id="topMenu">content</td>
  </tr>
  <tr>
    <td id="sideMenu">
      <div id ="menu">
         <p class="sideBar"><a href="javascript:showSlideMenu('menu1')">Option 1</a></p>
         <p class="sideBar"><a href="option2.html">option 2</a></p>
      </div>
      <div id="menu1" style="position:absolute;left:0px;">
          <p class ="sideBar"><a href ="choice1.html">Choice 1</a></p>
          <p class = "sideBar"><a href="choice2.html">Choice 2</a></p>
      </div>
    </td>
    <td>
      Content
    </td>
  </tr>
</table>
</div>
</body>

HTML:

 

Hi There,

The positioning of the menu1 div is relative in my css file which I've not posted. It has a left value of 0px initially in the css file.The id is written as menu1 in my actual code (without a space). It was a typo on transference to this forum on my part that there was a space.

Looking at your code for the left position:

I'm actually not sure what you're doing here with the || sign. To my understanding the || is the or operator, used in conditional statements. So what you've done her confuses me and I don't understand it's usage in this context.


I have tried a number of alert boxes. I have determined that the id is being passed into the function correctly however, I believe I have found the location of the first error in my code (only way to do this right is to go line by line, one problem at a time as they come up.). It is located in the getSideMenuX function. I've placed an alert box after the declaration of menu to display the contents of the variable menu. When I run the program the alert box pops up and says that menu is [object], which I believe means it isn't storing a reference to the menu1 div, as it should. However the line of code in the getSideMenuX function:

menu = getElementById(id);

Code (markup):

I am certain is correct in it's syntax, so why it's not storing the object reference and the alert box is displaying [object] instead of DIV, I am totally baffled.

I also tried placing an alert box after the xLoc variable definition to display the contents of the xLoc variable. This alert box pops up after the previous alert box displaying that the contents of xLoc is NaN. Because xLoc returns to the calling function showSlideMenu as NaN the if statement is not being processed because the condition returns false. This explains why the menu isn't moving, since the rest of the code is not being executed.

Totally stumped here. I have no idea why menu is not storing the object reference to the menu1 div, which is obviously the cause of why xLoc is storing NaN, since nothing is being stored in the local menu variable. If I can find out why the object reference is not being stored as it should be, then the rest of this might work, but you never know till you solve one error if there are any more. Help here in determining why the object reference isn't being stored properly would be appreciated.

 

Hi Chronia,

I'm sorry for the || operator, but if the left position is not defined for element, parseInt method returns null. OR operator is offering default value if the left position is not set, in this case. Maybe cleaner way is to write it as :

xLoc = parseInt(menu.style.left) || 0;

Code (markup):

which you can interpret as - xLoc is integer from left position OR 0 (if integer is null). It is a common way to shorten code. But you can forget it (for now), as you have the position set in your CSS.

However, your code to get element is wrong. When you write just getElementById(id), compiler expects it is some window object method or user-defined function. But this one is method for document object, so you need to write the whole thing.

menu = document.getElementById(id);

Code (markup):

I really don't know if the code you posted, is what you have, when I look at your first post, otherwise it will help. If still no luck, I suggest you to upload the whole example on live page and post link, so we can look at it and give you real solution, not just bunch of try this and that...

 

My code is different from my first post because I have been working on it and making changes testing things out as you've suggest. As I said in my first post this is an assignment, thus I can not post my full coding. The other reason I can not post my full code is because the assignment is supposed to be a mini replica of my school's current computer science department's website, built from scratch implementing the animated "sliding" menu. Thus if I post my entire code I am revealing my school, which I prefer not to do. The HTML code I provided is not my code in full but a small section of it, where the div that I am trying to move is located. My actual HTML code, however, uses the same framework I have posted. My JavaScript, however, is the exact coding I have used in my assignment.

Getting back to the problem at hand, within my css code, the div with the id menu1 has the following css declarations:

#menu1 {position:relative; top: -180px; left: 0px; z-index:1}

Code (markup):

My Javascript code (updated version) now reads:

function getSideMenuX(id){
	menu = document.getElementById(id);
	menu.style.left="0px";
	alert("menu: " +menu); //returns [object]
	alert("menu.style.left.value" + menu.style.left.value); //returns undefined
	xLoc = parseInt(menu.style.left.value);
	alert("xLoc: "+xLoc); //returns undefined
	return xLoc;
}

function shiftMenu (id, incX) {
	menu = document.getElementById(id);
	menu.style.left = getSideMenuX(id) + incX + "px";	
}

function showSlideMenu(id) {
	menuLoc = getSideMenuX(id);
	if (menuLoc < 380) {
		document.getElementById(id).style.zIndex="4";
		shiftMenu(id, 10);
		setTimeout("showSlideMenu('"+id+"')",  10);
	}
}

Code (markup):

I have determined that even though the left position of the menu1 div is defined in my external css code file, the program is ignoring that it is set. Also in adding the line to my getSideMenuX function to assign a left position to the menu1 div it's not holding and the program is ignoring the assignment as if it never happened as illustrated in my alert box returning the value of "undefined". So something is very definitely wrong in that section of my code but I don't see what it is or why.

 

Hi, thanks, I hope this will help

menu.style.left.value doesn't work, because there's no 'value' property for style attributes.

function getSideMenuX(id){
	menu = document.getElementById(id);
	//menu.style.left="0px";
	alert("menu: " +menu); //returns [object]
	alert("menu.style.left" + menu.style.left); //returns undefined
	xLoc = parseInt(menu.style.left);
	alert("xLoc: "+xLoc); //returns undefined
	return xLoc;
}

Code (markup):

Another thing that may help is to use inline style definition for you div id="menu1". Honestly, I don't really remember why it doesn't take the definition from extern CSS file, but I remember that it helps so sorry for the lack of explanation...

<div id="menu1" style="position:relative; top: -180px; left: 0px; z-index:1">

Code (markup):

I used your latest code, and it is moving the Choice 1 and 2, so if you cannot see it, be aware you set top to -180px.
Working now?

 

Hi There,

Thanks so much for all your help so far. i really appreciate it It is moving now but there are still problems. It stops far short of where it needs to be and is not moving outside the table cell as it needs too. It should not be head by the confines of the cell (hence the using the z-index) and should move to the left over top of the adjoining cell next to it. If my assignment didn't force me to use a table I wouldn't be using one, and it's likely part of the problem itself, but I have to work around it so there must be a way for it to move over top of the cell next to it as it is definitely not moving 380px, perhaps 50 at most it looks like to me. This is probably why I can't see the movement when the div is positioned at -180px. I had to temporarily change the top coordinate to 0 to see that it was in fact moving, even if though it was even a quarter inch to the left on my screen.

From this point I have absolutely no clue where to go. The animation is working however there's still something wrong (I suspect it's the fact that I'm stuck using a table) that isn't moving it where it needs to be so that it comes into full view. Have you any thoughts? My textbook doesn't cover these kinds of conflicts unfortunately.

I appreciate any further help you can give m

 

Hi,
yes, table is not the best structure, but it should not stop the moving div. You can simply debug the distance from left with alert box :

function showSlideMenu(id) {
	menuLoc = getSideMenuX(id);
	alert(menuLoc);
	if (menuLoc < 380) {
		document.getElementById(id).style.zIndex=4;
		shiftMenu(id, 10);
		setTimeout("showSlideMenu('"+id+"')",  10);
	}
}

Code (markup):

What is the last value you can see? Is it 380?

I don't really understand your description. The expected behavior from your code is - on click on 'Option 1' move div with id="menu1" to the right (380px). You don't change top position and increasing z-index may only help to bring the div up, if it was covered by other layer with higher z-index (e.g. with <div id="menu">). Again, all depends on the whole CSS and HTML. I tried to reproduce your code as far as I got it from you, and it is doing what I expect. So if you have still problems, sharing live example would make it easier for both sides