I have a box in this jsfiddle - http://jsfiddle.net/stevea/C8Uce/6/ - that I've made draggable. When I hit the Snap button I'd like to change the draggable mode to snap to a 50x50 grid, but it's not working.
$(function() {
$('#box').draggable();
$('#snap').click(function() {
$('#box').draggable('option',grid, [50,50]);
});
});
Does anyone see the problem?
Thanks.
You are missing quotes around grid:
Change your initialization to:
$('#box').draggable('option','grid', [50,50]);
Fiddle
With something like this, the console can be your best friend. It may have led you directly to the problem:
Uncaught ReferenceError: grid is not defined
Related
I am using the metronic 5 and I tried to add tooltip with data-toggle="m-tooltip" with title="Some Title"
When the page is rendered and I hover on the element, the tooltip is triggered, but a class show is not added to the tooltip which is required to add opacity:1 to the element and get the element into view.
Can anyone suggest any change or Am I missing any script?
Thanks for the help.
Did you initialize the tooltips on your page?
$(function ()
{
$('[data-toggle="m-tooltip"]').tooltip()
});
https://getbootstrap.com/docs/4.0/components/tooltips/
I want to use the jQuery Touch Punch plugin to do the following effect:
I have a Div which is only shown a little bit on the left side of my iPad screen. Now I want to use jQuery Touch Punch to pull it out. I can't seem to find how to restrain the properties, so I can write something like:
left-keyframe1: 0;
left-keyframe2: -48%;
I hope you get the idea. Also, when I pull out I want it to animate back when you didn't pull it out over 50%. Is there some documentation about this? I can't seem to find this. I looked through all examples on this site:
http://touchpunch.furf.com/
Thanks in advance!
I have found the solution:
$('.your-div').draggable(
{
scroll: false,
start:function(){$startpos = $(this).position();$(this).css({'transition':'0','-webkit-transition':'0'});},
stop:function(){
$position = $(this).position();
if($position.left > $startpos.left)
{
$(this).animate({'left':'0'});
}
else
{
$(this).animate({'left':'-52%'});
}
$(this).css({'transition':'youramounts','-webkit-transition':'youramounts'});
},
axis:'x'
});
Note: I added transition:0, because I had two eventtriggers and transition is conflicting with the dragfunction. The click and the drag. So on click I changed the css and did an animation via transition. If you do not have "transition" on your element, you don't need to include this.
I want to display a tooltip using twitter bootstrap in rails. The tooltip is to be displayed on page load. So for doing this I have added the following in my markup of the field:
rel="tooltip" title="Press CTRL+C To Copy"
And then I have added the following code into my application.js file:
window.onload = function(){
var text_input = document.getElementById ('url_copy');
text_input.focus ();
text_input.select ();
$('#url_copy').tooltip('show')
}
Fortunately it's displaying the tooltip. Nut unfortunately it's displaying it on the top. But I want to place it on right. I know I have to use a placement: 'right' or something like that as mentioned http://twitter.github.com/bootstrap/javascript.html#tooltips
But how should the code exactly look like??
Thanks in Advance...
On the page that you linked it shows you examples.
To place it on the right use the following html.
Tooltip on right
http://twitter.github.com/bootstrap/javascript.html#tooltips
I'm using the following code so that if a person clicks on one of the candlesticks in the chart, the tooltip actually stays on the page:
events: {
click: function(event) {
if (cloneToolTip)
{
chart.container.firstChild.removeChild(cloneToolTip);
}
cloneToolTip = event.currentTarget.chart.tooltip.label.element.cloneNode(true);
chart.container.firstChild.appendChild(cloneToolTip);
I'd like to move this from the series to the chart so that they can click anywhere on the page and have the tooltip stay. However, event.currentTarget.chart doesn't exist if they don't click on a candlestick. I looking through the result and can't find the corresponding tooltip. Can someone shed some light on this for me? Much appreciated!!
You can use this instead of event.currentTarget.chart as the context is the chart itself. Hence this.tooltip should give you the tooltip that you are looking for.
I have been googlgling around and it seems I don't get any answer :/
I'd like to know how can I make sure that the dialog title will "stick" to the top of the document even if I've scrolled down in the main page?
I tried the option "position" top, bottom but with no luck.
Thanks for answering!
Finally I come up with the solution:
Using the "open" event to trigger the window.scrollBy(0,window.innerHeight - dialogHeight);
$("#open").click(function (){
$("#dialog").dialog({
open:function(){
window.scrollBy(0,window.innerHeight - 850);
},
modal:true,
width:850,
height:850
});
});
This will ensure the title of the dialog will be shown at first rather than the bottom part.