Hi there,
I have http://newton-poppleford-weather.co.uk/trends.php web page and http://newton-poppleford-weather.co.uk/trends.php web page. I want to style the buttons on the 1st page like the ones on the 2nd page. There's already styling on there, but when the selected graph loads, the style gets deleted. Any ideas on how I can keep the style when the graph loads? Also, on the 2nd page, I want to style the buttons so that they're clickable anywhere, not just on the text.
Thanks!
William
When you click a button or when the graph initially loads?
Anyway, I don't see that happening. What browser(s)?
When the graph loads, the style deletes.
Ok, fixed everything except the style deleting.
My aim is to have the same behaviour on the trends page as on the data tables page. So, maximum temperature should have a green border, then once a button is clicked that should change back to black and then the new button should have a green border. Also, the border should stay when the graph has loaded.
So it's the button borders you are talking about? Both pages still look the same to me. When a button is hovered its border is green. When it's not its border is black. Again, what browser do you see the difference with?
Ha ha! That explains things.
(I actually thought I had checked that. )
Sorry, http://newton-poppleford-weather.co.uk/datatables.php is the other page. Basically, when you click on one of the buttons on http://newton-poppleford-weather.co.uk/trends.php page, the black border doesn't stay.
Some JavaScript somewhere gives the LI that contains the clicked link the class 'picked'. Initially the first LI has that class. The below does the rest.
To comment out the below section in the JS that's embedded at the end of the HTML seems to do the trick. If it breaks something else I don't know, but it doesn't seem so.
It occurs three times.
pandy, sorry I must've been unclear! The style needs to stay not delete and that's on the trends not the data tables page.
To try and make this clearer... I would like the exact same behaviour on the trends as on the data tables page e.g. Maximum Temperature with a black border, but then this should transfer to the selected button and stay after the graph has loaded.
Any ideas? Cheers.
Bump.
There are a too many scripts and stylesheets for me to untangle properly, but it seems the two pages work completely differently. In datatables.php the Ajax call in the function doesforme() inserts new HTML containing the CLASS "picked", while in trends.php another function changeGraph() is called (which in turn calls other functions), but none of the latter change the CLASS to "picked", AFAICS.
I don't know which is the best way to solve this, maybe you could add and remove "picked" classes in function changeGraph().
Ideally the two pages should be rewritten to work as similar as possible, but of course that's a lot of work.
You could try changing each
OMG, it works! You star, Christian! Now, how do I pay you?
However, this only works in line HTML, not via a JS file.
No it's for free.
Good that it works, even though it's a bit of a kludge.
Haha, it was a joke, but honestly I would, you've been a great help! Ok, any reason why it has to have this "styleCurrentButton(clickedButton)" instead of say just "picked()". Thanks.
No you can name it like you want, as long as it's not a reserved word, method name etc. Personally I like to use underscores in my function and variable names to avoid name collisions like that, such as foo_bar instead of fooBar.
Hmm, still broken. Getting this error: "Uncaught TypeError: Cannot read property 'className' of undefined
at picked (trends.js:3)
at HTMLLIElement.onclick (trends.php:31)"
The border disappears but doesn't get reapplied, unless I use your exact code! LOL!
Which code does not work?
If I change:
You need the function argument as well (in this case clickedButton), it should look like this:
Ah, I see! So, you always need clickedButton for this scenario?
No you can call clickedButton something else if you want (but the this keyword has special meaning).
As a sidenote, if you use the https://developer.mozilla.org/en-US/docs/Web/API/Event/target you don't need the this keyword, but event.target doesn't seem to work with https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_—_don't_use_these (i.e., events as HTML attributes) for some reason, so in that case you might have to detect the onclick events from the actual javascript instead. I thought I'd keep it simple by not changing all that...
The one with event.target? Works for me, but it seems to be buggy in all browsers except Opera12 and Firefox: when I click an LI both LIs are hidden, not just the one I clicked.
If I modify the script to use a hardcoded HTML list, it works correctly though. Also if add a border instead of changing visibility.
I tried adding content with innerHTML and I tried using a hardcoded list and removing the part of the script that creates the list.
The simpler example at https://www.w3schools.com/Jsref/event_target.asp works for me as is, but when I tried to replace the alert with something funnier it didn't work.
I'll try FF.
The w3schools example works in FF with for example visibility. The Mozilla one doesn't. Maybe I do something wrong.
Anyway, still early days for this, it seems.
Didn't know that event handlers as attributes were called inline. Ugly term. I thought you were referring to event handlers on inline elements.
Didn't know either until now. At least it's consistent with inline styles.
It actually is. That term never felt odd, but this does. I claim ESL!
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)