The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> CSS Style Issues
William Grimsley
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 4 2017, 04:55 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 4 2017, 07:35 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 4 2017, 08:37 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 4 2017, 08:55 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Ha ha! That explains things. biggrin.gif
(I actually thought I had checked that. blush.gif )
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post 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



Sorry, this is the other page. Basically, when you click on one of the buttons on this page, the black border doesn't stay.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 4 2017, 05:23 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 5 2017, 06:22 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 9 2017, 04:42 PM
Post #15


.
********

Group: WDG Moderators
Posts: 9,630
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.





User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 10 2017, 07:33 AM
Post #16


.
********

Group: WDG Moderators
Posts: 9,630
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").
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post 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? wink.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 10 2017, 11:32 AM
Post #18


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



No it's for free. tongue.gif

Good that it works, even though it's a bit of a kludge.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 10 2017, 11:42 AM
Post #19


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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);">


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:22 AM