The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
Reply to this topicStart new topic
Replies
Christian J
post Jun 12 2017, 07:09 AM
Post #2


.
********

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



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 12 2017, 07:28 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 12 2017, 09:08 AM
Post #4


.
********

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



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);
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 12 2017, 12:14 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 12 2017, 02:04 PM
Post #6


.
********

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



Didn't know either until now. At least it's consistent with inline styles.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 12 2017, 02:56 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



It actually is. That term never felt odd, but this does. I claim ESL! ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
William Grimsley   CSS Style Issues   Jun 4 2017, 04:15 AM
pandy   When you click a button or when the graph initiall...   Jun 4 2017, 04:55 AM
William Grimsley   When the graph loads, the style deletes.   Jun 4 2017, 05:02 AM
William Grimsley   Ok, fixed everything except the style deleting.   Jun 4 2017, 05:30 AM
William Grimsley   My aim is to have the same behaviour on the trends...   Jun 4 2017, 06:43 AM
pandy   So it's the button borders you are talking abo...   Jun 4 2017, 07:35 AM
Christian J   I have this web page and this web page. Both th...   Jun 4 2017, 08:37 AM
pandy   Ha ha! That explains things. :D (I actually t...   Jun 4 2017, 08:55 AM
pandy   Some JavaScript somewhere gives the LI that contai...   Jun 4 2017, 05:23 PM
pandy   To comment out the below section in the JS that...   Jun 5 2017, 06:22 AM
William Grimsley   Sorry, this is the other page. Basically, when you...   Jun 4 2017, 05:05 PM
William Grimsley   pandy, sorry I must've been unclear! The s...   Jun 6 2017, 02:50 AM
Christian J   There are a too many scripts and stylesheets for m...   Jun 9 2017, 04:42 PM
William Grimsley   Any ideas? Cheers.   Jun 8 2017, 04:03 AM
William Grimsley   Bump.   Jun 9 2017, 12:44 PM
Christian J   You could try changing each onclick="changeGr...   Jun 10 2017, 07:33 AM
William Grimsley   OMG, it works! You star, Christian! Now, h...   Jun 10 2017, 10:46 AM
Christian J   However, this only works in line HTML, not via a ...   Jun 10 2017, 11:42 AM
Christian J   No it's for free. :P Good that it works, ev...   Jun 10 2017, 11:32 AM
William Grimsley   Haha, it was a joke, but honestly I would, you...   Jun 10 2017, 11:53 AM
Christian J   No you can name it like you want, as long as it...   Jun 10 2017, 12:21 PM
William Grimsley   Hmm, still broken. Getting this error: "Uncau...   Jun 10 2017, 12:43 PM
Christian J   Which code does not work? :unsure:   Jun 10 2017, 01:26 PM
William Grimsley   If I change: function styleCurrentButton(clic...   Jun 10 2017, 01:51 PM
Christian J   You need the function argument as well (in this ca...   Jun 10 2017, 03:44 PM
William Grimsley   Ah, I see! So, you always need clickedButton f...   Jun 11 2017, 10:54 AM
Christian J   No you can call clickedButton something else if yo...   Jun 11 2017, 01:51 PM
pandy   As a sidenote, if you use the event.target proper...   Jun 12 2017, 06:32 AM
Christian J   The one with event.target? Works for me, but it se...   Jun 12 2017, 07:09 AM
pandy   I tried adding content with innerHTML and I tried ...   Jun 12 2017, 07:28 AM
pandy   The w3schools example works in FF with for example...   Jun 12 2017, 08:22 AM
Christian J   The simpler example at [url=https://www.w3schools...   Jun 12 2017, 09:08 AM
pandy   Didn't know that event handlers as attributes ...   Jun 12 2017, 12:14 PM
Christian J   Didn't know either until now. At least it...   Jun 12 2017, 02:04 PM
pandy   It actually is. That term never felt odd, but this...   Jun 12 2017, 02:56 PM


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: 12th December 2017 - 04:51 PM