Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #19556

This example works fine if I don't resize the browser window ar

Show all headers | View raw

So as I said in the subject of this mail this example works as long as I 
don't change the size of the browser window.
If you copy this example you can see that three div are created after each 
other in a html row. You can also look at the code.

For example when the browser display the first time div1 might start at 
08:00 at end at 09:30 and if I change the size browser window this is not 
correct any longer.
So if the user changes the browser window the div must still correspond  to 
the time axes and start at the correct  time.
Here is an exampe the first div start at 08:00 acording to the time axes. So 
if the user change the size of the browser window the first div must adjust 
the size
so the start of the div is still 08:00.

So I wonder how can I accomplish this with CSS ?

  ------ -----------------------------------------------------------------------
Götaälvbron  |      07:00        |       08:00       |      09:00        |

  -----------------------------------------------------------------------------
                                                      |    Ö   | Eken|    C 
|

Below is the java script code and HTML markup.
******************************************
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>bridges</title>
    <style>
    #schedule {
        border-spacing: 0;
        border-collapse: collapse;
        margin: 20px;
    }
    #schedule td {
        border: 1px solid black;
        padding: 0;
        text-align: center;
    }
    #schedule .bridge {
        padding: 0 5px;
        text-align: left;
    }
    .hour {
        width: 200px;
    }
    .track {
        height: 100%;
        width: 100%;
        position: relative;
        background-color: #eee;
    }
    .track:after {
        content: ".";
        visibility: hidden;
    }
    .slot {
        height: 100%;
        top: 0;
        position: absolute;
        text-align: center;
    }
    .opening { background-color: #ff905d; }
    .opening:after { content: "ö"; }
    .passable { background-color: #adff9e; }
    .passable:after { content: "v"; }
    .closing { background-color: #ce9aff; }
    .closing:after { content: "c"; }
    </style>
    <script>

    // Just a very rough demo for Tony.
    // There is NO error handling or boundary checking!

    var FIRST_HOUR = 11,
        NUM_HOURS = 4;

    function addSlot (track, cls, minStart, minEnd) {
        var unit = track.offsetWidth / (NUM_HOURS * 60),
            slot = document.createElement("div");
        slot.className = "slot " + cls;
        slot.style.left = Math.round(unit * minStart) + "px";
        slot.style.width = Math.round(unit * (minEnd - minStart)) + "px";
        track.appendChild(slot);
    }

    function getMinutes (str) {
        var m = str.match(/^\d{4}-\d\d-\d\d (\d\d):(\d\d)$/),  // check me
            hour = +m[1],
            min = +m[2];
        return (hour - FIRST_HOUR) * 60 + min;
    }

    function test () {
        var ele = document.forms["params"].elements,
            minOpening = getMinutes(ele.opening.value),
            minPassable = getMinutes(ele.passable.value),
            minClosing = getMinutes(ele.closing.value),
            minEnd = getMinutes(ele.end.value),
            track = document.getElementById("test-track");
        addSlot(track, "opening", minOpening, minPassable);
        addSlot(track, "passable", minPassable, minClosing);
        addSlot(track, "closing", minClosing, minEnd);
    }

    function wipe () {
        document.getElementById("test-track").innerHTML = "";
    }

    </script>
</head>
<body>

<table id="schedule">
<tr>
    <td></td>
    <td class="hour">11:00</td>
    <td class="hour">12:00</td>
    <td class="hour">13:00</td>
    <td class="hour">14:00</td>
</tr>
<tr>
    <td class="bridge">Göta älv bron</td>
    <td colspan="4"><div class="track" id="test-track"></div></td>
</tr>
</table>

<form id="params">
    <table>
    <tr><td>opening:</td> <td><input name="opening"  value="2013-04-22 
11:30"></td></tr>
    <tr><td>passable:</td><td><input name="passable" value="2013-04-22 
11:40"></td></tr>
    <tr><td>closing:</td> <td><input name="closing"  value="2013-04-22 
12:00"></td></tr>
    <tr><td>closed:</td>  <td><input name="end"      value="2013-04-22 
12:10"></td></tr>
    </table>
</form>
<button onclick="test()">test()</button>
<button onclick="wipe()">clear</button>

</body>
</html>

//Tony 

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

This example works fine if I don't resize the browser window ar "Tony" <tony.johansson@inport.com> - 2013-05-01 20:54 +0200
  Re: This example works fine if I don't resize the browser window ar Stefan Weiss <krewecherl@gmail.com> - 2013-05-01 22:37 +0200

csiph-web