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">×</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
Related
Hi all sorry for the poor English. I have very little experience using javaScript/ES6.
I am new to Vuejs I have a button in which if I click, it should start an animation of a bordered box from one div to another div which is fixed.
click button
<v-btn icon #click="doSomething()">
<v-icon>mdi-content-save-outline</v-icon>
</v-btn>
div which have to animate or can be used some animation from JS is fine as well.
<div id="divAnimation" style="border:1px solid #000000; width:50px; height:50px;"></div>
show when clicked and hide when reaced the fixed dive
Place where it should animate to.
<div id="animationReached" style="position:fixed;top:10%;left:0">I am Fixed</div>
You can achieve using jquery to add the classname when you click the button,
Here use the sample code,
Style
.mystyle
{padding: 25px; background-color: coral; color: white; font-size: 25px; box-sizing: border-box;}
Html Code
<button id="myDIV" onclick="myFunction()">Button Default</button>
Script
function myFunction() {
var element, name, arr;
element = document.getElementById("myDIV");
name = "mystyle";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
205/5000
I don't know if I understand your question well, but I think you want to toggle CSS settings on the click of a button, right? If so, look at these two examples changing by class and inline style (I think with Jquery it's not cool):
`
<template>
<div>
<button #click="changeStyle()">alternate 01 </button>
<div :style="styleDiv">
<span>
<h1>text 01</h1>
</span>
</div>
<div :class="styleDiv2">
<span>
<h1>text 02</h1>
</span>
</div>
</div>
</template>
<script>
export default {
data(){
return{
on: false,
styleOn:{
backgroundColor: 'green',
width: '100%',
height: '100%'
},
styleOff:{
backgroundColor: 'gray',
width: '50%',
height: '50%'
}
}
},
methods:{
changeStyle(){
this.on = !this.on
}
},
computed:{
styleDiv(){
return this.on ? this.styleOn : this.styleOff
},
styleDiv2(){
return this.on ? 'styleOn' : 'styleOff'
}
}
}
</script>
<style>
.styleOn{
background-color: green;
width: 100%;
height: 100%;
}
.styleOff{
background-color: gray;
width: 50%;
height: 50%;
}
</style>
`
I am having some serious trouble understanding Fancybox. I suppose my initial question is that I am using Fancybox 3 and assume that it has all features of previous versions?
What I am trying to achieve is simply change the caption position to inside rather than the default. I have tried so many different JS options to get a titleposition: 'inside' and it changes absolutely nothing...
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="fancybox/jquery.fancybox.js"></script>
</body>
<footer>
<section class="socialmedia">
<a class="sm" href="images/snapcode.png" data-fancybox data-caption="Snapchat"><img src="images/snapchat.png"></a>
</footer>
</html>
I am using the defaults
Of course, it is too late but maybe help someone.
Explanation: copy the caption and put it in the .fancybox-content element. And to the original set display: none. Position the caption bottom of picture using transform: translateY(100%). When initializing the slide, the fancybox box takes the height of the hidden title and sets the padding-bottom to the .fancybox-slide element. Thus, the title will not overlap the image or go beyond window borders.
JS (jquery):
$('[data-fancybox="gallery"]').fancybox({
beforeShow: function() {
$('.caption--image').remove();
},
afterShow: function() {
var caption = $(".fancybox-caption"),
innerCaption = caption.clone().addClass('caption--image');
$(".fancybox-slide--current .fancybox-content").append(innerCaption);
caption.not('.caption--image').addClass('caption--bottom');
}
});
CSS:
.fancybox-caption.caption--image {
width: 100%;
bottom: 0;
padding: 10px;
color: #fff;
transform: translateY(100%);
}
.fancybox-inner > .fancybox-caption {
display: none;
}
My solution:
CSS:
.fancybox-caption {
display: block;
margin-right: auto;
margin-left: auto;
padding: 0;
bottom: 13px;
text-align: right;
}
.fancybox-caption:before {
background: 0 0;
}
.fancybox-caption:after {
border-bottom: 0;
}
.fancybox-caption.none {
display: none;
}
.fancybox-caption>span {
background-color: #343434;
color: #B6B6B6;
display: inline-block;
padding: 5px 15px;
}
Jquery:
$('[data-fancybox="images"]').fancybox({
idleTime: false,
infobar: false,
beforeShow: function() {
$(".fancybox-caption").addClass('none');
},
afterShow: function() {
$(".fancybox-caption").wrapInner("<span/>");
var imageWidth = $(".fancybox-slide--current .fancybox-content").width();
$(".fancybox-caption").css("width", imageWidth);
setTimeout($(".fancybox-caption").removeClass('none'), 200);
}
});
This maybe can help you.
$('[data-fancybox]').fancybox({
protect: true,
afterShow: function() {
var imageWidth = $(".fancybox-slide--current .fancybox-image-wrap").width();
$(".fancybox-caption").css("width", imageWidth);
}
});
I want to set up a functionality for a button that causes text to appear underneath it on click.
For example, when you click a button that says "Sign up now", text would appear underneath the button that says "Are you a member, yes or no?".
"Yes" and "No" would be links that bring you to a different page depending on how you answer.
My button code so far (just html and styling done):
<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up
Now</a>
I'm new with this kind of functionality so any help would be greatly appreciated!
Thanks!
Adjust the href attribute as you want.
$('#btn').click(function() {
$('#modal').fadeIn();
});
a {
display: block;
text-decoration: none;
color: white;
background-color: #333;
width: 100px;
padding: 20px;
border-radius: 5px;
margin: 0 auto;
}
#modal {
width: 300px;
height: 120px;
background-color: #ccc;
border-radius: 5px;
margin: 0 auto;
display: none;
}
#modal h3 {
text-align: center;
padding: 10px;
}
#modal a {
width: 50px;
display: inline-block;
text-align: center;
margin: 0 auto;
height: 10px;
vertical-align: middle;
line-height: 10px;
}
.btns {
width: 200px;
margin: auto;
}
a:hover {
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/ticket-link" target="_blank" class="ticket-button" id='btn'>Sign Up Now</a>
<div id='modal'>
<h3>Are you a member?</h3>
<div class='btns'>
Yes
No
</div>
</div>
You could use the onClick function to unhide text, or elements, below it.
Sign Up Now
<span style="display:none;" id="text">This is some text :D</span>
simple way:
Sign Up Now
<script>
function confirmSignup(){
if(confirm("Are you sure?"))
{
window.location.href="http://somelocation.com/sign-up";
}
}
</script>
Like #Pety Howell said, you can use the onClick function to unhide the text. Here's a pretty straightforward way to do it with jQuery.
$(function() {
$('.link').on('click', function() {
$('.span').addClass('open');
});
});
.span {
display: none;
}
.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click me
<span class="span">I'm hidden!</span>
Working fiddle: https://jsfiddle.net/3gr03yzn/4/
You could use jQuery toggle() function.
HTML :
<button id="member">
Are you Member ?
</button>
<div class="answer">
Yes<br />
No
</div>
JS :
$("#member").click(function() {
$(".answer").toggle();
});
CSS :
.answer {
display:none;
}
The working example on jsFiddle.
Hope this helps
Try this code.
please vote if this code helpful to you
function execute(){
var x = document.getElementById('link_list');
var y =document.getElementById('btn');
if(x.style.visibility==="hidden"){
y.style.visibility="hidden";
x.style.visibility="visible";
}
}
<button onclick="execute()" id="btn">sign up</button>
<div id="link_list" style="visibility:hidden">
Are you a member, <button onclick="window.open('http://sparrolite.blogspot.in')">Yes</button> or <button onclick="window.open('google.com')">no</button>
</div>
Most answers mentioned here either uses
jQuery or,
onclick attribute which is obtrusive javascript.
Here's how to achieve the desired behavior using vanilla, unobtrusive JavaScript.
window.onload = function() {
var button = document.querySelector('.ticket-button');
var info = document.querySelector('.info');
info.style.display = 'none';
var dispalyInfo = false;
button.onclick = function(e) {
e.preventDefault(); /* prevent page from navigating to a new page onclick */
if (dispalyInfo) {
info.style.display = 'none';
dispalyInfo = false;
} else {
info.style.display = 'initial';
dispalyInfo = true;
}
}
}
.ticket-button {
display: block;
}
Sign Up Now
<span class="info">Are you a member, yes or no?</span>
References:
Document.querySelector()
HTMLElement.style
I have this search box that I have done so far but new to JS so a little stuck.
I need it to slide to the right to reveal the input behind it, it did work when I used just button but I guessed I needed to add just the icon so did not submit when you clicked it but slide across, but then I guess also need to make the button show and the icon hide when you enter something in the input and if not when you click icon would just close again.
Something a bit like this I guess.... http://codepen.io/nikhil/pen/qcyGF - which is what I've been trying to base it off.
searchExpand = function(elm){
var spanIcon = $('.span-icon'),
searchInput = $('.search-input'),
searchForm = $('.search-form'),
btnSearch = $('.btn-search'),
isOpen = false;
if(isOpen == false){
searchForm.addClass('open');
spanIcon.hide();
btnSearch.show();
searchInput.focus();
isOpen = true;
} else {
searchForm.removeClass('open');
btnSearch.hide();
spanIcon.show();
searchInput.focusout();
isOpen = false;
}
}
$(document).ready(function(){
// lets make the search feature happen!
$(document).on("click", "span.btn-search", function() {
searchExpand(this);
});
});
.search-form {
width: 0%;
}
.search-form input {
border-right-style: none;
}
.search-form button {
background: none;
padding: 0;
display: none;
}
.search-form button i {
font-size: 1.9em;
color: #000;
padding: 10px;
}
.search-form span.search-icon {
font-size: 1.9em;
color: #000;
padding: 10px;
cursor: pointer;
}
.search-form .form-control {
padding: 0;
border: 0;
}
.search-form .input-group-addon {
background: #fff;
border: 0;
}
.search-form.open {
width: 100%;
}
.search-form.open .form-control {
padding: 30px 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<form role="search" class="search-form">
<div class="input-group add-on">
<input type="text" class="form-control search-input" placeholder="Enter a search term" name="search" id="search">
<div class="input-group-addon">
<button class="btn btn-clear btn-search" type="submit"><i class="glyphicon glyphicon-search search-icon"></i></button>
<span class="span-icon glyphicon glyphicon-search search-icon"></span>
</div>
</div>
</form>
Notice that your .btn-search isn't inside a span, so your function, searchExpand will not run. when you click the button.
What's in the span is "span-icon glyphicion.... "
If you're using jquery, this would be an effective way of achieving what you want:
Assign an ID to the span call it what you will, and change your js to reflect:
$( "#yourbuttonidname" ).click(function() {
searchExpand(this);
});
Example of the new span:
<span id="yourbuttonidname" class="span-icon glyphicon glyphicon-search search-icon"></span>
I am setting up a page which the user can hide the side bar if they wish. I am trying to use the jqeuryui to do this with the following js code
// TOGGLE JS
$(function () {
function runEffect() {
var options = {};
$("#effect").toggle('slide', options, 500);
};
$("#button").click(function () {
runEffect();
return false;
});
});
I have this working in a JSFiddle here http://jsfiddle.net/jwg4U/
However, when you look at the JSFiddle you will notice that my main content area which is a DIV called #content does not animate, it just jumps into place when I toggle the sidebar.
I would like the content div to also slide into place seamlessly and follow the toggle as it if it attached to it.
I have looked at jquery animate, but not sure how to implement this with the slide?
A Second part I am struggling with is how to change the button text when the sidebar is closed to say "Show Sidebar" - Weather it is open or closed right now it just says "Hide Sidebar"
Looking for some help
Thanks
See this updated fiddle : http://jsfiddle.net/jwg4U/23/
HTML:
<div id="container" style="width:800px">
<div id="header">
<h1>HEADER</h1>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
<h3>SIDEBAR</h3>
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes here</div>
</div>
Hide Sidebar
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>
</div>
JS:
// TOGGLE JS
$(function() {
var i = 0;
function runEffect() {
var options = {};
if (i === 0) {
i = 1;
$(".toggler").animate({
left: -100
}, {
duration: 500
});
}
else {
i = 0;
$(".toggler").animate({
left: 0
}, {
duration: 500
});
}
}
$("#button").click(function() {
if (i === 0) {
$(this).html("Show Sidebar");
}
else {
$(this).html("Hide Sidebar");
}
runEffect();
return false;
});
});
// TABS JS
$(function() {
$("#tabs").tabs();
});
CSS:
.toggler {
float: left;
position: relative;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
float: left;
}
#content{
position: relative;
float: left;
width: 500px;
}
#button{
float: left;
clear: both;
}
#header{
background-color: #000;
color: #FFF;
}
The jsfiddle for the complete answer : http://jsfiddle.net/jwg4U/22/
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 500,
specialEasing: {
width: 'linear',
height: 'linear'
},
complete: function() {
$("#content").animate(
{ left: '+=100px' },
60,
'easeInQuad',
function ()
{
if(isOpen)
{
isOpen=false;
$("#button").html('Show Sidebar');
}
else
{
isOpen=true;
$("#button").html('Hide Sidebar');
}
});
}
});