jquery number count to a target number - javascript

I have a website : my website i have built a jQuery counter to count up to a target number for the points in the team.Plz click on team tab.
problem :
1.
when I load the page,the jquery point count works fine.Lets say when you go to team section and refresh the page.But when I scroll to through the various sections and reach team section,the effect doesnot show up.It looks like normal numbers.Can it be made possible,when the user scrolls to the "team" section the number count with the effect shows up.
The code for that part :
(function($) {
$.fn.countTo = function(options) {
options = options || {};
return $(this).each(function() {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
}(jQuery));
jQuery(function($) {
// custom formatting example
$('#count-number').data('countToOptions', {
formatter: function(value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
body {
font-family: Arial;
padding: 25px;
background-color: #f5f5f5;
color: #808080;
text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */
.team-leader-box {
.col_half {
width: 49%;
}
.col_third {
width: 32%;
}
.col_fourth {
width: 23.5%;
}
.col_fifth {
width: 18.4%;
}
.col_sixth {
width: 15%;
}
.col_three_fourth {
width: 74.5%;
}
.col_twothird {
width: 66%;
}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
position: relative;
display: inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end {
margin-right: 0 !important;
}
/* Column Grids End */
.wrapper {
width: 980px;
margin: 30px auto;
position: relative;
}
.counter {
background-color: #808080;
padding: 10px 0;
border-radius: 5px;
}
.count-title {
font-size: 40px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.count-text {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.fa-2x {
margin: 0 auto;
float: none;
display: table;
color: #4ad1e5;
}
}
.counter.col_fourth {
background-color: #fff;
border-radius: 10px;
}
<section class="main-section team" id="team">
<!--main-section team-start-->
<div class="container">
<h2>team</h2>
<h6>Take a closer look into our amazing team. We won’t bite.</h6>
<div class="team-leader-block clearfix">
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-03s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic1.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="50" data-speed="1500"></h2>
<p class="count-text ">points</p>
<p1>click to know</p1>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic2.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="30" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-09s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic3.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="10" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
</div>
</div>
<div class="popup" id="popup">
<div class="popup__inner">
<header class="popup__header">
<a onclick="$('#popup').fadeOut()" id="popup-exit">esc</a>
</header>
<img src="http://www.fillmurray.com/124/124" alt="Bart Veneman" width="200" height="200" class="profile__image" />
<!--
-->
<section class="profile__details">
<ul class="profile__stats">
<li>
<h3 class="profile_stat__heading">Gold</h3>
<div class="profile_stat__number">17</div>
</li>
<!--
-->
<li>
<h3 class="profile_stat__heading">Silver</h3>
<div class="profile_stat__number">8</div>
</li>
<!--
-->
<li>
<h3 class="profile_stat__heading">Bronze</h3>
<div class="profile_stat__number">21</div>
</li>
</ul>
<h2 class="profile__name" id="popup-name"></h2>
<h2 class="profile__name">Designation: </h2>
<h2 class="profile__name">Reporting Manager: </h2>
<h2 class="profile__name">Email: </h2>
<h2 class="profile__name">Date of Join: </h2>
<h2 class="profile__name" id="popup-score"></h2>
<h2 class="profile__name">Latest Week Points: </h2>
<h2 class="profile__name">Overall Points: </h2>
<h2 class="profile__name">Medals Rewarded:</h2>
<ul class="social">
<li><i class="fa fa-github"></i>
</li>
<!--
-->
<li><i class="fa fa-instagram"></i>
</li>
<!--
-->
<li><i class="fa fa-twitter"></i>
</li>
<!--
-->
<li><i class="fa fa-bitbucket"></i>
</li>
<!--
-->
<li class="location"><i class="fa fa-map-marker"></i><span>Bangalore, IN</span>
</li>
</ul>
</section>
</div>
</div>
</section>
This question i have asked before,I know .jquery number count to a target number and pop display on click. As requested I have separated the question.
kindly help.

Use the jquery.appear plugin. It implements custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport.
The following code will give you a simple animation effect using the plugin. You need to ensure that each .timer element has a unique id attribute for it to work properly.
// singleRun : boolean to ensure we only animate once
var singleRun = true;
// executes when .counter container becomes visible
$(".counter").on("appear", function(data) {
// initialise the counters
var counters = {};
var i = 0;
if (singleRun){
// track each of the counters
$(".timer").each(function(){
counters[this.id] = $(this).data("to");
i++;
});
// animate the counters
$.each(counters, function(key, val) {
$({countVal: 0}).animate({countVal: val}, {
duration: 1500,
easing:"linear",
step: function() {
// update the display
$("#" + key).text(Math.floor(this.countVal));
}
});
});
singleRun = false;
}
});
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<!-- Remember a timer requires a unique id value -->
<h2 class="timer count-title" id="UNIQUE-ID-HERE" data-to="10"></h2>
<p class="count-text ">points</p>
</div>
</div>

Related

How do I save multiple instances of the same JS code on firebase?

Sorry I don't code much and have adapted this code, so help would be greatly appreciated.
I'm trying to emulate a shopping page where you can 'like' a product and shows number of 'likes' for each product.
What is happening:
When I click on different instances of the 'like' button they get saved as one instance on firebase and all the 'like' counters show the same number of 'likes'
What I want:
Every time I click a different instance of the 'like' button I want it saved as a different instance on firebase so the counts are different for each 'like' button.
var dCounters = document.querySelectorAll('.CountLike');
[].forEach.call(dCounters, function(dCounter) {
var el = dCounter.querySelector('button');
var cId = dCounter.id;
var dDatabase = firebase.database().ref('Like Number Counter').child(cId);
// get firebase data
dDatabase.on('value', function(snap) {
var data = snap.val() || 0;
dCounter.querySelector('span').innerHTML = data;
});
// set firebase data
el.addEventListener('click', function() {
dDatabase.transaction(function(dCount) {
return (dCount || 0) + 1;
});
});
});
.CountLike div {
display: inline-flex;
}
.item-like {
font-size: 18px;
display: inline-block;
margin-top: 10px;
}
.counterStat {
margin-right: 15px;
margin-top: 5px;
}
.heart {
width: 32px;
height: 32px;
}
.btn {
background: none;
border: none;
cursor: pointer;
}
<div>
<div class="store-action">
<div class="CountLike" id="Like Count">
<div class="likes">
<span class="counterStat">0</span>
<button class="btn"><img src="https://www.svgrepo.com/show/164008/heart.svg" class="heart" alt="the heart-like button"></button>
</div>
</div>
</div>
</div>
<div>
<div class="store-action">
<div class="CountLike" id="Like Count">
<div class="likes">
<span class="counterStat">0</span>
<button class="btn"><img src="https://www.svgrepo.com/show/164008/heart.svg" class="heart" alt="the heart-like button"></button>
</div>
</div>
</div>
</div>
Below snippet should do it for now. Both of your elements have the same id value set which is set as id="Like Count"
So right now you just end up writing and reading from the same field for every cell you have.
As it is also stated on this link you should always make sure the id values you assign are unique.
<div>
<div class="store-action">
<div class="CountLike" id="xyz">
<div class="likes">
<span class="counterStat">0</span>
<button class="btn"><img src="https://www.svgrepo.com/show/164008/heart.svg" class="heart" alt="the heart-like button"></button>
</div>
</div>
</div>
</div>
<div>
<div class="store-action">
<div class="CountLike" id="xyzt">
<div class="likes">
<span class="counterStat">0</span>
<button class="btn"><img src="https://www.svgrepo.com/show/164008/heart.svg" class="heart" alt="the heart-like button"></button>
</div>
</div>
</div>
</div>

Using JavaScript Show and Hide Div but styling disappear when showing the div again

I'm working image gallery page Sitecore MVC platform.
The razor page I'm working on have should display first 8 image only on default. When user click the load more button. It'll display all images.
The first 8 image would be stack and it should be in columns of 4. The rest of the images should be 4 across and expand downwards when the Load More button is clicked
I decided to use 2 Divs and JavaScript to achieve the Load More function. E.g One div is show 8 and the other to show all.
The first 8 is showing with the correct styling but when I hide and show the other div with exact same style its not being render correctly. Instead of 4 columns they are all stack into 1.
Please help.....
#{
//to handle id must start with letter compatibility. HTML5 removed this restriction tho
var minimisedDivId = ENU.SitecoreHelper.Resources.HTMLHelpers.EnsureGuidStartsWithLetter(Guid.NewGuid());
var loadMoreDivId = ENU.SitecoreHelper.Resources.HTMLHelpers.EnsureGuidStartsWithLetter(Guid.NewGuid());
}
<head>
<script>
function toggleDiv() {
var minimised = document.getElementById("#minimisedDivId");
var loadMore = document.getElementById("#loadMoreDivId");
if (minimised.style.display === "none") {
minimised.style.display = "block";
loadMore.style.display = "none";
} else {
minimised.style.display = "none";
loadMore.style.display = "block";
}
}
</script>
<style>
.imagegallery-container {
margin: 0px;
padding: 0px;
position: relative;
text-align: center;
}
.imagegallery-area {
margin: 0px;
padding: 0px;
}
.imagegallery {
margin: 0px;
padding: 0px;
}
.image-area {
/* margin: 0px;
padding: 0px;*/
}
.thumbnail {
margin: 0px;
padding: 0px;
}
.imageText {
position: relative;
bottom: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
.loadMore {
margin: 0 auto; /*center*/
}
</style>
</head>
<div class="row imagegallery-container">
<div class="col"> </div>
<!-- TODO: Load first 8 -->
<div class="imagegallery-area row col-8" id="#minimisedDivId">
#if (Model.IsInEditMode)
{
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
<span class="col-3 editor">
#Html.Glass().Editable(item.value, x => x.Thumbnail)
</span>
}
}
#if (Model.Children.Any())
{
<!-- TODO: I need to take the first 8 of and display them-->
foreach (var item in Model.Children.ToList().Take(8).Select((value, index) => new { value, index }))
{
<a class="col-3 thumbnail" data-toggle="modal" data-target="#carouselModal" style="border:2px red">
#*<img src="#item.value.ThumbnailUrl" />*#
#Html.Glass().RenderImage(item.value, x => x.Thumbnail, new { w = 200, h = 200, mw = 200, mh = 200 }, isEditable: true)
<div class="imageText">#Html.Glass().Editable(item.value, x => x.Text)</div>
</a>
}
}
<div class="loadMore">
<button onclick="toggleDiv()">LOAD MORE</button>
</div>
</div>
<!-- TODO: Load all -->
<div class="imagegallery-area row col-8" id="#loadMoreDivId" style="display:none;">
#if (Model.IsInEditMode)
{
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
<span class="col-3 editor">
#Html.Glass().Editable(item.value, x => x.Thumbnail)
</span>
}
}
#if (Model.Children.Any())
{
// Display max of 8 items, 4 across and stacking to 2
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
//Carousel should have a closed button,top right. Image number buttom right e.g 1 of 8
<a class="col-3 thumbnail" data-toggle="modal" data-target="#carouselModal" style="border:2px red">
<img src="#item.value.ThumbnailUrl" />
#Html.Glass().RenderImage(item.value, x => x.Thumbnail, new { w = 200, h = 200, mw = 200, mh = 200 }, isEditable: true)
<div class="imageText">#Html.Glass().Editable(item.value, x => x.Text)</div>
</a>
}
}
<div class="loadMore">
<button >Collapsed</button>
</div>
</div>
<!-- TODO: I would then display all the elements if LOAD MORE is clicked -->
<!-- LOAD MORE-->
<!-- This would show all the rows-->
<!-- Modal -->
<div class="modal fade" id="carouselModal" tabindex="-1" role="dialog" aria-labelledby="carouselModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselControls" data-slide-to="0" class="active"></li>
<li data-target="#carouselControls" data-slide-to="1"></li>
<li data-target="#carouselControls" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
#if (Model.Children.Any())
{
//get the first imageItem for "active" class
<div class="carousel-item active">
<img class="d-block w-100" src="#Model.Children.ToList().First().ImageUrl" alt="#Model.Children.ToList().First().Title" />
<div class="imageText">#Model.Children.ToList().First().Text)</div>
</div>
Model.Children.ToList().Skip(1);
//The carry on the rest in the look with no active
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
<div class="carousel-item">
<img class="d-block w-100" src="#item.value.ImageUrl" alt="#item.value.Title" />
<div class="imageText">#Html.Glass().Editable(item.value, x => x.Text)</div>
</div>
}
}
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer">
x of x
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col"> </div>
</div>
Try editing this row (in both locations):
div class="imagegallery-area row col-8"
And move row into its own div:
div class="imagegallery-area col-8"
div class="row">
A div should be a row or a col, not both.

How toggle elements inside this intersection observer?

I have a few elements I want to toggle wth a function, but by some reason I can't make it work. When the toggle function is executed, the console logs "cannot read the property classList of Undefined". But if I log them before the function starts I can see the elements.
Javascript
const toggle = element => {
element.classList.toggle('toggle');
};
let numberOfProyects = document.getElementsByClassName('portfolio__item'),
proyects = [],
for (var i = 0; i < numberOfProyects.length; i++) {
proyects[i] = document.getElementById(`proyect${i+1}`);
console.log(proyects[i]);
new IntersectionObserver(()=>{
toggle(proyects[i])
},{threshold: .6}).observe(proyects[i]);
};
HTML
<div class="portfolio__item toggle" id="proyect1">
<h3 class="portfolio__item-title">Podomoro Timer</h3>
<img class="portfolio__item-img" src="assets/images/Captura de pantalla (316).png">
<div class="portfolio__item-links">
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://js-codetalker.github.io/Timer/" class="portfolio__item-links-overlay-link">
<img src="assets/images/world.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go proyect</p>
</a>
</div>
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://github.com/Js-codetalker/Timer" class="portfolio__item-links-overlay-link">
<img src="assets/images/github.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go github</p>
</a>
</div>
</div>
</div>
<div class="portfolio__item toggle" id="proyect2">
<h3 class="portfolio__item-title">Sample Restaurant</h3>
<img class="portfolio__item-img" src="assets/images/Captura de pantalla (317).png">
<div class="portfolio__item-links">
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://js-codetalker.github.io/restaurant-example/" class="portfolio__item-links-overlay-link">
<img src="assets/images/world.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go proyect</p>
</a>
</div>
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://github.com/Js-codetalker/restaurant-example" class="portfolio__item-links-overlay-link">
<img src="assets/images/github.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go github</p>
</a>
</div>
</div>
</div>
What I want is to create a different observer for each element in order to remove the class "toggle" when it reach the expected space in the viewport
(almost) Always use let instead of var when defining variables inside for loops
Also, you don't need store your elements in second array.
const toggle = element => {
element.classList.toggle('toggle');
console.log(element);
};
const proyects = document.getElementsByClassName('portfolio__item');
for (let i = 0; i < proyects.length; i++) {
new IntersectionObserver(() => {
toggle(proyects[i])
}, {
threshold: .6
}).observe(proyects[i]);
};
.container
{
border: 1px solid black;
resize: both;
overflow: auto;
width: 20em;
height: 10em;
}
.container > :after
{
content: attr(id) " class is " attr(class);
}
.container > :not(.toggle) {
background-color: pink;
}
.container >.toggle {
background-color: lightgreen;
}
<div class="container">
<div class="portfolio__item toggle" id="proyect1">
<h3 class="portfolio__item-title">Podomoro Timer</h3>
</div>
<div class="portfolio__item" id="proyect2">
<h3 class="portfolio__item-title">Sample Restaurant (has not toggle by default)</h3>
</div>
<div class="portfolio__item toggle" id="proyect3">
<h3 class="portfolio__item-title">test</h3>
</div>
<div class="portfolio__item toggle" id="proyect4">
<h3 class="portfolio__item-title">test</h3>
</div>
</div>

jQuery undo with multiple remove();

How do I get the function to always remember the sequence of the last removed .items so that I may undo as many items that were removed before the undo timeout occurs?
I want to be able to quickly remove all .items and then press undo to replace all three, one by one where pressing the undo button replaces the last removed item.
Currently I can only replace the last removed .item.
var undo = false;
var remove;
var timeout;
$(document).ready(function() {
/*DELETE*/
$('body').on('click', '.fa-times', function() {
if ($('.item').hasClass("temp_deleted")) {
$('.item.temp_deleted').remove();
}
remove = $(this).parent().parent();
var undo_time = 10000;
remove.animate({
height: "0px"
}, 200, function() {
$(this).addClass('temp_deleted').hide();
});
function_undo(remove, undo);
//undo
$('.undo').addClass('active');
clearTimeout(timeout);
timeout = setTimeout(function() {
$('.undo').removeClass('active');
if (undo === false) {
$('.item.temp_deleted').remove();
}
}, undo_time);
});
/*UNDO*/
$('.undo div').click(function() {
undo = true;
function_undo(remove, undo);
$(this).parent().removeClass('active');
});
});
function function_undo(remove, undo) {
if (undo == true) {
remove.css('height', 'auto');
remove.show();
remove.removeClass('temp_deleted');
}
}
.item {
width: 100px;
height: 50px;
border: 2px solid
}
.actions span.fa-times:hover {
color: #fe4444;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="item">
<div class="actions">
<span class="fa fa-times"></span>
</div>
</div>
<div class="item">
<div class="actions">
<span class="fa fa-times"></span>
</div>
</div>
<div class="item">
<div class="actions">
<span class="fa fa-times"></span>
</div>
</div>
</div>
</div>
<div class="undo">
<div>
<span class="fa fa-undo"></span> Undo
</div>
</div>
As I said, you can save them in an array. When you remove it, push it in the array. When you want to undo something, pop it out.
And by the way, as #LexJacobs said, don't remove it. just hide it.
Not sure if this is what you want. But I'm trying to structure this out.
var undo = false;
var timeout;
var arr = [];
$(document).ready(function() {
/*DELETE*/
$('body').on('click', '.fa-times', function() {
if ($('.item').hasClass("temp_deleted")) {
$('.item.temp_deleted').hide();
}
remove = $(this).parent().parent();
var undo_time = 10000;
remove.animate({
height: "0px"
}, 200, function() {
$(this).addClass('temp_deleted').hide();
});
function_undo(remove, undo);
//undo
$('.undo').addClass('active');
clearTimeout(timeout);
timeout = setTimeout(function() {
$('.undo').removeClass('active');
if (undo === false) {
$('.item.temp_deleted').hide();
}
}, undo_time);
arr.push(remove);
});
/*UNDO*/
$('.undo div').click(function() {
undo = true;
var remove = arr.pop();
function_undo(remove, undo);
$(this).parent().removeClass('active');
});
});
function function_undo(remove, undo) {
if (undo == true) {
remove.css('height', 'auto');
remove.show();
remove.removeClass('temp_deleted');
}
}
.item {
width: 100px;
height: 50px;
border: 2px solid
}
.actions span.fa-times:hover {
color: #fe4444;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="item">
<div class="actions">
<span class="fa fa-times"></span> 1
</div>
</div>
<div class="item">
<div class="actions">
<span class="fa fa-times"></span> 2
</div>
</div>
<div class="item">
<div class="actions">
<span class="fa fa-times"></span> 3
</div>
</div>
</div>
</div>
<div class="undo">
<div>
<span class="fa fa-undo"></span> Undo
</div>
</div>

jQuery caoursel slider not updating width on window resize

I've recently added a slider to my page and after some tweaking it works fine apart from one issue - when I resize the window, specifically make it smaller, the slider is not centered anymore and at low resolution on firefox the arrows go outside the window, here's the code for the slider
$(function () {
console.log('DOM1');
$(document).ready(function () {
var speed = 6000;
var run = setInterval(rotate, speed);
var slides = $('.slide');
var container = $('#slides ul');
var width = $('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = container.width();
var prev = 'prev'; //id of previous button
var next = 'next'; //id of next button
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
$('#buttons a').click(function (e) {
if (container.is(':animated')) {
return false;
}
if (e.target.id === prev) {
container.stop().animate({
'left': 0
}, 1000, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id === next) {
container.stop().animate({
'left': item_width * -2
}, 1000, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}
return false;
});
$('#carousel').mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
function resetSlides() {
container.css({
'left': -1 * item_width
});
}
});
function rotate() {
$('#next').click();
}
});
#carousel {
position: relative;
width:100%;
margin-top: 10px;
flex-basis: 100%;
display: flex;
justify-content: center;
}
.btn-bar{
position: absolute;
width: 100%;
#media only screen and (max-width: 1200px) {
width: 100%;
}
z-index: 4;
}
#buttons a {
position: absolute;
text-align:center;
display:block;
font-size:50px;
float:left;
outline:0;
margin:-50px 60px;
color:#FFFFFF;
text-decoration:none;
padding:9px;
width:35px;
}
a#prev{
cursor: pointer;
left: 0;
width: 40px;
height: 40px;
border-bottom: 1px solid white;
border-left: 1px solid white;
transform: rotate(45deg);
#media only screen and (max-width: 720px) {
display: none;
}
}
a#next{
cursor: pointer;
right: 0;
width: 40px;
height: 40px;
border-top: 1px solid white;
border-right: 1px solid white;
transform: rotate(45deg);
#media only screen and (max-width: 720px) {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<title>OHIR — Imprint Media</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="shortcut icon" href="images/3d5bb643659eb0b2a80acbe35c5073e5.png">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="container">
<div class="logo" id="OVERLAY"></div>
<div class="ohir"><p class="col">OHIR</p></div>
<nav class="col">
Książka
Fragment
Autor
<button>KUPUJĘ</button>
</nav>
</div>
<section class="OVERLAY hidden">
<a>MODERNIST CUISINE</a>
<a>IMPRINT MEDIA</a>
<a>WYDAWNICTWO BARBELO</a>
<button onclick="hideOverlayFunction()">POWRÓT</button>
</section>
</header>
<main>
<button onclick="topFunction()" id="myBtn" title="Go to top"><img src="images/arrow_up.svg"></button>
<section class="container OHIR">
<p>OHIR</p>
</section>
<section class="container ONBOARD">
<div class="book"></div>
<!--<img class='col' src="images/62d204dec2048b53e33842d869865586.png">-->
<div class="border">
<p> > Witaj na pokładzie Ohira.</p>
<p> > Kiedy będziesz gotowy na podróż w nieznane?</p>
<button>KUPUJĘ</button>
</div>
<div id="carousel">
<div class="btn-bar">
<div id="buttons"><a id="prev" onclick="prevFunction()"></a><a id="next" onclick="nextFunction()"></a> </div>
</div>
<div id="slides">
<ul>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">Tak bardzo chciałbym odrodzić się jako Ohir.</span>
</p>
</div>
<div class="authorContainer">
<p class="quote-author HAL">HAL 9000</p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">
Po przeczytaniu Ohira zbudowałem mój pierwszy ścigacz.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Anakin Skywalker</p>
</div>
<div class="counter">
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"></span>Chciałbym, żeby mój następny statek był taki, jak Ohir.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Kapitan Jean-Luc Picard</p>
</div>
<div class="counter">
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">Gdybym znów miał walczyć z cylinami, chciałbym mieć Ohira we flocie.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Admirał William Adama</p>
</div>
</li>
</ul>
</div>
<div class="counter">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</section>
<a class="anchor" id="STORY"></a>
<section class="container STORY">
<video id="videoStory" onpause="pauseFunction()">
<source src="video/Ohir_fb%20video%20cover.mp4" type="video/mp4">
</video>
<button onclick="playFunction()" id="playBtn" title="play video">OHIR, OPOWIEDZ MI O KSIĄŻCE</button>
</section>
<section class="container FRAGMENT">
<a class="anchor" id="FRAGMENT"></a>
<div class="book"></div>
<div class="col">
<h3>ZAINTERESOWANY?</h3>
<p>Przeczytaj darmowy fragment i dowiedz się jak zaczyna się przygoda z Ohirem. Wpisz swój adres e-mail, aby otrzymać PDF</p>
<!--<input type="email" placeholder="e-mail">-->
<form action="http://YOURWEBSITE/index.php?option=com_acymailing&ctrl=sub" method="post">
<input id="user_email" type="text" name="user[email]" value="" placeholder="e-mail" />
</form>
<button>PROSZĘ O FRAGMENT</button>
</div>
<div class="AUTHOR">
<a class="anchor" id="AUTHOR"></a>
<h3>SZCZEPAN AUGUST URAWSKI</h3>
<span><p>Autor Ohira. Urodzony drogą naturalną w Warszawie, niemodyfikowany, bez dotacji unijnych. Rocznik 1983. Losy poprowadziły go ku ziemiom obcym, gdzie pracuje, tęskni, marzy i pisze. Pisał od kiedy pamięta. Bywały to scenariusze. Ku jego zaskoczeniu powstała też ogromna i fascynująca powieść SF.</p></span>
</div>
</section>
<section class="mobile author">
<div class="mobileAUTHOR">
<h3>SZCZEPAN AUGUST URAWSKI</h3>
<span><p>Autor Ohira.<br> Urodzony drogą naturalną w Warszawie, niemodyfikowany, bez dotacji unijnych. Rocznik 1983. Losy poprowadziły go ku ziemiom obcym, gdzie pracuje, tęskni, marzy i pisze. Pisał od kiedy pamięta. Bywały to scenariusze. Ku jego zaskoczeniu powstała też ogromna i fascynująca powieść SF.</p></span>
</div>
</section>
<section class="container SHOP">
<div class="book"></div>
<div class="border">
<h3>KUP KSIĄŻKĘ</h3>
<span> > Piękne wydanie Ohira</span>
<span> > 432 strony tekstu</span>
<span> > Sprawna i tania wysyłka kurierska za 9.90</span>
<h2 class="price">30 PLN</h2>
<button>KUPUJĘ</button>
</div>
</section>
<section class="container FOUR">
<div class="book"></div>
<div class="border">
<h3>ZESTAW CZTERECH KSIĄŻEK</h3>
<span> > Cztery książki drukowane</span>
<span> > 432 stron każda</span>
<span> > Sprawna i tania wysyłka kurierska za 9.90</span>
<div class="priceROW"><h2 class="price">99 PLN </h2><button>KUPUJĘ</button></div>
</div>
</section>
</main>
<footer>
<img class="col" src="./images/Imprint%20Media_logo.svg">
<span>
<p><b>Imprint Media Agencja Wydawnicza</b></p>
<p>ul. Chmielna 2/31</p>
<p>00-020 Warszawa</p>
</span>
<div class="line"></div>
<span>
<p>Znajdź nas na Facebooku!</p>
<p>tel. 22 24 15018</p>
<p>sklep#imprintmedia.pl</p>
</span>
<div class="line"></div>
<span>
<p>Jak wydać książkę?</p>
<p>Poznaj ofertę Imprint Media</p>
<p>Projektowanie i dystrybucja książek</p>
</span>
</footer>
</body>
I really need help with this, if anyone could help me, that would be great.
Thank you!

Categories