Web coding assistance requested

pdeaves · 16 Nov 2019

Those of you familiar with railwaycodes.org.uk will know that in the top right corner there is a Network SouthEast clock. This is a Flash thing not created by me (created and supplied free by Adam Dorman). I understand that Flash is no longer supported and the original creator now concentrates on other things.

Is someone here able to convert the clock to a suitable format, please (or create a new one)? Would it be a quick-and-simple conversion? Is it an unreasonable request?

I have absolutely no idea what to do. My coding knowledge is limited to that used for the HTML (and a little CSS) used to create the data pages and really want something similar in the otherwise-empty space!

Thank you in advance.

RailUK Forums

yorkie · 16 Nov 2019

pdeaves said:
Those of you familiar with railwaycodes.org.uk will know that in the top right corner there is a Network SouthEast clock....

Many won't as it's not best practice for Flash elements to show automatically.

pdeaves said:
... understand that Flash is no longer supported ...

Technically Flash is being supported for another year but it's demise was announced over two years ago, and it had become increasingly out of favour many years before that. Its demise was effectively sealed in April 2010 (see Thoughts on Flash).

I'd say that any website creator should have had no expectation that Flash content would be visible to most visitors for several years now (and never would it have been visible to all).

pdeaves said:
Is it an unreasonable request?

As it's a non-commercial site, making a request for someone to volunteer to do some coding for it is not an unreasonable request.

tony_mac · 17 Nov 2019

try this for a starter...
https://www.w3schools.com/code/tryit.asp?filename=G01QQXKRWP42

pdeaves · 17 Nov 2019

yorkie said:
Many won't as it's not best practice for Flash elements to show automatically.

yorkie said:
I'd say that any website creator should have had no expectation that Flash content would be visible to most visitors for several years now (and never would it have been visible to all).

Well, I'm more behind than I thought! For those who haven't seen the clock, that's what the odd box in the top right corner is supposed to be!

yorkie said:
As it's a non-commercial site, making a request for someone to volunteer to do some coding for it is not an unreasonable request.

Thanks.

pdeaves · 17 Nov 2019

tony_mac said:
try this for a starter...
https://www.w3schools.com/code/tryit.asp?filename=G01QQXKRWP42

Looks good, thank you. Just one thing; when I view it the hours/minutes are in a rounded font, not the squared (segments) that the seconds are in. How do I change that, please?

sefyllian · 18 Nov 2019

Looks like the font-style needs to be specified – try:

https://www.w3schools.com/code/tryit.asp?filename=G039W1ZEYWWB

pdeaves · 18 Nov 2019

sefyllian said:
Looks like the font-style needs to be specified – try:

https://www.w3schools.com/code/tryit.asp?filename=G039W1ZEYWWB

Thanks. I'm getting something like what I want now!

Playing around with the code I've adjusted the colours and sizes a bit but have some alignment issues that I cannot solve. What I have so far is at https://www.w3schools.com/code/tryit.asp?filename=G03WMWILLFB2.

Where I am stuck is:

trying to get the same space above and below the yellow digits (they sat too high and should be centred) I played around with the padding until it looked about right. However, the cost appears to be losing part of the top red border;
the colons are too bold, hence putting the <small> bits around them but it's still not right (and is probably a clumsy way to solve the issue!);
the colons should be centred vertically - I tried vertical-align:middle; and margin-bottom: 10px; neither of which moved them up;
the seconds are slightly below the minutes - adding bottom margin appears not to move them up;
I have no idea how to make the characters slightly italicised. Presumably 'i' line should sort that out but it doesn't appear to do so, so far.

Any thoughts how to get the little niggles to do what I want, please?

takno · 19 Nov 2019

pdeaves said:
Thanks. I'm getting something like what I want now!

Playing around with the code I've adjusted the colours and sizes a bit but have some alignment issues that I cannot solve. What I have so far is at https://www.w3schools.com/code/tryit.asp?filename=G03WMWILLFB2.

Where I am stuck is:

trying to get the same space above and below the yellow digits (they sat too high and should be centred) I played around with the padding until it looked about right. However, the cost appears to be losing part of the top red border;

the colons are too bold, hence putting the <small> bits around them but it's still not right (and is probably a clumsy way to solve the issue!);

the colons should be centred vertically - I tried vertical-align:middle; and margin-bottom: 10px; neither of which moved them up;

the seconds are slightly below the minutes - adding bottom margin appears not to move them up;

I have no idea how to make the characters slightly italicised. Presumably 'i' line should sort that out but it doesn't appear to do so, so far.

Any thoughts how to get the little niggles to do what I want, please?

