I have searched extensively for the same but none of the solution worked so asking here
I want to change the background image [basically change the class of an element], in a loop. But the really tricky part for me [being new to JavaScript] is that setTimeOut stops after a fix number of times. Here's the code:
function addHomeInnerClass(selector, imageNumber = 0) {
imageNumber += 1;
if (imageNumber === 1) {
selector.classList.add('home-content-1');
}
if (imageNumber === 2) {
selector.classList.add('home-content-2');
}
if (imageNumber === 3) {
selector.classList.add('home-content-3');
}
if (imageNumber === 4) {
selector.classList.add('home-content-4');
imageNumber = 0;
}
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
addHomeInnerClass(homeInner, 0);
});
Here's my HTML section for the same:
<section class="home" id="home">
<div class="home-inner">
</div>
</section>
Here's my CSS3:
.home {
background-image: linear-gradient(to right, #ff5517 0%, #ff7000 40%, #db1d5e 80%);
height: 88.98vh;
.home-content-1 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (2).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-2 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (3).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-3 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/(4).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-4 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (1).jpg") no-repeat center center/cover;
z-index: 1;
}
}
I know CSS & HTML code hardly matter here but if I could get some other method to do what I want to, that would be great.
What I want to do?
Use pure javascript to get the fade in and fadeout image effect.
Where am I stuck?
Cannot figure out how to run setTimeOut infinite times?
NOTE: I don't want to use any third party library. It's a learning project.
As I said in a comment, the problem isn't that the timer stops running. It's that you're not removing the old classes when you add the new one. Here's how you could do that while also simplifying the code:
function addHomeInnerClass(selector, imageNumber = 0) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber = imageNumber % 4 + 1;
selector.classList.add('home-content-' + imageNumber);
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
Live Example (I modified the CSS at bit to make it easy to see the changes; I also added the missing } after the .home rule):
function addHomeInnerClass(selector, imageNumber = 0) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber = imageNumber % 4 + 1;
selector.classList.add('home-content-' + imageNumber);
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
addHomeInnerClass(homeInner, 0);
});
.home {
height: 88.98vh;
}
.home-content-1 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=1") no-repeat center center/cover;
z-index: 1;
}
.home-content-2 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=2") no-repeat center center/cover;
z-index: 1;
}
.home-content-3 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=3") no-repeat center center/cover;
z-index: 1;
}
.home-content-4 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=4") no-repeat center center/cover;
z-index: 1;
}
}
<section class="home" id="home">
<div class="home-inner">
</div>
</section>
As suggested in the comments, setInterval is exactly tailored for your needs. It allows you to run a function (like addHomeInnerClass in your case) every x milliseconds. Please note however that using this function requires you to change your imageNumber logic a bit.
Additionally, as mentioned in the comments as well, you should remove the old classes before adding new ones.
I would suggest the following approach:
let imageNumber = 0;
function addHomeInnerClass(selector) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber++;
if(imageNumber === 5) imageNumber = 1;
selector.classList.add('home-content-' + imageNumber);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
setInterval(() => addHomeInnerClass(homeInner), 1000);
});
Related
So I'm making a gallery page where the user can just upload images to the website on that page to store them or allow other people to look at them. And I've come across a performance issue and I'm not entirely sure why as I wouldn't have thought it would have any effect on performance.
Here is an image
The reason I can tell the fps is dropping is because I have a gradient in the background that moves to create an animation/glowing effect.
Here are all relevant pieces of code:
<body class='crt'>
<script>
let og_target = null;
function add_full_image(url, id, element) {
og_target = element;
let container = document.getElementById('full-image-container');
let container_inner = document.getElementById('full-image-container-inner');
let pre_img = document.getElementById(id);
container.style.zIndex = '1';
container.classList.remove('hidden');
container_inner.removeChild(container_inner.lastChild);
let img = document.getElementById(id).cloneNode(false);
img.className = 'full-image';
container_inner.appendChild(img);
}
document.addEventListener('click', function(event) {
let container_inner = document.getElementById('full-image-container-inner');
let container = document.getElementById('full-image-container');
const outside_click = typeof event.composedPath === 'function' && !event.composedPath().includes(container_inner);
const on_target = typeof event.composedPath === 'function' && event.composedPath().includes(og_target);
console.log(outside_click, container.classList.contains('hidden'), container_inner.children.length);
if (outside_click && !on_target && !container.classList.contains('hidden') && container_inner.children.length > 0) {
container.classList.add('hidden');
}
});
</script>
<div class='background-layer-1'> </div>
<div class='background-layer-2'> </div>
<div id='full-image-container' class='full-image-container'>
<div id='full-image-container-inner'>
</div>
</div>
<div class='gallery-grid'>
% for i, image in enumerate(images):
<a href='#' class='gallery-image' onclick='add_full_image("/user_data/gallery/{{image[1]}}", "{{i}}", this)'>
<img id='{{i}}' src="/user_data/gallery/{{image[1]}}" loading='lazy'/>
</a>
% end
</div>
</body>
</html>
.background-layer-1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -1;
background: linear-gradient(90deg, rgb(29, 42, 52) 0%, rgba(20,20,31,1) 25%, rgb(25, 26, 42) 80%, rgb(28, 41, 47) 100%);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
height: 100%;
}
.background-layer-2 {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -1;
background: linear-gradient(127deg, rgba(50, 114, 55, 0.4) 0% , rgba(20, 20, 31, 0.4) 25%, rgba(25, 26, 42, 0.4) 70%, rgba(95, 66, 185, 0.4) 100%);
background-size: 400% 400%;
animation: 10s 4s ease infinite gradient, 5s forwards background_layer_2;
height: 100%;
}
.crt::after {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(18, 16, 16, 0.1);
opacity: 0;
z-index: 2;
pointer-events: none;
animation: flicker 0.15s infinite;
}
.crt::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
#keyframes flicker {
0% { opacity: 0.27861; }
5% { opacity: 0.34769; }
10% { opacity: 0.23604; }
15% { opacity: 0.90626; }
20% { opacity: 0.18128; }
25% { opacity: 0.83891; }
30% { opacity: 0.65583; }
35% { opacity: 0.67807; }
40% { opacity: 0.26559; }
45% { opacity: 0.84693; }
50% { opacity: 0.96019; }
55% { opacity: 0.08594; }
60% { opacity: 0.20313; }
65% { opacity: 0.71988; }
70% { opacity: 0.53455; }
75% { opacity: 0.37288; }
80% { opacity: 0.71428; }
85% { opacity: 0.70419; }
90% { opacity: 0.7003; }
95% { opacity: 0.36108; }
100% { opacity: 0.24387; }
}
#keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
I've included everything that I think could have an affect on the fps.
I set the image loading to lazy to force them to load after everything else has loaded to not create any extra delay when initially loading the page. I've tried removing different things but it seems to only be the amount of images that load that have an effect on the fps so I'm wondering if there is something I can do to fix it.
Also the lines starting with % are python lines
Requirement:
Needed to add custom scale numbers to the range slider from the Rangeslider.js plugin, so that whenever it slides over the horizontal line it needs to display the selected number range from the console
Actual Results:
Whenever I tried to add custom numbers the whole design including marker gets ruined. Here is the below codes of the snippet which needs to add custom number scales
Code I:
init(1, 10);
function init(min, max) {
$("#io").append($("<div style='text-align:center;'><div><input type='range' id='slider' min='" + min + "' max='" + max + "' step='1' value='3' data-rangeslider><output id='val'></output></div></div>"));
$('head').append('<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet" type="text/css">');
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js")
.done(function(script, textStatus) {
console.log(textStatus);
//Preform here
initRangeSlider($("#slider"));
});
}
function initRangeSlider(ele) {
ele.rangeslider({
// Deactivate the feature detection
polyfill: false,
// Callback function
onInit: function() {
//valueOutput(this.$element[0]);
},
// Callback function
onSlide: function(position, value) {
console.log('onSlide');
console.log('position: ' + position, 'value: ' + value);
},
// Callback function
onSlideEnd: function(position, value) {
console.log('onSlideEnd');
console.log('position: ' + position, 'value: ' + value);
}
});
}
.rangeslider--horizontal {
height: 6px !important;
width: 66% !important;
}
.rangeslider__handle {
background: white;
background-image: none;
background-size: auto;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
width: 24px !important;
height: 25px !important;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>Range Slider</b><br/>
<div id='io'></div><br/><br/>
Code II:
Here the below code of snippets doesn't seem to fit for my project. This was my actual result when I tried to integrate. So I need to modify the above code I with the below code II snippets
var $r = $('input[type="range"]');
var $ruler = $('<div class="rangeslider__ruler" />');
// Initialize
$r.rangeslider({
polyfill: false,
onInit: function() {
$ruler[0].innerHTML = getRulerRange(this.min, this.max, this.step);
this.$range.prepend($ruler);
}
});
function getRulerRange(min, max, step) {
var range = '';
var i = 0;
while (i <= max) {
range += i + ' ';
i = i + step;
}
return range;
}
.rangeslider,
input[type='range'] {
max-width: 400px;
height: 6px !important;
width: 66% !important;
float: center !important;
}
.rangeslider__ruler {
cursor: pointer;
font-size: .7em;
margin: 20px 3px 0 3px;
position: relative;
top: 100%;
text-align: justify;
}
// Workaround to justify only one-line.
// Extra element to force a new line.
.rangeslider__ruler:after {
content: "";
display: inline-block;
width: 100%;
}
.rangeslider__handle {
background: white;
background-image: none;
background-size: auto;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
width: 24px !important;
height: 25px !important;
position: absolute;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.css" integrity="sha256-F8gzbY2A1VTf49iOrc8Lst/UvcUtoFr3myix0WMiNqA=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js" integrity="sha256-vFhEtGnaQ2xB+yjBTSXxssthNcfdbzu+lmLYhCdp2Cc=" crossorigin="anonymous"></script>
<!--
rangeslider.js example
https://github.com/andreruffert/rangeslider.js
by André Ruffert - #andreruffert
-->
<br/>
<input type="range" min="0" max="4" step="0.5">
Here is a resulting snapshot showed after integrating the code II to my project
Expected Result:
Code I needs to be integrated/modified taking the code from the Code II snippets
OR
Apart from rangeslider.js plugin if in case, if there are any other procedures needs to be followed.
I'm trying to get the body's background to change onload for a linear gradient onload event.
I have done this by far:
$(document).ready(function (){
$("body").addClass("bc");
});
/*CSS*/
.bc{
transition: background 1s;
background: red; /*This actually gets the fade in animation effect*/
/*background: linear-gradient(30deg, red, yellow) This doesn't get the effect*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I also tried to use Keyframes to change the background for a linear gradient but it changes it sharply
Here you have an example with keyframes animation:
$(document).ready(function (){
$("body").addClass("bc");
});
/*CSS*/
#-webkit-keyframes GradientAnimation {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#-moz-keyframes GradientAnimation {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#-o-keyframes GradientAnimation {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#keyframes GradientAnimation {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.bc{
background-color: red;
background: linear-gradient(270deg, #e4cc08, #e45708);
background-size: 400% 400%;
-webkit-animation: GradientAnimation 15s ease infinite;
-moz-animation: GradientAnimation 15s ease infinite;
-o-animation: GradientAnimation 15s ease infinite;
animation: GradientAnimation 15s ease infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And nice generator for this here: https://www.gradient-animator.com/
Since you cannot add transition on linear-gradient, you may use pseudo element that you make fading and you can easily adjust it's background and also the background of the body to create the needed effect:
setTimeout(function() {
$('body').addClass('bc')
}, 500); /*Control the start of fading here */
/*CSS*/
body {
transition: background 5s;
background:linear-gradient(60deg, yellow, red);
height:100vh;
margin:0;
}
body:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0;
transition: opacity 3s; /* control the speed of fading here*/
background: linear-gradient(30deg, red, pink)
}
body.bc:before {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
CSS transition works, but it lays an overlay over background. If you have text, which is placed above background, it will be overlaid.
i wrote a solution with jQuery, where you can define colors and order in which they would be changed from one to another:
in the example below, the animation goes from green to purple, and then back to green, and so on, until the animation stops after defined number of seconds
var stopAfterSec = 23;
var speed = 15;
var purple = [255, 26, 26];
var green = [26, 255, 118];
var sea_green = [26, 255, 244];
var order = [green, sea_green, purple];
var current = 0;
var direction = -1;
var color = end_color = order[current];
function updateGradient() {
if (color[0] == end_color[0] && color[1] == end_color[1] && color[2] == end_color[2]) {
direction = (current > 0 && current < order.length - 1) ? direction : (-1) * Math.sign(direction);
current += direction;
end_color = order[current];
}
$('.animGradientEfron').css({
background: "-webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 1) 0%, rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", 0.48) 100%)"
});
for (var i = 0; i <= 2; i++) {
if (color[i] != end_color[i]) {
color[i] += Math.sign((end_color[i] - color[i]));
}
}
}
jQuery(document).ready(function() {
var startGradientAnimation = setInterval(updateGradient, speed);
setTimeout(function() {
clearInterval(startGradientAnimation);
}, stopAfterSec * 1000);
});
.animGradientEfron {
position: absolute;
top: 25%;
left: 0%;
width: 100%;
height: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animGradientEfron"></div>
please refer it
.css {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
height: 200px;
}
<div class="css"></div>
Use css gradient over background image
I am using this clock in my homepage.
It isn´t working in IE.
What is the problem with IE and how I can solve it?
Working CodePen
/*
* flipclock
* Version: 1.0.1
* Authors: #gokercebeci
* Licensed under the MIT license
* Demo: http://
*/
(function($) {
var pluginName = 'flipclock';
var methods = {
pad: function(n) {
return (n < 10) ? '0' + n : n;
},
time: function(date) {
if (date) {
var e = new Date(date);
var b = new Date();
var d = new Date(e.getTime() - b.getTime());
} else
var d = new Date();
var t = methods.pad(date ? d.getFullYear() - 70 : d.getFullYear())
+ '' + methods.pad(date ? d.getMonth() : d.getMonth() + 1)
+ '' + methods.pad(date ? d.getDate() - 1 : d.getDate())
+ '' + methods.pad(d.getHours())
+ '' + methods.pad(d.getMinutes())
+ '' + methods.pad(d.getSeconds());
return {
'Y': {'d2': t.charAt(2), 'd1': t.charAt(3)},
'M': {'d2': t.charAt(4), 'd1': t.charAt(5)},
'D': {'d2': t.charAt(6), 'd1': t.charAt(7)},
'h': {'d2': t.charAt(8), 'd1': t.charAt(9)},
'm': {'d2': t.charAt(10), 'd1': t.charAt(11)},
's': {'d2': t.charAt(12), 'd1': t.charAt(13)}
};
},
play: function(c) {
$('body').removeClass('play');
var a = $('ul' + c + ' section.active');
if (a.html() == undefined) {
a = $('ul' + c + ' section').eq(0);
a.addClass('ready')
.removeClass('active')
.next('section')
.addClass('active')
.closest('body')
.addClass('play');
}
else if (a.is(':last-child')) {
$('ul' + c + ' section').removeClass('ready');
a.addClass('ready').removeClass('active');
a = $('ul' + c + ' section').eq(0);
a.addClass('active')
.closest('body')
.addClass('play');
}
else {
$('ul' + c + ' section').removeClass('ready');
a.addClass('ready')
.removeClass('active')
.next('section')
.addClass('active')
.closest('body')
.addClass('play');
}
},
// d1 is first digit and d2 is second digit
ul: function(c, d2, d1) {
return '<ul class="flip ' + c + '">' + this.li('d2', d2) + this.li('d1', d1) + '</ul>';
},
li: function(c, n) {
//
return '<li class="' + c + '"><section class="ready"><div class="up">'
+ '<div class="shadow"></div>'
+ '<div class="inn"></div></div>'
+ '<div class="down">'
+ '<div class="shadow"></div>'
+ '<div class="inn"></div></div>'
+ '</section><section class="active"><div class="up">'
+ '<div class="shadow"></div>'
+ '<div class="inn">' + n + '</div></div>'
+ '<div class="down">'
+ '<div class="shadow"></div>'
+ '<div class="inn">' + n + '</div></div>'
+ '</section></li>';
}
};
// var defaults = {};
function Plugin(element, options) {
this.element = element;
this.options = options;
// this.options = $.extend({}, defaults, options);
// this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var t, full = false;
if (!this.options || this.options == 'clock') {
t = methods.time();
} else if (this.options == 'date') {
t = methods.time();
full = true;
} else {
t = methods.time(this.options);
full = true;
}
$(this.element)
.addClass('flipclock')
.html(
(full ?
methods.ul('year', t.Y.d2, t.Y.d1)
+ methods.ul('month', t.M.d2, t.M.d1)
+ methods.ul('day', t.D.d2, t.D.d1)
: '')
+ methods.ul('hour', t.h.d2, t.h.d1)
+ methods.ul('minute', t.m.d2, t.m.d1)
+ methods.ul('second', t.s.d2, t.s.d1)
+ '<audio id="flipclick">'
+ '<source src="https://github.com/gokercebeci/flipclock/blob/master/js/plugins/flipclock/click.mp3?raw=true" type="audio/mpeg"/>'
+ '</audio>');
setInterval($.proxy(this.refresh, this), 1000);
},
refresh: function() {
var el = $(this.element);
var t;
if (this.options
&& this.options != 'clock'
&& this.options != 'date') {
t = methods.time(this.options);
} else
t = methods.time()
// second sound
setTimeout(function() {
document.getElementById('flipclick').play()
}, 500);
// second first digit
el.find(".second .d1 .ready .inn").html(t.s.d1);
methods.play('.second .d1');
// second second digit
if ((t.s.d1 === '0')) {
el.find(".second .d2 .ready .inn").html(t.s.d2);
methods.play('.second .d2');
// minute first digit
if ((t.s.d2 === '0')) {
el.find(".minute .d1 .ready .inn").html(t.m.d1);
methods.play('.minute .d1');
// minute second digit
if ((t.m.d1 === '0')) {
el.find(".minute .d2 .ready .inn").html(t.m.d2);
methods.play('.minute .d2');
// hour first digit
if ((t.m.d2 === '0')) {
el.find(".hour .d1 .ready .inn").html(t.h.d1);
methods.play('.hour .d1');
// hour second digit
if ((t.h.d1 === '0')) {
el.find(".hour .d2 .ready .inn").html(t.h.d2);
methods.play('.hour .d2');
// day first digit
if ((t.h.d2 === '0')) {
el.find(".day .d1 .ready .inn").html(t.D.d1);
methods.play('.day .d1');
// day second digit
if ((t.D.d1 === '0')) {
el.find(".day .d2 .ready .inn").html(t.D.d2);
methods.play('.day .d2');
// month first digit
if ((t.D.d2 === '0')) {
el.find(".month .d1 .ready .inn").html(t.M.d1);
methods.play('.month .d1');
// month second digit
if ((t.M.d1 === '0')) {
el.find(".month .d2 .ready .inn").html(t.M.d2);
methods.play('.month .d2');
// year first digit
if ((t.M.d2 === '0')) {
el.find(".year .d1 .ready .inn").html(t.Y.d1);
methods.play('.year .d1');
// year second digit
if ((t.Y.d1 === '0')) {
el.find(".year .d2 .ready .inn").html(t.Y.d2);
methods.play('.year .d2');
}
}
}
}
}
}
}
}
}
}
}
},
};
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$(this).data('plugin_' + pluginName)) {
$(this).data('plugin_' + pluginName,
new Plugin(this, options));
}
});
};
})(typeof jQuery !== 'undefined' ? jQuery : Zepto);
// RUN
$('#container').flipclock();
html, body {
margin: 0;
padding:0;
height: 100%;
color: #fff;
font: 11px/normal sans-serif;
background-image: url('https://github.com/gokercebeci/flipclock/raw/master/css/background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://github.com/gokercebeci/flipclock/raw/master/css/mask.png');
z-index: 2;
}
h1 {
margin: 0 10px;
font-size: 70px;
font-weight: bold;
text-shadow: 0 0 2px #fff;
}
.clearfix {
clear: both;
}
#page {
margin: 0 auto;
width: 600px;
}
#container {
opacity: .9;
}
#usage li {
position: relative;
margin: 5px 0;
padding: 10px;
color: #222;
background: #fff;
}
#usage code {
position: absolute;
top:0;
right:0;
padding: 10px;
color: #eee;
border: 1px solid #333;
background: #000;
}
/*
* flipclock
* Version: 1.0.0
* Authors: #gokercebeci
* Licensed under the MIT license
* Demo: http://
*/
/*==============================================================================
FLIP CLOCK
==============================================================================*/
.flipclock {
}
.flipclock hr {
position: absolute;
left: 0;
top: 65px;
width: 100%;
height: 3px;
border: 0;
background: #000;
z-index: 10;
opacity: 0;
}
ul.flip {
position: relative;
float: left;
margin: 10px;
padding: 0;
width: 180px;
height: 130px;
font-size: 120px;
font-weight: bold;
line-height: 127px;
}
ul.flip li {
float: left;
margin: 0;
padding: 0;
width: 49%;
height: 100%;
-webkit-perspective: 200px;
list-style: none;
}
ul.flip li.d1 {
float: right;
}
ul.flip li section {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
ul.flip li section:first-child {
z-index: 2;
}
ul.flip li div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 49%;
overflow: hidden;
}
ul.flip li div .shadow {
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
ul.flip li div.up {
-webkit-transform-origin: 50% 100%;
top: 0;
}
ul.flip li div.down {
-webkit-transform-origin: 50% 0%;
bottom: 0;
}
ul.flip li div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #fff;
text-shadow: 0 0 2px #fff;
text-align: center;
background-color: #000;
border-radius: 6px;
}
ul.flip li div.up div.inn {
top: 0;
}
ul.flip li div.down div.inn {
bottom: 0;
}
/*--------------------------------------
PLAY
--------------------------------------*/
body.play ul section.ready {
z-index: 3;
}
body.play ul section.active {
-webkit-animation: index .5s .5s linear both;
z-index: 2;
}
#-webkit-keyframes index {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
body.play ul section.active .down {
z-index: 2;
-webkit-animation: flipdown .5s .5s linear both;
}
#-webkit-keyframes flipdown {
0% {
-webkit-transform: rotateX(90deg);
}
80% {
-webkit-transform: rotateX(5deg);
}
90% {
-webkit-transform: rotateX(15deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
body.play ul section.ready .up {
z-index: 2;
-webkit-animation: flipup .5s linear both;
}
#-webkit-keyframes flipup {
0% {
-webkit-transform: rotateX(0deg);
}
90% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-90deg);
}
}
/*--------------------------------------
SHADOW
--------------------------------------*/
body.play ul section.ready .up .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: show .5s linear both;
}
body.play ul section.active .up .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: hide .5s .3s linear both;
}
/*DOWN*/
body.play ul section.ready .down .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
-webkit-animation: show .5s linear both;
}
body.play ul section.active .down .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
-webkit-animation: hide .5s .3s linear both;
}
#-webkit-keyframes show {
0% {
opacity: 0;
}
90% {
opacity: .10;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes hide {
0% {
opacity: 1;
}
80% {
opacity: .20;
}
100% {
opacity: 0;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<div id="mask">
<div id="page">
<h1>flipclock</h1>
<div id="container"></div>
<div class="clearfix"></div>
<h2>USAGE</h2>
<ul id="usage">
<li class="selected">
clock
<code>$('#container').flipclock();</code>
</li>
<li>
fulldate
<code>$('#container').flipclock('date');</code>
</li>
<li>
countdown
<code>$('#container').flipclock('2013 01 17 12:00:00');</code>
</li>
</ul>
</div>
</div>
Thank you all for your tipps and support!
I solved the problem. Older IE-Versions couldn´t read the DATE format..
i had:
flipclock('2016 01 16 11:00:00');
but for IE it should be:
flipclock('2017-01-16T11:00:00.000Z');
I am trying to make a JavaScript multiple image uploader that uploads image previews to a slider, but I am having some issues. So far it looks like I was able to get the images to upload into the slider, but the problem seems to happen with my i variable - when I try to increment it, it stays the same, not allowing my next and previous slider arrows from working. If anyone knows how to get this slider working properly, I would appreciate the help.
JS Code:
$('#_uploadImages').click(function() {
$('#_imagesInput').click()
})
$('#_imagesInput').on('change', function() {
handleFileSelect();
});
function handleFileSelect() {
//Check File API support
if (window.File && window.FileList && window.FileReader) {
var files = event.target.files; //FileList object
var output = document.getElementById("frames");
for (var i = 0; i < files.length; i++) {
var file = files[i];
//Only pics
if (!file.type.match('image')) continue;
var picReader = new FileReader();
picReader.addEventListener("load", function (event) {
var picFile = event.target;
console.log(event);
current_i = i;
prev_i = current_i - 1;
next_i = current_i + 1;
//var div = document.createElement("div");
//div.innerHTML = div.innerHTML + "<img class='thumbnail' src='" + picFile.result + "'" + "title='" + picFile.name + "'/>";
//output.insertBefore(div, null);
////output.innerHTML = output.innerHTML + "<img class='thumbnail' style='max-width:500px' src='" + picFile.result + "'" + "title=''/>"; // TODO: Enter Title
output.innerHTML = output.innerHTML + '<li id="slide-' + current_i + '" class="slide">' + "<img src='" + picFile.result + "'" + "title=''/>" + '<nav>' + '<a class="prev" href="#slide-' + prev_i + '">←</a>' + '<a class="next" href="#slide-' + next_i + '">→</a>' + '</nav>' + '<li>'; // TODO: Enter Title
});
//Read the image
picReader.readAsDataURL(file);
}
//output.innerHTML = output.innerHTML + '<li class="quicknav">' + '<ul>' + '<li></li>' + '<li></li>' + '<li></li>' + '</ul>' + '</li>'
} else {
console.log("Your browser does not support File API");
}
}
JSFiddle: http://jsfiddle.net/Hybridx24/yfr57u6w/
The problem with the code is that by the time the load event executes - the for loop has already incremented. So if two images are added - the value of i when the load event is executing is already 2.
One way to solve this is to add the value of i to an array and retrieve it in the event listener one by one:
var arrFilesCount = [];
for (var i = 0; i < files.length; i++) {
arrFilesCount.push(i); //push to array
var file = files[i];
//Only pics
if (!file.type.match('image')) continue;
var picReader = new FileReader();
picReader.addEventListener("load", function (event) {
var picFile = event.target;
current_i = arrFilesCount.shift(); // get from array instead of using i
prev_i = current_i - 1;
next_i = current_i + 1;
...
...
Corresponding jsFiddle here
Now, this array can also be used for determining the first/last element and thereby using this to go from last to first element. Because we cannot be sure when the event listener will execute (say if there are 100 images the first event listener may execute when the count of loop has reached 5 or 10), so I've used two loops instead of one. The first loop just to populate the array.
var arrFilesCount = [];
for (var i = 0; i < files.length; i++) {
arrFilesCount.push(i);
}
Lets use this to find the first and last elements
current_i = arrFilesCount.shift();
if(current_i === 0){
prev_i = files.length - 1; //This is for the first element. The previous slide will be the last image. (i=length-1)
}
else{
prev_i = current_i - 1;
}
if(arrFilesCount.length === 0){
next_i = 0; //This is for the last element. The next slide will be the first image (i=0)
}
else{
next_i = current_i + 1;
}
See this jsFiddle.
Finally, there can be scenarios where the user first adds a couple of images then clicks on upload button again and adds a couple of more images. In this case we need to correct the existing href. The elements which we need to correct are the next of last and prev of first. This can be done using:
var start = $(output).find('li').length;
var end = start+ files.length;
if(start !== 0){
$(output).find('li > nav > a.prev').first().attr('href','#slide-' + (end-1));
$(output).find('li > nav > a.next').last().attr('href','#slide-'+start);
}
So the final jsFiddle will be something like this.
Substituted .append() for .innerHTML ; created variable idx to increment .slide li elements ids ; added delegated click event to nav a elements ; added .bind() with this set to picReader , i passed as parameter to picReader onload event ; added file.name to title attribute of img element ; added "dot" navigation with thumbanail of images beneath #frames ; title to arrow navigation
var idx = -1, re = /(.*)(?=\.)/;
$('#_uploadImages').click(function() {
$('#_imagesInput').click();
});
$('#_imagesInput').on('change', function(event) {
handleFileSelect(event);
});
$(document).on("click", ".slider .slide nav a, .nav a", function(e) {
e.preventDefault();
$(".slide").hide()
.filter(":has(img[title^="+e.target.title.match(re)[0]+"])").show();
});
function handleFileSelect(event) {
//Check File API support
if (window.File && window.FileList && window.FileReader) {
var files = event.target.files; //FileList object
var output = document.getElementById("frames");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var picReader = new FileReader();
picReader.onload = function(index, event) {
++idx;
var picFile = event.target;
var slides = $(".slider li[id^=slide]");
// TODO: Enter Title
$(output)
.append('<li id="slide-'
+ idx
+ '" class="slide">'
+ "<img src='"
+ picFile.result
// set `title`
+ "'title="
//`index` : `i`
+ files[index].name
+ "/>"
+ '<nav>'
+ '<a class="prev">←</a>'
+ '<a class="next">→</a>'
+ '</nav>'
+ '</li>');
// add title to `nav a` elements
if (file.name === files[files.length - 1].name) {
$(".nav").empty();
$("nav a").each(function(i, el) {
if ($(el).closest("[id^=slide]").prev("[id^=slide]").length
&& $(el).is("nav a:nth-of-type(1)")) {
$(el).attr("title",
$(el).closest("[id^=slide]")
.prev("[id^=slide]").find("img").attr("title")
)
}
if ($(el).closest("[id^=slide]").next("[id^=slide]").length
&& $(el).is("nav a:nth-of-type(2)")) {
$(el).attr("title",
$(el).closest("[id^=slide]")
.next("[id^=slide]").find("img").attr("title")
)
}
if ($(el).is(".slider [id^=slide]:first a:first")) {
$(el).attr("title",
$("[id^=slide]:last").find("img").attr("title")
)
}
if ($(el).is(".slider [id^=slide]:last a:last")) {
$(el).attr("title",
$("[id^=slide]:first").find("img").attr("title")
)
};
});
$(".slider img").each(function(i, el) {
$(".nav").append(
$("nav a[title^="
+$(el).attr("title").match(re)[0]
+"]:first")
.clone().html(el.outerHTML)
)
})
}
}.bind(picReader, i);
//Read the image
picReader.readAsDataURL(file);
};
} else {
console.log("Your browser does not support File API");
}
}
* {
margin: 0;
padding: 0;
/*transition*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
body {
padding: 30px;
}
/* Slider */
.slider {
height: 250px;
left: 50%;
margin: -125px -225px;
position: absolute;
top: 48%;
width: 450px;
/*box-shadow*/
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.slider .frames {
height: 250px;
position: relative;
list-style-type: none;
}
.slider .frames .slide {
height: 250px;
list-style: none;
position: absolute;
width: 450px;
}
.slider .slide:target {
z-index: 100
}
.slider .frames .slide img {
height: 250px;
width: 450px;
}
.slider .frames .slide nav a {
background: hsla(0, 0%, 0%, .75);
color: #fff;
font-size: 16px;
line-height: 50px;
margin-top: -25px;
opacity: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 50%;
width: 50px;
visibility: hidden;
z-index: 10;
}
.slider:hover .frames .slide nav a {
opacity: 1;
visibility: visible;
}
.slider .slide nav a:hover {
cursor: pointer;
}
.slider .frames .slide nav .prev {
/*border-radius*/
-webkit-border-radius: 0 25px 25px 0;
-moz-border-radius: 0 25px 25px 0;
border-radius: 0 25px 25px 0;
left: 0;
}
.slider .frames .slide nav .next {
/*border-radius*/
-webkit-border-radius: 25px 0 0 25px;
-moz-border-radius: 25px 0 0 25px;
border-radius: 25px 0 0 25px;
right: 0;
}
.slider .frames .slide nav a:hover {
background: #000
}
.slider .quicknav {
bottom: 0;
font-size: 0;
opacity: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 100;
}
.slider:hover .quicknav {
opacity: .9
}
.slider .quicknav li {
display: inline-block
}
.slider .quicknav a {
background: hsla(0, 0%, 100%, .9);
border: 1px solid hsla(0, 0%, 0%, .9);
/*border-radius*/
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
display: block;
height: 10px;
margin: 10px 5px;
text-decoration: none;
width: 10px;
}
.slider .quicknav a:hover {
background: hsla(0, 0%, 50%, .9)
}
.nav {
width:100%;
text-align:center;
}
.nav a {
display:inline-block;
background:transparent;
border-radius:50%;
border:4px solid transparent;
width:24px;
height:24px;
margin:4px;
}
.nav a img {
width:22px;
height:22px;
border-radius:50%;
}
.slider #one:target ~ .quicknav a[href="#one"],
.slider #two:target ~ .quicknav a[href="#two"],
.slider #three:target ~ .quicknav a[href="#three"],
.slider #four:target ~ .quicknav a[href="#four"],
.slider #five:target ~ .quicknav a[href="#five"] {
background: hsla(0, 0%, 0%, .9);
border-color: hsla(0, 0%, 100%, .9);
background: rgb(244, 246, 245);
/*linear-gradient*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(rgba(244, 246, 245, 1), 0.01), color-stop(rgba(203, 219, 219, 1), 1), color-stop(rgba(216, 216, 216, 1), 1));
background: -webkit-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: -moz-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: -o-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(244, 246, 245, 1)), color-stop(100%, rgba(203, 219, 219, 1)), color-stop(100%, rgba(216, 216, 216, 1)));
background: -webkit-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: -moz-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: -o-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f4f6f5', endColorstr='#d8d8d8', GradientType=0);
/*box-shadow*/
-webkit-box-shadow: inset 0 0 3px #000, 0 0 2px rgba(0, 0, 0, .5), 0 2px 3px #666;
-moz-box-shadow: inset 0 0 3px #000, 0 0 2px rgba(0, 0, 0, .5), 0 2px 3px #666;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button id="_uploadImages" class="btn btn-primary">Upload Images</button>
<form id="_imagesForm" action="" method="post">
<input id="_imagesInput" accept="image/*" type="file" style="display:none" multiple>
</form>
<div id="_displayImages">
<div class="slider">
<ul id="frames" class="frames">
</ul>
<div class="nav"></div>
</div>
</div>
jsfiddle http://jsfiddle.net/yfr57u6w/24/