Positioning an object at a negative position (< 0)

RIRedinPA · September 2, 2008

I am building a site that is a production application for our magazines. It displays in a table format for each issue, each item of an issue is an individual row, each row contains 20 or so items, they want to see a lot of data upfront so it is a wide table, runs off the screen to the right. The VP then wants the users to be able to scroll kind of like an excel sheet, where you can split the screen.

I am trying to augment Harry Maugan's animation script (http://www.harrymaugans.com/2007/03/06/how-to-create-an-animated-sliding-collapsible-div-with-javascript-and-css/) by having a horizontal slide. It partially works, it'll slide the table to the right but moving left is just a jump from point a to b, no slide. Also, if I try to go say -200 it jumps there but then slides back to position 0.

I'd appreciate anyone taking a look at it and giving some feedback.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #999966;
}

table { 
background-color: #CCCC66;
}

#tablediv { 
position: absolute; 
top: 300px;
width: 2400px;
border: 1px solid red;
}

#buttons {
font-weight: bold; 
color: #663300;
font-size: 16px;
}


#buttons a: link {
color: #663300;
}

#buttons a: visited {
color: #663300;
}

#buttons a:hover { 
color: #663333;
}

#buttons a: active {
color: #663300;
}
-->
</style>

<script language="javascript">
var timerlen = 5;
var slideAniLen = 500;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endPosition = new Array();
var moving = new Array();
var dir = new Array();

function slideleft(objname){

  		if(moving["tablediv"]) {
    		return;
	}

  		moving["tablediv"] = true;
  		dir["tablediv"] = "left";
  		startslide("tablediv");
}

function slideright(objname){
  		if(moving["tablediv"]) { 
    		return;
		}

  		moving["tablediv"] = true;
  		dir["tablediv"] = "right";
  		startslide("tablediv");
}

function startslide(objname){
  		//obj[tablediv] = document.getElementById(tablediv);

	if (dir["tablediv"] == "left") { 
  			endPosition["tablediv"] = -200; 
	} else { 
		endPosition["tablediv"] = 300;
	}

  		startTime["tablediv"] = (new Date()).getTime();
		timerID["tablediv"] = setInterval('slidetick("tablediv");',timerlen);
}

function slidetick(objname){
  		var elapsed = (new Date()).getTime() - startTime["tablediv"];

		if (elapsed > slideAniLen) { 
    		endSlide("tablediv")
  		} else {
    		var d =Math.round(elapsed / slideAniLen * endPosition["tablediv"]);
    
		if(dir["tablediv"] == "left") { 
      			d = endPosition["tablediv"] - d;
		}
    
		document.getElementById("tablediv").style.left = d + "px";
  		}

  	return;
}

function endSlide(objname){
  clearInterval(timerID["tablediv"]);

  if(dir["tablediv"] == "up")
    document.getElementById("tablediv").style.display = "none";

  document.getElementById("tablediv").left = endPosition["tablediv"] + "px";

  delete(moving["tablediv"]);
  delete(timerID["tablediv"]);
  delete(startTime["tablediv"]);
  delete(endHeight["tablediv"]);
  delete(obj["tablediv"]);
  delete(dir["tablediv"]);

  return;
}
</script>
</head>

<body>

<div id="buttons"><a href="javascript:void(0)" onClick="slideleft('tablediv');"><<<</a>   <a href="javascript:void(0)" onClick="slideright('tablediv');">>>></a>
<div id="tablediv" style="left:300px;">
<table cellpadding="3" cellspacing="0" border="1" width="2400">
    <tr valign="top">
<th>Page Info</th>
<th>Description</th>
<th>Display Ads</th>
<th>Copy Dropped</th>
<th>Edit Notes</th>
<th>Art</th>
<th>Art Notes</th>
<th>Art Assigned</th>
<th>Layout Assigned</th>
<th>AD Review</th>
<th>Edit Export</th>
<th>Final Editorial</th>
<th>Art Review</th>
<th>PDF Complete</th>
<th>PDF Proofed</th>
<th>To Printer</th>
</tr>
    
    <tr valign="top">
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    </tr>
    </table>
   
</div>
</body>
</html>

efficacious · September 2, 2008

just a suggestion...

I would use Flash for something like this.. its easy enough to do with flash and will give you a 100* better result.

For something like a production heavy magazine site that will have alot of users especially alot of different users.. you'll want to use as least amount of JS as possible.

`eff

RIRedinPA · September 2, 2008

You misunderstood, actually I wasn't clear.

This is for the artist and editors who produce the magazines to use for their production schedules, not for our end users.

efficacious · September 2, 2008

my fault.. still this would be easier to do in flash then in JS (least for me)

I'm horrible with JS tho so..I use it alot for things but it is always giving me problems

`eff

RIRedinPA · September 2, 2008

I'm the other way, me no like flash. Plus, I have to dump/pull data from MySQL and it's easier for me to do in PHP.

Sign In

Positioning an object at a negative position (< 0)

Recommended Posts

RIRedinPA

Link to comment

Share on other sites

efficacious

Link to comment

Share on other sites

RIRedinPA

Link to comment

Share on other sites

efficacious

Link to comment

Share on other sites

RIRedinPA

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information