Is it possible to style a javascript hosted elsewhere on www.tidetimes.org

Question

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.

Answer 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.

Answer 2

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.

Answer 3

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>