Aligning print fields

[chriseccles]

Hi All

Can anyone hazard a guess at why THIS works:

function moveUp() {
var presentPos = document.getElementById("box1").style.top;
var intPosition = parseInt(presentPos);
intPosition = intPosition - 10;
var newPosition = intPosition +'px';
document.getElementById("box1").style.top = newPosition;
}

and yet THIS doesn't:

function moveLeft() {
var presentPos = document.getElementById("box1").style.left;
var intPosition = parseInt(presentPos);
intPosition = intPosition - 10;
var newPosition = intPosition +'px';
document.getElementById("box1").style.left = newPosition;
}

?

Thanks in adv.

Chris

[007Julien]

Style.top and style.left are only available if the have been informed before !

You have to use offsetTop or offsetLeft (see this page) to read the position and style.top or left to move the box.

Another method is to use this function whose existence is interesting to know.

[chriseccles]

Thanks for reply, 007Julien.
-
The original left and top ARE set in the CSS,
as is position: absolute for the element:

#box1 {
  border: 2px solid black;
  position: absolute;
  height: 100px;
  width: 400px;
  top: 100px;
  left: 100px;
  
}

The odd thing about the code is that style.top works
fine and yet style.left doesn't.

Both fail to work in IE8, but that neither surprises nor bothers me.

Chris

[007Julien]

For me it's work fine (in IE 8, FF 5.0, Opéra 11.11, Safari 5.0.5 and Google Chrome 12.0.742.112) with offsetTop and offserLeft instead of style.top and style.left !

[007Julien]

Perhaps a div whitout HTML style attribut has a height but not a width ???

See this page JavaScript style objects and properties for further developments...

[chriseccles]

Sorry for the bump but this is really annoying me, now.
-
In every modern browser except IE8 or IE7, this works perfectly:

function moveUp() {
var box = document.getElementById("boxSelect").value;
y -= 10;
document.getElementById(box).style.top = y +"px";
}

In other words, the value of box is fetched from a pick-list
and the appropriate <div> gets moved correctly.

In Internet Exploder, the script gets interrupted on the

document.getElementById(box).style.top = y +"px";

line, with an 'invalid argument' exception.

Has anyone any ideas for a workaround ?
I'm not fond of using 'if(ie)' hacks but I will on this occasion
if anyone can supply one !

Thanks for patience.

Chris

Although it doesn't relate directly to the problem, I am nevertheless grateful
to you, 007Julien, for pointing me at the Sophox blog, where I learned
several things I didn't know before !

[007Julien]

