Solved

Moving controls around on the screen

Posted on 2007-11-15
9
919 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article will show, step by step, how to integrate R code into a R Sweave document
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 dynamically set the form action using jQuery.
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)

746 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now