Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
this example works as long as I don't change the size of the browser
7 views
Skip to first unread message
tonyjoh...@gmail.com
May 1, 2013, 3:46:36 PM5/1/13
to
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
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
David Stone
May 1, 2013, 4:44:44 PM5/1/13
to
In article <b7aa6edc-422d-47ed...@googlegroups.com>,
if the user resizes the window, then use a fixed-width table and make
sure overflow is set to scroll?
Or calculate your "tracks" as a percentage of their container rather
than using pixel dimensions?
tonyjoh...@gmail.com 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.
> 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.
If you don't want to have to recalculate the size of all your "tracks"
> 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.
if the user resizes the window, then use a fixed-width table and make
sure overflow is set to scroll?
Or calculate your "tracks" as a percentage of their container rather
than using pixel dimensions?
Philip Herlihy
May 1, 2013, 6:36:40 PM5/1/13
to
In article <b7aa6edc-422d-47ed...@googlegroups.com>,
tonyjoh...@gmail.com says...
>
> -----------------------------------------------------------------------------
> | ￜ | Eken| C
> .opening:after { content: "ￜ"; }
> <td class="bridge">Gï¿œta ï¿œlv bron</td>
chewing through all this code without a link to a live version? There
may well be folk here bright enough just to visualise all this in the
time they can spare, but I'm not one of them!
--
Phil, London
tonyjoh...@gmail.com says...
>
> 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 |
> 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 ?
>
> ------ -----------------------------------------------------------------------
>
> -----------------------------------------------------------------------------
> | ￜ | Eken| C
> <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
Is it just me? How many members of this group are going to be happy
> </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
chewing through all this code without a link to a live version? There
may well be folk here bright enough just to visualise all this in the
time they can spare, but I'm not one of them!
--
Phil, London
Jeff North
May 1, 2013, 8:25:18 PM5/1/13
to
On Wed, 1 May 2013 12:46:36 -0700 (PDT), in
comp.infosystems.www.authoring.stylesheets tonyjoh...@gmail.com
It can't be done with CSS but it can be done with JavaScript. In fact
you have the functionality already on your page.
All you need to do is add:
<body onresize="recalc();">
and in the <script> area add:
function recalc() { wipe();test(); }
comp.infosystems.www.authoring.stylesheets tonyjoh...@gmail.com
<b7aa6edc-422d-47ed...@googlegroups.com> 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.
>| 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 ?
[snip]
>| 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 ?
It can't be done with CSS but it can be done with JavaScript. In fact
you have the functionality already on your page.
All you need to do is add:
<body onresize="recalc();">
and in the <script> area add:
function recalc() { wipe();test(); }
dorayme
May 1, 2013, 8:30:37 PM5/1/13
to
In article <MPG.2beba957f...@news.demon.co.uk>,
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <b7aa6edc-422d-47ed...@googlegroups.com>,
> tonyjoh...@gmail.com says...
> >
> > So as I said ...
> In article <b7aa6edc-422d-47ed...@googlegroups.com>,
> tonyjoh...@gmail.com says...
> >
> > <button onclick="test()">test()</button>
> > <button onclick="wipe()">clear</button>
> >
> > </body>
> > </html>
> >
> > //Tony
>
> Is it just me? How many members of this group are going to be happy
> chewing through all this code without a link to a live version? There
> may well be folk here bright enough just to visualise all this in the
> time they can spare, but I'm not one of them!
Perhaps turn it to your advantage, at bedtime... beats counting sheep.
> > <button onclick="wipe()">clear</button>
> >
> > </body>
> > </html>
> >
> > //Tony
>
> Is it just me? How many members of this group are going to be happy
> chewing through all this code without a link to a live version? There
> may well be folk here bright enough just to visualise all this in the
> time they can spare, but I'm not one of them!
--
dorayme
tonyjoh...@gmail.com
May 2, 2013, 2:30:23 AM5/2/13
to
That was a very nice solution to my problem.
//Tony
Ed Mullen
May 4, 2013, 8:29:23 PM5/4/13
to
Philip Herlihy wrote:
> In article <b7aa6edc-422d-47ed...@googlegroups.com>,
> tonyjoh...@gmail.com says...
>>
>> 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 |
> In article <b7aa6edc-422d-47ed...@googlegroups.com>,
> tonyjoh...@gmail.com says...
>>
>> 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 ?
>>
>> ------ -----------------------------------------------------------------------
>>
>> -----------------------------------------------------------------------------
>> | Ö | Eken| C
>> <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
>
> Is it just me?
You are not alone, Philip. I ignore posts like this.
>> </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
>
> Is it just me?
How many members of this group are going to be happy
> chewing through all this code without a link to a live version? There
> may well be folk here bright enough just to visualise all this in the
> time they can spare, but I'm not one of them!
>
--
http://edmullen.net/
Why is it that the guy who comes up behind you while you're waiting for
an elevator presses the already-lit button as though he has some magical
powers that you don't?
0 new messages