Solved

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

Posted on 2014-09-29
5
249 Views
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
0
Comment
Question by:dentsplynz
[X]
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
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
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.

Cd&
0
 
LVL 34

Expert Comment

by:Slick812
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?
0
 

Author Comment

by:dentsplynz
ID: 40353735
Hi,

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
popcorn-timeline.png
0
 
LVL 34

Accepted Solution

by:
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 -
    http://www.aspdotnet-suresh.com/2012/10/12-best-jquery-drag-and-drop-plugin.html
    http://www.tripwiremagazine.com/2012/12/jquery-drag-and-drop-plugins.html
    http://www.1stwebdesigner.com/freebies/drag-drop-jquery-plugins/

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.
0
 

Author Closing Comment

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

691 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