Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ CSS Style Issues

Posted by: William Grimsley Jun 4 2017, 04:15 AM

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

Posted by: pandy Jun 4 2017, 04:55 AM

When you click a button or when the graph initially loads?

Anyway, I don't see that happening. What browser(s)?

Posted by: William Grimsley Jun 4 2017, 05:02 AM

When the graph loads, the style deletes.

Posted by: William Grimsley Jun 4 2017, 05:30 AM

Ok, fixed everything except the style deleting.

Posted by: William Grimsley Jun 4 2017, 06:43 AM

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.

Posted by: pandy Jun 4 2017, 07:35 AM

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?

Posted by: Christian J Jun 4 2017, 08:37 AM

QUOTE(William Grimsley @ Jun 4 2017, 11:15 AM)

I have http://newton-poppleford-weather.co.uk/trends.php web page and http://newton-poppleford-weather.co.uk/trends.php web page.

Both those links point to the same trends.php page.

Posted by: pandy Jun 4 2017, 08:55 AM

Ha ha! That explains things.
(I actually thought I had checked that. )

Posted by: William Grimsley Jun 4 2017, 05:05 PM

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.

Posted by: pandy Jun 4 2017, 05:23 PM

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.

CODE

#table_menu .picked {
border : #000000 solid 2px;
}

Posted by: pandy Jun 5 2017, 06:22 AM

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.

CODE

/* $("#dataTable tr:eq(0) th:eq(" + tcol + ")").addClass("highlight");
$("#dataTable tr:eq(" + trow + ") th:eq(0)").addClass("highlight");
$(this).addClass("box"); // was "highlight" - beteljuice */

And of course, also remove the hardcoded class from the first LI.

I would also work to just remove the style rule, but for some reason I think it feels better to get closer to the root of the problem.

Posted by: William Grimsley Jun 6 2017, 02:50 AM

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.

Posted by: William Grimsley Jun 8 2017, 04:03 AM

Any ideas? Cheers.

Posted by: William Grimsley Jun 9 2017, 12:44 PM

Bump.

Posted by: Christian J Jun 9 2017, 04:42 PM

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.

Posted by: Christian J Jun 10 2017, 07:33 AM

You could try changing each

CODE

onclick="changeGraph("temp");">

CODE

onclick="changeGraph("temp");
var picked=document.getElementsByClassName('picked');
picked[0].className=picked[0].className.replace(' picked','');
this.className+=' picked';">

on each button (you can of course move the above javascript to an external function somewhere to reduce code). The above should remove an existing "picked" CLASS and instead assign it to the clicked LI element.

If you want you can give e.g. the first LI element a default "picked" CLASS in the HTML:

CODE

<li class="button picked"

(note that "picked" must come after "button").

Posted by: William Grimsley Jun 10 2017, 10:46 AM

OMG, it works! You star, Christian! Now, how do I pay you?

However, this only works in line HTML, not via a JS file.

Posted by: Christian J Jun 10 2017, 11:32 AM

No it's for free.

Good that it works, even though it's a bit of a kludge.

Posted by: Christian J Jun 10 2017, 11:42 AM

QUOTE(William Grimsley @ Jun 10 2017, 05:46 PM)

However, this only works in line HTML, not via a JS file.

If you want to move it, you must reference the clicked element in some way, for example with a function like this:

CODE

function styleCurrentButton(clickedButton)
{
    var picked=document.getElementsByClassName('picked');
    picked[0].className=picked[0].className.replace(' picked','');
    clickedButton.className+=' picked';
}

and this in the HTML:

CODE

onclick="changeGraph('temp');styleCurrentButton(this);">

Posted by: William Grimsley Jun 10 2017, 11:53 AM

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.

Posted by: Christian J Jun 10 2017, 12:21 PM

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.

Posted by: William Grimsley Jun 10 2017, 12:43 PM

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!

Posted by: Christian J Jun 10 2017, 01:26 PM

Which code does not work?

Posted by: William Grimsley Jun 10 2017, 01:51 PM

If I change:

CODE

To:

CODE

function picked()
{
    var picked=document.getElementsByClassName('picked');
    picked[0].className=picked[0].className.replace(' picked','');
    clickedButton.className+=' picked';
}

Also, this:

CODE

onclick="changeGraph('temp'); styleCurrentButton(this);">

To:

CODE

onclick="changeGraph('temp'); picked(this);">

Then, it breaks. :/

Posted by: Christian J Jun 10 2017, 03:44 PM

You need the function argument as well (in this case clickedButton), it should look like this:

CODE

function picked(clickedButton)
{
    var picked=document.getElementsByClassName('picked');
    picked[0].className=picked[0].className.replace(' picked','');
    clickedButton.className+=' picked';
}

(basically the this keyword in the function call automatically becomes the clickedButton function argument).

Posted by: William Grimsley Jun 11 2017, 10:54 AM

Ah, I see! So, you always need clickedButton for this scenario?

Posted by: Christian J Jun 11 2017, 01:51 PM

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

Posted by: pandy Jun 12 2017, 06:32 AM

QUOTE(Christian J @ Jun 11 2017, 08:51 PM)

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

I don't get the example at Mozilla to work at all...

Posted by: Christian J Jun 12 2017, 07:09 AM

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.

Posted by: pandy Jun 12 2017, 07:28 AM

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.

Posted by: pandy Jun 12 2017, 08:22 AM

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.

Posted by: Christian J Jun 12 2017, 09:08 AM

QUOTE(pandy @ Jun 12 2017, 02:28 PM)

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.

As a sidenote, the onclick attribute in their TryIt Editor sends a parameter called event:

CODE

which is not used in the https://developer.mozilla.org/en-US/docs/Web/API/Event/target example. It seems that event parameter is necessary for inline events, but then you might as well use the this keyword...

https://quirksmode.org/js/events_access.html explains the two models:

QUOTE

if you define an event handler

CODE

element.onclick = doSomething;

the function doSomething() receives the event itself as an argument. Traditionally it is stored in the variable e — though you can use any name you like:

CODE

function doSomething(e) {
// e gives access to the event
}

...and further down:

QUOTE

In the inline registration model you have to pass the event to the function:

CODE

<pre onclick="doSomething(event)">

function doSomething(e) {
alert(e.type);
}

Posted by: pandy Jun 12 2017, 12:14 PM

Didn't know that event handlers as attributes were called inline. Ugly term. I thought you were referring to event handlers on inline elements.

Posted by: Christian J Jun 12 2017, 02:04 PM

Didn't know either until now. At least it's consistent with inline styles.

Posted by: pandy Jun 12 2017, 02:56 PM

It actually is. That term never felt odd, but this does. I claim ESL!