How to add a progressbar animate to my notify? - javascript

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"]);

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 fix Uncaught ReferenceError: TimelineMax is not defined

My JS file:
const logo = document.querySelector("#logo");
const tl = new TimelineMax({});
tl.fromTo(logo, 1, {height: "0%"}, {height: "80%"});
My CSS file:
#logo{
width: 100%;
height: 100%;
position: absolute;
top: 200px;
z-index: -1;
}
My HTML file:
<!DOCTYPE html>
<html lang= "es">
<head>
<title>Quark</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="Limg">
<img id="logo" src= "Logo.svg">
</div>
<script src="animaciones.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js" integrity="sha512-0xrMWUXzEAc+VY7k48pWd5YT6ig03p4KARKxs4Bqxb9atrcn2fV41fWs+YXTKb8lD2sbPAmZMjKENiyzM/Gagw==" crossorigin="anonymous"></script>
</body>
</html>
And I don't know where the problem is already trying using different versions and nothing
Move your script tag for timeline max on header
<head>
<title>Quark</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="Style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js" integrity="sha512-0xrMWUXzEAc+VY7k48pWd5YT6ig03p4KARKxs4Bqxb9atrcn2fV41fWs+YXTKb8lD2sbPAmZMjKENiyzM/Gagw==" crossorigin="anonymous"></script>
</head>

Hide tool tip on clicking outside is not working Jquery

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>

Code from fiddle doesn't work locally

I found a simply tooltip in fiddle: http://jsfiddle.net/6L9j0v5y/1 and tried to use it locally but something goes wrong. I copied http://jsfiddle.net/6L9j0v5y/1/show frame source as well but there is the same effect(on page is only button and nothing happens when it is clicked).
I create file(by copying):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
[data-style=mypops] + .popover {
background: #4194ca;
}
[data-style=mypops] + .popover.bottom .arrow:after {
border-bottom-color: #4194ca;
}
[data-style=mypops] + .popover-content {
}
.popovermenu {
list-style: none;
padding: 0px;
margin: 0px;
}
.popovermenu li {
}
.popovermenu li a {
color: #fff;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#Pops").popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
});//]]>
</script>
</head>
<body>
<br>
<br>
<br>
<div class="col-sm-4">
<button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" id="Pops" data-style="mypops">Click Me</button>
<div id="popover-content" class="hide">
<ul class="popovermenu">
<li>Action
</li>
<li>Another action
</li>
<li>Separated link
</li>
</ul>
</div>
</div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "6L9j0v5y"
}], "*")
}
</script>
</body>
</html>
There is no error in console, how is it possible to check why it doesn't work?
It's because when on a local environment it treats the resource URLs as local files because it doesn't have the http / https protocols in front of the URLs.
It's not incorrect in doing that, when on a server it'll work fine, but locally it causes problems. Change the scripts to the following and it'll work fine.
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Code working in JSFiddle but wont work in browser

I'm trying to get this piece of code working from my browser but I can't get it to work. Here is what I am currently tying, does anyone know what I'm missing?
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="fader.css"/>
<script type="text/javascript" src="fader.js"></script>
</head>
<body>
<div id="div1">hover over me</div>
<div id="div2"></div>
</body>
</html>
fader.js
$(document).ready(function(){
$(function() {
$('#div1').hover(function() {
$('#div2').fadeIn();
}, function() {
$('#div2').fadeOut();
});
});
});
fader.css
#div2 {
width: 200px;
height: 200px;
background: red;
display: none;
}
Original:
http://jsfiddle.net/kevinPHPkevin/4z2zq/
You haven't imported jquery in your html doc. your js code uses jquery.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="fader.css"/>
<script type="text/javascript" src="fader.js"></script>
<script type="text/javascript" src="[jqueryversionrighthere]"></script>
</head>
<body>
<div id="div1">hover over me</div>
<div id="div2"></div>
</body>
</html>
please insert this code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Categories