Web and WebWorks Development

[interfaSys]

No, you'll still get credited , but by using an official open source license, you make it easier to include in other projects because that license will probably be on the list of licenses approved by the legal department.

[tneil]

---

TheMarco wrote:

I'm really not an expert in all these different licenses. Maybe someone can explain to me in layman's terms what the difference is?

Is asking to get credited 'too restrictive' ?!

---

I think you're meeting up with Eduardo soon... He is a fantastic resource to ask about all things open source

[TheMarco]

Yep, meeting him in a little over an hour. I'll bring this up!

Cheers,

Marco

[dougneiner]

@interfaSys -- I actually had used an image in the screenshot you showed. But when you asked, I felt embarrassed as a front end developer, and set off to solve it for Webkit. I am 90% sure Webkit does not support elliptical gradients, so I had to get a little creative. But by combining the radial gradient with webkit-transform, I was able to simulate the shadows pretty accurately:

Here is part of the code. You can view a static demo of the CSS (Using Chrome, Safari or your Webkit) here: http://jsfiddle.net/dougneiner/Cftsh/show  (If you want to play with it: http://jsfiddle.net/dougneiner/Cftsh/  )

.scroller:before {
	content: "";
	display: block;
	position: absolute;
	height: 300px;
	left: 8%;
	right: 8%;
	top: 1px;
	background-image: -webkit-gradient( radial, 50% 50%, 300, 50% 10%, 50, from(rgba(0,0,0,0.0)), to(rgba(0,0,0,0.5)) );
	background-size: 600px 600px;
	background-position: 0 -300px;
	background-repeat: no-repeat;
	-webkit-transform:  translateY(-145px) scale(1.0, 0.03);
}

[interfaSys]

Nice one Doug!
I think it's an interesting effect for when you just want to show that there is more content without having to add shadows everywhere.

If the element is moving, you may want to use translate3D to get it HW accelerated (not sure there will be that much of an impact though).

[dougneiner]

Thanks! The actual implementation just uses WebWork's built in overflow: auto for single finger scrolling. Its all handled by the system. I simply listen for where it is in the scroll, and show or hide the shadows accordingly. They don't actually move at all. I'll try to get this up soon so you can see what I mean.

@Marco -- Sorry for hijacking your thread. I'll start a new one for my project when I release it, but would love to include your UI controls (with credit!) if you decide to release them under a open source license. I hope your chat with Eduardo goes well.

[TheMarco]

dougneiner very cool! I like how you solved the shadow gradient problem. I'd like to use it in my select widget because that one has to be scrollable as well in case there's a large amount of list items.

Would you mind sharing your code with me? We can probably make good use of eachother's stuff.

[dougneiner]

Hey Marco!

I wouldn't mind at all. I will try to clean it up and post it to Github over the weekend. 

Cheers,

Doug

[TheMarco]

Selects are mostly working!

http://www.i-marco.nl/stuff/pbui/

TODO still / known issues

- They don't auto-close yet when you click somewhere outside the select when it's opened DONE!

- They don't have the scroll thingy yet when there's a ton of options

 - No 'dropdown on top rather than bottom' functionality yet

What DOES work:

- The selects work (doh)

- They get created from a plain HTML select element

- They update the state of the (hidden) original HTML select element

- They contain zero images

- They look virtually pixel perfect

The JS for this element is still a trainwreck. Very much a work in progress but I figured I'd show it to you all.

Updated on github as well!

[greenback]

I will start learning Actionscript 3 over the weekend so I can dive into working with AIR SDK.
Did you pick a distribution license for this code?