Martin Payne wrote:[color=blue]
> This is doing my head in. In my code below, I set the style of a div
> so that its position is absolute and top = 50. When I view it in my
> browser it is positioned correctly. But, if I use pixelTop (or top)
> to change the position by adding one, my first mouse click is moving
> the div to top = 1, instead of top = 51!
>
> I've done some investigating using alert and it seems that height, top
> and pixelTop all have an initial value of zero until I set them with
> JS??!
>
> What am I doing wrong?[/color]
using style.top will get the value if set inline, but not via CSS
style sheet rule.
Do a search in this group for getCurentStyle (which works for IE) or
getComputedStyle for other browsers, there are a number of examples
on how to use them.
'top' is set in units, % or auto. The units may be px or anything
else a browser understands.
To avoid using getCurrentStyle/getComputedStyle, set 'top' inline in
the element tag. The value for 'top' will include the units that you
set it with. If you've set it to 50px, the value is '50px', not '50'.
So strip off the 'px', add your increment, then put it back on.
See below.
[...][color=blue]
> {
> width:100px;
> height:50px;
> background-color:red;
> position:absolute;
> top:50;[/color]
top: 50px;
[color=blue]
> }
> </style>
> </head>
> <body>
> <script language="javascript">[/color]
language is depreciated, type is required
<script type="text/javascript">
[color=blue]
> function myMove()
> {
> myBody.style.pixelTop = myBody.style.pixelTop + 1;[/color]
Using an id as a global variable is a Microsoft-ism. Since the
script is initiated by a click on the element you want, why not pass
'this' to send a reference directly to the script (see below)?
[color=blue]
> }
> </script>
>
> <div id="myHead" class="myHead" />
> <span id="myBody" class="myBody" onmousedown="myMove()"/>[/color]
Rather than 'onmousedown', why not 'onclick'?
[...]
The following is just an example, it moves the element by 50 pixels
each time.
<script type="text/javascript">
function myMove(myBody) {
var x = myBody.style.top;
if ( x && (x = x.replace(/\D/g,'')) );
myBody.style.top = +x + 50 + 'px';
}
</script>
<div id="myHead" class="myHead">
<span id="myBody" class="myBody" style="top: 50px;"
onmousedown="myMove(this);">
</span>
</div>
--
Rob