Try https://www.w3schools.com/code/tryit.asp?filename=G041Y7HYPSJW

does most of it, but can't do the italics - I assume you need to switch the font out for the italic-face version but I can't figure out how to switch it offhand

sefyllian · 19 Nov 2019

Ideally you’d find a font face that matched what you want, but you could cheat by simply skewing the clockface… (alter the ‘transform’ line to change the angle). This won’t work in very old browsers, but wouldn’t worry too much about them.

https://www.w3schools.com/code/tryit.asp?filename=G04GOOXVRG8I

(Also maybe should be a dot instead of the second colon?)

pdeaves · 19 Nov 2019

sefyllian said:
Ideally you’d find a font face that matched what you want, but you could cheat by simply skewing the clockface… (alter the ‘transform’ line to change the angle). This won’t work in very old browsers, but wouldn’t worry too much about them.

https://www.w3schools.com/code/tryit.asp?filename=G04GOOXVRG8I

(Also maybe should be a dot instead of the second colon?)

Thanks. Using elements of your and takno's work I have something that looks roughly like I want. Now I 'only' need to fathom out how to translate it into a web page full of other things. If I get stuck I will report back...

pdeaves · 19 Nov 2019

Well, guess what, I'm stuck!

http://www.railwaycodes.org.uk/indexTEST.shtml shows the clock neatly at the top but I cannot get it fully to the right or without excess menu bar space below.

If you look at the coding you will see that I have the clock in as a separate <object>, and put height="43". Without a 'height' command at all the blank menu bar space was massive (it worked out about 150); at height="42" or less a scroll bar appears on the far right to scroll the clock. The ideal height should be 35. I suspect the excess below is because I put Margin-top: -8px; to get the red border to touch the top of the window.

Any thoughts, please? We are nearly there!

sefyllian · 19 Nov 2019

You don’t need to include it from a separate file (like the Flash was), you can include the code directly in your site templates/pages.

(Using curly brackets here instead of angled so the code shows up)

The section from {link … } to … {/style} goes just before your site’s {/head} tag.

The {script} to {/script} goes just before your {/body} tag. (Also add a line with startTime(); on its own as the last line of the script, then you won’t need the onload on the body.)

Then put the {div id="clock} … {/div} where you want the clock (without the object tag).

Then you probably want to add float:right; to the #clock section of the style block. And add margin-right:… etc as appropriate.

pdeaves · 19 Nov 2019

sefyllian said:
You don’t need to include it from a separate file (like the Flash was), you can include the code directly in your site templates/pages.

(Using curly brackets here instead of angled so the code shows up)

The section from {link … } to … {/style} goes just before your site’s {/head} tag.

The {script} to {/script} goes just before your {/body} tag. (Also add a line with startTime(); on its own as the last line of the script, then you won’t need the onload on the body.)

Then put the {div id="clock} … {/div} where you want the clock (without the object tag).

Then you probably want to add float:right; to the #clock section of the style block. And add margin-right:… etc as appropriate.

A-ha, float:right does exactly what I want, thanks.

I made it an 'object' so that I don't have to copy/paste into every file but can just add to the menu bar 'module', which is <!--#include virtual="... (so only needing one change and not around 4,000!). Conscious that there are some right and many wrong ways of doing something, is the separate 'object' acceptable coding or technically wrong?

sefyllian · 20 Nov 2019

It’s not wrong as such, it just introduces an unnecessary overhead as the browser has to make a second request in the background to fetch the clock, rather than it being part of the page itself. So, not the recommended approach if designing something from scratch, but acceptable as a practical method of retrofitting to a static site, I’d say. Though you probably have another #include in the {head} section which you could use to insert the link, script and style tags if you wanted. However, if it works and you’re happy with how it looks then it’s fine, the performance difference will be negligible really.

Usually you’d use an {iframe} tag to include a different html page rather than {object}, if you want to be more ‘correct’, but it won’t make much practical difference in your case.

pdeaves · 20 Nov 2019

Thanks all for your assistance. I have something that appears to work on Android, Safari for Mac and Chrome for Mac. Hopefully it works for everyone else, too!

swt_passenger · 22 Nov 2019

Can confirm it looks great on an iPad.

Web coding assistance requested

pdeaves

Established Member

RailUK Forums

yorkie

Forum Staff

tony_mac

Established Member

pdeaves

Established Member

pdeaves

Established Member

sefyllian

Member

pdeaves

Established Member

takno

Established Member

sefyllian

Member

pdeaves

Established Member

pdeaves

Established Member

sefyllian

Member

pdeaves

Established Member

sefyllian

Member

pdeaves

Established Member

swt_passenger

Veteran Member