How do we save the after effect of click on a CSS button

HTML & CSS
1

Hello,

We have an animated Radio button, and we want to maintain the clicked (animated) state after the user clicks on the radio to set their state.

To be exact: we enable Live chat between members and people visiting their Web site, and we have a Radio button that is animated in its state, so that when they click on “I am not available for call” the radio slides to indicate this new state for them. And vis versa.

So my question is how do we save/set the CSS class :after value?
Further FYI: after user clicks the Radio to indicate what state they want to be, this state is transmitted to server via AJAX and set in DB via Php.

FYI: below is the related CSS:

.onoffswitch {
    position: relative; width: 200px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 40px; padding: 0; line-height: 40px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "Available for Chat";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "Not Available";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 11px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 156px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

Thanks,

2

F.Y.I. - You somehow appear to have forgotten to include the related HTML. :rolleyes:

coothead

1 Like
3

At a guess as we don’t have html I would say something like this:


.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner:before {rules here.....}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner:after {rules here.....}
4

Coot,

You need to be logged in via your Anoox social networking account and then you can see it here:

There is tons of related Php AJAX code to pull this out and put it in fake mode by itself.

Signing up for Anoox account is of course free.

Thanks,

5

Paul,

I am not sure at all what you mean by that!

So of course we can set the values of the related CSS code either via Php if done server side and then loaded OR we can set it via JavaScript. 1st, Which one of these 2 methods is your code working with and 2nd where is the variable code to do or JS call to affect?

Thanks

6

I must have misunderstood the question as I thought you were asking how to style a radio button when it is checked. You don’t need js for that you style the checked state as required.

Obviously saving the state to the back end is a programming issue and beyond the scope of html/css.

7

If members need to log in to see relevant code to assist you with your issue, then I suggest you set up a test account we can use, and post the log-in details here, or make it available by PM on request. Many members will, quite rightly, be reluctant to sign up for an account simply to help resolve an issue.

4 Likes
8

TechnoB,

Yes, I was hoping someone could provide the answer to this question based on all the CSS that I provided above in the body of the question. So my question is rather simple but of course not either, and again it is: HOW do we have a CSS in its after state rather than the before state? which is its default state as someone loads the page.
So basically once someone has clicked on the Radio (animated) button, how do we then either in CSS or via JS set their selected after State which would be:

.onoffswitch-inner:after {
    content: "Not Available";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}

If no one still cannot answer it, then I will set up a test page for this.

Thanks,

9

It was answered

If it’s in a POST form, it will be sent in the $_POST array, a server-side language (eg. PHP) can then use that value in the response.

For JavaScript, AFAIK it would need to be sent as a GET pair and sent back in the response as a GET pair so that JavaScript could use it.

Though JavaScript can work, IMHO the better and more usual way is server-side processing.

4 Likes
10

After much fussing with this CSS based animation we decided not to spend any more time on this and instead go with JS based animation which then of course means we have all knowledge of the states.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.