resizing elements - javascript

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.

Related

Creating a side panel similar to code pen

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;

Jquery ui rotated image resize issue

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

How can I combine an image slider with scaling images?

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.

HTML layout design - need better approach

I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/

fitting absolute div popup in screen

Sorry maybe I was not clear in my original question below...
What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.
So I want to know how this is determined and calculated.
How can I use javascript to make sure
a popup div fits inside the window
when it appears?
A good example is google's image
search. When a image does not fit in
the window (either it is the far right
most or bottom most image), somehow it
is pushed inside when the popup is
opened with the mouseover event. How
is this calculated and how can I
create a script to calculate this.
you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.
There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).
For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.
This is one of the best i've come across http://gettopup.com/

Categories