jquery ui draggable position relative not working - javascript

i wanted to create some icons like windows, but not being able to do so. here is irregular positioned icons DEMO
My css works fine if i use simple Draggable function like one :
$( ".big_dawg span" ).draggable({
});
Please change height of jsfiddle result to see responsive spans: Another DEMO
or if i change position of spans forcefully using this function :
$(".big_dawg span").css("position", "initial");
Then it works Exactly as i want but then .Draggable isn't working.

Related

How to make the bottom part of a box move on 'append' of a new element in FullCalendar

So I have an element that appends on hover. What I'd like to happen is that it makes the bottom part of the box that it's in move down to accommodate it, but that does not happen.
Here is an example:
Before hover:
After hover:
The problems is solved by specifying a margin in the 'EventRender' action of the FullCalendar plugin.
As so: How to increase the space between the two events in fullcalendar
You need two events on your table cell
i.e mouseenter and mouseleave
$(document).ready(function() {
$("div").on("mouseenter",function(){
$("span").show();
}).on("mouseleave",function(){
$("span").hide();
});
});
See an example here, modify as per your need
DEMO

draggable / moveable <div> horizontally

How can I make a div that is draggable / moveable horizontally, but not vertically?
I would prefer if this could be done without JQuery UI. JQuery is fine. Or vanilla JS.
Creating such a behavior yourself would be quite a bit of work. I would recommend using jquery ui :
http://jsfiddle.net/basarat/f7nNf/1/
Its a single line of code:
$( "#draggable" ).draggable({ axis: "x" });
And you don't event need to download the complete jquery ui. You can do a custom build with only draggable here : http://jqueryui.com/download/
Read more about draggable here: http://jqueryui.com/draggable/#constrain-movement

Drag function won't allow desired selector

I'm using the below code to make the images on my site draggable, but I can not choose the selector I wish to use. Although the images are draggable while using '.photo', it uses a bounding box with a larger size than the image and I would rather use 'img' or '.img1' & '.img2'.
Also since I started using this code the lightbox function is triggered every time I release the image instead of only on solid clicks.
jQuery(function($){
$('.photo').drag(function( ev, dd ){
$( this ).css({
top: dd.offsetY,
left: dd.offsetX
});
});
});
View demo here: http://www.coreytegeler.com/jb/3/
I have used Draggable for this effect but that led to a weird issue in Chrome/Safari that I couldn't solve so I chose a new approach.
EDIT
Here's the HTML used for each image ('.img1' can also be '.img2' on images)
<div class="photo"><img class="img1" src="http://www.coreytegeler.com/jb/1/images/001.png"/></div>
Try applying the drag behavior to the item you want to be the selector, then use the function to move the image.
You are probably getting the lightbox triggering on every drag because it's recording a mousedown/mouseup event sequence and the standard override from the drag is getting disabled since you have a custom drag event.

jQuery UI menubar, position submenu absolute left

I have created a jQuery UI navigation menu, using the menubar widget. It works how I expected except I would like it to behave slightly differently. As you can see here http://jsfiddle.net/hcharge/DebVr/ the submenu expands out and is positioned relative to the link that was clicked.
I would like it to expand out and stick to the left of the navigation bar, no matter which link was clicked, the submenu will always stay the same width. Like this image...
I've tried setting a position relative to the container and absolutely positioning the submenu, however I think that jQuery UI positioning is overriding this. Any advice would be great, cheers.
Edit: this needs to be done with JS as it has to be clicks and not hover actions that trigger the dropdowns
Why don't you do it all only with CSS?
See http://jsfiddle.net/DebVr/8/
Note: the background is blue in order to see the white borders.
Edit:
If you want some functionality, you can add it later, but I think that the basis should be with CSS.
See my code with some functionality here: http://jsfiddle.net/DebVr/11/
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabindex=index+1;
});
$('#bar1>li>a').focus(
function(){$(this).siblings('ul').show();}
);
$('#bar1>li>a').blur(
function(){$('#bar1>li>ul').hide();}
);
Edit 2:
If you want to hide again the submenu when clicked, use the following code:
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabIndex=index+1;
});
$('#bar1>li>a').focus(function(){
$(this).siblings('ul').addClass('show');
});
$('#bar1>li>a').mousedown(function(){
$(this).siblings('ul').toggleClass('show');
});
$('#bar1>li>a').blur(function(){
$(this).siblings('ul').removeClass('show');
});
And CSS:
#bar1>li>ul.show{
display:block;
}
See it here: http://jsfiddle.net/DebVr/16/
Edit 3:
In the code above, I replaced obj.tabindex with obj.tabIndex, and updated the jsfiddle.
The problem is that if you click on the submenu, the anchor loses focus and then the submenu dissapears. On Chrome it can be easily fixed setting the focus event to #bar1>li instead of #bar1>li>a, but then the event doesn't work on firefox... I'm working on a solution, but meanwhile you can use http://jsfiddle.net/DebVr/16/.
Edit 4:
Finally, the fixed code: http://jsfiddle.net/DebVr/18/
It works on Chrome, Firefox and IE.

jQuery UI Draggable, Snapping to a Grid

I have two containers. A thumbnail container, and a "page" container. Both are divs. Thumbnails can be dragged back and forth between the two containers. I have revert on the thumbnails set to 'invalid', so they snap back to one of the two containers if they are dropped outside of either one of them.
The thumbnails must snap to a 20x20 grid inside the "page" container. This is so client the client can put the thumbnails in the "page" container in any place, but still be able to line them up neatly.
The problem is the draggable 'grid' option doesn't seem to work too well for this. It seems the "grid" is determined by the draggables location when you start dragging it, rather than acting as if the page has a real grid that can be snapped to.
Is there a way to fix this so the grid is based off the "page" container, rather than the position of the draggable when you start dragging it?
Check the snapping example on the Jquery UI Site:
http://jqueryui.com/demos/draggable/#snap-to
You can take their same example and specify both a grid and a snap parameter.
Then the snap will be based off of the top left corner of the snap selector.
$( "#draggable5" ).draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] });
The example on the Jquery site will now let the "80x80" box snap based on the big container.
In your situation it might be easiest to create a div with 100% width and height, then set the snap: selector (using css selectors) to that div, then specifying a grid to snap to...
Good Luck
Maybe you could try to round the starting position to the nearest 20 pixels by using the start event on the draggable.
Something like (untested...):
$('#draggable').draggable(
{snap : grid: [20,20]},
{start : function(event, ui) {
var startPosition = $(ui.draggable).position();
$(ui.draggable).css({
'left' : (Math.round(startPosition.left/20)*20)+'px',
'top' : (Math.round(startPosition.top/20)*20)+'px'});
}
}
);
I'm trying myself to achieve that but I'm cloning the dragged element to another container so that's even more tricky ;-)
I still have to figure out how to set the position of the helper in the start event...
Of course it will only work if the starting position is already absolute (like when dragged).
As a matter of fact, I've nearly achieved it by applying this method to the stop event and removing the grid property.
You don't get any visual feedback when moving the object around because there's no grid per se anymore, but when dropping it, it goes to your own grid:
stop: function(event, ui) {
var stopPosition = $(ui.draggable).position();
$(ui.draggable).css({'left' : (Math.round(stopPosition.left/20)*20)+'px', 'top' : (Math.round(stopPosition.top/20)*20)+'px'});
}
Here's a working example:
http://jsfiddle.net/qNaHE/3/

Categories