Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Quick in/out tote board

    It's been many years since I've done simple javascript and html. I was wondering if javascript would be the language of choice for this project.

    I would like a simple matrix with individuals on the left column, and locations on the top row. Clicking in any cell turns on a green dot/box/circle or whatever. Clicking on a green whatever makes it disappear. Even more handy would be to make each cell in a row mutually exclusive of the others; turn any cell on and the other cell turns off.

    If anybody has thoughts or advice, I would greatly appreciate it. This is intended to be a tool for our intranet for tracking the location of key people.

    Thankfully,

    Russ

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Code:
    <html>
    <head>
    <title>Who the heck is where?</title>
    <style type="text/css">
    td.here { background-color: green;     width: 60px; }
    td.not  { background-color: lightgrey; width: 60px; }
    </style>
    
    <script type="text/javascript">
    function tdClick( td )
    {
        var node = td.parentNode;
        while ( node.tagName.toUpperCase() != "TR" )
        {
            node = node.parentnode;
            if ( node == null ) { alert("oops?"); return; }
        }
        var tds = node.getElementsByTagName("td");
        for ( var t = 1; t < tds.length; ++t )
        {
            tds[t].className = "not";
        }
        td.className = "here";
    }
    
    function tdInit( )
    {
        var tds = document.getElementsByTagName("td");
        for ( var t = 0; t < tds.length; ++t )
        {
            if ( tds[t].className == "not" ) 
            {
                tds[t].onclick = function( ) { tdClick(this); }
            }
        }
    }
    
    </script>
    </head>
    <body onload="tdInit()">
    <table border="1" cellpadding="3">
    <tr>
        <td>&nbsp;</td>
        <td>Office</td>
        <td>Lunchroom</td>
        <td>Bathroom</td>
        <td>Vacation</td>
        <td>Field</td>
    </tr>
    <tr>
        <td>Adam Ant</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
    </tr>
    <tr>
        <td>Bob Banana</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
    </tr>
    <tr>
        <td>Chief Cheese</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
        <td class="not">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>
    BUT...

    But this would only work on *ONE* computer. Because JavaScript has no way of copying the information in the table to another computer.

    If you mean to make this chart available on many machines, you will need some kind of server-side coding to capture the changes made on one computer and "broadcast" those changes to the other computers.

    That's not as easy as it sounds, as the HTTP protocol is strictly a "pull" protocol: You can't ask the server to push new data out to all the browsers. Instead, each browser would need to ask the server, say once a minute (or whatever interval you decide on) what changes have been made and then update the display accordingly.

    *PROBABLY* you would want to do this using AJAX. And now you need to learn AJAX, including some server-side support for it (JSP or PHP or ASP, perhaps).

    But if you have a single signin/signout computer dedicated to this chart, the above will work.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Pedant,

    Thank you for the code. You are correct in that this must have some 'persistence'. My goal would be to have staff at as many as 15 different sites be able to access and change the status of certain key individuals. Basically, I'm trying to keep track of my traveling doctors.

    There are a number of pay-for-play products out there, but it seems a little overkill to add yet one more applet to everybody's toolbar. Not to mention one more invoice to cover.

    Russ

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    This would *NOT* be hard to create, at all. Maybe a one day project for somebody versed in AJAX and with the necessary server-side coding skills (i.e., ability to update a simple database table, etc.).

    But neither is it something that a person who *only* knows HTML and JavaScript could accomplish.

    Excepting that if you did it via AJAX it wouldn't be an "applet" nore would it be on a toolbar. It would simply be a web page and people could choose to dedicate a window to it on their own computer or not.

    If you *wanted* it to be on the toolbar, then it gets more complex. No longer a one day project. Though still no more than a few days.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •