I'm having real headaches trying to work out a problem I have at the moment on a web page, I hope you can give me a hand :D.
I have dive for a related topic but I've not found any one with the same problem, using several images.
What I want to achieve:
"I want to include draggable and resizable images in a div". The images one by on are added when a link is clicked.
I have mainly 3 problems(also explained with images):
When I add a new item and it's marked as resizable, it appears below the last image, instead of beside. (When it's nor marked as resizable it appears beside)
http://i.stack.imgur.com/1dBXF.jpg
When I drag an image, changing his Y axis, and then try to resize it, it's automatically moved to the las Y axis position (X is consistent).
http://i.stack.imgur.com/rF9KK.jpg
When I drag an image, and after I try to resize the other one, the Y position of the dragged image changes.
h**p://i.stack.imgur.com/OMWEr.jpg
I don't know what to do, thanks a lot.
I tried an attempt to recreate what you wanted to achieve and arrived at this sample
I hope it helps in some way.
Here is my resolution to the problems you are encountering:
Problem 1:
I achieved the separation of the resizable and the non-resizable images by by assigning them into separate divs. (seems easier that way :P).
Problem 2 & Problem 3:
I was not able to encounter this two problems, are you using alsoResize or grid
options?
[Updated Post]
I saw the problem you were encountering and modified my initial code, here is the result.
I provided comments on the lines that I updated.
the resizing problem you were encountering is because the img element is not absolutely positioned in the page.
I hope that this helps you in some way :)
Related
I am building an appointment calendar where one can book slots and drag / drop the slots to change time. Each slot is draggable HTML elements. But I found an issue when we try to drag slots that are small, the preview div or the ghost image (I don't know if it's the technical term) is showing some part of the next slots. In the below image, there are 4 different slots. When I try to drag the first slot (Green in color) some parts of the second slot are also shown in the ghost image.
My guess is that ghost image size has some min-height property and can be controlled? I could be wrong and I appreciate pointers that can help me fix this issue.
It is very hard to help you without seeing the actual code.
Maybe you're dragging the wrong element, maybe there's a mistake in what you're actually cloning to show the "ghost image" or maybe something else entirely.
If everything is correct and it still happens it's probably something to do with the css of your element. But again, without seeing any code this is just a guess.
If you want a quick solution simply set a fixed height (as tall as the one element you're dragging) to your ghost element and set its overflow property to hidden. It works, but I'd rather throw myself off a cliff than actually solving the problem like that.
I can gladly try to help you if you make a jsfiddle.
On this link is a very much draft map with photo popups at the orange dots.
https://www.victoriasforestryheritage.org.au/maps/forestlocations/locationtest3/index.html#7/-36.719/146.133
The map is produced from QGIS and with the qgis2web plug in using the Leaflet option.
https://www.qgis.org/en/site/
https://qgis2web-docstests.readthedocs.io/en/testing/
https://leafletjs.com/
The popup should work on hover, which it does. But on first hover the bounding box, if that is the right term, does not expand to surround the photo. With a mouse click it does surround the picture.
Obviously I would like this to come together at hover rather than the process requiring a mouse click after hover.
I have been trying to solve this on the basis that it may be a z-index issue in the leaflet.css file but to no effect. I also thought it may be a maxWidth maxHeight issue but no joy there either.
I obviously need some assistance because my coding knowledge is limited with css and almost non-existent with javascript.
The coding package for the map is available here:
https://drive.google.com/drive/folders/1teRbeTRYjBJzaxNeGoi-90wfiFhO-B8e?usp=sharing
and the leaflet.css file with z-index etc is included.
Any advice that points me in the right direction would be appreciated.
Richard
sorry if asking this question in wrong place.
I have a web page (asp.net / vb) and each section of the web page is built in divs inside a bootstrap grid.
Using the code behind, I am adding onclick events to each bunch of div's to do certain things. Every single div/onclick works on the page apart from just one that will only work if I set the div to something like 100 pixels deep.
I am in safari.
I have tried allsorts - binding with jquery click/tap etc but nothing apart from making the div really large.
I dont understand how only this one div could cause problems.
This text box wont let me paste html in to show.
If anyone could suggest anything I would be really grateful!
C
You are likely facing an issue where you've got one element covering up another. Check to make sure that you don't have any other div's that are too wide and happen to be covering your link on the iPad. This would explain why when you move it to 100 pixels deep it works.
I am using the ElevateZoom plugin in my web app. But the default behavior of the plugin is that the zoom section is shown only when the mouse hovers around the particular area.
What I am trying to achieve is, show the zoomed version of the image in a different DIV and will keep on showing the zoomed pic even after the mouse is removed from the pic.
Is ElevateZoom plugin able to do so by default , or has someone already achieved this functionality with the plugin.If so, any pointers or help is really appreciated.
The elevateZoom plugin can’t do this out of the box.
If you look at the plugin code (jquery.elevatezoom.js) you can see the mouseleave function on line #450 and if you are ok with editing the plugin code you can just replace self.setElements("hide") with self.setElements(""). But I don’t think this will give the desired result.
You can either find another plugin or hack your way through this one. For the latter it's good to know that you can access the elevateZoom object this way:
var $image = $('#your-image').elevateZoom({...});
console.log( $image.data('elevateZoom') );
http://jsbin.com/ovODORove/1/edit
I'm sure you've all seen those design applications where you drag a node and it resizes the element. Well last night, and today I decided to give it a try.
So today I wanted to try dynamically resizing a div, and I'm a bit confused.
I tried various ways, but none seem to work.
Logically I know that by using JQuery UI I can set my class .EE (for east east) to draggable to make it drag the element horizontally, but while the element is being dragged I want it to also set the width to where it's position is. I assume by binding the draggable event to the elements css width would work, but when I tried that it didn't work.
If anyone can help assist me with this it'd be greatly appreciated.
EDIT:
Using JQuery UI's resizable handlers make this a real easy solution as you can see here.
ThreeDubMedia also has a nice plugin that enables this functionality as well. As seen here.
I played with it a bit, and I've got it working. This may be not exactly right for you, but I think it's a pretty good starting point.
I've assigned the same stop callback for every handle, and that controls the resizing in any direction. Also you should give a parameter to width() and height(), like Man of Snow said.
Here is the fiddle.