CSS Style Issues |
CSS Style Issues |
William Grimsley |
Jun 4 2017, 04:15 AM
Post
#1
|
Novice Group: Members Posts: 26 Joined: 30-May 17 From: Newton Poppleford, Devon, UK Member No.: 26,424 |
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 This post has been edited by William Grimsley: Jun 4 2017, 04:21 AM |
pandy |
Jun 4 2017, 04:55 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
When you click a button or when the graph initially loads?
Anyway, I don't see that happening. What browser(s)? |
William Grimsley |
Jun 4 2017, 05:02 AM
Post
#3
|
Novice Group: Members Posts: 26 Joined: 30-May 17 From: Newton Poppleford, Devon, UK Member No.: 26,424 |
When the graph loads, the style deletes.
|
William Grimsley |
Jun 4 2017, 05:30 AM
Post
#4
|
Novice Group: Members Posts: 26 Joined: 30-May 17 From: Newton Poppleford, Devon, UK Member No.: 26,424 |
Ok, fixed everything except the style deleting.
This post has been edited by William Grimsley: Jun 4 2017, 06:15 AM |
William Grimsley |
Jun 4 2017, 06:43 AM
Post
#5
|
Novice Group: Members Posts: 26 Joined: 30-May 17 From: Newton Poppleford, Devon, UK Member No.: 26,424 |
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 |
Jun 4 2017, 07:35 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Jun 4 2017, 08:37 AM
Post
#7
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Jun 4 2017, 08:55 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Ha ha! That explains things.
(I actually thought I had checked that. ) |
William Grimsley |
Jun 4 2017, 05:05 PM
Post
#9
|
Novice Group: Members Posts: 26 Joined: 30-May 17 From: Newton Poppleford, Devon, UK Member No.: 26,424 |
|
pandy |
Jun 4 2017, 05:23 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Jun 5 2017, 06:22 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Jun 6 2017, 02:50 AM
Post
#12
|
Novice Group: Members Posts: 26 Joined: 30-May 17 From: Newton Poppleford, Devon, UK Member No.: 26,424 |
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. This post has been edited by William Grimsley: Jun 6 2017, 03:08 AM |
William Grimsley |
Jun 8 2017, 04:03 AM
Post
#13
|
Novice Group: Members Posts: 26 Joined: 30-May 17 From: Newton Poppleford, Devon, UK Member No.: 26,424 |
Any ideas? Cheers.
|
William Grimsley |
Jun 9 2017, 12:44 PM
Post
#14
|
Novice Group: Members Posts: 26 Joined: 30-May 17 From: Newton Poppleford, Devon, UK Member No.: 26,424 |
Bump.
|
Christian J |
Jun 9 2017, 04:42 PM
Post
#15
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
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 |
Jun 10 2017, 07:33 AM
Post
#16
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
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 |
Jun 10 2017, 10:46 AM
Post
#17
|
Novice Group: Members Posts: 26 Joined: 30-May 17 From: Newton Poppleford, Devon, UK Member No.: 26,424 |
OMG, it works! You star, Christian! Now, how do I pay you?
However, this only works in line HTML, not via a JS file. This post has been edited by William Grimsley: Jun 10 2017, 11:29 AM |
Christian J |
Jun 10 2017, 11:32 AM
Post
#18
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
No it's for free.
Good that it works, even though it's a bit of a kludge. |
Christian J |
Jun 10 2017, 11:42 AM
Post
#19
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
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 |
Jun 10 2017, 11:53 AM
Post
#20
|
Novice Group: Members Posts: 26 Joined: 30-May 17 From: Newton Poppleford, Devon, UK Member No.: 26,424 |
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.
|
Lo-Fi Version | Time is now: 19th April 2024 - 06:36 AM |