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
Solved

Moving controls around on the screen

Posted on 2007-11-15
9
927 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
  • 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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 250 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 250 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
powershell script 9 63
Load data upon clicking a button 8 34
send email part1 9 27
Only allow one check box 17 25
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

856 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