Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'd like to create a java-script image editor.
We have an ability to drag and drop multiple images to our editor and then with following properties,
Undo
Redo
Move upward position
Move backward position
Drag and Drop
Change background color
Finally create and save a single image with all our modifications.
I'd like to go with jquery/ prototype library to develop the same. But I'm not sure about my selection and want to know is there any other library to complete my requirement. Please suggest a better one if I'm wrong.
I think that the choice of a library to do your coding is not the case here. Use any you are comfortable with. I would only wonder how such editor should be made. If the requirements about the app will not change, you can easily create your editor using html and css or svg (raphael js, adobe snap js). If you consider adding further image processing in the future than canvas rendering is your way to go (example)
Also if you plan to add image resizing and rotating but need to support older browsers (like IE8 or IE7) you should use raphael with svg.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm looking to create a Conway's Game of Life-type dynamic image that cycles through these general patterns (below).
Is it possible to create these types with Javascript? Or am I better off looking to a 3D application and cycling through an array of pre-define images?
Looking at your examples, I believe you could easily write Javascript code to generate these images. Personally, I would look to generating an SVG. You can do that without a library, but you may find a library like SVG.js helpful to play with.
I would look at the images as a 3x3 grid of your circles that you effectively randomly turn on or off (according to your desired logic). Then you could easily generate the "connector" lines between them.
After you have your 3x3 grid looking how you want it, you could apply a 45° rotation to the group and you are done.
With the above complete, you could then get the svg content and submit it to a server, save it to a file, etc.
If you have any experience with svg / js, you will likely be able to get this done very quickly.
Good luck to you!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I have a requirement to build a website where the user can choose a design from a standard template and a number of optional parts. So for example, it could be selecting an outfit, where there is a fixed template image of a person, and the user selects different colour trousers, shirts, socks etc from a scrolling list of images. When the user selects a particular item from the list, the image appears on the template giving an indication of the overall look.
It doesn't have to be too fancy with any moving images or transitions, but just the ability to overlay fixed images onto the template.
What would be my best choice of technology and way of going about it? Standard HTML? Css? Javascript? Something more server orientated such as JSP? Would appreciate any input.
You can solve it in many ways, it mostly depends on your requirements and what you're comfortable with doing.
Personally I would have done it with plain javascript based on the description you gave.
Requirements:
Change images during runtime.
JavaScript does a good job with this.
Predefined coordinates for where the overlay needs to be positioned.
Some type of storage for the coordinates, simplest possible would be hardcoded values in your script.
Ability to position the image as an overlay at said coordinates.
CSS with position: absolute; can be used for this.
Image stacking and index logic.
Can be done with JavaScript.
This is the simplest solution to the problem given. If you have more complex needs like zooming or resizing, you may want to check out <canvas>.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am not sure where to start with this or even what keywords to search for, so I am asking for someone to point me in the right direction. Here is what I am wanting.
I am wanting to make a webpage that can be dragged in all directions with different HTML elements in all directions and load new elements as you get close to the edges via AJAX. I am hoping to achieve this via Bootstrap or JQuery.
Any ideas on how to get the page draggable like that?
jQuery UI has a draggable method that would work for you, as long as you target the viewable area as the element to initiallize the plugin on. If you prefer a more lightweight approach you can use this plugin created by Chris Coyier.: https://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/.
An example of it working in just 2 directions would be found in this SO thread as well: Scroll the page on drag with jQuery however the actual plugin being used in the demo supports all direction dragging - see the authors site: http://davetayls.me/jquery.kinetic/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I im currently in the making of a mobile application (prototype), which need to created in html, css and js. I made a low-fidelity prototype with paper cards, but now i need to create it as a website.
I was thinking about setting in a picture of a smartphone (iphone/android) and then edit the content inside that screen to point out that it should be run on a smartphone.
So if you emagine a i picture of a smartphone, and then inside the screen i wanne create some kind of box where all my content should go, but i am not quite sure what the best way to do that is. Should i use a canvas, a iframe or something different?
If there are any other inputs you are more than welcome to fire them at me.
I created a video to see how a user, unknown to the project, would interact with my low fidelity prototype, and thats what i am building my html prototype from.
The video can be found here if it is to any interest.
https://www.youtube.com/watch?v=TVXhEwGYYfg
(don't mind the text, it is in danish and just describes what the user is dooing)
Hope you can give me a hand to get startet.
Regards,
Nissen, Michael
Sounds like what you need is to start with reading something like this Introduction to Mobile Prototyping with HTML, CSS and JavaScript
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I need to develop drag and drop functionality in iPad. As I am new to Javascript, I tried to get some solution to get this thing done. I could find the way to move the element on the screen.
Here the the url
http://popdevelop.com/2010/08/touching-the-web/
Now what I want to know is, when I drag any element, I need to put it in a predefined area, like drag from x container and putting into y container.
I need help to create drop-able container, so that I could drag and drop into the container.
Some thing similar to the below functionality I need to create in iPad.
http://html5demos.com/drag
Please help.
Firstly, use jquery UI http://jqueryui.com/demos/ for drag and drop functionality and then add this script https://github.com/furf/jquery-ui-touch-punch for playing it in Ipad or Iphone.
OR
Try this :
jquery.event.drag - v 2.2
Three Dub Media - http://threedubmedia.com
Hope it helps.