Help with coding a web page

[cpedw]

Honestly, it is vaguely boaty as it's to do with tides and and the sea.

I have an Excel spreadsheet which helps to generate this table https://www.fallsoflora.info/2018.htm showing the expected nature of flow through the Falls of Lora each day. The colour codes are as for ski runs - green, dull; through blue and red to black for very exciting. It's mainly targeted at kayakers but others (tourists, divers I believe) make use of it too.

Knowing nothing about html etc., I was relieved to find that Excel will export web pages and that's how I started on this. Then with Google's help, I was able to find how to freeze the column headings while the table is scrolled.

It would be helpful if when first opened, the page showed today's date at the top while ideally still keeping the year's data available by scrolling up/down. It takes a while at this time of year to get to today from 1st January. Can anyone help me to incorporate this feature in the page? Or point me to a website that will teach me how to do that?

I'd also like to be able to include the navigation links that appear on the top of other pages on the site, like this one has https://www.fallsoflora.info/times_and_dates_for_the_falls_of_lora.htm If possible, these will be in the frozen header, above the column headings.

I tried copying code for that but it doesn't work with my Excel generated code. As you may already have noticed, I am self-taught from Google and by experiment in webpage coding and the rest of the site was assembled by another novice using now-defunct web editing software.

Any help in plain English and avoiding long words will be very much appreciated.

Derek

 

[ShinyShoe]

The only way with what is there, might be to use some JavaScript to effectively scroll on opening. But... ...if you have to save the html from Excel regularly it won't have the JavaScript in it.

It may be better to use something to generate the html server side rather than excel...

I'm not 100% sure what *maths* you are doing to generate it. But almost certainly it can be reproduced in a server side language. Do you have the ability to host a PHP script?

 

[Mikedefieslife]

EDIT: Ignore me. I misread what the OP was asking.

Hmm... you can't dynamically show information in pure html. You'd need to use php, javascript or similar. That is probably more complicated than you want.

Are you manually publishing this excel information to the page each day or only yearly? If daily you could simply write the date at the top of the excel file.

Really you need a database and nice back or front end system that will allow you to simply upload an exported csv file from excel. That's a fair amount of work.

The menu is easy enough, but since you're not using a content management system, it's going to involve some careful cutting and pasting in notepad or similar. An iframe could be a quick and dirty solution.

If no-one else comes up with a better solution I can at least help you make an iframe (tomorrow).

 

[Lon nan Gruagach]

what you want is Anchors, no, not boaty ones, HTML ones.
They let you place markers within a page that can be the target of a link.
so:
<a href="#target">Target</a>
will show a link "Target" and clicking it will cause the page to scroll to wherever you have put
<a name="target"></a>

Then the tricksy part is to get the server to redirect "https://www.fallsoflora.info/2018.htm" to "https://www.fallsoflora.info/2018.htm#[today's date]"


But, as ShinyShoe says you really ought to be heading towards dumping excel and using php on the server and javascript on the web page. Quite a big leap from where you are now, but nice Mr Google will help there too.

 

[moomba]

Honestly, it is vaguely boaty as it's to do with tides and and the sea.

I have an Excel spreadsheet which helps to generate this table https://www.fallsoflora.info/2018.htm showing the expected nature of flow through the Falls of Lora each day. The colour codes are as for ski runs - green, dull; through blue and red to black for very exciting. It's mainly targeted at kayakers but others (tourists, divers I believe) make use of it too.

Knowing nothing about html etc., I was relieved to find that Excel will export web pages and that's how I started on this. Then with Google's help, I was able to find how to freeze the column headings while the table is scrolled.

It would be helpful if when first opened, the page showed today's date at the top while ideally still keeping the year's data available by scrolling up/down. It takes a while at this time of year to get to today from 1st January. Can anyone help me to incorporate this feature in the page? Or point me to a website that will teach me how to do that?

I'd also like to be able to include the navigation links that appear on the top of other pages on the site, like this one has https://www.fallsoflora.info/times_and_dates_for_the_falls_of_lora.htm If possible, these will be in the frozen header, above the column headings.

