Develop Reference

How to have default button to close tool tip of tippyjs

I wanted to have close button for every tooltip how can I have that?
Note: I don't want to mess up with design , that is why did not try much , Best solution I'm looking here
Below is demo:
tippy('#t1,#t2,#t3,#t4',{
content: "Error Message",
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
trigger:'manual',
placement:'bottom',
hideOnClick:false,
});
var settings = [{id:"#t1",pos:"top"},{id:"#t2",pos:"bottom"},
{id:"#t3",pos:"left"},{id:"#t4",pos:"right"}];
settings.forEach(function(sett){
var tip = document.querySelector(sett.id);
tippy(tip);
tip._tippy.set({content:"click x",placement:sett.pos});
tip._tippy.show();
});
div.tippy-dummy{
position: relative;
width: 220px;
height: 30px;
background: #333;
color: #fff;
}
div.tippy-dummy span{
position: absolute;
display: inline-block;
background: #715a5a;
right: 0;
top: 0;
}
.tooltip{
display:flex;
justify-content:space-between;
width: 90%;
}
.btn{
width: 90px;
height: 30px;
border: 2px solid #ccc;
border-radius: 6px;
}
.btn:hover{
cursor: pointer;
background:#f05a27;
}
.tooltip{
margin-top:80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.min.js"></script>
<h4>Expected output:</h4>
<div class="tippy-dummy">
Please click X to hide
<span>X</span>
</div>
<hr/>
<div class="tooltip">
<button id="t1" class="btn tippy" title="">top</button>
<button id="t2" class="btn tippy" title="">bottom</button>
<button id="t3" class="btn tippy" title="">Left</button>
<button id="t4" class="btn tippy" title="">Right</button>
</div>
for better view here is codepen: https://codepen.io/anon/pen/aPXKZM
Please help me thanks in advance!!

It's actually even easier than Gifford N.'s answer...
<button data-tippy-content="<span class="closeme">&times;</span>There are many like it but this one is mine!!!!!">
This is my button
</button>
const tippyInstance = tippy('[data-tippy-content]', {
allowHTML: true,
interactive: true,
onShow(instance) {
instance.popper.querySelector('.closeme').addEventListener('click', () => {
instance.hide();
});
},
onHide(instance) {
instance.popper.querySelector('.closeme').removeEventListener('click', () => {
instance.hide();
});
},
});

The action you are looking for is .hide().
To use this action you have to make a couple adjustments to your code:
Add interactive: true to tippy settings.
tippy('#t1,#t2,#t3,#t4',{
...
interactive: true,
...
});`
Assign the .hide(); action to the popper property in your settings.forEach function:
settings.forEach(function(sett){
...
tip._tippy.popper.onclick = function() {
tip._tippy.hide();
}
});
~
PROTIP:
If you want to hide the popper when clicking a specific element within the popper (X, for example) it just takes a little more markup:
Add some markup to the desired element <button class=\"hide\">X</button>
Use the element in the onclick:
settings.forEach(function(sett){
...
var closeBtn = tip._tippy.popper.getElementsByClassName('hide')[0];
closeBtn.onclick = function() {
tip._tippy.hide();
}
Updated Codepen: https://codepen.io/gnowland/pen/wvBzjym?editors=0010

jQuery circle progress bar and percentage text animation when screen visible

I'm a novice in jQuery and I'm using jquery-circle-progress plugin by kottenator. I've four circles and I want to animate its bar and percentage text when it's area visible on the screen. Like most of websites make the effect.
Could anyone please help me to make that effect with a little explanation? Thanks in advance, Dear. My fiddle
HTML:
<section class="firstDiv"></section>
<section class="secondDiv"></section>
<div class="thirdDiv">
<div id="circle1">
<span class="rate">85%</span>
</div>
<div id="circle2">
<span class="rate">90%</span>
</div>
<div id="circle3">
<span class="rate">80%</span>
</div>
<div id="circle4">
<span class="rate">70%</span>
</div>
</div>
CSS:
section{ height: 700px; overflow: hidden;}
.firstDiv{ background: blue;}
.secondDiv{ background: yellow;}
.thirdDiv div{
float: left;
width: 25%;
overflow: hidden;
margin: 50px 0;
position: relative;
}
.rate{
position: absolute;
top: 40%;
left: 25%;
}
JS:
$('#circle1').circleProgress({
value: 0.85,
size: 100,
fill: {
gradient: [ "#FD0000" , "#FD7300", "#FDBD00"]
}
});
$('#circle2').circleProgress({
value: 0.90,
size: 100,
fill: {
gradient: ["#00B050", "#00CA00", "#9EEC00"]
}
});
$('#circle3').circleProgress({
value: 0.80,
size: 100,
fill: {
gradient: ["#FDFD00", "#FDE700", "#CDF500"]
}
});
$('#circle4').circleProgress({
value: 0.70,
size: 100,
fill: {
gradient: ["#123FAA", "#3914AE", "#0B63A3"]
}
});
My fiddle

Ok, It was a pretty good experience. I've solved the problem by using jquery.appear plugin. I've insert my full code into this portion of code:
var el = $('.circle'),
inited = false;
el.appear({ force_process: true });
el.on('appear', function() {
if (!inited) {
el.circleProgress({ value: 0.7 });
inited = true;
}
});
It's a nice plugin, which execute the code when the div(in my case .thirdDiv) on screen. My full JS code is below:
var el = $('.thirdDiv'),
inited = false;
el.appear({ force_process: true });
el.on('appear', function() {
if (!inited) {
$("#circle1").circleProgress({
value: 0.7,
size: 100,
fill: {
gradient: [ "#FD0000" , "#FD7300", "#FDBD00"]
}
});
$("#circle2").circleProgress({
value: 0.90,
size: 100,
fill: {
gradient: ["#00B050", "#00CA00", "#9EEC00"]
}
});
$("#circle3").circleProgress({
value: 0.80,
size: 100,
fill: {
gradient: ["#FDFD00", "#FDE700", "#CDF500"]
}
});
$("#circle4").circleProgress({
value: 0.70,
size: 100,
fill: {
gradient: ["#123FAA", "#3914AE", "#0B63A3"]
}
});
inited = true;
}
});
Thanks everybody :)

how to make responsive drag and drop absolute positioning?

I'm making a dragNdrop web app using JqueryUI. the problem is it's not responsive. Can someone help me with this?
heres my js code
$(document).ready(function() {
$(".draggable").draggable({
helper: "clone",
cursor: 'move'
});
$("#dropzone").droppable({
drop: function (event, ui) {
var canvas = $(this);
if (!ui.draggable.hasClass('object')) {
var canvasElement = ui.helper.clone();
canvasElement.addClass('object');
canvas.find("div").removeClass('activeElement');
canvasElement.addClass('activeElement');
canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging');
canvas.append(canvasElement);
canvasElement.css({
left: (ui.position.left),
top: (ui.position.top),
position: 'absolute',
zIndex: 10
});
canvasElement.draggable({
cursor: 'move',
containment: '#dropzone'
});
}
}
});
im using absolute positioning. how can i make this responsive?

I'm not sure, but I think your issue is with the absolute positioning inside of an element, when that element does not have relative positioning. Consider the following:
<div style="position: relative; width: 200px; height: 200px; background: #ccc;">
<div style="position: absolute; left: 75; top: 90; background: #fff;">Hello World</div>
</div>
The absolute positioning inside of the relative will place the child 75 pixels from the left of the parent, and 90 pixels from the top of the parent. If the parent is not relative, the child would appear 75 picels from the left of the edge of the document and 90 pixels from the top of the document (or the next parent that has relative positioning).
Applying this to your code, you may wish to use something like this: https://jsfiddle.net/Twisty/zzv5gdg2/
HTML
<div id="content">
<div id="element">
<div class="draggable ui-widget-content">
<p>Drag me</p>
</div>
</div>
<div id="dropzone" class="ui-widget-header"></div>
</div>
CSS
.draggable {
width: 90px;
height: 90px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#dropzone {
width: 200px;
height: 200px;
padding: 0.5em;
float: left;
margin: 10px;
position: relative
}
jQuery
$(function() {
$(".draggable").draggable({
helper: "clone",
cursor: 'move'
});
$("#dropzone").droppable({
drop: function(event, ui) {
var canvas = $(this);
if (!ui.draggable.hasClass('object')) {
var canvasElement = ui.helper.clone();
canvasElement.addClass('object');
canvas.find("div").removeClass('activeElement');
canvasElement.addClass('activeElement');
canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging');
canvas.append(canvasElement);
var off = canvas.position();
var canElOff = {
left: ui.position.left - off.left,
top: ui.position.top - off.top
};
canvasElement.css({
left: canElOff.left,
top: canElOff.top,
position: 'absolute',
zIndex: 10
});
canvasElement.draggable({
cursor: 'move',
containment: '#dropzone'
});
}
}
});
});
Again, it's not clear from your post what you are trying to accomplish or what is meant by "responsive". If you'd like, edit your post and provide a better example or further clarity of the issue.

jQuery enlarge image map on mouse over

I have an image over which I created hotspots for hyperlinks using image map. Now I need to enlarge/zoom over the images on mouse over. I have this so far
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').mouseover(function() {
$(this).animate({
width: "110%",
height: "50%"
}, 'slow');
});
});
</script>
</head>
<body>
<p>
<map id="ImgMap0" name="ImgMap0">
<area alt="" coords="4, 14, 67, 34" id="a" class="mapping"
href="#" shape="rect" />
<area alt="" coords="5, 55, 70, 74" id="b" class="mapping"
href="# shape="rect" />
....
<img alt="" class="auto-style1" height="529" src="Tools.jpg"
width="800" usemap="#ImgMap0" /></p>
</p></body>
But the animate () is not working. Alert is being called so I know mouseover() is working. Any ideas for enlarging the area in image map?
JS Fiddle link
https://jsfiddle.net/z2Lkf8p0/

You cannot enlarge image's map in any way.
You can do this with another way. I'd created a fiddle for it.
http://jsfiddle.net/ebilgin/141bkx84/
HTML
<div class="container">
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<div class="map1 map"></div>
<div class="map2 map"></div>
</div>
CSS
.container {
position: relative;
width: 600px;
}
.container img {
position: absolute;
z-index: 1;
}
.map {
position: absolute;
background: #F0F;
z-index: 2;
}
.map1 {
left: 10px;
top: 10px;
width: 100px;
height: 100px;
}
.map2 {
right: 10px;
top: 10px;
width: 100px;
height: 100px;
}
JS
$(".map").on("mouseenter", function () {
$(this).animate({
width: "200px",
height: "200px"
});
});
Area to CSS convert
If all areas types are rectangle its easy. n1,n2,n3,n4
n1: y beginning
n2: x beginning
n3: y ending
n4: x ending
You can convert it.
left: n2;
top: n1;
width: n3 - n1;
height: n4 - n2;

Try this,
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').hover(function() {
alert('Mouse Hovered');
//some statements
});
});
</script>
Good Luck.. ['}

How to control animate function on button click?

I have two divs named "arrow" and "inner". I am trying to control the animate slide function when the div is clicked but have been unfortunate. The issue is noticeable when clicking very fast on the "arrow" div after user stops clicking the div is still sliding. I set the animate function under a small delay but I still experience lag. Here is my example code:
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script language="javascript">
$(document).ready(function() {
var out = 0;
$("#arrow").click(function(){
if(out==0)
{
$("#inner").animate({marginRight: "0px"}, 500 );
out=1;
}
else
{
$("#inner").delay(400).animate({marginRight: "-100px"}, 500 );
out=0;
}
});
});
</script>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
<div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>
<div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>

Just change your code
$("#inner").animate({marginRight: "0px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
and
$("#inner").animate({marginRight: "-100px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
Please see following Link for example : http://jsfiddle.net/UAYTw/1/
you can also use $("#inner").stop(true, false).animate() instead of $("#inner").stop(true, true).animate(). as per your choice.

Using Ravi's code props to him - toggle is cleaner in my opinion
DEMO
$(document).ready(function() {
$("#arrow").toggle(
function(){
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
},
function(){
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
}
);
});

You can use .animate().stop() method to stop the animation.
Demo: http://jsfiddle.net/YKn7c/

this may help:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
function () {
$("#effect").stop().animate({ opacity: '0', height: '130' }, 300);
}
);
edited:
If You dont want to be closed:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
null
);