Home/ Questions/Q 9214069
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T01:53:38+00:00

I’m modifying an html file, and I need a hand with it. It the

  • 0

I’m modifying an html file, and I need a hand with it. It the head there is a bunch of javascript which creates some buttons, and all the buttons get labelled id=”#content”.

Then in the body, it simply lays out all the buttons in a column with <div id="content" align:"center"></div>

I want to be able to move the buttons around independently, ie put them in a table. How can I do this?

the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" />
        <title>Direct Current GUI</title>
        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript">
        webiopi().ready(function() {
                var content, button;
                content = $("#content");

                // create a "FORWARDS" labeled button for GPIO 7
                button = webiopi().createGPIOButton(7, "FORWARDS");
                content.append(button); // append button to content div

                // create a "REVERSE" labeled button for GPIO 8
                button = webiopi().createGPIOButton(8, "REVERSE");
                content.append(button); // append button to content div                                      
        });

        </script>

</head>
<body>
        <table>
                <tbody>
                        <tr><td id="content"></td></tr>

                </tbody>
        </table>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can place the buttons wherever you like, the lines to change are noted below:

        webiopi().ready(function() {
            var button;

            // create a "FORWARDS" labeled button for GPIO 7
            button = webiopi().createGPIOButton(7, "FORWARDS");
            $('#select-an-element-here').append(button); // append button to content div

            // create a "REVERSE" labeled button for GPIO 8
            button = webiopi().createGPIOButton(8, "REVERSE");
            $('#select-an-element-here').append(button); // append button to content div                                      
    });

    The $('#select-an-element-here') bits can target any element on the page that you like.

    For example:

    <p id="example1"></p>
<div id="example2"></div>

    You can put one button in each of these using:

        webiopi().ready(function() {
            var button;

            // create a "FORWARDS" labeled button for GPIO 7
            button = webiopi().createGPIOButton(7, "FORWARDS");
            $('#example1').append(button);

            // create a "REVERSE" labeled button for GPIO 8
            button = webiopi().createGPIOButton(8, "REVERSE");
            $('#example2').append(button);                                      
    });
    • 0