Updating jquery-ui tooltip during hide animation breaks it - javascript

Whenever you update the content of a jquery-ui tooltip while the hide-animation is running, it'll pop back into visibility and enter some broken state where it is visible forever and unresponsive to events.
Yeah, i know, i know, the lib is dead.
Still, is there any way to get around this bug? I need to update my tooltip in 1 second intervals because it has a timer in it, and I would like to use a fade-out animation somehow.
Demo:
Just move the mouse in and out of the first block a couple of times:
$("#animated").tooltip( {items: "div", content: ""} );
$("#not-animated").tooltip( {items: "div", hide: false, content: ""} );
setInterval( function() {
$("#animated").tooltip("option", "content", Math.random().toFixed(3));
$("#not-animated").tooltip("option", "content", Math.random().toFixed(3));
}, 500 );
.item {
display: inline-block;
background-color: DeepSkyBlue;
padding: 12px;
}
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="item" id="animated">hiding animated</div>
<div class="item" id="not-animated">hiding not animated</div>
</body>
</html>

You could try updating the .ui-tooltip-content element manually.
$(function() {
function getRandom() {
return Math.random().toFixed(3);
}
function updateContent() {
$(".ui-tooltip-content", $("#animated").tooltip("widget")).html(getRandom());
$("#not-animated").tooltip("option", "content", getRandom());
}
$("#animated").tooltip({
items: "div",
hide: 200,
content: getRandom
});
$("#not-animated").tooltip({
items: "div",
hide: false,
content: getRandom
});
var intv = setInterval(updateContent, 500);
});
.item {
display: inline-block;
background-color: DeepSkyBlue;
padding: 12px;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="item" id="animated">hiding animated</div>
<div class="item" id="not-animated">hiding not animated</div>

Related

Slick.JS pauseOnHover Event

If I have pauseOnHover set to true, how do I fire an event always when sliders is paused? and when slider is unpaused? I've tried:
$('.slider-element').hover(function(){}).mouseleave(function(){})
But It doesn't match 'pauseOnHover'
<* --- update --- *>
You just need to use jQuery hover event, the slider by default will pause, though you can still include it in the options for the slider.
$('.slick').hover(function() {
console.log('slider is paused');
}, function() {
console.log('slider will resume again');
});
Below is a working example:
How about using slickPause and slickPlay,
in combination with mouseover and mouseleave seems to be working fine.
You can also use jQuery built-in hover function, you are using the callback wrong though. For more information, please check:
https://api.jquery.com/hover/
For more information on how to work with slick methods: https://github.com/kenwheeler/slick/#methods
$('.slick').slick({
autoplay: true,
autoplaySpeed: 1000,
pauseOnHover: true // you don't need to specify this, as it is the default value
});
// MOUSEOVER AND MOUSELEAVE
/*$('.slick').on('mouseover', function() {
$(this).slick('slickPause');
console.log('slider is paused');
});
$('.slick').on('mouseleave', function() {
$(this).slick('slickPlay');
console.log('slider can resume');
});*/
// JQUERY BUILT-IN HOVER
$('.slick').hover(function() {
$('body').addClass('orange');
}, function() {
$('body').removeClass('orange');
});
.orange {
background: orange;
}
.slide {
background: #333;
color: #fff;
line-height: 200px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="slick">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
</div>

Duplicating Entries On Subsequent Months

Weird one. Have two school building calendars being fed by public Google Cal. Can click month-to-month without error, but when I hide one building cal and click to the next month, I end up with duplicate entries that continue to double then triple and continue duping as you click month to month. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fullcalendar.css" rel="stylesheet" />
<link href="css/fullcalendar.print.css" rel="stylesheet" media="print" />
<link type="image/x-icon" href="http://www.woostercityschools.org/sites/woostercityschools.org/files/favicon_wcs.png" rel="shortcut icon">
<link type="image/x-icon" href="http://www.woostercityschools.org/sites/woostercityschools.org/files/favicon_wcs.png" rel="icon">
<script src="js/moment.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.js"></script>
<script>
var allCals = [
{
id: 1,
name: 'High School',
url: 'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE#group.calendar.google.com/public/basic',
color: '#0057b8',
visible: true
},{
id: 2,
name: 'Middle School',
url: 'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE#group.calendar.google.com/public/basic',
color: '#4b4c4c',
visible: true
}
];
var gCals = function(){
var ret = $.grep(allCals, function(a){
return a.visible === true;
});
console.log('called gCals()');
console.log(ret);
return ret;
}
$(document).ready(function() {
//Hide/Show all
$('#hide-all').click(function(){
$('.calendar-list button').each(function(){
$(this).removeClass('btn-calendar-hide');
});
$.each(allCals, function(index,value){
//$('#calendar').fullCalendar('removeEventSource', this);
this.visible = false;
});
$('#calendar').fullCalendar('removeEvents');
});
$('#show-all').click(function(){
$('.calendar-list button').each(function(){
$(this).addClass('btn-calendar-hide');
});
$('#calendar').fullCalendar('removeEvents');
$.each(allCals, function(index,value){
$('#calendar').fullCalendar('addEventSource', allCals[index]);
this.visible = true;
});
});
//Populate buttons
$.each( allCals, function( index, value ){
var tmp = $('<button/>', {
type: 'button',
class: 'btn btn-block btn-calendar',
style: 'background-color: '+value.color,
text: value.name,
id: 'btn_calendar'+value.id,
click: function () {
if ($(this).hasClass('btn-calendar-hide')){
//$('#calendar').fullCalendar('removeEventSource', value);
$( this ).removeClass('btn-calendar-hide');
value.visible = false;
} else {
//$('#calendar').fullCalendar('addEventSource', value);
$( this ).addClass('btn-calendar-hide');
value.visible = true;
}
updateCalendar();
}
});
if (value.visible === true){
tmp.addClass('btn-calendar-hide');
}
$('.calendar-list').append(
tmp
);
});
//Display the calendar
$('#calendar').fullCalendar({
googleCalendarApiKey: 'AIzaSyDiJjIhfkuYrKzwrj0GS3wBN1erVcMsJmM',
eventSources: allCals,
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
},
header: {
left: 'month,basicWeek,basicDay',
center: 'title',
right: 'today prev,next'
}
});
function updateCalendar(){
$('#calendar').fullCalendar('removeEvents');
$.each(allCals, function(index,value){
if (value.visible === true){
$('#calendar').fullCalendar('addEventSource', allCals[index]);
}
});
}
});
</script>
<style>
a.fc-event:hover, a.fc-event:focus{
color:#000;
}
#loading {
display: none;
position:absolute;
width:96%;
padding:10px;
z-index:999;
border: solid 1px #f8e166;
margin:1% 2%;
}
#loading h3 {
margin:2%;
}
#calendar {
margin: 20px auto;
}
.btn {
border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}
.btn-calendar {
background-image: none;
color: #FFFFFF;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
opacity: 0.5;
}
.btn-calendar-hide {
opacity: 1;
}
.btn:hover, .btn:focus {
color: #FFFFFF;
text-decoration: none;
}
#media print {
a[href]:after {
content: none;
}
}
</style>
</head>
<body>
<div id="loading" class="bg-warning">
<h3 class="text-center">Loading...</h3>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 hidden-print"> <img class="img-responsive center-block" style="margin-top:2em; margin-bottom:2em" src="logo-district.jpg" alt="Wooster City Schools" >
<div class="calendar-list">
<h4>Calendars
<div class="btn-group">
<button id="show-all" type="button" class="btn btn-xs">Show All</button>
<button id="hide-all" type="button" class="btn btn-xs">Hide All</button>
</div>
</h4>
</div>
</div>
<div class="col-md-10">
<p class="text-right hidden-print" style="margin-top:2%"><i class="glyphicon glyphicon-print"></i> Print</p>
<div id="calendar"></div>
</div>
</div>
</div>
</body>
</html>
The problem you've got is that calling $('#calendar').fullCalendar('removeEvents'); deletes the events currently visible on the calendar, but it doesn't remove the source of those events.
That means that when you then go on to call $('#calendar').fullCalendar('addEventSource' next, you are simply adding the same source of events over and over again. Next time you press "next" or "previous" to change the date range, this triggers fullCalendar to request new events for that date range from all the available sources. Since you haven't removed any sources, but have kept adding more, you can see how this then leads to duplication of events in the display.
In one part of your code you've commented out a call to $('#calendar').fullCalendar('removeEventSource' ...but actually that (or the plural "removeEventSources", where appropriate) should be the correct approach. If you remove the source then it will both remove the existing events and also prevent future requests to that source from adding more events again.

Bootstrap - multiple tooltip binds to the same element ("html")

I would like to add tooltip to dynamically created div-s. In my case only html tag doesn't change. Simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<script type="text/javascript">
(function(){
$(document).ready(function(){
$('html').tooltip({
"title": function(){
return $(this).attr("a");
},
"selector": ".a"
});
$('html').tooltip({
"title": function(){
return $(this).attr("b");
},
"selector": ".b"
});
});
})();
</script>
<body>
<div class="a" a="testa" style="margin: 100px; width: 20px; height: 20px; background-color:grey;">testa</div>
<div class="b" b="testb" style="margin: 100px; width: 20px; height: 20px; background-color:purple;">testb</div>
</body>
</html>
The first tooltip works, while the second one not. I know work around by using only one bind, but the question is if this is possible to bind tooltip multiple times to the same element (just like it is in the example)?
You can use the tooltip constructor like this for each tooltip you want to run:
new $.fn.tooltip.Constructor($('html'), {
"title": function(){
return $(this).attr("name");
},
"selector":'.a',
});
Here is a JSFiddle

How to properly render the kendo chart custom labels

I neede to customize labels (like a bubbletalk) of a kendo line chart.
I build a template (like in this kendo test: http://dojo.telerik.com/#PMcDonou/URiZA. I took this demo from an admin solution in a kendo forum thread) and it work when load the page first time, but in some situations kendo UI not render the labels.
The problem appears in this two cases:
When I refresh manually chart with a button that to click on it you need to
scroll the page.
When i refresh the page(F5) after that i scrolled down the page.
I noticed that the position of the labels moves upwards based on the offset from top given by scrolling.
I did this fiddle for you to see the first case.
For see an example of the second case look the fiddle in a full screen page, try to scroll down and refresh the page(F5) and try this in multiple positions of scroll. Thank you for attention and help me please.
function createChart(){
var dataSource = new kendo.data.DataSource({
data: [{
category: "A", value: 10
}, {
category: "B", value: 20
}, {
category: "C", value: 30
}]
});
var labelTemplate = kendo.template($("#labelTemplate").html());
$("#chart").kendoChart({
dataSource: dataSource, series: [{
type: "line", style: "smooth", field: "value", categoryField: "category", labels: {
visible: true, template: "#= category #", visual: function(e) {
var dataItem = $.grep(dataSource.data(), function(item) {
return item.category === e.text;
})[0];
// Label origin position (same as where the original label would be)
var origin = e.rect.origin;
var content = $('<div/>')
.css({
position: "absolute",
font: "11px Arial,Helvetica,sans-serif",
left: 0,
top: 0
})
.appendTo(document.body)
.html(labelTemplate(dataItem));
var visual = new kendo.drawing.Group();
kendo.drawing.drawDOM(content).done(function(group) {
// Place drawn shapes on original label position
group.transform(kendo.geometry.transform().translate(origin.x, origin.y));
visual.append(group);
// Remove element from DOM
content.remove();
});
return visual;
}
}
}]
});
}
$(function(){
createChart();
$("#refreshChart").on("click", function(){
$("#chart").data("kendoChart").refresh();
})
});
.talk-bubble {
width: auto;
height: auto;
background-color: red;
color: white;
border-radius: 30px;
}
.talktext {
padding: 1em;
text-align: left;
line-height: 1.5em;
}
.talktext p {
/* remove webkit p margins */
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<!-- Div for chart -->
<div id="chart"></div>
<!-- Example div container -->
<h1>Go down and click button</h1>
<div style="height:3000px; background-color: yellow;"></div>
<!-- Button that refresh chart -->
<h3>Click button</h3>
<button type="button" id="refreshChart">Refresh chart</button>
<h1>Now go up, label not rendered</h1>
<!-- Label Template Custom -->
<script id="labelTemplate" type="text/x-kendo-template">
<div class="talk-bubble">
<div class="talktext">
<p>Value: #= kendo.format('{0:n2}', data.value) #</p>
</div>
</div>
</script>
</body>
</html>

Can't drag a textbox properly using jquery

I am new to jquery. I am trying to drag and resize a textbox using jquery. But i am facing some problems. I could drag and re-size the text box. But.. just look at the below screenshot.
To drag the text box, first i have to drag and move that "Edge" (showed in arrow mark), out of the box.
In all mean, it is not a good idea. So can somebody help me to simply drag the textbox?
below is my code
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Constrain movement</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#containment-wrapper { width: 300px; height:300px; border:2px solid #ccc; padding: 10px; }
#custombox { width: 160px; height: 30px; padding: 0.5em; float: left; }
</style>
<script>
$(function()
{
$("#custombox").draggable({ containment: "#containment-wrapper", scroll: false }).resizable();
});
</script>
<body>
<div id="containment-wrapper">
<div id="custombox" >
<textarea></textarea> </p>
</div>
</div>
</body>
</html>
When i tried the code in jsfiddle.net, the textbox is non-dragable. Only resize is possible. But i copied the code to notepad and run it on chrome. Then the problem in the screenshot appeared.
After drag the edge outside the textbox, the box can be dragged to anywhere in the containment.
Check this
$(function()
{
$("#custombox").draggable({ scroll: false }).resizable();
});
Fiddle

Categories