0

I need to display tide times on my website, however the only service to offer them in the UK in any decent form is www.tidetimes.org.

They offer a widget which runs a pretty standard Javascript (hosted on their site) to generate the tide times on your own site using document.write but I need to change the style. How would I achieve this?

Here's the link to the actual widget script and I'm trying to set it up for Bovisand Pier:

http://www.tidetimes.org.uk/widgets

And the actual javascript file: http://www.tidetimes.org.uk/bovisand-pier-tide-times.js

I downloaded, edited and hosted the file locally, but I presume tidetimes.org edit the js file daily for the new times.

Pero P.
  • 25,813
  • 9
  • 61
  • 85
user1721451
  • 247
  • 6
  • 15
  • Have you tried cufon.js? – maximus Oct 04 '12 at 22:05
  • Hi, I haven't tried cufon.js, but I'd also need to remove the border and background gradient. Do you know if that's possible? – user1721451 Oct 04 '12 at 22:07
  • Hi Maximus, thanks for the hand. The trouble is the file changes daily according to new tide times. Whilst I can save the file and host it myself, it would update each day. Please please please tell me I'm wrong and stupid - I'd love a solution :-) – user1721451 Oct 04 '12 at 22:08
  • They have an RSS feed, would consuming that not be a more sensible option? http://www.tidetimes.org.uk/bovisand-pier-tide-times.rss – Pero P. Oct 04 '12 at 22:09
  • 1
    just a quick note that it's usually against the terms of service to modify any widget offered by a third party. – jbabey Oct 04 '12 at 22:10
  • Funny you should mention the RSS feed - I have indeed played, but the format it pulls through in I've found very difficult to get looking like I want it. – user1721451 Oct 04 '12 at 22:13
  • THanks jbabey - I'm guessing that means I'll have to go the RSS route then. Anybody got ideas on how to separate the lines of the feed? – user1721451 Oct 04 '12 at 22:14
  • And I'm sorry for being so 'amateur' at this. I've not built any websites for around 15 years and have just started getting to grips with things again. I'm trying to make the feed nice and simple along the lines of the twitter feed. Here's the test site running: www.bovicam.com/test/indexworking.html – user1721451 Oct 04 '12 at 22:16

3 Answers3

1

Consume their RSS feed (http://www.tidetimes.org.uk/bovisand-pier-tide-times.rss) with something like the Google Feed API instead. It will be a more maintainable, long term solution.

Pero P.
  • 25,813
  • 9
  • 61
  • 85
0

You'd have to loop through and clear out the styles manually. In jquery:

$('#containerForWidget tr, #containerForWidget td').attr('style', '');

That gets all tr and td elements in your container and removes the inline styling.

saml
  • 6,702
  • 1
  • 34
  • 30
  • Thanks for that saml - looks like I may be brushing up on my javascript! – user1721451 Oct 04 '12 at 22:11
  • 2
    You might want to make note that this uses JQuery. I know a lot of people just assume that using the library is standard but it could *really* frustrate a noob trying to figure out how to make this work. – Sean McSomething Oct 04 '12 at 22:26
0

Create a simple javascript function(old style but working) like below:

 function changeStyle(){
    var divElements = document.getElementsByTagName("div");
    for (var i = 0; i < divElements.length; i++) {
        var divElement = divElements[0];
        //change the style
        divElement.setAttribute("style", "color: red;");
    }
 }

Call this function on HTML page onload event.

Alternatively, add this code(anonymous block) in section or down in the page after the link of the tide javascript file..

  <script language="javascript">
    var divElements = document.getElementsByTagName("div");
    for (var i = 0; i < divElements.length; i++) {
        var divElement = divElements[0];
        //change the style
        divElement.setAttribute("style", "color: red;");
    }
  </script>
Yogendra Singh
  • 33,927
  • 6
  • 63
  • 73