I need advice. I need to make something like a rich text editor but only for div tags. User can move div, change place of two divs with drag and drop (add gravity), stretch width and height of div with mouse pointer. All divs which can be edited is in one parent div. My question is, because I am new to JavaScript, which library is the best for these kinds of things, has anyone done something similar with some library ?
jQuery UI has the resizable feature for this.
I think it is a good idea to combine methods. For example you can use hte HTML5 features (draggable=true), combined with plain JavaScript and CSS3 (resize: both;).
Have a look at this article for the drag and drop, and at this preview of CSS3's resize.
Related
I want to have one image above another one that is being revealed on scroll.
I am thinking of a similar effect as on this page: https://affinity.serif.com/de/photo/ (live-filters section, called "fixed-scroll" here).
Preferrably a native CSS solution or with as little JS as possible.
So far, I've found this example https://tympanus.net/Blueprints/ScrollingLayout/
It's almost what I want but I can't think of a way to make the background-attachment fixed to the element's parent rather than the whole viewport.
It only works when it's fullscreen and there's nothing above this effect.
I've also thought about a solution using translate-y but can't find a way to slide the top image up revealing the image underneath instead of sliding the lower image upon the first one.
Can you help me out here or point me in the right direction, how this may be achieved? Thanks!
As far as I know using background-attachment: fixed might be the only way to achieve this particular effect using only CSS, but it looks like that doesn't quite solve your problem.
I would try a simple parallax scrolling library such as parallax.js. This uses javascript to achieve the desired effect but you can apply all the code via CSS data attributes, like so:
<div id="mydiv" data-parallax="scroll" data-speed="0" data-image-src="/path/to/image.jpg"></div>
With data-speed="0" the image inside the div will be stationary as you scroll past.
I am learning HTML5 and Bootstrap, I have my parent container(fluid) inside which I have 3 div, I always use the code of bootstrap class(col-md/xs/sm/lg) to show how the UI should be for different view-portal
but how can I dynamically re-size these div using mouse drag over its borders? I mean like enlarging a image.
Also by increasing one div size the other two should dynamically re-size themselves within the container.
Is there any JS code which I can download? is there any thing to learn that might help me?
You might try Resizable component of RightJS UI if you want it to work out of the box.
After all, custom implementation in pure JavaScript is fairly simple: How to make HTML element resizable using pure javascript?
Do you think it's possible to create a loupe/magnifying-glass effect with css / Html5 ?
I found an interesting application here but it's based in JS.
No, you cannot do this using only CSS / HTML5.
You need the javascript to create the drag effect and calculate the portion of the zoomed image that will be displayed inside the magnifying glass thingy.
You could create something vaguely similar by applying a CSS3 scale transformation on hover for the image and fiddling around with maybe some fixed divs and hidden overflows but if you want something like in that link you posted, javascript is the way to go.
I'm building a very basic online application where you can take images from a toolbar (or some kind of storage box, since there will eventually be quite a few images) and drag and drop them onto a canvas. I'm new to web development, but I know how to do the drag and drop, I'm just looking for a way to make a toolbar and put images in it. Ideally, I'd like a box with a scrollbar.
This seems like it should be a pretty simple problem. Any help would be much appreciated!
The simplest way I ended up discovering was using
overflow: scroll;
in the CSS div containing the images.
Here's a very good and simple demonstration of the use of drag&drop in HTML5 :
http://html5demos.com/drag
Beware that it's easy to drag links (as in this demo) but it is not possible to drag any images that aren't inside links in IE9.
If you want a totally cross-browser solution, you'll have to revert to old solutions (track mouse down, move and up and set yourself the position of objects).
If you say you know drag&drop and just want a box with a scroll bar then check this: http://jqueryui.com/demos/slider/side-scroll.html
I want to build into my app a way to select multiple objects on the screen (this is an HTML page with a bunch of absolutely positioned HTML divs). You know, like when you click down with the mouse and drag a transparent/translucent box and anything within that box gets selected upon mouse release?
I don't know how to go about coding that. How would you? Or pointers to solutions is acceptable as well.
Consider using jQuery javascript library. It has an extension jQuery UI that provides abstractions for interaction and animation. For drag an drop you have: Draggable
Here is what I would do.
Mousedown creates a high z-index div, transparent body with a nice border, which has its dimensions informed by mousemove. On mouseup you compare the region of that div with applicable elements. This wouldn't be particularly hard to do without a library, but YUI3 makes it pretty simple, have a look at http://developer.yahoo.com/yui/3/api/Node.html#method_inRegion
HTH.