Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #34402 > unrolled thread

Buttons glowing on being selected

Back to article view | Back to comp.lang.javascript

Contents

  Buttons glowing on being selected bit-naughty@hotmail.com - 2017-12-15 04:25 -0800
    Re: Buttons glowing on being selected "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-12-15 18:13 +0100
    Re: Buttons glowing on being selected Philip Herlihy <thiswillbounceback@you.com> - 2017-12-18 12:27 +0000
    Re: Buttons glowing on being selected Ben Bacarisse <ben.usenet@bsb.me.uk> - 2017-12-18 17:12 +0000
      Re: Buttons glowing on being selected bit-naughty@hotmail.com - 2017-12-19 12:03 -0800
        Re: Buttons glowing on being selected Ben Bacarisse <ben.usenet@bsb.me.uk> - 2017-12-19 23:35 +0000
          Re: Buttons glowing on being selected Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-12-20 01:29 +0100
    Re: Buttons glowing on being selected bit-naughty@hotmail.com - 2017-12-19 11:52 -0800
      Re: Buttons glowing on being selected John G Harris <niam@jghnorth.org.uk.invalid> - 2017-12-19 20:14 +0000
        Re: Buttons glowing on being selected "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-12-19 21:17 +0100
      Re: Buttons glowing on being selected Julio Di Egidio <julio@diegidio.name> - 2017-12-21 11:10 -0800

#34402 — Buttons glowing on being selected

Suppose I have 2 buttons on my website - "apples" and "onions". When someone clicks either, I want it to "glow" - ie, say change colour to orange or something,.... ie. it is *selected*. And then the user will click a Submit button, so that the script on the server side knows which one was selected - apples or onions. How do I code this entire thing, please? I have seen this on websites, where, not just the colour of the buttons changed, the selected button even got a little "tick mark" on it - I'm very curious to know how this was done.


Thanks.

[toc] | [next] | [standalone]

#34403

bit-naughty@hotmail.com wrote on 15 Dec 2017 in comp.lang.javascript:

> Suppose I have 2 buttons on my website - "apples" and "onions". When
> someone clicks either, I want it to "glow" - ie, say change colour to
> orange or something,.... ie. it is *selected*. And then the user will
> click a Submit button, so that the script on the server side knows which
> one was selected - apples or onions. How do I code this entire thing,
> please? I have seen this on websites, where, not just the colour of the
> buttons changed, the selected button even got a little "tick mark" on it

Most of us have just looked at how it was done on a website we saw,
by looking ate the veuw-source:, or looked for an article about that,
or just slept on it.

Please don't ask us to do your learning curve

> - I'm very curious to know how this was done. 

by killing the cat.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#34404

In article <e5c8e291-3051-4e66-a51c-83c853241976@googlegroups.com>, bit-
naughty@hotmail.com says...
> 
> Suppose I have 2 buttons on my website - "apples" and "onions". When someone clicks either, I want it to "glow" - ie, say change colour to orange or something,.... ie. it is *selected*. And then the user will click a Submit button, so that the script on the server side knows which one was selected - apples or onions. How do I code this entire thing, please? I have seen this on websites, where, not just the colour of the buttons changed, the selected button even got a 
little "tick mark" on it - I'm very curious to know how this was done.
> 
> 
> Thanks.

It's always disappointing when "experts" are too busy being judgemental 
to throw down the rope ladder.

I'm far from an expert in JavaScript, but I can perhaps point you 
(vaguely) in the right direction.

You'd start up by coding an HTML Form, containing Form Elements.  See:
https://www.w3schools.com/html/html_forms.asp

Form Elements can be "styled" using CSS, which can set colour, size, 
border, background-image, etc.
https://www.w3schools.com/css/css3_buttons.asp
.. and even animated:
https://www.w3schools.com/howto/howto_css_animate_buttons.asp 

If your button is a link, then the 
:link
:visited:
:hover
:active
...pseudo classes can show the "state" of the link (e.g. whether you've 
already clicked the link. See:
https://www.w3schools.com/css/css_pseudo_classes.asp
https://www.w3schools.com/css/css_link.asp 

CSS can also detect whether a form-element is "checked".  I've used this 
to hide specified elements under control of a checkbox in this page:
http://walthamsoft.com/foef/walks.htm

There's a lot of stuff you can do with CSS, if you can get your head 
around it:
https://www.sanwebe.com/2014/02/css3-buttons-examples-with-effects-
animations (remove any whitespace in the link!)

If you introduce JavaScript, you have many, many more options.  I'm a 
fan of the Lynda.com video training site, which has tons of stuff, 
including sampler videos (see below) and a free trial period if you sign 
up and then cancel.

https://www.lynda.com/JavaScript-tutorials/Radio-buttons-
checkboxes/461841/518537-4.html
https://www.lynda.com/JavaScript-tutorials/CSS-JavaScript/81266/87556-
4.html
(remove whitespace in links).

Then, of course, you'll need to master the server-side code (e.g. PHP or 
ASP.net) which is going to handle the data you send to the server using 
your form.  And that's a whole other thing...

I'm sure the grumpy professors will pick holes in all of this, and, for 
sure, they know more than I do.  But don't be too hard on them.  They 
were born knowing all this stuff, so have no concept of how hard it is 
for the rest of us to learn it.

-- 

Phil, London

[toc] | [prev] | [next] | [standalone]

#34406

