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')
});
}
}
});
});
Related
I'm starting to use JsPanel in a project at work and I have some doubts on why the 'autoposition' is not being applied between some panels.
I have 4 panels: A, B, C and D.
A panel:
jsPanel.create({
id: 'A',
theme: 'primary',
headerTitle: 'A panel',
position: { my: 'left-top',
at: 'left-top',
offsetX: '0px',
offsetY: '0px',
autoposition: 'down'
},
contentSize: '450 250',
content: '<p> Test test test</p>',
callback: function () {
this.content.style.padding = '20px';
},
onbeforeclose: function () {
return confirm('Are you sure?');
}
});
B panel:
jsPanel.create({
id: 'B',
theme: 'primary',
headerTitle: 'B panel',
position: { my: 'center-top',
at: 'center-top',
offsetX: '0px',
offsetY: '0px',
autoposition: 'down'
},
contentSize: '450 250',
content: '<p> Test test test</p>',
callback: function () {
this.content.style.padding = '20px';
},
onbeforeclose: function () {
return confirm('Are you sure?');
}
});
C panel:
jsPanel.create({
id: 'C',
theme: 'primary',
headerTitle: 'C panel',
position: { my: 'right-top',
at: 'right-top',
offsetX: '0px',
offsetY: '0px',
autoposition: 'down'
},
contentSize: '450 250',
content: '<p> Test test test</p>',
callback: function () {
this.content.style.padding = '20px';
},
onbeforeclose: function () {
return confirm('Are you sure?');
}
});
D panel:
jsPanel.create({
id: 'D',
theme: 'primary',
headerTitle: 'D panel',
position: { my: 'left-top',
at: 'left-bottom',
of: '#A',
autoposition: 'up'
},
contentSize: '450 250',
content: '<p>Test test test</p>',
callback: function () {
this.content.style.padding = '20px';
},
onbeforeclose: function () {
return confirm('Are you sure?');
}
});
Reading the documentation of the 'position' option, specifically the 'autoposition' attribute, says that you can set a value to add a gap between panels to prevent them from piling up on each other:
'down' for panels positioned using either 'left-top', 'center-top' or 'right-top' for both my: and at: setting autoposition to 'down' will automatically add a vertical offset downwards to each elmt in order to prevent them from piling up on each other. Removing a jsPanel will automatically reposition the remaining panel in the same stack.
'up' for panels positioned using either 'left-bottom', 'center-bottom' or 'right-bottom' for both my: and at: setting autoposition to 'up' will automatically add a vertical offset upwards to each elmt in order to prevent them from piling up on each other. Removing a jsPanel will automatically reposition the remaining panel in the same stack.
but for me it's not being applied. I've tried to remove the autoposition in A or D but no result.
So what am I doing wrong or what have I misunderstood?
Regards.
-- Edit 1:
I have achieved the separation adding:
offsetY: '8px',
to panel D but I think that this is not the correct solution...
I have found the problem. It was a misunderstanding with positions. Seeing example number 5 that adds panels one below the other the positions are:
my: 'right-top',
at: 'right-top',
and then you set:
autoposition: 'down',
So in panel D I had to change:
position: { my: 'left-top',
at: 'left-bottom',
of: '#A',
autoposition: 'up'
},
to
position: { my: 'left-top',
at: 'left-top',
of: '#A',
autoposition: 'down',
offsetY: 4px
},
The offsetY is optional. By default JsPanel adds a 4px separation but if you look on the image, the horizontal separation is 4px + 4px so I add 4 extra pixels to match visually the horizontal separation with the vertically separation.
Regards!
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>
I have a code which refresh chart when window change size:
$(window).resize(function () {
plot.replot({ clear: true, resetAxes: false });
});
But I would like to move legend down on small screens. Is this possible with jqPlot?
$(window).resize(function () {
if (window.innerWidth < 700) { plotgraph.replot({ resetAxes: true, legend: { placement: 'insideGrid', location: "s", rowSpacing: '2px' } }); }
else { plotgraph.replot({ resetAxes: true, legend: { placement: 'outsideGrid', location: "ne" } }); }
});
I am trying to build a site based on Elegant Themes "Explorable" WP Theme, which is in turn based on gmap3 jQuery plugin. It makes WP Posts shown of the map as markers. These markers have overlays, that tell post names and categories, but are not clickable. I am trying to make them linked to actual post pages. Yet something is wrong.
Below is the code with my added part. When I uncomment the part I added, the maps is not loading at all. Please tell me, what I am doing wrong.
function et_add_marker(marker_order, marker_lat, marker_lng, marker_description) {
var marker_id = 'et_marker_' + marker_order;
$et_main_map.gmap3({
marker: {
id: marker_id,
latLng: [marker_lat, marker_lng],
options: {
icon: "<?php echo get_template_directory_uri(); ?>/images/blue-marker.png"
},
events: {
click: function (marker) {
if (et_active_marker) {
et_active_marker.setAnimation(null);
et_active_marker.setIcon('<?php echo get_template_directory_uri(); ?>/images/blue-marker.png');
}
et_active_marker = marker;
<!--marker.setAnimation( google.maps.Animation.BOUNCE);-->
marker.setIcon('<?php echo get_template_directory_uri(); ?>/images/red-marker.png');
$(this).gmap3("get").panTo(marker.position);
$.fn.et_simple_slider.external_move_to(marker_order);
},
mouseover: function (marker) {
$('#' + marker_id).css({
'display': 'block',
'opacity': 0
}).stop(true, true).animate({
bottom: '15px',
opacity: 1
}, 500);
},
mouseout: function (marker) {
$('#' + marker_id).stop(true, true).animate({
bottom: '50px',
opacity: 0
}, 500, function () {
$(this).css({
'display': 'none'
});
});
}
}
},
overlay: {
latLng: [marker_lat, marker_lng],
options: {
content: marker_description,
offset: {
y: -42,
x: -122
}
}
/* This is my code, that doesn't work */
events: {
click: function (marker) {
window.location.href = "<?php 'the_permalink' ?>";
}
} /*End of my code*/
}
});
}
There was a comma missing between options and event. Thanx to Dr.Molle.
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) }