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');
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
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);
});
I am using a button that triggers 4-5 other buttons with animation. its working fine in Chrome but not in FireFox
I have used a fullscreen background video in my current project, with this button, but in firefox, when i inspect elements, it shows there, but the browser is not displaying the element at all.
inspiration taken by - http://codepen.io/phenax/
'use strict';
(function (document, win) {
var animation_time = 600;
var btn_move_limit = 30;
var item_showing = false;
var className = {
show_items: 'menu--list__show',
revolve: 'menu--list__revolve',
button_cross: 'bar__crossy'
};
var $el = {
toggle_btn: document.querySelector('.js-menu--toggle'),
menu_items: document.querySelector('.js-menu--list'),
items: document.querySelectorAll('.js-item')
};
var constrain = function constrain(val, lim) {
return val > lim ? lim : val < -lim ? -lim : val;
};
var setButtonPosition = function setButtonPosition(left, top) {
$el.toggle_btn.style.left = constrain(left, btn_move_limit) + 'px';
$el.toggle_btn.style.top = constrain(top, btn_move_limit) + 'px';
};
var showAllItems = function showAllItems() {
var item_menu = $el.menu_items.classList;
item_menu.add(className.show_items);
setTimeout(function () {
item_menu.add(className.revolve);
$el.toggle_btn.classList.add(className.button_cross);
item_showing = true;
}, animation_time);
};
var hideAllItems = function hideAllItems() {
var item_menu = $el.menu_items.classList;
item_menu.remove(className.revolve);
$el.toggle_btn.classList.remove(className.button_cross);
setTimeout(function () {
item_menu.remove(className.show_items);
item_showing = false;
setButtonPosition(0, 0);
}, animation_time);
};
var findPosRelative = function findPosRelative(e) {
e = e.pageX ? {
pageX: e.pageX,
pageY: e.pageY
} : e.touches[0];
var offset = {
x: win.innerWidth / 2,
y: win.innerHeight / 2
};
e.pageX = e.pageX - offset.x;
e.pageY = e.pageY - offset.y;
return e;
};
var menuBtnClickHandler = function menuBtnClickHandler() {
if (item_showing)
hideAllItems();
else
showAllItems();
};
var itemClick = function itemClick(e) {
var item_id = e.target.dataset.id;
console.log('Item ID: ' + item_id);
hideAllItems();
};
var mouseMoveMent = function mouseMoveMent(e) {
var left, top;
if (item_showing) {
e = findPosRelative(e);
left = 140 * e.pageX / win.innerWidth;
top = 140 * e.pageY / win.innerHeight;
} else {
left = 0;
top = 0;
}
setButtonPosition(left, top);
};
document.addEventListener('DOMContentLoaded', function () {
$el.toggle_btn.addEventListener('click', menuBtnClickHandler);
for (var i = 0; i < $el.items.length; i++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
$el.items[i].addEventListener('click', itemClick);
}
window.CP.exitedLoop(1);
win.addEventListener('mousemove', mouseMoveMent);
win.addEventListener('touchmove', mouseMoveMent);
});
}(document, window));
.menu--toggle {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translateX(-50%);
border: none;
outline: none;
cursor: pointer;
left: 0;
top: 0;
color: #222;
z-index: 1;
background-image: url("../images/logo/logo.jpg");
background-position: center;
background-size: cover;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
}
.menu {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: -80px;
filter: url("#svgFilter"); }
.menu .item {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translateX(-50%);
border: none;
outline: none;
cursor: pointer;
left: 0;
top: 0;
background-color: #FFEB3B;
color: #222; }
.menu .item {
transition: all 0.6s ease-in-out; }
.menu--toggle {
transition: all .2s linear; }
.menu--toggle .bar {
width: 20px;
height: 2px;
background-color: #222;
margin: 5px auto;
transition: all 0.6s ease-in-out; }
.menu--toggle.bar__crossy .bar:nth-child(2) {
opacity: 0; }
.menu--toggle.bar__crossy .bar:nth-child(1) {
transform: translateY(7px) rotate(45deg); }
.menu--toggle.bar__crossy .bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg); }
.menu--list ul {
list-style-type: none;
padding: 0;
margin: 0; }
.menu--list li {
position: absolute;
width: 60px;
height: 80px;
transition: all 0.6s ease-in-out;
transform-origin: 0% 50%; }
.menu--list__show .item {
margin-left: 60px; }
.menu--list__revolve li:nth-child(1) {
transform: rotate(90deg); }
.menu--list__revolve li:nth-child(1) .item {
transform: rotate(270deg); }
.menu--list__revolve li:nth-child(2) {
transform: rotate(180deg); }
.menu--list__revolve li:nth-child(2) .item {
transform: rotate(180deg); }
.menu--list__revolve li:nth-child(3) {
transform: rotate(270deg); }
.menu--list__revolve li:nth-child(3) .item {
transform: rotate(90deg); }
.menu--list__revolve li:nth-child(4) {
transform: rotate(360deg); }
.menu--list__revolve li:nth-child(4) .item {
transform: rotate(0deg); }
<div class="menu">
<nav class="menu--list js-menu--list">
<ul>
<li><button type="button" onClick="window.open('https://www.facebook.com/themadhousecafe', '_blank')" class="fa fa-facebook item js-item" data-id="1"></button></li>
<li><button type="button" onClick="window.open('http://blog.nomadbaker.com/', '_blank')" class="fa item js-item" data-id="2">Blog</button></li>
<li><button type="button" onClick="window.open('#', '_blank')" class="item js-item" data-id="3">Menu</button></li>
<li><button type="button" onClick="window.open('#', '_blank')" class="fa fa-phone item js-item" data-id="4"></button></li>
</ul>
</nav>
<button type="button" class='logo_button menu--toggle js-menu--toggle'>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
</div>
I am trying to activate this small CSS animation involving CSS 3d transforms, when each of the elements scroll into view. The laptops need to open and close when scrolled into position. Is there any way this can be done using only CSS? If not Jquery answers will also be helpful!
The code is below.
/* Css Code */
.macbook {
width: 300px;
margin: 50px auto;
-webkit-perspective: 750;
-webkit-perspective-origin: 50% bottom;
-webkit-transform-style: preserve-3d;
-moz-perspective: 750px;
-moz-perspective-origin: 50% bottom;
-moz-transform-style: preserve-3d;
perspective: 750;
perspective-origin: 50% bottom;
transform-style: preserve-3d;
}
.macbook-lid {
width: 80%;
margin: 0 auto;
-webkit-transform-origin: 50% bottom;
-webkit-transform-style: preserve-3d;
-moz-transform-origin: 50% bottom;
-moz-transform-style: preserve-3d;
transform-origin: 50% bottom;
transform-style: preserve-3d;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.macbook-lid:before {
display: block;
content: '';
width: 92%;
margin: 0 auto;
padding: 2% 3% 0 3%;
background-color: #D3D1D2;
border-radius: 10px 10px 0 0;
-webkit-transform-origin: 50% bottom;
-webkit-transform: rotate3d(1, 0, 0, 90deg);
-moz-transform-origin: 50% bottom;
-moz-transform: rotate3d(1, 0, 0, 90deg);
transform-origin: 50% bottom;
transform: rotate3d(1, 0, 0, 90deg);
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.macbook-screen {
position: relative;
background-color: #353535;
margin: 0 auto;
padding: 3%;
border-radius: 5px 5px 0 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.macbook-screen:before {
display: block;
content: '';
position: absolute;
top: 2%;
left: 49%;
width: 1%;
padding-top: 1%;
background-color: #000;
}
.macbook-content {
position: relative;
overflow: hidden;
box-shadow: inset 0px 0px 6px #222;
}
.macbook-content1 {
background-image: url("../img/cs.png");
}
.macbook-content2 {
background-image: url("../img/xyz.png");
}
.macbook-content3 {
background-image: url("../img/abc.png");
}
.macbook-content4 {
background-image: url("../img/def.png");
}
.macbook-content5 {
background-image: url("../img/ghi.png");
}
.macbook-content6 {
background-image: url("../img/jkl.png");
}
.macbook-content:before {
display: block;
content: '';
width: 1px;
padding-top: 60%;
float: left;
}
.macbook-content:after {
display: block;
content: '';
clear: both;
}
.macbook:not(:hover) .macbook-lid {
-webkit-transform: rotate3d(-1, 0, 0, 91deg);
-moz-transform: rotate3d(-1, 0, 0, 91deg);
transform: rotate3d(-1, 0, 0, 91deg);
}
.macbook:not(:hover) .macbook-lid:before {
width: 94%;
}
<div class="row">
<div class="col-md-3">
<div class="macbook">
<div class="macbook-lid">
<div class="macbook-screen">
<div class="macbook-content macbook-content1">
</div>
</div>
</div>
<div class="macbook-base"></div>
</div>
</div>
<div class="col-md-9">
<div class="website-description text-content-yellow">
<h1>EYE- Name</h1>
<p>Description</p>
</div>
</div>
</div>
There is no way to do this via CSS only.
But you can acompilsh this easily via Waypoints library
var waypoint = new Waypoint({
element: document.getElementById('yourElement'),
handler: function(direction) {
console.log('Scrolled to waypoint!');
}
})
or with jQuery
var waypoints = $('.col-md-3').waypoint({
handler: function(direction) {
$('.col-md-3').addClass('inview');
}
})
Edit
But, for the sake of education, here is a solution built from scratch, library agnostic, easy to use.
var getPoints = function($el, wt){
return (wt > ($el.offset().top - ($(window).height()/2)) && wt < (($el.offset().top) + $el.height()));
}
var cm = function checkMilestones() {
var wt = $(window).scrollTop();
if(getPoints($('.col-md-3'), wt)){
//check if your element is in view
$('.col-md-3').addClass('inview');
} else if (getPoints($('.col-md-9'), wt)){
//if your another element is in view
$('.col-md-9').addClass('inview');
}
};
$(document).on('ready', cm);
$(window).on('scroll', cm);
Implementing
In your case, you should do this:
instead of :not(:hover), use a class
.macbook.closed .macbook-lid {
-webkit-transform: rotate3d(-1, 0, 0, 91deg);
-moz-transform: rotate3d(-1, 0, 0, 91deg);
transform: rotate3d(-1, 0, 0, 91deg);
}
Put this class in your div
<div class="macbook closed">
And use your js like this:
var getPoints = function($el, wt){
return (wt > ($el.offset().top - ($(window).height()/2)) && wt < (($el.offset().top) + $el.height()));
}
var cm = function checkMilestones() {
var wt = $(window).scrollTop();
if(getPoints($('.macbook'), wt)){
//check if your element is in view
$('.macbook').removeClass('closed');
} else if (getPoints($('.anotherElement'), wt)){
//if your another element is in view
$('.anotherElement').removeClass('removeClass');
}
};
$(document).on('ready', cm);
$(window).on('scroll', cm);
This seems to work. I've added separate classes for the 7 separate elements on display
$(window).scroll(function () {
$('.macbook').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-1");
} else {
$(this).addClass("macbook-1");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-2");
} else {
$(this).addClass("macbook-2");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-3");
} else {
$(this).addClass("macbook-3");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-4");
} else {
$(this).addClass("macbook-4");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-5");
} else {
$(this).addClass("macbook-5");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-6");
} else {
$(this).addClass("macbook-6");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-7");
} else {
$(this).addClass("macbook-7");
}
});
});
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/