bit-naughty@hotmail.com writes:

> Suppose I have 2 buttons on my website - "apples" and "onions". When
> someone clicks either, I want it to "glow" - ie, say change colour to
> orange or something,.... ie. it is *selected*. And then the user will
> click a Submit button, so that the script on the server side knows
> which one was selected - apples or onions. How do I code this entire
> thing, please? I have seen this on websites, where, not just the
> colour of the buttons changed, the selected button even got a little
> "tick mark" on it - I'm very curious to know how this was done.

You don't need client-side scripting for this.  Here is a very simple
example using CSS:

  http://bsb.me.uk/testing/button.html

and another where you can see it in action with a submit button:

  http://bsb.me.uk/testing/button.php

The idea is that you style the label of a checkbox.  I've chosen to hide
the checkbox, but you don't have to do that.

You can view the PHP source at http://bsb.me.uk/testing/button-php.txt

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#34408

On Monday, December 18, 2017 at 10:42:17 PM UTC+5:30, Ben Bacarisse wrote:
 
> You don't need client-side scripting for this.  Here is a very simple
> example using CSS:
> 
>   http://bsb.me.uk/testing/button.html
> 
> and another where you can see it in action with a submit button:
> 
>   http://bsb.me.uk/testing/button.php
> 
> The idea is that you style the label of a checkbox.  I've chosen to hide
> the checkbox, but you don't have to do that.
> 
> You can view the PHP source at http://bsb.me.uk/testing/button-php.txt
> 
> -- 
> Ben.

Ben, for the 1st URL - what's the "label input { display: none; }" line for?
..and what's the "+" sign doing in the "input:checked + span"....?

That DOES make it clearer though - thanx for your help! :)

[toc] | [prev] | [next] | [standalone]

#34411

bit-naughty@hotmail.com writes:

> On Monday, December 18, 2017 at 10:42:17 PM UTC+5:30, Ben Bacarisse wrote:
>  
>> You don't need client-side scripting for this.  Here is a very simple
>> example using CSS:
>> 
>>   http://bsb.me.uk/testing/button.html
>> 
>> and another where you can see it in action with a submit button:
>> 
>>   http://bsb.me.uk/testing/button.php
>> 
>> The idea is that you style the label of a checkbox.  I've chosen to hide
>> the checkbox, but you don't have to do that.
>> 
>> You can view the PHP source at http://bsb.me.uk/testing/button-php.txt
>> 
>
> Ben, for the 1st URL - what's the "label input { display: none; }"
> line for?

It hides the input checkbox.

> ..and what's the "+" sign doing in the "input:checked + span"....

https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

it allows me to target the span that follows a checked checkbox.

This is now very far off topic!  If you have more questions you might
consider asking in a CCS group.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#34412

[X-Post & F’up2 comp.infosystems.www.authoring.stylesheets]

Ben Bacarisse wrote:

> bit-naughty@hotmail.com writes:
>> Ben Bacarisse wrote:
>>> You don't need client-side scripting for this.  Here is a very simple
>>> example using CSS:
>>> 
>>>   http://bsb.me.uk/testing/button.html
>>> 
>>> and another where you can see it in action with a submit button:
>>> 
>>>   http://bsb.me.uk/testing/button.php
>>> 
>>> The idea is that you style the label of a checkbox.  I've chosen to 
>>> hide the checkbox, but you don't have to do that.
>>> 
>>> You can view the PHP source at http://bsb.me.uk/testing/button-php.txt
>>
>> Ben, for the 1st URL - what's the "label input { display: none; }"
>> line for?
> 
> It hides the input checkbox.

You should use

  visibility: hidden; /* or opacity: 0 */
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;

instead; otherwise the checkbox may not be selectable, and accessibility 
keys may not work, as “display: none” tells the UA to not render the 
element.  For some mobile browsers we had to use other tricks, too, but
I do not remember exactly what they were (only “position” comes to mind).

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#34407

Thanks guys, I'll take a look at all that :) Evertjan has been REPEATEDLY told to get OUT of here, he just.....doesn't!

[toc] | [prev] | [next] | [standalone]

#34409

On Tue, 19 Dec 2017 11:52:19 -0800 (PST), bit-naughty@hotmail.com
wrote:
  <snip>
>Evertjan has been REPEATEDLY told to get OUT of here, he just.....doesn't!

Don't be silly. He's harmless.

  John

[toc] | [prev] | [next] | [standalone]

#34410

John G Harris <niam@jghnorth.org.uk.invalid> wrote on 19 Dec 2017 in 
comp.lang.javascript:

> On Tue, 19 Dec 2017 11:52:19 -0800 (PST), bit-naughty@hotmail.com
> wrote:
>   <snip>
>>Evertjan has been REPEATEDLY told to get OUT of here, he just.....doesn't!
> 
> Don't be silly. He's harmless.

Thank you.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#34413

On Tuesday, December 19, 2017 at 8:52:29 PM UTC+1, bit-n...@hotmail.com wrote:
> Thanks guys, I'll take a look at all that :) Evertjan has been REPEATEDLY
> told to get OUT of here, he just.....doesn't!

STFU, not only your question does deserve a RTFM, it is not even a question
on topic for c.l.j.  And this is in fact usual with your questions.

And the fact that some people are helping by googling trivial stuff up for
you just means that you are not the only one to simply ignore around here.

*Plonk*

Julio

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web