Hide tool tip on clicking outside is not working Jquery - javascript

I am not able to open the tooltip post closing the same by clicking outside the button. Appreciate the help.
Below are the ways to reproduce the issue
Click on the button
Click outside of button to close the tooltip
Click the button again to open the tooltip
Note : Button requires two clicks to open the tooltip post-closing by clicking outside of the div.
Below is the source 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">
<title>Example of Setting Container for Bootstrap 3 Popover</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Append popover HTML to wrapper element
$("#myPopovers a").popover({
container: '.wrapper'
});
});
</script>
<script>
$(document).mouseup(function (e){
var container = $(".popover");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.fadeOut();
}
});
</script>
<style type="text/css">
.bs-example {
margin: 150px 50px;
}
.bs-example a {
margin: 5px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="wrapper">
<div id="myPopovers"> Popover </div>
</div>
</div>
</body>
</html>

To make your popover dismissable on the next click, just init the popover with trigger:'focus'.
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
trigger: 'focus',
container: '.wrapper',
delay: {
"show": 500,
"hide": 100
},
});
});
.bs-example {
margin: 150px 50px;
}
.bs-example a {
margin: 5px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="bs-example">
<div class="wrapper">
<div id="myPopovers"> Popover </div>
</div>
</div>

Related

Images not aligning as I want with slick slider

I am trying to create this for a website I am building from scratch.
This is a grid with different images being on the same line, and we could slide them on the left in order to see the one that are hiddens (you can see here that there are more pics outside the frame):
So I made some researches and found about Slick slider, which I tried to use but couldn't get a good result of.
This is my HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hestia - Accueil</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!--Slick slider-->
<div class="slider-villes">
<img src="images/accueil/paris-1772x900.jpg" alt="paris">
<img src="images/accueil/nice-1772x900.jpg" alt="nice">
<img src="images/accueil/marseille-1772x900.jpg" alt="marseille">
<img src="images/accueil/lyon-1772x900.jpg" alt="lyon">
<img src="images/accueil/bordeaux-1772x900.jpg" alt="bordeaux">
<img src="images/accueil/ajaccio-1772x900.jpg" alt="ajaccio">
<img src="images/accueil/toulouse-1772x900.jpg" alt="toulouse">
</div>
<!--Slick slider-->
<!--Scripts-->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript" src="js/slick.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slider-villes').slick({
infinite: true,
cssEase: 'linear',
swipe: true,
arrows: true,
variableWidth: true
});
});
</script>
<!--Scripts-->
</body>
</html>
And here is my CSS:
.slider-villes {
display: flex;
overflow-x: scroll;
}
.slider-villes img {
width: 20% !important;
height: 20%;
object-fit: cover;
}
And it looks like this:
So there are my pictures, I can slide them, but they will always keep their position to the very left of the screen and they do not seem to be willing to stay close together...
I don't really know what to do at this point... I hope someone will be able to help me.
Thanks.
by removing the css rules for ".slider-villes" and modifying
that of ".slider-villes img" by:
.slider-villes img {
height: 150px;
width:auto;
object-fit: cover;
padding: 20px 0 20px 40px;
}
and putting this script:
$(document).ready(function() {
$('.slider-villes').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
variableWidth: true
});
I get this result.

How to add a progressbar animate to my notify?

I would like someone to help me put an animated progress bar in colors below the [border-bottom: 3px solid #a3c846;] eg slowing down with time on variable [timer], anyone to help me? Thanks!
$(document).ready(function(){
window.addEventListener("message",function(event){
var html = "<div id='"+event.data.css+"'>"+event["data"]["mensagem"]+"</div>"
$(html).fadeIn(500).appendTo("#notifications").delay(event["data"]["timer"]).fadeOut(500);
})
});
#sucesso {
background: rgba(34,34,34,0.75) url("images/check.png") no-repeat center left 11px;
border-bottom: 3px solid #a3c846;
}
<html>
<head>
<meta charset="UTF-8">
<title>#creative</title>
<script src="nui://game/ui/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="notifications">
</div>
<script src="app.js"></script>
</body>
</html>
Try something like
$(html).fadeIn(500).appendTo("#notifications") .animate({ width: '0%' }, event["data"]["timer"]);

