Small example/tutorial for those who want it...

[jason....@gmail.com]

I am creating a small internal tool for some data, and wanted a slick way to choose dates, so I decided to use Sly as a date-picker.

Here is my original proof-of-concept. Granted, this is before any code cleanup or optimization. So it looks a little sloppy (I know this...). But, it may be usable by some of those who want to see how Sly can be used for various things.

http://jsfiddle.net/NA665/

I am by no means a full-time JavaScript programmer, so this could be heavily optimized. In fact, I'd love to see the Sly developer(s) take the example and streamline it, showing how you could use JQuery to simplify some of the code in the example. I'm betting they could do a better job of it, and provide a good use-case on how to use some of the internal power of Sly that isn't easily gleaned from the documentation.

Good luck.

[Sly.js]

Nice :) Here is my simplification/streamlining attempt: http://jsfiddle.net/geLZJ/

I wanted to make it a comfy 'new Picker(options)' constructor, but I've already spent an hour on this :) Have to do some work now.

Also, I think the days should rather be laid down in weeks underneath each other, not as a slider. It's more user friendly that way.

Another thing: The main user-friendliness of doing years & months with Sly is when you know that you can scroll/swipe. Mobile users will probably try to swipe, as that is kinda intuitive, but desktop users might not try to scroll. I think they'd just click on side year/month until they'd get to their choice and than curse the developer of this annoying date picker.

The solution might be to add moving arrows so they can at least navigate that way, or make the picker vertical as opposed to horizontal, so the idea of scrolling might be more obvious. Dunno.

[jason....@gmail.com]

This is a good example. I like the CSS styling you did on it. I will probably steal some of what you did there.

My example gets put into a little sidebar menu, so it fits nicely in the area intended. But narrowing the days down to 7-day periods is a nice touch. And since my stuff is internal, I don't have to think about mobile usage. But, good on you for remembering to code for that situation.

What will be helpful to me (and others) is to see how you instantiated the Sly objects. That seems to be a common request on your forum. And the use of JQuery to grab the internal objects is also something that is very nice to see. The context of all of that, when combined with your Sly configuration is all very handy.

The 'selected' function is a nice touch as well.

Thanks for the hard work.

[Sly.js]

To know what internal stuff there are, just read the properties documentation: https://github.com/darsain/sly/wiki/Properties

Knowing that it would be just a few line changes bugged be, so here is the vertical implementation too :) http://jsfiddle.net/VP4T3/

[jason....@gmail.com]

Oh man. That looks fantastic. I think that it's even more intuitive than the horizontal approach. Thanks for that.

I know the issue with myself, and from the looks of others on the forum, is just learning how those properties work within a codebase. An API is all well and good, but without a few bonafide examples that showcase some of the intricacies, it makes one get lost in the weeds.

It's why I think these examples will be helpful, because they are a beginning-to-end example of how to create Sly objects and manipulate them. To figure out how to use Sly, I went to your "Examples" page and looked at the JavaScript and HTML for those pages. But even how you created those examples is much different than the code we are using here.

For those who aren't full-time JavaScript programmers (I primarily live in the C/C++, Bash, TCL, Python, and database world), these real-life examples can get us up to speed quickly.

Again, I appreciate the work.

[fai...@gmail.com]

Hello!

How can I made the elements in 3D?
On your website you have this and they turn in the correct position.

Thank you!

[Sly.js]

The 3D effect is just a blink blink that has nothing to do with Sly. It is pure CSS 3D transforms with selectors relative to .active class.

[fai...@gmail.com]

Hi!

Ah, ok ... so I have to handle all displayed items to transform in the correct position.

Guess your Example is your closed source? Or will and can you post this?
For a beginner it is more easy to change as to start from zero.

Thank you for your fast response!

[Sly.js]

You can always read source, but the site is github pages, so it is also in the gh-pages branch. Here is the file:

https://github.com/darsain/sly/blob/gh-pages/css/main.css

You are looking for /* Header example */

The .no-ie.csstransforms3d selectors are just feature detect classes by modernizr.

Here it is isolated with comments: http://pastebin.com/FUnBJXhV

[fai...@gmail.com]

Thats nice.

Thank you very much!