Keep QTip Tooltips from going off screen? (Bound to body?) - javascript

I have QTips:
eventRender: function (event, element, view) {
element.qtip({
content: event.title + event.hours,
position:{
target: 'mouse'
},
// show: { event: 'click' },
hide: { event: 'mousedown mouseleave' },
style: {
width: 200,
padding: 5,
color: 'black',
textAlign: 'left',
border: {
width: 1,
radius: 3
},
classes: 'custSideTip'
}
});
}
CSS:
.custSideTip
{
position:fixed !important;
right:0 !important;
max-width:200px !important;
}
But they go off the page...
I tried right and fixed position and nothing seems to work...
The right coordinate of the tip should never exceed the body.right / page.right... if that makes sense..
Thanks

Taken from here.
You can try to use viewport config:
position: { viewport: $(window) }

This worked for me and other examples didn't with some error in jQuery code. Perhaps some version discrepancy?
position: { viewport: $(document.body) }

Related

How to execute a function after the end of a cytoscape animation?

I have a function that swaps the position of two nodes.
figlio.animate({
position: posInizPadre,
style: {
backgroundColor: 'green'
}
}, {
duration: 2000
});
padre.animate({
position: posInizFiglio,
style: {
backgroundColor: 'red'
}
}, {
duration: 2000
});
I'd like to execute a function after the padre.animate() function has ended.
I tried to use the complete property in animate() but it skips the animation and immediatly executes the function.
I even tried to use setTimeout but I get the same result, the function is immediatly executed and there is no animation
The animation works if i use it by itself
You need to use the complete callback:
complete: A function to call when the animation is done.
figlio.animate({
position: posInizPadre,
style: {
backgroundColor: 'green'
}
}, {
duration: 2000,
complete: function(){
console.log('Animation complete');
}
});
I have done one example which is working fine with complete function
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.5.3/cytoscape.min.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}]
});
cy.animate({
pan: { x: 50, y: 50 },
zoom: 1,
style: {
backgroundColor: 'red'
},
complete:function(e){
console.log('Complete');
},
}, {
duration: 2000
});
</script>
</body>
</html>

Adding text Javascript progressbar