How to register dynamicaly loaded content (e. g. classes)

I have a problem. When i load external data and i will use jquery events on that data - this is not working because the DOM does not know this. The event-delegation works perfect. I only want to know how to make the <div class="dialog"> original </div> loaded from source.txt known to the DOM or another solution to access the external data through the jquery Event. When I use the line div class="dialog"> original </div> in the Main document all works fine.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
iframe{
overflow:hidden;
}
</style>
<script>
$( function() {
$( ".dialog" ).dialog({
autoOpen: false,
width:700,
height:700,
show: {
},
hide: {
}
});
$(document).on("click","#link",function(){
$("#include").load("http://www.damago.de/dev/source.txt");
});
$(document).on( "click","#opener", function() {
$( ".dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="include"></div>
<a id="link" href="#">Include the source.txt with the code</a>
</body>
</html>
source.txt
<div class="dialog"> original </div>
<button id="opener">This is the text of the dialog</button>

Why is jQuery not working with Bootstrap 4 alpha 6?

I am attempting to use jQuery and it is giving me various errors. I tried shuffling different script tags around, but had no success. Here is some code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<style>
/*some css here*/
</style>
<!--a bunch of HTML here-->
<script>
if(jQuery){
alert('yes');
}
$(window).load(function(){
$('.intro').fadeIn(500, function(){
$(".welcomeSize").fadeIn(500);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
I get an error saying that jQuery is undefined. If I put the jquery CDN before my script, I get this error:
Uncaught TypeError: a.indexOf is not a function
at r.fn.init.r.fn.load (jquery.min.js:4)
at newsite.html:129
Is there something I am missing?
Your problem is not related with bootstrap, you are adding jQuery dependent script before it's loaded. Add your script after jQuery and use $(document).ready(), .load() is deprecated. https://api.jquery.com/load-event/
.intro{
width: 200px;
height: 200px;
background: purple;
display: none;
}
.welcomeSize{
width: 200px;
height: 200px;
background: violet;
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JQuery+Bootstrap</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="intro">
</div>
<div class="welcomeSize">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
if(jQuery){
console.log('yes');
}
$(document).ready(function(){
$('.intro').fadeIn(500, function(){
$(".welcomeSize").fadeIn(500);
});
});
</script>
</body>
</html>
</body>
</html>
you have to import jquery before write any code using jquery so what you have to do is
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
// then your code goes here
the second thing for Uncaught TypeError: a.indexOf is not a function
you should use $(window).on('load', function() { ... });
instead of
$(window).load(function() { ... });
load, .unload, and .error, deprecated since jQuery 1.8, are no more.
Use .on() to register listeners.
Note that you've been using the jQuery commands before linking the script. The script tag which source(src) attribute is pointing to Google CDN must come before the jQuery command.

Why my Jquery popup plugin isn't working?

I'm using this magnific pop up plug in (http://dimsemenov.com/plugins/magnific-popup/documentation.html)
This is my very basic html, I simply want the button to open a pop up window in that page.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</script>-->
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.magnific-popup.js"></script>
<title>Burn That Burger</title>
<script type="text/javascript" src="js/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="normalize.css" media="all">
<link rel="stylesheet" href="style/unsemantic-grid-responsive.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all">
</head>
<body>
<div id="popup">
test pop up goes here
</div>
<button>create and show popup</button>
</body>
</html>
Javascript:
$(document).ready(function () {
$('button').magnificPopup({
items: {
src: '#popup',
type: 'inline'
}
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/vGAsL/19/
you have applied the popup id to your body, instead of a separate div.
<body>
<div id="popup">
test pop up goes here
</div>
<button> create and show popup </button>
I think you have an issue in your body tag, it should be:
<body>
<div id="popup">
test pop up goes here
</div>

Categories