I have a website which already allows users to upload images on the canvas
The website was coded using HTML with some JS libraries like CanvasJS
We are looking to add a few more features to the site:
1. A + button to let users add a draggable and resizeable iframe (a mini browser that allows users to type the URL and browse web)
please check the following fiddle as a reference example. however it cannot be dragged or resized or rotated.
[login to view URL]
The example of mini-browser.
But this should be draggable and resizeable across the canvas
2. Since the iframe mini-browser will render the URL site inside. the mini-browser should have a zoom in-out button to enable users to zoom in and out (with scrollbar enabled).
If the users resize the main browser window, the position of the mini-browsers should NOT change (ABSOLUTE positioning)
1. 50% Pay-out:
- HTML page with a button to add mini-browsers
- The mini-browsers will be added in the middle of the page
- The mini-browsers should be draggable, resizeable, (and rotateable, if you are using CanvasJS)
The top bar should have fixed size after resizing the mini-browsers
2. Remaining 50% Pay-out:
- Similar CSS design and layout of the mini-browser as per the fiddle (code given) [Back/Forward, URL box, Refresh)
- The zoom in/out buttons in each mini-browser (with scrollbar enabled if the users zoom in)
Can be placed at the bottom right of each mini-browser or as deem fit
- The absolute positioning of each mini-browser if the users resize the web browsers