ansaurus

Question

Answer 1

+5 A:

When setting position with CSS you need to specify what measurement you are using... try this:

mytestbutton.style.right = x + "px";
mytestbutton.style.top = y + "px";

EDIT:

Also you have ".mybutton" when it should be "#mybutton" . refers to classes and # refers to ID's

and finally .childNodes is not a function its a property so you don't need the (), plus you have whitespace so you need to either remove it or use .childNodes[1] instead of .childNodes[0].

var mytestbutton = document.getElementById("testdiv").childNodes[1];

Alternatively you could just go

var mytestbutton = document.getElementById("myButton");

Kane Wallmann 2009-07-22 02:02:00

+1 for mentioning the whitespace text nodes - that difference in text parsing between different browsers catches a lot of people out :-)

NickFitz 2009-07-22 11:09:28

Answer 2

+1 A:

I highly recommend using one of the excellent free javascript frameworks out there to handle things like this. MooTools, JQuery, Prototype, and many others can greatly simplify the process of dynamically setting CSS styles from javascript, without the need to concern yourself with quirky things like having to remember to tack on "px" to the end of your position values and such. Javascript frameworks like MooTools and JQuery are very lightweight, but pack a ton of very helpful functionality, so they are definitely worth looking into:

// mootools

var el = $("myElement");
el.setStyle("left", 20);
el.setStyle("top", 10);

jrista 2009-07-22 02:07:10

I would preffer not to touch Jquery before i get comfortable with core JavaScript

Dmitris 2009-07-22 02:12:59

If you are interested in learning JavaScript more, MooTools is a more true-to-form javascript library that doesn't abstract you away from javascript as severely as JQuery does. MooTools is an excellent general purpose framework that uses javascript for what it is. The following site might be helpful in enlightening you to what MooTools is and what it can offer an aspiring JavaScript developer such as yourself: http://jqueryvsmootools.com/

jrista 2009-07-22 03:11:52

jQuery will not prevent you from getting comfortable with core javascript. It will simply shield you from the awful web browser DOM, which I assure you, is not part of javascript.

Breton 2009-07-22 03:13:34

Answer 3

+4 A:

There are a couple of problems here. Firstly, the following won't work:

document.getElementById("testdiv").childNodes()[0]

childNodes is not function, but an array-like object. It should be like the following:

document.getElementById("testdiv").childNodes[0]

However, that won't do what you want either - as the first node in testdiv is a text node (consisting of a number of space characters). You probably want this:

document.getElementById("testdiv").childnodes[1]

but the simplest solution is this:

document.getElementById("myButton")

Secondly, as mentioned in another answer, you need to specify units when assigning CSS styles to an object.

harto 2009-07-22 02:09:39

"as the first node in testdiv is a text node " I think that's browser dependant whether whitespace gets translated into a node.

Breton 2009-07-22 03:12:07

That may well be true. In any case, I'd always avoid hard-coding a node index - it's very brittle.

harto 2009-07-22 03:31:31

Answer 4

+1 A:

Assuming that you want the button to go to the top right of the testdiv container, this is what you need:

<style>
  #myButton {
    position: absolute;
  }

  #testdiv {
    height: 2em;
    position: relative;
    width:500px;
    border:solid #000000;
  }
</style>

Note that your previous css referred to an element with a class of mybutton instead of an element with the id myButton. The position: relative gives a positioning context to myButton's absolute position.

<script>
  var button = document.getElementById('myButton');
  button.style.top = 0;
  button.style.right = 0;
</script>

You should also note that your x and y were reversed in the original question -- you were offsetting on the y axis by the width and on the x axis by the height.

And the html:

<body>
    <div id="testdiv">
            <input type="submit" id="myButton" value="TestMe">
    </div>
</body>

wombleton 2009-07-22 02:20:54

ansaurus

tags:

views:

answers:

Need some help with simple JavaScript

related questions