Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

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

Posted on 2014-09-29
Last Modified: 2014-10-01
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
Question by:dentsplynz
  • 2
  • 2
LVL 53

Expert Comment

ID: 40352499
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.

LVL 34

Expert Comment

ID: 40352525
????,  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?

Author Comment

ID: 40353735

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
LVL 34

Accepted Solution

Slick812 earned 500 total points
ID: 40354855
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.

Author Closing Comment

ID: 40355119
Thank You Slick812. This is great, I bet I am going to enjoy coding this.

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question