asked on

Moving controls around on the screen

Hi,

I need to write a small javascript function that can move a button on a web page from one position to another. The software I am developing for does not allow me access to the page code, I can only write small javascripts that are embedded for me into the page so my plan is to have a function in javascript that finds the button on the page by going through the DOM and moving it to another position. The new position will now be absolute, I need to specify that it goes after another screen element.

For example, button A is put in the first element of a table and I need to move that to another table and place it into a cell that contains a field with a specific ID. Any ideas or pointers?

Thanks,

Lee

kylealanhale

Not tested, but it might get you started on the right path:

var elemButton = document.getElementById('buttonId');
var elemTD = document.getElementById('cellId');
elemButton.parentNode.removeChild(elemButton);
elemTD.appendChild(elemButton);

Open in new window

Lee

ASKER

Hi,

I hadn't thought of that. I'll give it a shot tomorrow to see what I can come up with. Thanks. Keep the ideas coming :)

Cheers,

Lee

Joe Wu

This might also work

<input type='button'
onclick='move(20)'
value='<'>
 
<div id='h1'
style='position:absolute;top:150px;left:150px;'>
<input type="button" name="test"/></div>
 
<script type='text/javascript'>
 
var texttop = 150;
var h1 = document.getElementById('h1');
 
function move(amount) {
texttop += amount;
h1.style.top = texttop+'px';
}
 
</script>

Open in new window

Lee

ASKER

Hi,

I don't wish to place the control in a fixed place on the screen by pixel x,y, I need to be able to say "put it after this table"

Thanks,

Lee

ASKER CERTIFIED SOLUTION

Joe Wu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

kylealanhale

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Lee

ASKER

Hi,

Thanks folks. I am very busy at the moment and I will try them out and let you know. Looking at them both, they look like what I could be after. Just as a matter of interest, is there anything wrong with innerHTML? Why would I use removeChild and appendChild over innerHTML? Just curious.

Cheers,

Lee

Joe Wu

not sure actually Isavidge, that is for kylealanhale to answer. Personally i find innerHTML easy to use, and a lot of AJAX code use innerHTML anyway. Goodluck!

kylealanhale

It's a matter of scruple, really. innerHTML is a proprietary property; removeChild and appendChild are W3C standards. As a standards-activist, I'm appalled that the more correct way is the assisted solution! Ha.. I'm only half serious, though.