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?
Thanks
Martin
<html>
<head>
<style>
..myHead
{
width:100px;
height:50px;
background-color:blue;
position:absolute;
}
..myBody
{
width:100px;
height:50px;
background-color:red;
position:absolute;
top:50;
}
</style>
</head>
<body>
<script language="javascript">
function myMove()
{
myBody.style.pixelTop = myBody.style.pixelTop + 1;
}
</script>
<div id="myHead" class="myHead" />
<span id="myBody" class="myBody" onmousedown="myMove()"/>
</body>
</html> 7  2857 
Oh, BTW, I'm looking at it in IE6.
Martin Payne wrote: 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?
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.
[...] {
width:100px;
height:50px;
background-color:red;
position:absolute;
top:50;
top: 50px;
}
</style>
</head>
<body>
<script language="javascript">
language is depreciated, type is required
<script type="text/javascript">
function myMove()
{
myBody.style.pixelTop = myBody.style.pixelTop + 1;
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)?
}
</script>
<div id="myHead" class="myHead" />
<span id="myBody" class="myBody" onmousedown="myMove()"/>
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
On Sat, 30 Apr 2005 16:07:11 +0200, RobG <rg***@iinet.net.auau> wrote: if ( x && (x = x.replace(/\D/g,'')) );
I would suggest a parseInt() instead of that regexp. Any specific reason
why you used replace instead?
--
Hallvord R. M. Steen http://www.opera.com/
Hallvord R. M. Steen wrote: On Sat, 30 Apr 2005 16:07:11 +0200, RobG <rg***@iinet.net.auau> wrote:
if ( x && (x = x.replace(/\D/g,'')) );
I would suggest a parseInt() instead of that regexp. Any specific
reason why you used replace instead?
parseInt is easy to misuse - though probably not in this case. top
is returned as a string, so I figured it'd modify it as a string. It
is possible that the units will be returned as a decimal number with
a unit(say 2.5em) in which case parseInt will not work correctly, but
a slight modification to the above will:
if ( x && (x = x.replace(/\D*$/g,'')) );
Probably best to use parseFloat, as that will deal with floats and
ints - use what suits.
--
Rob
Martin Payne wrote: 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!
[invalid HTML/CSS code]
<http://validator.w3.org/>
<http://jigsaw.w3.org/css-validator/>
Come back and complain about the UA when it's Valid.
PointedEars
--
In the First World War, 13 million people were killed. In the Second
World War, 40 million people were killed. I think that if a third war
takes place, nothing is going to be left on the face of earth.
-- Shakira, 2003-02-05 @ MTV.com
Can ANYONE see a complaint in my post??!!!
PointedEars, next time, unless you are actually going to respond to my
specific question and not make some unwanted wanker comment, don't
bother responding at all.
mp****@qualtech-int.com.au wrote: Can ANYONE see a complaint in my post??!!!
Your `?' and `!' keys are borken. Regarding your "question", here you are:
| 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??!
PointedEars, next time, unless you are actually going to respond to my
specific question and not make some unwanted wanker comment, don't bother
responding at all.
Firstly, this is not a paid support forum, you don't have any right to
get any answer (to your question); read the FAQ. Secondly, a client-side
script executed on invalid markup is not supposed to work (among other
things, a missing DOCTYPE declaration enforces Quirks/Compatibility Mode).
But apparently you are too incompetent to recognize that. Go away.
PointedEars
--
There are two possibilities: Either we are alone in the
universe or we are not. Both are equally terrifying.
-- Arthur C. Clarke This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: yoelgold |
last post by:
hi
can someone please tell me what "document.MM_sr" is. I tried searching
for a explanation on the web but cant find anything. What does MM_sr
represent? and where can i get documentation on it.
...
|
by: Jackson Yap |
last post by:
can someone kind enough to help me look at the attached html and js
file? Why is it that the javascript menu could not work at
www.apchosting.net but could work at...
|
by: Bryan |
last post by:
I am attempting to make a web page more Netscape friendly... <a
href="http:www.gordonceilings.com"></a>
I have already corrected the table issues in an offline staging site
(where I do the...
|
by: verci |
last post by:
Hi guys, sorry if this seems stupid but I'm a newbie, I'm running Windows XP
Pro SP2, IE 7, VS2005, ASP.net 2.0
The problem is that I'm trying to display this news scroller made in a
Javascript...
|
by: mbatestblrock |
last post by:
Okay, So trust me I have googled, and searched this board before posting..
Maybe I dont know the correct searching phrase.
I want to be able to recreate a text area for news on my site, and I...
|
by: Michellevt |
last post by:
Hi
I am working on a project (for college) and wondered if anyone can help me with my problem. In the project we are not allowed to make use of any "style" attributes but "class" attributes...
|
by: Jens |
last post by:
Hi everyone,
I'm trying to build a simple dropdown menu for a website and i need to
need a way to retrieve
the top and left style attributes of an object. However it seems style
attributes like...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