For me your two first function give, at the first call, a inexistant value for presentPos in all moderne browsers (IE, Mozilla Firefox, Google Chrome, Op&#233;ra and Safari) and your last exemple works perfectly in IE8 if you replace y by box !

[criterion9]

function moveUp() {
var box = document.getElementById("boxSelect").value;
y -= 10;
box.style.top = y +"px";
}

[chriseccles]

Thanks for getting involved, lads, because this is really starting to
become quite tricky, now !

function moveUp() {
var box = document.getElementById("boxSelect").value;
y -= 10;
box.style.top = y +"px";
}

That doesn't work, criterion9. Maybe you misunderstood what is in
the <select> tag named 'boxSelect'. The <option>'s there are strings,
"box1", "box2", etc, equivalent to the ID's of the <div>'s to be moved.
In your reply (for which I am grateful), 'box' is just a string and not a DOM
object, and therefore cannot be styled. What I'm tripping up on, here, is in
attempting to pass the <div> name contained in 'box' as a parameter
to the getElementById() method. In other words, I want to make an DOM object
from the HTML element named by whatever is in the <select> element.

For me your two first function give, at the first call, a inexistant value for presentPos in all moderne browsers (IE, Mozilla Firefox, Google Chrome, Opéra and Safari) and your last exemple works perfectly in IE8 if you replace y by box !

Non-existent values I can live with, 007Julien, because these could always be set
in Javascript onLoad, anyway. I just don't get your 'replace y by box ' ! That just
falls over, here - no results at all, because 'box' is a string value derived from the
drop-down list in the 'boxSelect' <select /> tag. I'm developing on Safari and IE8 in
parallel, with occasional cross-checks in Windows Firefox and Apple Firefox to keep
a lid on Mozilla oddities.

The main functionality of the moveXx() functions is actually working OK across
all browsers, using style.top and style.left, with the proviso that I hard code the
<div> name into the function, which totally defeats the objective of having the
user decide in the drop-down which box he/she wants to actually move about ! ! !

Don't want to be a pain but really need to resolve this otherwise the page will get
cluttered up with more button elements than sane users could cope with.

Thanks for all help.

Chris

[criterion9]

Thanks for getting involved, lads, because this is really starting to
become quite tricky, now !



That doesn't work, criterion9. Maybe you misunderstood what is in
the <select> tag named 'boxSelect'. The <option>'s there are strings,
"box1", "box2", etc, equivalent to the ID's of the <div>'s to be moved.
In your reply (for which I am grateful), 'box' is just a string and not a DOM
object, and therefore cannot be styled. What I'm tripping up on, here, is in
attempting to pass the <div> name contained in 'box' as a parameter
to the getElementById() method. In other words, I want to make an DOM object
from the HTML element named by whatever is in the <select> element.



Non-existent values I can live with, 007Julien, because these could always be set
in Javascript onLoad, anyway. I just don't get your 'replace y by box ' ! That just
falls over, here - no results at all, because 'box' is a string value derived from the
drop-down list in the 'boxSelect' <select /> tag. I'm developing on Safari and IE8 in
parallel, with occasional cross-checks in Windows Firefox and Apple Firefox to keep
a lid on Mozilla oddities.

The main functionality of the moveXx() functions is actually working OK across
all browsers, using style.top and style.left, with the proviso that I hard code the
<div> name into the function, which totally defeats the objective of having the
user decide in the drop-down which box he/she wants to actually move about ! ! !

Don't want to be a pain but really need to resolve this otherwise the page will get
cluttered up with more button elements than sane users could cope with.

Thanks for all help.

Chris

Can we see the select code please? Have you explicitly set the value for each option?

[chriseccles]

Hi, criterion9.
-
By means of a back-to-the-drawing-board approach, I seem to
have resolved this problem, and I am grateful for 007Julien's help
in directing me to look at the SOPHOX pages, because that is where
I found the clue to getting this to work.
-
For the benefit of others, I am posting an abridged form of the code
for the page which seems to work fine on IE8, IE9 (tested by my son),
Safari 4, Safari 5 (OSX10.5.8), Firefox and Opera. Allowing users to
line up fields for printing might become increasingly useful in cloud
applications so I hope this solution to my original problem has some
long-term benefits !

Here is the HTML/Javascript (abridged for only two boxes):

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>PRINT TESTS</title>
	
	<style type="text/css" media="all">
	  @import "print.css";
	</style>

<script type="text/javascript">

function moveUp() {
var a = parseInt(y);
a -= 10;
y = a + "px";
document.getElementById(selected).style.top = y;
}
function moveDown() {
var a = parseInt(y);
a += 10;
y = a + "px";
document.getElementById(selected).style.top = y;
}
function moveLeft() {
var a = parseInt(x);
a -= 10;
x = a + "px";
document.getElementById(selected).style.left = x;
}
function moveRight() {
var a = parseInt(x);
a += 10;
x = a + "px";
document.getElementById(selected).style.left = x;
}

 function getPositionValues(el) { 
   selected = el.id;
   var cs;
   y = 0;
   x = 0; 
   if (window.getComputedStyle) { 
      cs  = getComputedStyle(el, null); 
      y = cs.getPropertyValue("top"); 
      x = cs.getPropertyValue("left"); 
   } else {
     y = el.currentStyle["top"];
     x = el.currentStyle["left"];
     }      
}
 
</script>

</head>
<body>

<div class="container">

<div id="box1" class="printBox1" onClick="getPositionValues(this)">
<div>
<span id="labelField1" class="inlineL">Data Field Box 1</span>
</div>
</div>

<div id="box2" class="printBox1" onClick="getPositionValues(this)">
<div>
<span id="labelField1" class="inlineL">Data Field Box 2</span>
</div>
</div>


<div class="buttonPanel">
Click on a print field to select it,<br/>
then use these buttons to move field:
<div>
<input type="button" value="UP" onClick="moveUp()"/>
<input type="button" value="DOWN" onClick="moveDown()"/>
<input type="button" value="LEFT" onClick="moveLeft()"/>
<input type="button" value="RIGHT" onClick="moveRight()"/>
</div>

</div>

</body>
</html>

and the CSS:

.inlineL {
  font-size: 10px;
  color: red;
  margin: 0px 10px 0px 10px ;
}
.container {
  position: absolute;
 
}
.buttonPanel {
  position: relative;
  top: 500px;
  float: right;
}
#box1 {
  border: 2px solid black;
  position: absolute;
  height: 100px;
  width: 400px;
  top: 10px;
  left: 100px;
  
}
#box2 {
  border: 3px solid yellow;
  position: absolute;
  height: 100px;
  width: 400px;
  top: 150px;
  left: 100px;
  
}

Thanks for everyone's patience with my niggles.

Chris