[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 953
  • Last Modified:

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
0
Lee Savidge
Asked:
Lee Savidge
  • 3
  • 3
  • 3
2 Solutions
 
kylealanhaleCommented:
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

0
 
Lee SavidgeAuthor Commented:
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
0
 
nizsmoDeveloperCommented:
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

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Lee SavidgeAuthor Commented:
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
0
 
nizsmoDeveloperCommented:
then something like this?
<script type="text/javascript">
function moveIT()
{
  var txtbox = document.getElementById('before').innerHTML;
  document.getElementById('before').innerHTML = "";
  document.getElementById('after').innerHTML = txtbox;
}
</script>
 
<span id="before"><input type="button" name="test"/></span>
// other stuff here
 
<span id="after"></span>

Open in new window

0
 
kylealanhaleCommented:
Here's my above code in a testing situation.  It works like a dream, and doesn't rely on the bitter innerHTML.
<head>
    <script type="text/javascript">
        var moveButton = function () {
            var elemButton = document.getElementById('buttonId');
            var elemTD = document.getElementById('cellId');
            elemButton.parentNode.removeChild(elemButton);
            elemTD.appendChild(elemButton);
            return false;
        }
    </script>
    <style>
        table td {
            border: medium solid;
            width: 300px;
            height: 50px;
        }
        td.target {
            border-color: blue;
        }
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td></td>
                <td class="target" id="cellId"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <form>
        <button onclick="javascript:moveButton()" id="buttonId">Move me!</button>
    </form>
</body>

Open in new window

0
 
Lee SavidgeAuthor Commented:
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
0
 
nizsmoDeveloperCommented:
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!
0
 
kylealanhaleCommented:
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.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now