How do I create an interface like Popcorn Maker using HTML5 & JavaScript ?

Hi All,

I am after creating an interface very much similar to Popcorn Maker using HTML5 & JavaScript. The problem is that I have no idea where to start or where to look for. Could you guys guide me to the right path ?

Thanks and Regards,
Kevin Reynolds

Popcorn Maker - Interface
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

I would say you should download the source and all the supporting file (saving the page should manage that), and then start working through the code to see what you have left to work out on the server side.  

Or get creative and do your own design instead of just trying to do what has already been done.  As it is a Mozilla product, I suspect you can probably get the source for the server side PHP through MDN.

????,  dentsplynz, , that web page for "mozilla popcorn maker" is a complex advanced interactive drag and drop, slide to modify interface, , ,  too allow users to enhance, remix , add events, and share Web Video. There are so many different  "sections" and interactive "parts and pieces" , each requiring special javascript interactive setups, I do not know what you might be asking for? ? ?
If someone wants to find and get a web page organization and operations, they look at the page source code, and then look at the CSS ,and javascript files that are used in that page, and try and get some info about what is used in the page and how the parts and pieces fit together.

What about this page "popcorn maker" makes you say - "creating an interface very much similar to Popcorn Maker ", there may be interactive  sections that are very very advanced, because the video is NOT a simple thing to deal with. Can you give a starting point for us to offer our view on how to do it, a single feature that you want to do?
dentsplynzAuthor Commented:

Thanks for the comments. Yes, you guys are right, Mozilla popcorn maker is an advanced drag and drop app. I'm sorry if I haven't made myself clear.

The one thing that I am really after is the timeline features of the popcorn maker:

1. Where you could add new layers
2. Add objects to the layer (say for example, a text element)
3. By dragging the object on the layer you will be able to set the Start point and the End point.

Is it possible to do these by using HTML5 & jQuery ? Have you guys come across with any sort of tutorials or code snippets ? If so could you please share ?

Thanks, Kev
As to "Is it possible to do these by using HTML5 & jQuery ?", the answer is Yes. But to get there, is a matter of how much "custom" design you require, that is different than the standard options for the "plugins" you may use.

There is an amazing, and for most developers , overwhelming, amount Jquery "PlugIns" that are now available. And more are showing up every week.
The "layers" can be accomplished by just stacking several <div> on top of each other, as absolute positioned elements, with increasing z-index numbers. Although, there are many "plugins" that do a layered presentation, they generally do not call themselves any name using "layers". . .

There are many, many different "drag and drop" plugins for positioning in jquery, look at some of these listings -

These pages are a couple of years old, so are not that current, I got them from a web search, but there were thousands of other results for "jquery drag and drop".

The things for your "Start point and the End point" are generally called drag-drop "resizable" div or elements. There are individual plugins for this and many of the other plugins will also have a resizable ability.

However to get a page look and functioning (layers, drag-positioning, resizing) to your custom setup, will require you to know javascript and css very well. Although you might get a plugin that can do several of your requirements, you will have to be able to change the plugin's settings, and most likely add "custom" changes to the page to get it the way you want it.

AS to you asking "tutorials or code snippets " for you, , there are thousands of "code work" examples and tutorials for all of these things, for javascript (no jquery), and for doing these with Jquery. I can not recommend any, except to do a web search.
You might should ask another question in the EE area (jquery), about ONE specific thing, for instance "can u recommend a good tutorial for Jquery drag and drop?" and ask questions there about the factors you need in functioning for the drag part, and the drop part.

I can not tell what you may or may not know, but I'll just say, it is necessary to KNOW javascript, before you start into jquery, and you must KNOW the basics of the Jquery API to use it, before you start on any drag and drop or resizing, , , These are not really things for early beginners in JS and jquery.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dentsplynzAuthor Commented:
Thank You Slick812. This is great, I bet I am going to enjoy coding this.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.