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

Groups > comp.lang.javascript > #19556 > unrolled thread

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

Back to article view | Back to comp.lang.javascript

Contents

  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

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

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 

[toc] | [next] | [standalone]

#19557

On 2013-05-01 20:54, Tony wrote:
> 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.
...
> So if the user changes the browser window the div must still correspond  to 
> the time axes and start at the correct  time.
...
> So I wonder how can I accomplish this with CSS ?
...
> Below is the java script code and HTML markup.

Looks familiar. I'm afraid I'm too busy to adjust the example, but I can
tell you what you need to do:

>     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);
>     }

In this function, you'll need to change the "left" and "width" styles to
use a percentage of the track.offsetWidth instead of a fixed number of
pixels.

The quick and lazy workaround is to simply demand the full width and
prevent the table from shrinking when the user resizes the window.
(A <div> with a fixed minimum width around the table should do it, I think.)

- stefan

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web