I am creating a photoboard in which a user can drag-drop photos, resize it, drag it and rotate it. Whenever a user drag-drops a new image on the board a new div element is created and an img tag is appended to the div element. Each div is set to float left so whenever a new image is created it will automatically be placed in its correct position. The jquery-ui plugins (resizable and draggable) are applied to the div.
A problem occurs when the user resizes any image. jquery-ui sets position: absolute and all image positions get distorted. After that, when we add a new image it will be inserted on the previous image. Can anybody please help me to get rid of this problem?
Without seeing your code it is difficult to know exactly what the issue is. I do have some sense of what the problem is. When using drag/resizable, the div will always be position:absolute. What you will need to do in priciple is bind an .mouseup() event to any selected/dragged/dropped div that will .addClass() to the div applying the new position as well as other styles or jQuery dom manipulation. This is the approach I would take. This also allows the freedom to spice up the dropping of the image with some nice animation maybe.
Related
Im wondering what my options are for taking an element from one div and placing it in another, animating the transition. Both parents are position:absolute, the element is position relative. I have a few ideas, none of them too clean. There does not seem to be a standard way of doing this, curious if anyone has any insight into the cleanest way to implement this behavior.
I dont have a current implementation, but what im anticipating doing is capturing the current physical location of the element... somehow determine the proposed position in the new parent, pop the element out of the old parent, create a new element outside of the two divs, transition (left,top) between these two points, onComplete insert into the new parent. Im fearing this is my only solution. Any thoughts on possible ways to simplify?
Use jquery .animate. You will animate a 3rd div that is the same size etc, from the offset x and y of one to the other basically.
Let the new div hold the same coordinates as the one you are moving from.
Then in your script get the coordinates of the one you are moving to. Animate with left and top also opacity and you can make it fade in while moving then on the callback fade out.
If you need code let me know.
Judson
I am developing a magnifying glass and I was hoping I could get some help figuring out how I am going to do a step.
What I am doing is I have a div with a higher z-index than the content. It is moveable and draggable. It also has a transparent background so one can see the content (images & text) behind/underneath it that has a lesser z-index.
Now the part that I need help with is this:
I want to figure out exactly what content is behind the div (let's give it an ID of #glass).
Then my plan was to append a <span> before and a closing one after and style it with CSS3 scale transforms to increase the size so it acts as if it is magnified.
If you have a better idea on how to 'magnify' the content please share it.
So what I am looking to do in a spot of pseudo-code is:
Get position of #glass.
Get content behind #glass.
Store that in a variable or give it a class or something to refer it to.
Append a span before and after.
Style it with scale-transform.
Undo and reset the above when #glass moves.
I would really appreciate any and all help with any of these steps, but especially number 2 and 3, As I have no idea on how to do those.
You can listen for the mousemove event on every element in the page. each time the event fires you update a variable with the latest node being hovered over.
So as you are dragging around the glass, the mousemove event should be getting fired on the elements behind the glass (since you are hovering over them). And you can then use your latest node variable to get the element behind it.
Here a is Jsfiddle demonstrating how this could be done:
http://jsfiddle.net/wWVuy/
I'm pulling an event list calendar in to my site from a third party provider. It's pulled in using a simple javascript call, and has been placed inside a div on my site. When hovering over an event, you get a tooltip popup that shows more information about it (all driven by javascript). I'm using CSS to put an image as the background for the div, but the tooltip popups are appearing behind the CSS sourced image. I've attempted to set a z-index of 0 for the main div that pulls the background image, and then nest a second div for my javascript with a z-index of 1, but it's not doing anything.
I don't have access to edit any of the javascript for the third party calendar system, so the fix has to be accomplished with whatever I can do on my own site. Unfortunately I wouldn't consider myself a pro at web development, so there may well be a very simply answer I'm not finding, but right now I'm stumped.
Any suggestions? Thanks!
It looks like you're trying to set a z-index for an element whose parent element already has z-index. That's not possible. If you want to set a different z-index on the tooltip element it has to be outside of the first div.
It would be really helpful if you could show us some code.
The main reason why z-index doesn't work could be that you forgot to set position. Z-index only works on positioned elements (position: absolute, position: relative or position: fixed).
The second reason could be the one that #kremalicious mentioned. Setting higher z-index to the child element.
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
I used a jquery image scaling plugin for a large image on this page I am building: http://seans.ws/sandbox/test/thrive/
I am trying to put a navigation div below the image, but I cannot do so because the image is absolutely positioned, and the scale of the image changes, so I cannot just specify a padding-top value for the navigation to get it to show up under the photo.
Any help would be greatly appreciated.
I would put both image and navigation div in one container and specify absolute position on it (instead of image). It seems to be simplest and most straightforward solution.
First, does the image have to be absolutely positioned? Generally if you want the image to be placed relative to other elements on the page or you want other elements on the page to be placed relative to the image they are placed relative, sometimes within an absolutely positioned <div>
If you explain why the image has to be absolutely positioned there may be an easier solution.
Assuming that absolute positioning of the image is required, the only possibility I can imagine is either modifying the jQuery plugin or making a second javascript to edit the padding-top as the image is resized.
If you need the image absolutely positioned on the page but relatively positioned to all other elements, I suggest putting the image and the content (which you want to appear underneath it) inside of an absolutely positioned <div> element, but leaving them each relatively positioned.
You could get the height value, and then work out how much padding you need.
var myheight = $('.maxAtOrigImageSize').height();
$('.nav').css('paddingTop', myheight+'px');
However, you would need to add an event for when the window changes size, so that if the user adjusts the window size, you can update the padding of the nav.
I'm answering your question, but I feel there is a cleaner solution. I would create a containing DIV for the resized image to sit in, and follow that with a nav DIV. The nav would always naturally be in the right place when resized, at the bottom of the image. You may want to consider changing the way you implement this.