I currently have an element which contains both an input field and an overlay.
The overlay prevents the input field to get focus on dragging the parent.
HTML:
<div class="draggableObject ui-draggable"> // z-index 300
<div class="objectContent">
<input value="500"></input> // z-index 301
<div class="overlay"></div> // z-index 302
</div>
</div>
Javascript/jQuery:
$(".overlay").on('click touchstart', function(){
$(this).parent().find('input').focus();
});
$('draggableObject').on('drag', function(){
$(this).find('input').blur();
});
If I drag the element and release the mousebutton, it causes the overlay to trigger the click event. How can I prevent this from happening?
I tried preventDefault() and stopPropagation(), but niether of these seem to work properly. Or I might've misplaced them.
Related
Is there anyway to make the button hit area larger in jquery mobile. i have two buttons in the header of the app and if i don't touch theme right in the middle they won't work.
thanks
One way to expand hit area around button is to add invisible wrapper around button with some padding. Then attach tap event to the wrapper and trigger tap event on button itself.
Here is example
html
<div id='button-wrap' style='padding: 20px;'>
<a id='button' href="#" data-role="button" >Button</a>
</div>
javascript
$('#button-wrap').on('tap', function(e){
$(this).find('a').trigger('tap');
});
$('#button').on('tap', function(e){
e.stopPropagation();
alert('tapped!');
});
I'm suing jquery ui draggable on a list of items that can be dropped on a .droppable list of other items. Here's a jsFiddle to show what I'm trying to do:
<div id="container">
<div id="left-pane" class="pane">
<div class="item">Item A</div>
<div class="item">Item B</div>
<div class="item">Item C</div>
<div class="item">Item D</div>
</div>
<div id="right-pane" class="pane">
<div class="item">Item E</div>
<div class="item">Item F</div>
<div class="item">Item G</div>
<div class="item">Item H</div>
</div>
$('.item').draggable({
helper: 'clone',
appendTo: '#contentpane',
cursor: 'move'
});
$('.item').droppable();
The panes have a fixed height, and overflow-y: auto so that we can scroll inside to see hidden elements.
When dragging an element from a list to the other, the lists do not scroll since I use appendTo and the dragged item is not in the list. Is there a way to make the list 'scrollable' when I drag an item over? otherwise it is not possible to drop the item at the bottom of the list, let's say drop 'Item A' on 'Item H' on the fiddle example
Be able to use the scroll features from different container is really not easy to do.
I opended a topic on this subject. You will find an edit of the question with a functionnal workaround.
Check this related question : JqueryUI, drag elements into cells of a scrolling dropable div containing large table
About your last remark, you could place your item at the boom of the list using the sortable property. http://jqueryui.com/sortable/
Well the only way I found to do it is to detect the position of the dragged element and scroll the droppable container, with a smooth effect so that it will scroll like doing it from the mouse wheel.
I am using
$('.show_hide').click(function(){
//$(".slidingDiv").slideToggle();
$('#slidingDiv').fadeOut('500');
});
but it collapse div very fast
this is my script:
<div class="search-form" id="search-form">
<div class="slidingDiv" id="slidingDiv">
Content goes here
</div>
<a class="show_hide" id="show_hide" style="display: inline;">Search slider</a>
</div>
When I click on bottom grey bar I want to toggle slidingDiv div Up/Down with slow/smooth effects.
I tried all codes but it toggle very fast though I set time delay also.
You can use integer values instead a string to represent the milliseconds.
Try:
$('.show_hide').click(function(){
//$(".slidingDiv").slideToggle();
$('#slidingDiv').fadeOut(1000);
});
higher the number, slower the effect.
I create modal dialog with form inside it (with some text input).
And I just can't enter the text inside the textbox. Dialog blocks keyboard input.
Here is my simplified example:
<div id="modal-dialog">
<label for="my-text">TRY to input text...</label>
<textarea id="my-text" style="position:relative; z-index:1"></textarea>
</div>
<script type="text/javascript">
var dialog = $('#modal-dialog').dialog({ modal: true });
</script>
Note: You may ask - why did I mentioned about "position:relative; z-index:1"? Because it works fine without it. But I can't remove it because of design.
Note: not modal dialog works fine too.
I'm using jQuery 1.6.2 + jQuery UI 1.8.14
The z-index is the problem. Here is an exemple ( http://jsfiddle.net/c3BPP/ ) of your code with a bigger z-index and it works.
You can also lower the z-index of the JQuery dialog:
var dialog = $('#modal-dialog').dialog({
modal: true,
zIndex: 500
});
By default, it is 1000. Of course your relative or absolute positioned elements needing text input need to be greater than the z-index of the dialog still.
I found that the <form> tag in my dialog was getting a z-index of 1, preventing any of the controls from working. Instead of changing the z-index for each control, simply changing the z-index of the <form> tag to 1010 (a value higher than the default of the dialog) worked for me.
Adding tabindex="-1" helped me resolve this problem.
Here's an example:
<div class="modal fade" tabindex="-1" id="error" role="dialog">
What a mouthful.
Basically I have a parent <div> and inside that an <iframe>. I need an element inside the iframe to be the handle to drag the parent div. Is this even possible?
I have tried:
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle'));
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);
It is targeting the right DOM element but it just won't drag. It might be possible to overlay a hidden div ontop of the iframe but I have found the iframe takes the event over the div when position is absolute. Strange.
try this
$('#Div').draggable({ iframeFix: true });
this should work
I decided to take a stab at this and boy, it's a lot of work with little progress using an internal iframe node as a handle. Anyway, here are two solutions, the first one doesn't work really well, but if you can get it to work, it may be more desirable.
main.html (plagiarized from the demo)
<div id="draggable" class="ui-widget-content" style="position:relative;">
<p class="ui-widget-header">I can be dragged only by this handle</p>
<iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe>
</div>
inner-handle.html
<html>
<head>
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
</head>
<body>
<div id="innerHandle">handle</div>
</body>
</html>
JavaScript
$(function () {
var moveEvent;
$(document).mousemove(function (e) {
moveEvent = e;
});
$("#draggable").draggable();
$('iframe', '#draggable').load(function () {
$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) {
$('#draggable').draggable().data('draggable')._mouseDown(moveEvent);
return false;
});
});
});
It took me a while to find something that "worked." The problem here was that since the mousedown event occurred on an element inside the iframe, the mouse event is relative to the iframe, not the main document. The workaround is to have a move event on the document and grab the mouse position from there. The problem, once again, is that if the mouse is inside of the iframe, it is "not" moving according to the parent document. This means that the drag event only happens when the mouse reaches the edge of the iframe into the parent document.
A workaround for this might be to manually generate events with the calculated position of the iframe relative to its mouse movement. So when your mouse moves within the iframe, calculate its movement using the coordinate of the iframe to the parent document. This means that you need to use the event from the mousedown and not the mousemove,
$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) {
// do something with e
$('#draggable').draggable().data('draggable')._mouseDown(e);
return false;
});
The second solution is the way you have mentioned, have an absolute positioned div over the iframe itself. I have no trouble in getting the div to be on top of the iframe, that is,
<div id="draggable" class="ui-widget-content" style="position:relative;">
<p class="ui-widget-header">I can be dragged only by this handle</p>
<iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe>
<div style="position: absolute; height: 30px; width: 30px; background-color: black; z-index: 1000;"></div>
</div>
The problem with your div being behind the iframe might be because the z-index is off. If you declare your div before the iframe and you didn't specify the z-index, then the iframe will be on top.
Whichever way you choose, good luck!
what happens when you do this (with firebug activated):
var frameContent = $('iframe',node).contents()
var handle = frameContent.find('#handle');
console.debug(frameContent, handle)
Does handle contain a list of elements? And if so, look carefully at the Document object which is frameContent - is the URL "about:blank"? It's just a hunch, but if you get these outputs, it's probably executing the jQuery selector before the frame content has loaded (i.e., before the #handle element exists).
In which case, you can add an event to the IFRAME'd document, and communicate with the parent frame via window.parent.