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
Related
I have a lot of DIVs inside a single DIV that I'm dragging around which also moves all the other DIVs. All positions are absolute.
My problem is that after I drag around and then try to get coordinates of the inside DIV with this code: prviLeftNotranji = $("#"+"s"+xLow+"i"+yLow).position().left; the inside div position is not updated like the DIV I dragged around is.
It's like the nested DIVs position's are not being updated in the DOM tree. Any idea why that is?
This is a very general question within some very complex code so hopefuly you might better understand the question if I show you what I'm trying to achieve: http://asgarnian.com/dev/draggable.html
That thing is already finished and working but because moving all the DIVs around (setting coordinates for each of them every mouse move) is very laggy in Firefox. I decided to put all the DIVs inside a single DIV and then only move that one DIV. I have a limited amount of the inside DIVs that have to be shifted around when they hit edge of the screen to create a feeling of infinite amount of DIVs you can drag around infinitely. So because the DOM positions of one of the nested DIV doesn't update correctly my shifting code doesn't work anymore and as you can see here: http://asgarnian.com/dev/draggable3.html
If you drag right it will be shifting blocks correctly untill you release the mouse and try dragging again(since at start the position is still correct but after dragging it's not anymore.)
I don't expect anyone to understand the messy complex code I have in those two websites that's why I'm asking this like a very general question...
I have created a slideshow plugin that takes a list of images and builds a slide show. The slide show is positioned 100px from the top + $(document).scrollTop().
This is pretty simple and works very well. I am running into some issues when someone one has used css zoom on the page. The calculation for the top position will be off due to the zoom. Does anybody know a good way to correct this/ work around?
Thanks in advance!
I had the same problem, and found out that jQuery .offset().top is returning some values which depend on window scroll position if there is CSS zoom added to element that is wrapping the elements we need to get position from.
So, I used the native JavaScript .offsetTop in this context:
$("#scrollDestination").get(i).offsetTop;
But, keep in mind that this will get the position relative to it's parent, not like jQuery .scrollTop() which is returning the scroll bar position. So you will need to do some calculations maybe, but at least you will get the consistent returning value for element's position, when you have CSS zoom involved.
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.
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 am working on a js player and the seek bar doesnt want to play nice. You can see two on pageload, they both work properly. Now click on either first or second div with the play img on it and a bar will appear. When you click there the bar is not precise. Its several pixels off.
this.offsetLeft is giving me 0 instead of 10 which breaks this. How do i fix it?
-edit- i still dont understand why but i decided to look again a min ago and deleted random css i pasted in. i deleted this single line and it worked. I am not sure what that block does but i know without that line it currently looks the same. player is not done yet so maybe i'll need this and revisit the question
position:relative;
The position:relative style is often used to make the element the "origin" for absolutely-positioned child elements. In other words, child elements with position:absolute calculate their positions from the relative parent's position. (instead of the window's) This way child elements follow the parent wherever it is placed.
Relative positioning also lets you use 'left', and 'top' to adjust the position of the element from its normally position.
The style can also be used to fix positioning and scrolling bugs in Internet Explorer.
It maybe too late for this issue but my experience can be useful here.
I had the same problem, i was getting 0, when i called getOffsetLeft() method.
you must add your widgets into container first and then call getOffsetLeft() method.