Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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
  • 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

575 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