Help - Search - Members - Calendar
Full Version: CSS Style Issues
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
William Grimsley
Hi there,

I have this web page and this 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
pandy
When you click a button or when the graph initially loads?

Anyway, I don't see that happening. What browser(s)?
William Grimsley
When the graph loads, the style deletes.
William Grimsley
Ok, fixed everything except the style deleting.
William Grimsley
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.
pandy
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?
Christian J
QUOTE(William Grimsley @ Jun 4 2017, 11:15 AM) *

I have this web page and this web page.

Both those links point to the same trends.php page. unsure.gif
pandy
Ha ha! That explains things. biggrin.gif
(I actually thought I had checked that. blush.gif )
William Grimsley
Sorry, this is the other page. Basically, when you click on one of the buttons on this page, the black border doesn't stay.
pandy
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;
}
pandy
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.
William Grimsley
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.
William Grimsley
Any ideas? Cheers.
William Grimsley
Bump.
Christian J
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.





Christian J
You could try changing each

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

to

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").
William Grimsley
OMG, it works! You star, Christian! Now, how do I pay you? wink.gif

However, this only works in line HTML, not via a JS file.
Christian J
No it's for free. tongue.gif

Good that it works, even though it's a bit of a kludge.
Christian J
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);">


William Grimsley
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.
Christian J
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.
William Grimsley
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!
Christian J
Which code does not work? unsure.gif
William Grimsley
If I change:

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


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. :/
Christian J
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).
William Grimsley
Ah, I see! So, you always need clickedButton for this scenario?
Christian J
No you can call clickedButton something else if you want (but the this keyword has special meaning).

As a sidenote, if you use the event.target property you don't need the this keyword, but event.target doesn't seem to work with inline event handlers (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...
pandy
QUOTE(Christian J @ Jun 11 2017, 08:51 PM) *

As a sidenote, if you use the event.target property you don't need the this keyword, but event.target doesn't seem to work with inline event handlers (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... sad.gif
Christian J
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.

pandy
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.
pandy
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.
Christian J
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
<body onclick="myFunction(event)">

which is not used in the https://developer.mozilla.org/en-US/docs/We...PI/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);
}
pandy
Didn't know that event handlers as attributes were called inline. Ugly term. I thought you were referring to event handlers on inline elements. blush.gif
Christian J
Didn't know either until now. At least it's consistent with inline styles.
pandy
It actually is. That term never felt odd, but this does. I claim ESL! ninja.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2017 Invision Power Services, Inc.