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

Posted on 2014-09-29
Medium Priority
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
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
  • 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 1500 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

770 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