I am using Fullcalendar plugin. To be clear, I am not too good in css. The issue that I am facing is that when I drag the event from external-events div then the event that I drag hides while dragging on the cell. I don't know which property of css needs to be change in order to make the draggable event visible while dragging from external-events div. I tried to set 'display:block' for the 'external-event' class but it does not make the event visible while dragging. Any help is greatly appreciable. Thank you in advance.
Remove overflow:hidden from .widget DIV. Write like this:
.widget{
overflow:visible;
}
Related
There is already a similar question asked but there is no response(Draggable JQuery UI scroll issue when using within iframe).
I want scroll to work for the draggable object in IFrame. Please suggest.
Here is the jsFiddle - http://fiddle.jshell.net/Msd7v/29/
Have a look at this http://fiddle.jshell.net/vryz2t1o/1/, I managed to make it work when you are scrolling down. You need to try to figure out scrolling up and you are done.
I am trying to use the ShowHide effect that comes with Kevin Moore's widget package here:
http://dart-lang.github.io/widget.dart/#showhide
Not sure how to use this. Anyone got an example I can look at ?
Basically all I want is for a dropdown to show with one of those effects if a certain event happens.
Your tips appreciated.
Thanks.
You need to add a listener for an event to an element in the DOM, and then use ShowHide.toggle(element, effect) to trigger an effect. Here is an example which listens for a click on a button, and toggles FadeEffect on an image each time it is pressed:
var button = query("#fadeButton")
..onClick.listen((event) {
ShowHide.toggle(query("#fadeImage"), effect: new FadeEffect());
});
If you wanted to fade in/out a dropdown when you click on a menu bar, then substitute "fadeButton" for the menu which listens for clicks, and "fadeImage" with the dropdown element.
Also, any other effect can be substituted for FadeEffect, such as DoorEffect, ScaleEffect, ShrinkEffect, etc.
I'm using jQuery UI. When I drag element in the iframe and I move mouse out of the iframe, the element is still in the draggable state. So when I move mouse back to the iframe, I can still drag it, like I would had left mouse button down.
How to avoid it? So that if I start to drag element, it stops when I go out of the iframe in the last draggable position?
You need to trigger a mouseup() when your pointer leaves the iframe so that the element being dragged is no released.
$('body').one("mouseleave", function(){
$('body').mouseup();
});
There were more questions asked pertaining to my solution, so please refer my question posted here for more details
I am working on drag and drop tool using jQuery UI's sortable widget.
I'd like to add a message into an empty div where something can be dragged into, like: "drag here". I'd like to remove this message as soon as something is in that div. There will be times when the page loads with something already in that div, so it can't be only on action, but onload needs to check it too.
How do I go about it?
Here's my code:
$("#divFrom, #divTo").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
You should be able to set up a draggable, and droppable and tap into droppable's drop event handler, which is fired when an item is dropped:
$("#target").droppable({
drop: function() {
// Empty the droppable div:
$(".message").remove();
}
});
Demo here: http://jsfiddle.net/andrewwhitaker/rUgJF/2/
As for doing something similar on load, if you provided your markup it would make providing a solution a little easier (is there a specific element inside the droppable div that you could check for?)
Hope that helps.
For now, it's only draggable within viewpoint.
You can't do this, it's part of the page/frame it's in. If this were allowed, you'd see advertisements outside the frame as well :)
If you want to drag it outside of the scrolled view in the page, that's the default behavior, you can test it here.
Nick Craver, I think you did not understand me. If you set up a simple div element to be draggable, you could drag it beyond the viewpoint. But that just doesn't work you use the dialog. What ads are you talking about?