Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Moving controls around on the screen

Posted on 2007-11-15
9
Medium Priority
?
944 Views
Last Modified: 2010-07-27
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
Comment
Question by:Lee Savidge
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
9 Comments
 
LVL 3

Expert Comment

by:kylealanhale
ID: 20291167
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
 
LVL 25

Author Comment

by:Lee Savidge
ID: 20291698
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20291823
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Author Comment

by:Lee Savidge
ID: 20291920
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
 
LVL 21

Accepted Solution

by:
nizsmo earned 1000 total points
ID: 20291969
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
 
LVL 3

Assisted Solution

by:kylealanhale
kylealanhale earned 1000 total points
ID: 20292744
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
 
LVL 25

Author Comment

by:Lee Savidge
ID: 20322257
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20322687
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
 
LVL 3

Expert Comment

by:kylealanhale
ID: 20402747
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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question