Here is what I have so far:
<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip Testings</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).tooltip({
items: '.tooltip',
show: 100,
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: function( callback ) {
var msgid = this.id.split('_')[1];
$.ajax({
type: 'post',
url: '/tooltip.php',
data:'i='+msgid,
success: function( data ) { callback( data ); }
});
}
});
});
</script>
</head>
<body>
<p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
<p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
<p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
<p><a class="tooltip" id="i_860" href="articles/programming-in-java.html">Java Article</a></p>
</body>
</html>
The above is working as it's suppose to work, however, I would like to trigger the tooltip only after the mouse hovers the link for an specific amount of time (like 2 seconds, for example).
Also, I would like to cancel it's trigger if the user moves the mouse out of the link before the specified delay time expires.
Can anybody please help me out on this?
Thank you very much.
I finally managed to achieve what I was looking for.
Here is the final result:
<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip Testings</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).tooltip({
items: '.tooltip',
show: 100,
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: function( callback ) {
var ARTid = this.id.split('_')[1];
var TTtmr = setTimeout( function() {
$.ajax({
type: 'post',
url: '/tooltip.php',
data: 'i='+ARTid,
success: function( data ) { callback( data ); }
});
}, 800 );
$('.tooltip').mouseleave( function() { clearTimeout( TTtmr ); } );
}
});
});
</script>
</head>
<body>
<p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
<p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
<p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
<p><a class="tooltip" id="i_283" href="articles/programming-in-java.html">Java Article</a></p>
</body>
</html>
you can try this:
$(function() {
$(document).tooltip({
items: '.tooltip',
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: 'Testing jquery tooltips!',
show: {
effect: "slideDown",
delay: 250
}
});
});
the show property accepts object parameter with the following properties;
effect, delay, duration, and easing.
http://api.jqueryui.com/tooltip/#option-show
Related
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>
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.
Two problems with jquery-ui dialog:
it always open at the top left of the screen, I need it to be centered
The close box (X) and the close button work only the first time the
dialog is opened.
When the openNewEvent function is called again after closing the first instance of the dialog, the dialog opens but can't be closed, because the buttons do not work. No errors on the console.
Maybe it is worth to mention that the code runs inside a Office 365/SharePoint environment.
The function for opening a specific web page in a jquery-ui dialog looks like this:
function openNewEvent() {
var page = "http:/mypageurl";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="1160" height="1900"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: { my: "center", at: "center", of: "window", collision: "none"},
height: 1020,
minHeight: 1020,
width: 1200,
buttons: {
"Ok": function () {
jQuery(this).dialog("close");
}
},
create: function (event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
You can test it with this HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: { my: "center", at: "center", of: "window", collision: "none"},
height: 550,
minHeight: 550,
width: 350,
buttons: {
"Ok": function () {
jQuery(this).dialog("close");
}
},
create: function (event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
Both things working, check jQuery version you're using is 3.3.1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
height: 550,
minHeight: 550,
width: 350,
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
}
},
create: function(event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
Croppie uses a DIV container and not a CANVAS to do its cropping. I am trying to find out how to save the resulting cropped image from this DIV to a directory on the Server, such as via a SAVE button.
Here is my HTML code ...
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Demo Croppie</title>
<link rel="Stylesheet" type="text/css" href="css/croppie.css" />
<link rel="Stylesheet" type="text/css" href="css/sweetalert.css" />
</head>
<body>
<div id="testCanvas"></div>
<div class="actions" style="margin-left: auto; margin-right: auto; width:250px;">
<button class="vanilla-result">Result</button>
<button class="vanilla-rotate" data-deg="-90">Rotate Left</button>
<button class="vanilla-rotate" data-deg="90">Rotate Right</button>
</div>
<p><button onclick="function();">Save</button></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/croppie.js"></script>
<script src="js/demo.js"></script>
<script src="js/sweetalert.min.js"></script>
<script>
Demo.init();
</script>
</body>
</html>
Here is my JavaScript configurations ...
function demoVanilla() {
var vanilla = new Croppie(document.getElementById('testCanvas'), {
viewport: { width: 300, height: 300, type: 'square' },
boundary: { width: 350, height: 350 },
enableOrientation: true
});
vanilla.bind({
url: 'imgs/demo-1.jpg',
orientation: 1
});
document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
vanilla.result('canvas').then(function (src) {
popupResult({
src: src
});
});
});
$('.vanilla-rotate').on('click', function(ev) {
vanilla.rotate(parseInt($(this).data('deg')));
});
}
The rest comes by default without changes from Croppie at https://github.com/Foliotek/Croppie such as demo.js, etc.
Here is an example on how to make a download button. If you figure out how this works, then you just need to replace the <a>link with for a <form> with a submit button,
var vanillaResult = document.querySelector('.vanilla-result'),
vanillaSave = document.querySelector('.vanilla-save'),
vanillaRotate = document.querySelector('.vanilla-rotate');
function demoVanilla() {
var vanilla = new Croppie(document.getElementById('vanilla-demo'), {
viewport: {
width: 100,
height: 100
},
boundary: {
width: 300,
height: 300
},
enableOrientation: true
});
vanilla.bind({
url: 'http://foliotek.github.io/Croppie/demo/cat.jpg',
orientation: 1
});
vanillaResult.addEventListener('click', function() {
vanilla.result('canvas').then(resultVanilla);
});
vanillaSave.addEventListener('click', function() {
vanilla.result('canvas').then(saveVanilla);
});
vanillaRotate.addEventListener('click', function() {
vanilla.rotate(parseInt($(this).data('deg')));
});
}
function resultVanilla(result) {
swal({
title: '',
html: true,
text: '<img src="' + result + '" />',
allowOutsideClick: true
});
}
function saveVanilla(result) {
swal({
title: '',
html: true,
text: '<a id="save" href="' + result + '" download="result"><img src="' + result + '" /><br><button>Download</button></a>',
showConfirmButton: false,
showCancelButton: true,
allowOutsideClick: true,
});
}
demoVanilla();
body {
min-width: 360px;
}
.actions {
width: 300px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo Croppie</title>
<link rel="Stylesheet" type="text/css" href="http://foliotek.github.io/Croppie/croppie.css" />
<link rel="Stylesheet" type="text/css" href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" />
</head>
<body>
<div id="vanilla-demo"></div>
<div class="actions">
<button class="vanilla-result">Result</button>
<button class="vanilla-save">Save</button>
<button class="vanilla-rotate" data-deg="-90">Rotate Left</button>
<button class="vanilla-rotate" data-deg="90">Rotate Right</button>
</div>
<div id="result"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://foliotek.github.io/Croppie/croppie.js"></script>
<script src="http://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script>
</body>
</html>
GOT IT!
Thanks to one of the developers of Croppie "thedustinsmith" and "TWFPSP" for directing me to the right eternal resources and their offered info.
$( document ).ready(function() {
vanillaRotate = document.querySelector('.vanilla-rotate');
var $uploadCrop = $('#upload-demo');
$uploadCrop.croppie({
viewport: {
width: 250,
height: 250,
type: 'square'
},
boundary: {
width: 300,
height: 300
}
});
$uploadCrop.croppie('bind', 'imgs/cat.jpg');
vanillaRotate.addEventListener('click', function() {
vanilla.rotate(parseInt($(this).data('deg')));
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'original'
}).then(function (resp) {
$('#imagebase64').val(resp);
$('#form').submit();
});
});
});
HTML body ...
<form action="test-image.php" id="form" method="post">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
Send
</form>
<button class="vanilla-rotate" data-deg="-90">Rotate</button>
test-image.php ...
<?php
if(isset($_POST['imagebase64'])){
$data = $_POST['imagebase64'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents('image64.png', $data);
}
?>
Now the rotate function is not working and I am trying to fix it. Seem to not know how to include the orientation configs in this setting which is different than the demoUpload where it is illustrated in the demo file. But at least the saving to the server works great.
I'm trying to show a popup element when user places a mouse over an other element:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#base').hover(
function handleIn(e) {
var popup = $('<img/>', {
id: 'popup',
src: 'http://placehold.it/32x32'
});
popup.css({
'position': 'absolute',
'z-index': 300,
'left': e.pageX - 30,
'top': e.pageY - 30
});
popup.mouseover(function() {
console.log('mouseover');
});
popup.mouseout(function() {
console.log('mouseout');
});
$('#base').append(popup);
},
function handleOut() {
}
);
});
</script>
</head>
<body>
<img id="base" src="http://placehold.it/256x256">
</body>
</html>
Why doesn't the popup element show up? It is added to DOM, but I don't see it.
What am I doing wrong? How can I fix it?
You can't append a child to an <img/> element. See here
Try append it to the parent
$(function() {
$('#base').hover(
function handleIn(e) {
console.log("asd");
var popup = $('<img/>', {
id: 'popup',
src: 'http://placehold.it/32x32'
});
popup.css({
'position': 'absolute',
'z-index': 300,
'left': e.pageX - 30,
'top': e.pageY - 30
});
popup.mouseover(function() {
console.log('mouseover');
});
popup.mouseout(function() {
console.log('mouseout');
});
$('#base').parent().append(popup);
},
function handleOut() {
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="base" src="http://placehold.it/256x256">
By the way, that way you will have a new element on every hover event.
Try with this tooltip example:
<html>
<head>
<link href="Styles/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<img src="images/yourimage.jpg" class='test' data-toggle='tooltip' data-placement='right' title='your custom message' />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>