I tried copying code for that but it doesn't work with my Excel generated code. As you may already have noticed, I am self-taught from Google and by experiment in webpage coding and the rest of the site was assembled by another novice using now-defunct web editing software.

Any help in plain English and avoiding long words will be very much appreciated.

Derek

I am not sure of a code fix for the scrolling to your date , but you could leave a note telling people to press end on their computer this will take them to the end of the scroll and they can work backwards, or forwards to the date
But have SWMBO on the case now and we are debating it now and has a friend that does this work

 

[cpedw]

The only way with what is there, might be to use some JavaScript to effectively scroll on opening. But... ...if you have to save the html from Excel regularly it won't have the JavaScript in it.

It may be better to use something to generate the html server side rather than excel...

I'm not 100% sure what *maths* you are doing to generate it. But almost certainly it can be reproduced in a server side language. Do you have the ability to host a PHP script?

The table uses wxtide tide data along with empirical rules and offsets to figure each day's times and excitement. I update the table annually with a year's results.

After excel has done its bit, I edit the html with a fix that I cobbled from google information to fix the column headings.

I don't know if I can host a PHP script which I infer means I can't.

Derek

 

[prv]

The table uses wxtide tide data along with empirical rules and offsets to figure each day's times and excitement. I update the table annually with a year's results.

After excel has done its bit, I edit the html with a fix that I cobbled from google information to fix the column headings.

Probably the simplest thing in that case would be to add the "scroll to current date" functionality - which would be a few lines of Javascript - along with the "fix" that you manually make to the column headers.

No doubt at all that ShineyShoe's suggestion of reimplementing the whole thing server-side is more elegant, but it depends how much you're interested in learning how to build new things and how much is invested in the existing spreadsheet - it sounds like you and your colleagues have been tuning the thing over some years?

Pete

 

[cpedw]

Probably the simplest thing in that case would be to add the "scroll to current date" functionality - which would be a few lines of Javascript - along with the "fix" that you manually make to the column headers.

That sounds more hopeful. The problem is that I can't find out how to do that.

No doubt at all that ShineyShoe's suggestion of reimplementing the whole thing server-side is more elegant, but it depends how much you're interested in learning how to build new things and how much is invested in the existing spreadsheet - it sounds like you and your colleagues have been tuning the thing over some years?

Pete

The whole site has been running for over 10 years. The scrollable tides page has been part of it for about 3 years. In all that time, we haven't learned much and, as we both have our bus passes, I don't suppose we're going to anytime soon!

 

[prv]

That sounds more hopeful. The problem is that I can't find out how to do that.

Ok, here's something quick-and-dirty that should do it, at least with your current HTML file:

<script>
function scroll() {
  var d = new Date();
  var today = ("0" + d.getDate()).slice(-2) + "/" + ("0"+(d.getMonth()+1)).slice(-2) + "/" + d.getFullYear();
  var dateCells = document.getElementsByClassName("xl6332668");
  for (var i = 0; i < dateCells.length; i++) {
    var cell = dateCells[i];
    if (cell.children[0].textContent == today) {
      cell.scrollIntoView();
      break;
    }
  }
}
window.onload=scroll;
</script>

Insert that just below the <body> tag, and it should scroll the page to today's date when the page is opened.

It's not the most robust thing in the world - it depends on Excel continuing to use the same CSS class ("xl6332668") for the date cells, which I don't know if it will do, but you could change that in the getElementsByClassName line if needs be. If you're only generating it once a year then I assume a bit of manual tweaking like this is acceptable. It also assumes that the html structure of those cells stays the same, with one <font> element inside the <td>. And it assumes that you'll always use the current date format of dd/mm/yyyy.

Pete (not a Web developer )

 

[cpedw]

Pete may not be a web developer but (assuming that works - not checked yet!) you are a miracle worker. You have assessed the situation exactly: a bit of annual manual tweaking is quite acceptable and I even think I follow that stuff about CSS class and following, though I certainly don't understand it. I will definitely be altering nothing while it continues to function.

Many thanks.

Derek

 

[ShinyShoe]

Argh,,, Editing messages on phone doesn't work!

Anyway - Great work Pete - thats the approach I was thinking of but I was on my phone so couldn't easily see the html source.

