If you build a simple dragger:
$(document).ready(function(){
$('#tomove').draggable({
axis: 'x',
drag: function(event, ui) {
mouseUp();
}
});
});
And you try to stop it programmatically:
function mouseUp() {
if($('#tomove').offset().left > 400) {
$('#tomove').trigger('mouseup');
}
}
You will get this message in error console:
this.helper is null
Is there any way to fix this?
Thanks for your help.
It looks like you're just trying to constrain movement on the draggable element, is this correct? Have you seen this page: http://jqueryui.com/demos/draggable/#constrain-movement
EDIT
How about this instead then: (sample page, does what you're asking - be mindful of the jquery inclusion location)
Also notice I changed the name of the method to be something a little more apropos. This will not stop the user from being able to drag back to the left. I didn't think you wanted to actually stop them if they hit 400 (or whatever other wall).
If you want to do that, you merely $('#element').draggable('destroy')
<html>
<head>
<title>Draggable jQuery-UI Width Block</title>
<script src="jquery-1.4.2.min.js" ></script>
<script src="jquery-ui-1.8.1.custom.min.js" ></script>
</head>
<body>
<div id="tomove" style="width:100px;height:20px;background:silver;">
<span>some text</span>
</div>
<script>
$(document).ready( function() {
$('#tomove').draggable({
axis: 'x',
drag: function(event, ui) {
dragBlock( ui );
}
});
});
function dragBlock( ui ) {
if( ui.position.left > 400 ) {
ui.position.left = '400px';
}
if( ui.position.left < 0 ) {
ui.position.left = '0px';
}
}
</script>
</body>
</html>
Related
I have an application with multiple stack of card, I would like to have a drag&drop ability between these stacks.
These stacks have a different layout in term of offset relative to the parent element.
I simplified to the max in this fiddle
https://jsfiddle.net/dtghbo7f/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crapette HTML 5 + jQuery</title>
<style type="text/css">
.card, .box {
width: 71px;
height: 96px;
position: absolute;
}
#box1 {
top:31px;
left:25px;
}
#box2 {
top:31px;
left:255px;
}
.card {
background-image: url[...]
}
.box {
background-position: -1px -1px;
background-image: url[...]
}
</style>
<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<script>
$("body").ready(function() {
$('<div>').attr('id','card0').addClass('card').appendTo($('#box1'));
for(let i=1;i<7;i++){
$('<div>').attr('id','card'+i).addClass('card').appendTo($('#box1 div.card:not(:has(*))')).css('top',5).css('left',5);
}
$('<div>').attr('id','card7').addClass('card').appendTo($('#box2'));
for(let i=1;i<7;i++){
$('<div>').attr('id','card'+(i+7)).addClass('card').appendTo($('#box2 div.card:not(:has(*))')).css('top',15);
}
$(".card").draggable({
revert: true,//'invalid',
revertDuration: 500,
start: function(event, ui) {
$(this).parents(".box").css('z-index',2);
},
drag: function(event, ui) {
},
stop: function(event, ui) {
$(".box").css('z-index',1);
if($(this).parents('.box').attr('id') == 'box1') {
$(this).css('top',5).css('left',5);
} else {
$(this).css('top',15).css('left',0);
}
},
});
$(".box, .card").droppable({
activate: function( event, ui ) {return false;},
drop: function( event, ui ) {
let source_offset = ui.draggable.parent().offset();
let destination_offset = $(this).offset();
$(this)
.append(ui.draggable);
ui.draggable
.css('top', parseInt(ui.draggable.css('top')) + parseInt(source_offset.top) - parseInt(destination_offset.top))
.css('left', parseInt(ui.draggable.css('left')) + parseInt(source_offset.left) - parseInt(destination_offset.left));
console.log(ui.draggable.css('top'), ui.draggable.css('left'));
$('.card, .box').droppable('enable');
$('.card:has(*), .box:has(*)').droppable('disable');
},
});
$('.card, .box').droppable('enable');
$('.card:has(*), .box:has(*)').droppable('disable');
});
</script>
</head>
<body>
<div id='box1' class='box'>
</div>
<div id='box2' class='box'>
</div>
</body>
</html>
As you can see, when you drop a card on the other stack, the revert options move the card to the original position relative to the parent. As this offset change on different stack, I would like to be able to modify this originalPosition when the droppable stack is determined. Can you help me ?
Map is showing in all browsers like chrome,Firefox but the map is not showing in IE 11,this code is working in chrome but its not working in IE11 once add the load event and loop the data,answer is appreciable? but its working in chrome if i use load event also
<html>
<head>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/index.js?1"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://www.highcharts.com/samples/maps/demo/all-maps/jquery.combobox.js"></script>
<script type="text/javascript">
$(function() {
var mapData = Highcharts.maps['custom/world'];
var data = [{"Name": "Australia","status": "Live"}];
$('#container').highcharts('Map', {
chart: {
events: {
load: function() {
for (let i = 0; i < this.series[1].data.length; i++) {
this.series[0].data.forEach((el) => {
if (el['name'] == this.series[1].data[i].Name) {
if(this.series[1].data[i].status == 'Live'){
el.update({color: "lightgreen"});
}
}
return el
})
}
}
}
},
series: [{
name: 'Countries',
mapData: mapData,
}, {
name: 'Countries options',
visible: false,
data: data
}]
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
The answer is simple - you are using arrow function which is not supported in IE11: caniuse.com/#feat=arrow-functions
If you want to make your code working on IE11, it is not enough to change arrow function to normal function, because you will have different this. Using arrow function your this is the same this like in your load() function. But when you define a normal function() (instead of arrow function), your this will be changed. That's why you need to define var chart = this; in your load() function and replace this to chart in few places. Here you have working code:
chart: {
events: {
load: function() {
var chart = this;
for (let i = 0; i < this.series[1].data.length; i++) {
this.series[0].data.forEach(function(el) {
if (el['name'] == chart.series[1].data[i].Name) {
if(chart.series[1].data[i].status == 'Live'){
el.update({color: "lightgreen"});
}
}
return el
})
}
}
}
},
Working IE11 demo: https://codepen.io/raf18seb/full/RYjavx/
$(document).tooltip({
items:'.tooltip-object',
tooltipClass:'preview-tip',
position: { my: "left+15 top", at: "right center" },
content:function(callback) {
$.get('/resources/generate_tooltip.php', {
id:$(this).data("tooltipid")
}, function(data) {
callback(data);
});
}
});
Say I have the above script that shows tooltips when users hover over a tooltip-object link. Right now the tooltip displaying works fine but if a user rapidly moves their mouse over a bunch of links they will all call the /resources/generate_tooltip.php script even if they will never display.
How would I add a delay to the tooltip so that a user has to keep their mouse on the tooltip-object for a set amount of time before the tooltip is generated?
Inside your content:function(callback) { , add checking if none of the tooltips is triggered with this:
if ($(".your-tooltip-class").length == 0) {
$.get('/resources/generate_tooltip.php', {
id:$(this).data("tooltipid")
}, function(data) {
callback(data);
});
}
UPDATE: You can try something like this.instead of alert make your ajax call.
var timeout;var counter=0;
$(function() {
$( ".selector" ).tooltip();
});
$(".selector").hover(function(e){
var $this=this;
if (!timeout) {
timeout = window.setTimeout(function() {
timeout = null;
$($this).tooltip( "option", "content", "Awesome title!"+(counter++) );
}, 1000);//delay of 1 second
}},clearIt);
function clearIt() {
if (timeout) {
window.clearTimeout(timeout);
timeout = null;
}
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input title="hi" class='selector'>
I can't figure out why a simple jquery ui dialog box won't show the "x" close option. Instead it shows a minimize icon in the title bar.
I'm using this as a reference: http://api.jqueryui.com/dialog/#option-modal
Here's a screen shot:
my html:
<div id="sibebar-dialog" title="Info">
<p></p>
</div>
My javascript:
function showDialog(text) {
if (text == undefined || text == null) {
text = "Info";
}
$("#sibebar-dialog").text(text);
$("#sibebar-dialog").dialog({
modal: true,
resizable: false,
show: { effect: "blind", duration: 200 },
buttons: {
"OK!": function () {
$(this).dialog("close");
}
}
});
}
Perhaps something in my css settings are interfering here ?
thanks,
Bob
I had the same experience. It was solved when i added the necessary library:
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
It should work for you.
I am suddenly getting a most unwelcome error on this page:
Error: $("#accordion").accordion is not a function
My jQuery code is as follows:
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h4", autoHeight: false, collapsible: true });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
// controls the sidebar navigation action
$('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
return false;
});
$(window).ready(function() {
$('li.products ul').show();
$('li.technical ul').show();
$('li.tips ul').show();
});
});
</script>
I has worked for weeks and today...errors all the way.
I would appreciate any help in determining the cause of the error.
Thanks.
Found the problem:
This:
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
does not link to anything anymore.
The requested URL
/svn/tags/latest/ui/ui.accordion.js
was not found on this server.