I’m working on a micro-site that, for the most part, uses an html/js (jQuery | JSON)/css combo to render a series of slides. There’s a page where a user interaction is required. The user input is provided by a set of dials that allow the user to adjust the values and a formula calculates the right column’s value and adjusts both columns heights as the dials values change (see the attached GIF).
I’ve implemented a single dial page already but I have an issue with encapsulating the dial I made in a manner that would allow me to reuse it multiple times on a single page (right now I embed it in an iFrame – I pass to the iframe the callback function name and it calls it on ever value change)
Please, have a look at the attached files:
1) “[url removed, login to view]” : shows the expected result (single page multiple instances of a dial) that are easy to hook together to produce a runtime formula calculation.
2) “[url removed, login to view]” : contains a demo of the dial’s current state, it’s missing a +/- buttons that are supposed to be under the dragable circle so, that a value could be fine-adjusted – also note that I this example the component is wrapped into an iframe as having multiple instances of it in single html body won’t work per its current structure.
Please, start the text of your bid with the numeric sequence provided after the last paragraph of this description so, I know you are a real person who read the description text. Thank you!
Important: this component and its implementations should work on both iOS 6+ Safari & Android’s (2.6+) Browser – the example I’m providing renders ok on both platforms so, I hope it will give you a good starting point.
Thanks for reading – looking forward to your bids. Feel free to ask any questions I’ll make sure to respond promptly and as clearly as I can.
[numeric sequence] 2012-03-26-001