I'm trying to position an absolute positioned div using jQuery offset() function.
The idea is to position it at a fixed offset from another element of the DOM. This happens in a quite complex environment with multiple nested divs.
The strange thing that happens is that calling it twice gives two different results. To me it seems there is no reason for this, although I am quite new at jQuery so I could be oversighting something obvious.
I do think that
var pos = $(document.getElementById(someElementInTheDOM)).offset();
$(document.getElementById(MyDiv)).offset( pos );
should position MyDiv always in the same place, even if I call this code some 10 times. That's what correctly happens in this fiddle. Click on the magnifying glass several times, everything is ok.
But as soon as I start adding display:none and display:block properties the thing gets disrupted. I tried to bring it down to basic and I created a fiddle here. To see what I mean press on the magnifying glass, click on the magnifying glass again, click on the magnifying glass once more, close the div by the white "X", click on the magnifying glass once more.
Any clue what's going on?
You just have to change the order:
document.getElementById("iuocboun_filter_window").style.display="block";
$(document.getElementById("iuocboun_filter_window")).offset( pos );
instead of
$(document.getElementById("iuocboun_filter_window")).offset( pos );
document.getElementById("iuocboun_filter_window").style.display="block";
EDIT:
Explanation: The offset does not work on hidden elements, thats why you have to make it first visible and than set the offset. ;)
Related
I'm using the draggable='true' attribute to make a draggable element in my website, but I've run into a cosmetic issue.
The dragging is basically done to reorder elements, so I want to pick them up, drag them into their new position, and then simply release them into the new position, but as soon as I let go, the element will slide back to it's original position before moving to the new position.
See this image:
How can I keep this from happening? I want to skip the "goes back" part.
$("div").on('dragend', function(e){
e.preventDefault();
e.stopPropagation();
$("div.slide.placeholder").replaceWith($(this));
updateSlides();
})
Edit:
This issue has been confirmed as localized to Mac. It is very similar to the whole window-bounce effect.
I tried coding what you want using jquery.
-->http://jsfiddle.net/oLc2f3kp
the element that has class .drag_item can be draged. if you release it anywhere that isn't on the area of element that has class .release_area, it will go back to the position before.
I hope it's what you want. if you have any question about this code,ask me then :D
UPDATED I tried over many times now I have the solution
$('div[class=dragable]').on('dragend',function(e){
$(this).css('top',e.originalEvent.pageY-($(this).height()/2));
$(this).css('left',e.originalEvent.pageX-($(this).width()/2));
});
I can't get the position while I'm draging it (the position I got is the original position of the element before start dragging") so the only way( so far I have tested now) is to get the position of your mouse when you drop it and set left and top are same as the position of your mouse.
I have only tested in Chrome. anyways I don't suggest you to do this.
I'm trying to create a Javascript effect I'm sure I've seen done many times before. However, I can't seem to find the right terminology for it. It's not a "slider", or a "slide out menu" or a "slide out tab" or a "tab". So far those terms have caused Google to take me to all sorts of examples and tutorials for things that are not what I'm after.
The effect I'm after is like this:
Div 2 sits behind Div 1 until the user mouses over the visible portion of Div 2, which causes it to slide out to reveal more of itself. When the user mouses away, Div 2 slides back underneath Div 1.
What do you call this effect, so that I can find turorials or Javascript code for it? Or if anyone can direct me to an example or explain how to do it, that would be great.
I'm sorry for a terrible code, but do you need something like this?
http://jsfiddle.net/D7Z8v/
$("#smalldiv").hover(function() {
$("#smalldiv").animate({marginLeft: 200});
}, function() {
$("#smalldiv").animate({marginLeft: 0});
});
You probably need to change "marginLeft" inside hover function on something more appropriate, but it's looks like what you needed.
You can use z-index to have div1 above div2 and then you can either use a CSS animation, jQuery animation to change the position of div2 or you can adjust the width of div2.
I'm creating a list with handles for sorting. I don't like the aesthetics of having 20 handles visible, so I'm trying to make the handles appear only when the mouse hovers over a list item.
This was my first attempt:
jsFiddle #1
As you can see, hovering over items in the list creates a rather jarring movement and misalignment of list items. To fix this, I've created a blank 16px image that I use to replace the handle when it's not visible. It creates a much nicer user experience than hovering, as you can see here:
jsFiddle #2
$(this).prepend("<img src=http://i.imgur.com/tzGrVLc.png class=\"blank-sprite\" / width=16 height=16 border=0>");
The problem is that during sorting the 16px image often disappears, leaving things out of alignment. (I'd post an image but I don't have the reputation.) It doesn't always happen, but seems to happen more frequently when I'm sorting very quickly.
I'd love to know why this happens and how to fix it. Thanks!
You should set position css property of icon element to absolute. This is to give you the idea:
SEE DEMO
var $icon = $("<span class=\"ui-icon ui-icon-grip-dotted-vertical\" style=\"display:inline-block\" id=\"handle\" /></span>").css({
position:'absolute',
top:$(this).offset().top+5,
left:$(this).offset().left-10
});
$(this).prepend($icon);
Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/
Right now when you move over the box, the hoverbox appears in the same place for all items.
What I would like to do is position the hover box based on which #box.corner you are moused over. If the #box.corner is to the left of the box, I'd like the hover box in the left, outside the box, centered to the corner.... If you mouse over a #box.corner that's in the bottom right, I'd like the hover box to show at the bottom right, centered to the corner.
Any ideas on how to accomplish this?
Thanks
If I read your question correctly, this should be what youre looking for: http://jsfiddle.net/Na3hd/17/
As you can see i moved around some of the css to match what different elements have in common more, so that the code can easily be reused and assigned to other elements. I moved the defining of the hoverbox into the mouseenter function, so that a new div gets created on each mouseenter, which will then not result in complication when setting the positions.
Hope this helps!
EDIT
Here a more dynamic approach: http://jsfiddle.net/Na3hd/22/
Also, i just realized you wanted to have these items show up outside of the boxes.
If you check the following link for my working example:
http://jsfiddle.net/xavi3r/Cd8cV/
You can see that when prepend() is invoked the positioning is lost within the animation and the order in which elements are placed seems to get distorted; (check HTML to see output);
$('#container .animateMe').prepend($('#container .animateMe .copy ').clone().removeClass('copy').removeClass('active'));
I have a solution, but it doesn't solve the prepend problem. If you click any button when the animation is still happening, the squares become offset.
This is an edit where the click event becomes unbinded to your left and right buttons as the animation is happening. This stops another animation running at the same time, and the squares don't get offset. The event gets rebinded at the end of the animation callback.
Check it out :
http://jsfiddle.net/SxFPc/
I have merged your left and right click methods into a single handler since they were doing the same thing, apart from the position offset.