I would like to add a description text to my progress bar. This description text shoud appear at the left top of the bar. The best way to do it is by modifying my Javascript. It should be very easy to do but i don't have a lot of knowledge in js and I don't know how to do it.
Here is the code :
HTML :
<div id="cont"></div>
CSS :
#cont {
margin: 10px;
width: 100%;
height: 5px;
position: relative;
}
JS :
var bar = new ProgressBar.Line(cont, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#ed1100',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#ed1100'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
bar.animate(1.0); // Number from 0.0 to 1.0
It also uses another JS you can find here : http://progressbarjs.readthedocs.org/en/1.0.0/
Code in use :
https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/
Can someone help me to add this description text ?
You mean like this?
https://jsfiddle.net/k5v2d0rr/1996/
You could just extend the "bar" object with your own function:
bar.addText = function(text) {
jQuery(this._container).append("<label>" + text + "</label>");
}
You then call your function after loading your bar.
bar.animate(1.0); // Number from 0.0 to 1.0
bar.addText("Hi");
Note: for simplicity I've added jQuery for DOM manipulation.

Change tooltip position/arrow

I have a tooltop in my area map that I've done which I'm using http://qtip2.com/
my code when I call the tooltip is the same one in this question Tooltip on map area tag
jQuery(document).ready(function (e) {
jQuery('area').qtip({
style: {
classes: 'qtip-dark'
},
events: {
show: function(event, api) {
api.set({
'content.text': api.elements.target.attr('title')
});
}
}
});
});
But my tooltip is always on the bottom right corner of my area, is there any way I can let it on my top right corner instead?
Find the below answer it will helpful to you.
jQuery(document).ready(function (e)
{
jQuery('area').qtip({
style:
{
classes: 'qtip-default qtip qtip-light qtip-rounded',
width: '250px',
height: '70px',
tip: true
},
position:
{
my : 'bottom left',
at: 'top right',
adjust: {
method: 'none none', // Requires Viewport plugin
resize: true
},
},
events:
{
show: function(event, api)
{
api.set
({
'content.text': api.elements.target.attr('title')
});
}
}
});
});
Thanks to Chiral Patel's comment I've found a way, thank you!
jQuery(document).ready(function (e)
{
jQuery('area').qtip({
style:
{
classes: 'qtip-default qtip qtip-light qtip-rounded',
width: '250px',
height: '70px',
},
position:
{
my : 'bottom left',
at: 'top right',
method:'none'
},
events:
{
show: function(event, api)
{
api.set
({
'content.text': api.elements.target.attr('title')
});
}
}
});
});

jQuery fullcalendar - events

I'm working with jQuery fullcalendar (version 2.7.1).
This is what I want to do:
Now I can set the background to red but the text doesn't appear. This is what I'm doing:
var m = moment('2016-09-19');
$('#calendar').fullCalendar({
// put your options and callbacks here
left: 'title',
center: '',
right: 'prev,next',
weekends: false,
weekNumbers: true,
defaultView: 'month',
defaultDate: m,
events: [
{
start: '2016-09-19',
allDay : true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000'
},
{
start: '2016-09-20',
allDay : true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000'
}
]
});
This is how it looks:
So the text isn't added... . And the color is much lighter than the specified color.
As you can see I also didn't add 'today' to my right navigation but it's added anyway ... .
I also wonder how I can limit the navigation of months. That they for example only can select months september, october, november in 2016.. .
Can anyone help me with this questions?
You can use eventAfterRender callback. In this callback append string FULL to element parameter. You can apply CSS styling to this using event-full class.
The background-color is lighter because there is an opacity of 0.3; change it to 1 using event-full class.
To hide today button you have to set left, center, right properties in header object.
To limit the navigation of months you can use viewRender callback.
JS
var m = moment('2016-09-19');
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'title',
center: '',
right: 'prev,next'
},
weekends: false,
weekNumbers: true,
defaultView: 'month',
defaultDate: m,
events: [{
start: '2016-09-19',
allDay: true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
}, {
start: '2016-09-20',
allDay: true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
}],
eventAfterRender: function (event, element, view) {
element.append('FULL');
},
viewRender: function (view, element) {
var start = new Date("2016-09-01");
var end = new Date("2016-11-30");
if (end < view.end) {
$("#calendar .fc-next-button").hide();
return false;
} else {
$("#calendar .fc-next-button").show();
}
if (view.start < start) {
$("#calendar .fc-prev-button").hide();
return false;
} else {
$("#calendar .fc-prev-button").show();
}
}
});
CSS
.event-full {
color: #fff;
vertical-align: middle !important;
text-align: center;
opacity: 1;
}
WORKING DEMO
I'm using a CSS-driven solution since it seems easier in this case to just let the library do what it is intended to do and work around it. The "Today" button has a specific class so I'd display: none that. The Event objects can accept a className prop. Using that, I positioned a :before element to create the "FULL" text. Lastly, your color variation is due to an opacity of 0.3 on those cells. Setting that to 1 shows the full red background-color that is being applied. \
.fc-today-button {
display: none;
}
.event-full {
position: relative;
opacity: 1;
&:before {
content: "FULL";
position: absolute;
color: #fff;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
}
and the JS:
var m = moment('2016-09-19');
$('#calendar').fullCalendar({
// put your options and callbacks here
left: 'title',
center: '',
right: 'prev,next',
weekends: false,
weekNumbers: true,
defaultView: 'month',
defaultDate: m,
events: [
{
start: '2016-09-19',
allDay : true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
},
{
start: '2016-09-20',
allDay : true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
}
]
});
http://codepen.io/amishstripclub/pen/zqQqxx
I would use the disabled attribute instead of showing and hidding buttons:
https://jsfiddle.net/uz0mx059/
viewRender: function(view, element) {
var start = new Date("2016-09-01");
var end = new Date("2016-11-30");
if (end < view.end) {
$("#calendar .fc-next-button").attr('disabled',true);
return false;
} else {
$("#calendar .fc-next-button").attr('disabled',false);
}
if (view.start < start) {
$("#calendar .fc-prev-button").attr('disabled',true);
return false;
} else {
$("#calendar .fc-prev-button").attr('disabled',false);
}
}
Plus a bit of css:
button:disabled {
color: grey;
}

How to set the tip dimensions with jQuery qTIp?

I'm having some trouble with modifying qTip's tip size (x,y).
I tried to add the style: { tip: { x:2,y:2 } } in all sorts of ways, but failed.
How can I add it to the following script?
// Status Tooltips Style
$.fn.qtip.styles.statusTooltips = {
background: '#333333',
color: 'white',
textAlign: 'center',
border: {
width: 1,
radius: 5,
color: '#333333'
},
tip: 'leftMiddle',
name: 'dark'
}
// Status Tooltips Init
$('.status[title]').qtip({
style: 'statusTooltips',
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftBottom'
}
}
});
it's simpe enough:
$("#mytip").qtip({style: { tip: { size: { x: 10, y: 10}} }});
http://craigsworks.com/projects/qtip/docs/tutorials/#tips
For qtip 2, you can just set the width and height properties of the tip object:
$("#mytip").qtip({
style: {
tip: {
width: 10,
height: 10
}
}
});
See http://qtip2.com/plugins#tips.width
Got it!
$('.status[title]').qtip({
style: {background:'#333333',
color:'white',
textAlign:'center',
border:{width: 1, radius: 5, color: '#333333'},
tip:{corner:'leftMiddle',size: { x:6,y:10 }}
},
position: {corner: {target:'rightMiddle',tooltip:'leftBottom'}}
});
Thanks, StackOverflow, for being an occasional rubber duck :)

Categories

Resources