Solved

Moving controls around on the screen

Posted on 2007-11-15
9
928 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSV file copy field 1 to field 2 2 36
javascript form - error when hitting enter 3 27
Cannot exit IF statement in PowerShell 4 18
Boolean 13 19
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to count occurrences of each item in an array.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

763 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