Derek - if you wanted a PHP solution... I'm sure there are people here who could help. But there is nothing wrong with the approach till now. A PHP solution might allow for instance a year of history and year ahead at all times rather than the current 6 weeks ahead and 10.5months of history which will soon become 1 month of history and 11 months of looking ahead...

You may well have PHP on your server. Your hosts certainly support it.

if you uploaded a file called php.php with this in it:

<?php
phpinfo();
?>

And then look at it with your browser you'll either get some tables of data (you have php) or something that makes it obvious you don't!

Happy to help if you were interested

 

[dolabriform]

Ok, here's something quick-and-dirty that should do it, at least with your current HTML file:

<script>
function scroll() {
  var d = new Date();
  var today = ("0" + d.getDate()).slice(-2) + "/" + ("0"+(d.getMonth()+1)).slice(-2) + "/" + d.getFullYear();
  var dateCells = document.getElementsByClassName("xl6332668");
  for (var i = 0; i < dateCells.length; i++) {
    var cell = dateCells[i];
    if (cell.children[0].textContent == today) {
      cell.scrollIntoView();
      break;
    }
  }
}
window.onload=scroll;
</script>

Insert that just below the <body> tag, and it should scroll the page to today's date when the page is opened.

It's not the most robust thing in the world - it depends on Excel continuing to use the same CSS class ("xl6332668") for the date cells, which I don't know if it will do, but you could change that in the getElementsByClassName line if needs be. If you're only generating it once a year then I assume a bit of manual tweaking like this is acceptable. It also assumes that the html structure of those cells stays the same, with one <font> element inside the <td>. And it assumes that you'll always use the current date format of dd/mm/yyyy.

Pete (not a Web developer )

That is a brilliant solution

Before I got to your post I was thinking of Id'ing each row with the date, but your solution is much more simple and so much more elegant.

 

[cpedw]

Many thanks to all for the offers and comments. I have now tested Pete's code and it works almost perfectly. The slight flaw is that it puts the target date right at the top of the screen, which is under the fixed header, so it's about 2.5 line too far up.

I wonder if it's a big challenge to move it so the target gets to the top of the table space, or just persuade it to move 3 or 4 line lower down? I have experimented with what seemed to me like sensible adjustments but I've only achieved either no change or stopping the date scroll altogether,

I don't want to appear like a disgruntled customer; far from it. But I'd appreciate help from you tech wizards fixing this last bit of it.

Derek

 

[prv]

I wonder if it's a big challenge to move it so the target gets to the top of the table space, or just persuade it to move 3 or 4 line lower down?

I haven't tried this, but a further bit of quick hackery might be to add

window.scrollBy(0, -200);

just above the last } in the code above. This should scroll down a further 200 pixels from what it does currently. Obviously adjust the number to suit, and take away the - if it turns out I've misread the slightly ambiguous documentation and it goes the wrong way

(I'm aware that doing anything like this in terms of fixed numbers of pixels is questionable practice in Web development, but we're starting with Excel HTML generation so... )

Pete

 

[cpedw]

You're a star! -50 gets it spot on in Chrome, Bing and Firefox. Mystifyingly, Internet Explorer doesn't respond at all, always starting at 1 Jan but that's obsolete I believe.

Derek

 

[dansaskip]

I know others have mentioned php and for now that might be a step too far for you just to get the date shown. However I do recommend you take a look at Wordpress (which uses php and a database). I am a user myself and Wordpress sites are easy to set up and very flexible in what you can do with them and there is so much help out there for it. For example to code with correct plugin to show date is [current_date format=’F d, Y’] will show the date like this: May 07, 2017
I am sure you could give you site a lovely new look and it would look even better.
As an ex canoeist who used to paddle a lot in the Swellies, Menai Straits I must say Falls of flora look even more exciting or should that be terrifying!

 

[cpedw]

There is a plan to have a semi-professional revamp of the site at "mates' rates" by a web expert kayaker. But as it will be a spare-time low cost affair, it could be a long time coming. I wanted to implement this stop-gap but I didn't want to get too involved. Fortunately, thanks to helpful forumites, I achieved my objective without learning any more about website design. Sorted!

I will pass on people's comments about how it might be better achieved in the new site.

Dererk