[Pro] is this cute thing possible with FW?

Hey everyone,

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?

thanks for your input…

http://www.hoffkids.com/practice.html

cheers,

Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

forget this…

I was able to come up with another solution.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It doesn’t exactly slide, but there’s this:

http://scripty.walterdavisstudio.com/checkbox.html

Click to toggle. No JavaScript, all CSS.

Walter

On Jan 16, 2014, at 9:57 PM, Hoffkids wrote:

forget this…

I was able to come up with another solution.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

i like that. fully editable?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

wait,
i just realized that is on the site- so the viewer can move it.

I am needing to do it on my side before publish.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Walter

On Jan 16, 2014, at 10:22 PM, Hoffkids wrote:

i like that. fully editable?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

this is all for the visitor to the page to use?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s what I thought you were after. Something like this: http://dribbble.com/shots/1382086-Search-type-switch

Walter

On Jan 16, 2014, at 10:34 PM, Hoffkids wrote:

this is all for the visitor to the page to use?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options