BBC weather site / greasemonkey problem

[SA]

I followed the advice here by LouCypher:

http://groups.google.com/group/greasemonkey-users/browse_thread/thread/f897578a5013b065?pli=1

Which worked perfectly but now the bbc has changed it's website and
the script stopped working. I logged and error saying that "div" was
invalid that I attributed to this line:

var div = document.getElementById("Forecast_main");

The problem being that there was no longer an element called
"Forecast_main". I dissected the webpage and found that it had been
changed to "forecast-data-table" so updated the script accordingly but
it still does not work (the script runs without error but the changes
are not made). I'm completely stuck could anyone offer a suggestion as
to why it isn't working?

// ==UserScript==
// @name nobble
// @namespace http://news.bbc.co.uk/weather
// @include http://*.bbc.co.uk/weather/*
// ==/UserScript==

var div = document.getElementById("forecast-data-table");
div.addEventListener("DOMNodeInserted", function() {
var textNodes = document.evaluate( "//text()", document, null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var searchRE = new RegExp('mb','g');// I know doesn't need regexp
for this
var replace = 'MB';
for (var i=0;i<textNodes.snapshotLength;i++) {
var node = textNodes.snapshotItem(i);
node.data = node.data.replace(searchRE, replace);
}

}, false);


Could anyone tell me how to write messages to a console for debugging?

Ta SA

[Klaus Johannes Rusch]

On 14.05.2012 11:22, SA wrote:
> The problem being that there was no longer an element called
> "Forecast_main". I dissected the webpage and found that it had been
> changed to "forecast-data-table" so updated the script accordingly but
> it still does not work (the script runs without error but the changes
> are not made).

What changes do you expect to see? That table is actually an invisible
table that's pushed out with CSS, presumably this is an accessible
version of the data but what visually renders on page is a different set
of elements:

<div id="forecast-data-table" class="off-screen">

.off-screen {
left: -90000px;
overflow: hidden;
position: absolute;
width: 1px;
}

--
Klaus Johannes Rusch
klaus...@atmedia.net
http://klausrusch.atmedia.net/

[SA]

> What changes do you expect to see? That table is actually an invisible
> table that's pushed out with CSS, presumably this is an accessible
> version of the data but what visually renders on page is a different set
> of elements:

Okay the honest answer is I haven't much of a clue as to what is going on in
GM... basically I want to selectively change bits which are visible. So, for
instance "mb" to "MB" which is stored within the invisible table. The data in
this table is rendered in the tabs and I was hoping that if I changed this
data it would render with the changes when the tabs were revealed.

Further examination indicates the data I want to change lies outside of this
div .

The problem I have now is the data I want to change isn't contained in a
conveniently named object - any idea how I change this?

[Klaus Johannes Rusch]

On 14.05.2012 17:56, SA wrote:
> Okay the honest answer is I haven't much of a clue as to what is going
> on in GM... basically I want to selectively change bits which are
> visible. So, for instance "mb" to "MB" which is stored within the
> invisible table. The data in this table is rendered in the tabs and I
> was hoping that if I changed this data it would render with the
> changes when the tabs were revealed. Further examination indicates the
> data I want to change lies outside of this div . The problem I have
> now is the data I want to change isn't contained in a conveniently
> named object - any idea how I change this?

Assuming you want to change these, you can select spans with a class of
"pressure", otherwise you could look for digits followed by "mb" in all
text content and replace that, as an another option ... nothing GM
specific here, just plain DOM manipulations. If your selectors get more
complex jQuery may be helpful, see
http://wiki.greasespot.net/Third-Party_Libraries#jQuery for details.

[SA]

> Assuming you want to change these, you can select spans with a class of
> "pressure", otherwise you could look for digits followed by "mb" in all
> text content and replace that, as an another option ... nothing GM
> specific here, just plain DOM manipulations. If your selectors get more
> complex jQuery may be helpful, see
> http://wiki.greasespot.net/Third-Party_Libraries#jQuery for details.

I don't understand getting the references by class - I'm not sure how to
handle the return from getElementsByClassName - this doesn't seem to be a
simple array of objects.

I also tried a global search and replace like this as a test:

var searchRE = new RegExp('mb','gi');
var replace = 'xx';

for (var i=0;i<textNodes.snapshotLength;i++) {
var node = textNodes.snapshotItem(i);
node.data = node.data.replace(searchRE, replace);
}

And it did not appear to do anything. One problem I have is I simply don't
know how to output to the error console for debugging.

[Klaus Johannes Rusch]

On 14.05.2012 18:09, SA wrote:
> I don't understand getting the references by class - I'm not sure how
> to handle the return from getElementsByClassName - this doesn't seem
> to be a simple array of objects.

It should:
https://developer.mozilla.org/en/DOM/document.getElementsByClassName