I use an online program that lets me make quizzes, etc.
When I am grading my students, the interface/webpage where I grade them has a “slider” that allows me to slide it right or left if I am done grading.
Left is Green YES and right is Red No.
You can see this in the link below of a picture I took. Even though it is 2 pictures, it is just 1 slider.
What I would like to know is if I can do something like on my site. I am simply sliding to indicate to the viewer if they paid their bill. There is a part where people have to pay their bills, and I’d like to have it default on red NO and I would slide it left to GREEN YES when paid.
If not, the lame option I thought of was both images next to each other and I would publish 1, then shut off and publish the other?
View source. It’s just a graphic with the two states in it, set as the background to an empty label tag. That label tag is styled to float over the top of the checkbox it applies to, and as you know, when you click a label, the form element that’s attached to it will toggle or focus (depending on what type of element it is).
Then the CSS #item1 input:checked + label is the trick. Read through that right to left: “A label, directly after a checked input, inside #item1”. Very very specific. And all it does is shift the background to the left by 200px.
The animation is a CSS3 transform. If your browser (cough, IE less than 10, cough) doesn’t understand that, then the effect will simply “snap” from one position to the other.
can a thumbnail when clicked show both a scripty fader box of info and also another graphic in a different place on the page (possibly with another action)?
I just realized when they click Dec, I need them to see the table of info (which is working great) and a graphic if they paid it or not.
If you’re going to be mixing this with the ScriptyFader, I would do something using the Protaculous 2 Action rather than any of the built-in stuff. The FX Actions write their code inline – within the related HTML elements. This isn’t a slag on that technique, even though it’s a little old-school, but rather an acknowledgement of the fact that inline trumps head which trumps external script, just the way that CSS works. Closer = more powerful. You could easily end up wiping out the whole SF effect by doubling up using the Rollover and Target Show/Hide on top of it. Please make a cut-down example page (no personal data!) and post it somewhere. Include the element that is supposed to appear when December is visible, and mark it with text so I know which it is. Then post a link, and I’ll see if there’s a simple way to do this.
Walter
On Jan 16, 2014, at 10:54 PM, Hoffkids wrote:
Walt,
can a thumbnail when clicked show both a scripty fader box of info and also another graphic in a different place on the page (possibly with another action)?
I just realized when they click Dec, I need them to see the table of info (which is working great) and a graphic if they paid it or not.