I have an issue, I am using jquery ui resizable. When I rotate the element in chrome, the controls get rotated too but when i resize the div with handles, they are inverted. I mean if i am using sw control, it acts in weird way i.e. i move towards top and the image gets bigger while in actual it should get smaller. This is the problem with rotated divs only not the normal ones.
Here is the js fiddle
http://jsfiddle.net/fahadnabbasi/2FLuf/11/
You will see two images, one rotated and one normal. Normal works fine for resizing while rotated one resizes as well but in opposite direction. Try to resize the rotated image from the bottom right control and you will see the problem.
I think you need jQuery UI Rotation http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ (it's Russian). Here is a direct download: http://vremenno.net/examples/jquery-ui-rotation/jquery.ui.rotation.zip
Here is a fiddle I made up that implements the plugin: http://jsfiddle.net/MadLittleMods/4Vfm5/
After including the plugin just add. You can also add a parent div and apply it to that with .parent():
$('.resizable').rotatable();
Here is another topic that talks about rotating: jquery rotation plugin - that works like jquery ui resize
Related
I am trying to create a side panel similar to that of codepen editor in react, where you can drag to adjust the size of the different editors.
If I drag an editor header towards the bottom low enough, the editor below it will follow, almost as if I have appended that component to the drag, likewise if i try ti drag the header upwards. I have built the layout to my liking with a similar concept to the accordion from material UI:
https://mui.com/material-ui/react-accordion/
I was also able to mimic the on click behaviors of the header from codepen, for example, double click would open the editor to full size and triple click will open all evenly by keeping track of the heights of all the 'containers' in a useState hook. However, I am having trouble with the dragging part. I am looking for some suggestions for good libraries/ideas to use to help me achieve this.
Currently I am using framer motion to make the expanding of the container more 'smooth'.
https://www.framer.com/docs/transition/
I noticed that they also have dragging capabilities which I am also exploring. My idea is to have an onDrag for each of the headers. Depending on which header I am dragging, if I drag down until my container size is 0, I start shrinking the container below it and then the one below it and so on and so forth. I am able to get the Y property from the onDrag function but I am a bit hesitant to do my calculations in x/y coordinates. Does anyone have any suggestions or any libraries that might make this easier?
I don’t know any libraries. I think if you got this far you can probably do it yourself in plain js, using listeners and selectors, etc, or whatever react can provide. Is there something specific that makes you ‘hesitant’? I recently found these which made things easier for me, they might not be 100% relevant but still good to know: getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
That will tell the position relative to the viewport, it was useful for me dragging dividers between panels.
And if you need the position relative to the container:
https://stackoverflow.com/a/11634823/5350539
And if you’re not already, I guess you could look at setting the panel CSS positions using ‘bottom’ (with position absolute or relative), then animating the height to e.g. 30px less than the bottom edge of the upper panel. Tip: while dragging, add a body class to disable user select: user-select: none;
So I want to make a scroll zoom feature on a map I have created. The map contains an image and a number of divs positioned on top of the map marking out positions (pins).
I have found a number of jQuery tools which allows me to scroll zoom on an image. And I could probably try and use the mouse position and scroll amount to edit the coordinates of my divs as well. Is this the best way of going about this, or does anyone know any jQuery tools that will allow me to scroll zoom in and out of divs?
Here are some tools I found for scrolling on images.
image zoomer
Wheel zoom
You could try using leaflet.js. It is a lightweight javascript library meant to be used for maps, but it also work for images. This tutorial could help you start, and you might want to check this post.
Here is a very basic example of what it could look like.
Part of my app requires the user to be able to use the mousewheel to zoom in on an image which is already centered inside a larger container element.
I am using jQueryUI to provide a slider with which the zoom is controlled manually.
When zooming withe mousewheel, the viewport adjusts so that the user is always zooming towards to mouse cursor providing exactly the same behaviour as google maps in terms of zoom functionality.
Also, in order to provide a better experience than using css transitions I have written a momentum based smooth scroll algorithm to make the zooming as smooth as possible.
Everything works perfectly with one exception.
To replicate the problem please follow these steps on the provided jsFiddle:
move mouse cursor to the center of the image.
Very gently move the mousewheel one notch so that the smoothwheel takes over an zooms you in a little.
Then move the mouse cursor to another point of the already slightly zoomed image
Zoom in again, as far as you want this time
Finally zoom all the way out
You will see that the zoomed out image is now misplaced (as the translates have not been removed).
The behaviour I want is for the zoomed out image to return to its original position once the scale is set back to 1.
If you remove the css translate from the image in Firebug you will see that the image returns to the correct location.
Therefore this could easily be achieved with a simple conditional like so:
if(scale == 1){
//remove transforms completely
}
However doing this would provide a jumpy experience and I would like the image to gradually zoom back out to the original position as the user zooms out.
It is worth mentioning that if you zoom all the way in without moving the mouse you will find that everything is correct when you zoom back out. This is simple because no translate gets added to the elements transform, simply a scale and transform-origin. In my code the translate only gets added when you change zoom position with the mouse mid zoom.
Unfortunately I cant seem to get my head around the best way of going about this.
Here is a working jsFiddle:
http://jsfiddle.net/3k332/15/
Thanks in advance for any help.
NOTE: I am well aware that there is some redundant code in my fiddle and that its not particularly elegant but this is merely a quick mock up to help you understand the problem.
I'm looking for JS or jQuery (core dependecy only) code that allows you to resize any html element, or just divs - could use div container for content.
The problem I'm having with jQuerys resizeable() function is it's dependencies with UI and the bloat that would bring to my rather slimmed codebase. Also it only uses a corner handle for resizing where I'd like an interface more along the lines with how table and image resizing works in TinyMCE.
That is, a dashed border around the element to be resized, with 8 points to drag from. If you try the TinyMCE demo on their site you'll see what I mean. It allows for both aspect ratio to be kept and distorted based on dragging point.
Most hits I get on resizing is for a one time resize of images to fit the page width, but I'd love to be pointed in the right direction in case there is a snippet or jquery plugin out there that I've missed.
I got the same "problem" a couple months ago, did not want to use the jquery UI but wanted to resize... I came across this "custom event" plugin. Very light and does the job.
threedubmedia jquery.event.drag
You can see a resizing demo at the bottom of the page.
Hope it helps!
You can use CSS3's resize.
http://jsfiddle.net/BramVanroy/uAzVY/
Not as much functionality as you want, though.
I have a bit of a dilemma in the sense that I can't seem to get a jquery image cycler working with scaling images.
What I basically have is a website with a small navigation list at the top, and then full screen images which can be cycled using a control at the bottom of the page. Previously I've used backstretch to get the desired effect for a background image that stretches with the browser window.
I was also hoping on using Jquery Cycle as the plugin to do the image slider (as I've used this countless times before).
The problem is that I need the effect of backstretch (ie. scaling images) but with a slider. I have tried using other plugins for the stretching but most of them only seem to allow the images to be scaled down (if the window shrinks) rather than upwards. I can't use backstretch because it takes up the entire body tag. I only need a container div to contain the stretched images (so I can have the header/navigation sitting at the top without cropping the images).
However I have no idea how to then get this to work with Jquery Cycle.
Has anyone done this before or have any examples of this working?
Thanks
May be late but take a look at http://jongaulin.com/2011/11/17/fullscreen-image-and-content-slider/. I hope this works for you.