chrome set opacity is not consistentanly rendering as expected

chrome set opacity is not consistentanly rendering as expected - javascript

I've spend about a week looking for an answer and trying various different ways of setting the opacity and forcing the various elements to redraw in order to update the full amount.
This renders fully in firefox http://i.imgur.com/l90zjoi.png
var hex = document.getElementsByClassName('hex')[0];
hex.classList.add("highlight");
.hex {
float: left;
margin-right: -29px;
margin-bottom: -52px;
height: 104px;
width: 120px;
}
.highlight {
opacity:0.50;
filter: alpha(opacity=50);
}
.desert {
background: url("http://i.imgur.com/zAr9w6T.png");
}
.periplaneta{
fill : #FF9933;
stroke : black;
}
a {
color: inherit;
}
.menu {
background: #8bc34a;
color: white;
text-align: center;
}
.menu-item, .menu-open-button {
background: #e91e63;
border-radius: 100%;
width: 25px;
height: 25px;
margin-left: -40px;
position: absolute;
color: white;
text-align: center;
line-height: 25px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
}
.menu-open {
display: none;
}
.menu-item:hover {
background: white;
color: #e91e63;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.7, 1.7) translate3d(0, 0, 0);
transform: scale(1.7, 1.7) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
-webkit-transform: translate3d(-40px, -25px, 0);
transform: translate3d(-40px, -25px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 280ms;
transition-duration: 280ms;
-webkit-transform: translate3d(40px, -25px, 0);
transform: translate3d(40px, -25px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 380ms;
transition-duration: 380ms;
-webkit-transform: translate3d(40px, 25px, 0);
transform: translate3d(40px, 25px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 480ms;
transition-duration: 480ms;
-webkit-transform: translate3d(-40px, 25px, 0);
transform: translate3d(-40px, 25px, 0);
}
.rotate{
-webkit-transition: all 0.2s linear;
transition: all 0.5s linear;
}
.rotate.down{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
<div class="hex desert"><nav class="menu"><input type="checkbox" href="#" class="menu-open" name="menu-open53" id="menu-open53" disabled=""><label class="menu-open-button" for="menu-open53" style="background: orange;"><i class="fa rotate action-display fa-arrow-right"></i></label> <i class="fa fa-arrow-right move-action"></i> <i class="fa fa-shield defence-action"></i> <i class="fa fa-bug recruit-action"></i> <i class="fa fa-cog harvest-action"></i> </nav><svg height="100" width="100"><g><circle cx="30" cy="60" r="15" id="inf" class="periplaneta"></circle><text x="25" y="65" font-family="Verdana" font-size="20" fill="black">1</text></g><g><polygon points="60,5 40,40 80,40" class="periplaneta"></polygon><text x="55" y="35" font-family="Verdana" font-size="20" fill="black">2</text></g><g><rect x="50" y="50" width="40" height="40" class="periplaneta"></rect><text x="60" y="75" font-family="Verdana" font-size="20" fill="black">1</text> </g></svg></div>
What is causing this? There are 432 hexes on the page. But i'm only looking to highlight a maximum of 6 of them. Any thoughts/insights would be really appreciated.

So after spending a week investigating this it looks to be a bug with Chrome.
In place of changing the opacity I opt'd for applying a webfilter to highlight the hexes as a workaround for the bug in chrome.
-webkit-filter: brightness(110%);
-webkit-filter: sepia(70%);
-webkit-filter: hue-rotate(-15deg);
I hope this helps anyone experiencing the same issue

Related

Create Image modal for image gallery

I'm Trying to create Image modal for image gallery,But I don't see result When Click on Image,I Don't Know where is problem
How I can fixed it?where is my Wrong?I Used this
link https://codepen.io/koolhaus/pen/ajwcE
My code is
<script>
$(document).on('ready', function(){
$modal = $('.modal-frame');
$overlay = $('.modal-overlay');
$modal.bind('webkitAnimationEnd oanimationend msAnimationEnd
animationend', function(e){
if($modal.hasClass('state-leave')) {
$modal.removeClass('state-leave');
}
});
$('.close').on('click', function(){
$overlay.removeClass('state-show');
$modal.removeClass('state-appear').addClass('state-leave');
});
$('.open').on('click', function(){
$overlay.addClass('state-show');
$modal.removeClass('state-leave').addClass('state-appear');
});
});
$("button").click(function () {
$.ajax({
method: 'GET',
url: './comment?media_id=' + this.id,
success: function (data) {
$("#comments").html(data);
}
});
});
</script>
<div id="comments">
<div class="modal-frame">
<div class="modal">
</div>
</div>
#foreach($array as $img)
<li style="margin:0 auto">
<a class="fancy-btn open">
<img src="{{$img['image']}}">
</a>
</li>
</ul>
#endforeach
</div>

$(document).on('ready', function() {
$modal = $('.modal-frame');
$overlay = $('.modal-overlay');
$modal.bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
if ($modal.hasClass('state-leave')) {
$modal.removeClass('state-leave');
}
});
$('.close').on('click', function() {
$overlay.removeClass('state-show');
$modal.removeClass('state-appear').addClass('state-leave');
});
$('.open').on('click', function() {
$overlay.addClass('state-show');
$modal.removeClass('state-leave').addClass('state-appear');
});
});
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 22px;
background-color: #F2E1AC;
}
.fancy-btn {
-webkit-appearance: none;
cursor: pointer;
outline: none;
border: none;
position: relative;
top: 50%;
display: block;
min-width: 10%;
line-height: 55px;
font-size: 14px;
text-transform: uppercase;
margin: 0 auto;
padding: 0 10px;
background-color: #F2594B;
color: #FFF;
border-radius: 3px;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.fancy-btn:hover {
background-color: #f46f63;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #fff;
opacity: 0;
visibility: hidden;
z-index: 40;
-moz-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
-o-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
-webkit-transition: opacity 0.25s ease, visibility 0.35s linear;
-webkit-transition-delay: 0s, 0s;
transition: opacity 0.25s ease 0s, visibility 0.35s linear;
}
.modal-overlay.state-show {
opacity: .7;
visibility: visible;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-moz-transition-duration: 0.2s, 0s;
-o-transition-duration: 0.2s, 0s;
-webkit-transition-duration: 0.2s, 0s;
transition-duration: 0.2s, 0s;
}
.modal-frame {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 50;
/* display: table; */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
width: 100%;
text-align: center;
visibility: hidden;
}
.modal-frame.state-appear {
visibility: visible;
}
.modal-frame.state-appear .modal-inset {
-moz-animation: modalComeIn 0.25s ease;
-webkit-animation: modalComeIn 0.25s ease;
animation: modalComeIn 0.25s ease;
visibility: visible;
/* to keep # final state */
}
.modal-frame.state-appear .modal-body {
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
.modal-frame.state-leave {
visibility: visible;
}
.modal-frame.state-leave .modal-inset {
-moz-animation: modalHeadOut 0.35s ease 0.1s;
-webkit-animation: modalHeadOut 0.35s ease 0.1s;
animation: modalHeadOut 0.35s ease 0.1s;
visibility: visible;
}
.modal-frame.state-leave .modal-body {
opacity: 0;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
#-moz-document url-prefix() {
.modal-frame {
height: calc(100% - 55px);
}
}
.modal {
display: block;
vertical-align: middle;
text-align: center;
}
.modal-inset {
position: relative;
padding: 60px;
background-color: white;
min-width: 320px;
min-height: 126px;
margin: auto;
visibility: hidden;
-moz-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.modal-inset .close {
display: block;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
padding: 10px;
opacity: .4;
}
.modal-inset .close:hover {
opacity: 1;
}
.modal-body {
margin: auto;
opacity: 0;
-moz-transform: translateY(0) scale(0.8, 0.8);
-ms-transform: translateY(0) scale(0.8, 0.8);
-webkit-transform: translateY(0) scale(0.8, 0.8);
transform: translateY(0) scale(0.8, 0.8);
-moz-transition-property: opacity, -moz-transform;
-o-transition-property: opacity, -o-transform;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.modal-body h3 {
font-weight: 700;
padding-bottom: 22px;
display: block;
color: #F2594B;
text-align: center;
}
.modal-body p {
padding-bottom: 20px;
}
.modal-body .ps {
font-size: 12px;
opacity: .3;
}
#-webkit-keyframes modalComeIn {
0% {
visibility: hidden;
opacity: 0;
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
65.5% {
-moz-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
100% {
visibility: visible;
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#-moz-keyframes modalComeIn {
0% {
visibility: hidden;
opacity: 0;
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
65.5% {
-moz-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
100% {
visibility: visible;
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#keyframes modalComeIn {
0% {
visibility: hidden;
opacity: 0;
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
65.5% {
-moz-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
100% {
visibility: visible;
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#-webkit-keyframes modalHeadOut {
0% {
visibility: visible;
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
100% {
visibility: hidden;
opacity: 0;
-moz-transform: translateY(35px) scale(0.97, 0.97);
-ms-transform: translateY(35px) scale(0.97, 0.97);
-webkit-transform: translateY(35px) scale(0.97, 0.97);
transform: translateY(35px) scale(0.97, 0.97);
}
}
#-moz-keyframes modalHeadOut {
0% {
visibility: visible;
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
100% {
visibility: hidden;
opacity: 0;
-moz-transform: translateY(35px) scale(0.97, 0.97);
-ms-transform: translateY(35px) scale(0.97, 0.97);
-webkit-transform: translateY(35px) scale(0.97, 0.97);
transform: translateY(35px) scale(0.97, 0.97);
}
}
#keyframes modalHeadOut {
0% {
visibility: visible;
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
100% {
visibility: hidden;
opacity: 0;
-moz-transform: translateY(35px) scale(0.97, 0.97);
-ms-transform: translateY(35px) scale(0.97, 0.97);
-webkit-transform: translateY(35px) scale(0.97, 0.97);
transform: translateY(35px) scale(0.97, 0.97);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="modal-frame">
<div class="modal">
<div class="modal-inset">
<div class="button close"><i class="fa fa-close"></i></div>
<div class="modal-body">
<h3>Hello header</h3>
<p>body here......</p>
<p class="ps">ps!!!</p>
</div>
</div>
</div>
</div>
<div class="modal-overlay"></div>
<div id="comments">
<li style="margin:0 auto">
<a width="100" height="100" class="fancy-btn open"> <img alt="Image Here" />
</a>
</li>
</div>

How to use jquery function in a tag

I am trying to use some functionality like a sidepanel to open but using an <a> tag.
Could you please help me, below is the code related to it.
HTML
Click Me
jQuery
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
I want to make use of the above jQuery and use it in my <a> tag.

Attach the click event to body and delegate to cd-btn. Adding event handler to element directly doesn't handle dynamic elements. The element cd-btn is in your pop-up. The pop-up HTML is dynamically injected, so when you attach the event the HTML is probably not present. But you can easily add the handler to body and delegate it like:
$('body').on('click', '.cd-btn',function(event) {
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
jQuery(function($) {
//open the lateral panel
$('body').on('click', '.cd-btn',function(event) {
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event) {
if ($(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close')) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
$(function() {
$("#popover-a").popover({
html: true,
trigger: 'click hover',
delay: {
show: 50,
hide: 3500
},
content: function() {
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true,
trigger: 'click hover',
delay: {
show: 50,
hide: 3500
},
content: function() {
return $('#popover-content-b').html();
}
});
});
.circle-macro {
border-radius: 50%;
background-color: rgb(68, 104, 125);
color: white;
padding: 0 8px;
font-family: 'Times New Roman';
font-style: italic;
z-index: 10;
cursor: pointer;
}
.hidden {
display: none;
}
.cd-main-content {
text-align: center;
}
.cd-main-content .cd-btn {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
font-family: 'Open Sans', sans-serif;
z-index: 9;
}
.cd-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
.cd-panel-header {
position: fixed;
height: 27px;
background-color: transparent;
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-webkit-transition: top 0.3s 0s;
-moz-transition: top 0.3s 0s;
transition: top 0.3s 0s;
}
.from-right .cd-panel-header,
.from-left .cd-panel-header {
top: -50px;
}
.from-right .cd-panel-header {
right: 0;
}
.from-left .cd-panel-header {
left: 0;
}
.is-visible .cd-panel-header {
top: 0;
-webkit-transition: top 0.3s 0.3s;
-moz-transition: top 0.3s 0.3s;
transition: top 0.3s 0.3s;
}
.cd-panel-container {
position: fixed;
height: 100%;
top: 0;
background: #fafafa;
border-left: 1px solid #c8cacc;
z-index: 1;
width: 70%;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
z-index: 1;
overflow-y: auto;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me
</p>
</div>
</div>
<br>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me
</p>
</div>
</div>
</div>
<div class="cd-panel from-right">
<header class="cd-panel-header">
Close
</header>
<div class="cd-panel-container">
CD PANEL
</div>
<!-- cd-paneCD PANELl-container -->
</div>
<!-- cd-panel -->

Want to close the sidepanel using the minus icon

Currently the sidepanel opens using PLUS symbol and is closed using the close btn on the sidepanel.
PLUS symbol now changes to minus but it doesn't go back to plus when the sidepanel is closed and also I want to be able to click the minus symbol and close the sidepanel as well.
Hope I made my point clear.
Here is the jsfiddle related to it:
https://jsfiddle.net/bob_js/h9yfbden/1/
HTML
<div class="container">
<i class="glyphicon glyphicon-plus-sign cd-btn"></i>
</div>
<div class="cd-panel-nvv from-right">
<header class="cd-panel-header">
</header>
<div class="cd-panel-container">
Content
</div>
</div>
CSS
.glyphicon-plus-sign, .glyphicon-minus-sign{
top: 30%;
position: absolute !important;
z-index: 1;
color: rgb(255, 133, 102);
background-color: #fff;
border-radius: 50%;
border: 1px solid #fff;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.glyphicon-plus-sign:hover, .glyphicon-minus-sign:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*::after, *::before {
content: '';
}
a {
color: #89ba2c;
text-decoration: none;
}
.cd-main-content {
text-align: center;
}
.cd-main-content .cd-btn {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-main-content .cd-btn-val {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn-val:hover {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
font-family: 'Open Sans', sans-serif;
z-index: 9;
}
.cd-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.cd-panel-header {
position: fixed;
height: 27px;
width: 3%;
background-color: transparent;
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
-webkit-transition: top 1.3s 0s;
-moz-transition: top 1.3s 0s;
transition: top 1.3s 0s;
}
.from-right .cd-panel-header, .from-left .cd-panel-header {
top: -50px;
}
.from-right .cd-panel-header {
right: 20px;
}
.from-left .cd-panel-header {
left: 0;
}
.is-visible .cd-panel-header {
top: 0;
-webkit-transition: top 1.3s 0.3s;
-moz-transition: top 1.3s 0.3s;
transition: top 1.3s 0.3s;
}
#media only screen and (min-width: 1471px) {
.cd-panel-header {
height: 30px;
}
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 40px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 11px;
left: 20px;
height: 3px;
width: 15px;
background-color: #fff;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
height: 100%;
top: 0;
background: #901818;
border-left: 1px solid #c8cacc;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 1.8s;
-moz-transition-duration: 1.8s;
transition-duration: 1.8s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
z-index: 1;
overflow-y: auto;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 23.5%;
}
}
#media only screen and (min-width: 1271px) {
.cd-panel-container {
width: 23.5%;
}
}
#media only screen and (min-width: 1471px) {
.cd-panel-container {
width: 23.5%;
}
}
jQuery
$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
$(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});

You were not that far...
I only changed addClass for toggleClass
in $('.cd-btn').on('click'....
And added $('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");to $('.cd-panel').on('click'....
$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
$(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
//NVV
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
$('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
event.preventDefault();
}
});
});
Updated Fiddle

Use .toggleClass(); and listening to both $('.cd-btn, .cd-panel').
JSFiddle
jQuery(function($) {
//open the lateral panel
$('.cd-btn, .cd-panel').on('click', function(event) {
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
$('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
});

facebook reaction buttons / javascript gets called only once in PHP loop

I'm trying integrate facebook animated reaction emoji's to my website and suprised that there are not many sources about it. Actually I'm almost done. I found nice script and modified it in parts to my purpose and happy to share it with you. But it only works in the way I want for one post. There is a problem when the page has multiple posts that can be liked. I ve found that javascript doesnt gets called more than one times inside php loop and dont know why. I both tried to keep javascript externally and internally. Didnt work. Here is my code. For demo purpose I have added some php lines inside html section in snippet. Any ideas?
'use strict';
(function() {
var likeLink = document.querySelector('.Like__link');
likeLink.addEventListener('mouseenter', function() {
likeLink.classList.remove('js-hover');
});
likeLink.classList.remove('js-hover');
}());
.Like {
position: relative;
display: inline-block;
margin-top: 5rem;
}
.Like__link {
cursor: pointer;
}
.Emojis {
position: absolute;
left: 0;
bottom: 120%;
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: .125rem;
border-radius: 100rem;
-webkit-transition: .3s .3s;
transition: .3s .3s;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
}
.Emojis:hover,
.Like__link.js-hover ~ .Emojis,
.Like__link:hover ~ .Emojis {
-webkit-transition-delay: 0s;
transition-delay: 0s;
opacity: 1;
visibility: visible;
}
.Emoji {
position: relative;
width: 3rem;
height: 3rem;
color: #ffd972;
cursor: pointer;
-webkit-transition-delay: .6s, .3s;
transition-delay: .6s, .3s;
-webkit-transition-duration: 0s, .3s;
transition-duration: 0s, .3s;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0) scale(0.3);
transform: translate3d(0, 100%, 0) scale(0.3);
}
.Emojis:hover .Emoji,
.Like__link.js-hover + .Emojis .Emoji,
.Like__link:hover + .Emojis .Emoji {
-webkit-transform: none;
transform: none;
opacity: 1;
}
.Emoji .icon {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: -webkit-transform .2s ease;
transition: -webkit-transform .2s ease;
transition: transform .2s ease;
transition: transform .2s ease, -webkit-transform .2s ease;
}
.Emoji:hover .icon {
-webkit-transform: scale(1) translate3d(0, -10%, 0);
transform: scale(1) translate3d(0, -10%, 0);
}
.Emojis:hover .Emoji:nth-of-type(1),
.Like__link:hover + .Emojis .Emoji:nth-of-type(1) {
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1);
}
.Emojis:hover .Emoji:nth-of-type(2),
.Like__link:hover + .Emojis .Emoji:nth-of-type(2) {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.02s;
transition-delay: 0.02s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.2);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.2);
}
.Emojis:hover .Emoji:nth-of-type(3),
.Like__link:hover + .Emojis .Emoji:nth-of-type(3) {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-delay: 0.04s;
transition-delay: 0.04s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.4);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.4);
}
.Emojis:hover .Emoji:nth-of-type(4),
.Like__link:hover + .Emojis .Emoji:nth-of-type(4) {
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-delay: 0.06s;
transition-delay: 0.06s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.6);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.6);
}
.Emojis:hover .Emoji:nth-of-type(5),
.Like__link:hover + .Emojis .Emoji:nth-of-type(5) {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-delay: 0.08s;
transition-delay: 0.08s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.8);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.8);
}
.Emojis:hover .Emoji:nth-of-type(6),
.Like__link:hover + .Emojis .Emoji:nth-of-type(6) {
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2);
}
.Emoji--like {
/* color: $c-blue; */
}
.Emoji--love {
/* color: $c-red; */
}
.icon {
background-image: url("https://media.giphy.com/media/xT9DPr2QnsfTFoykFO/giphy.gif");
background-repeat: no-repeat;
}
.icon--like {
background-position: -6px -6px;
}
.icon--heart {
background-position: -68px -4px;
}
.icon--haha {
background-position: -129px -6px;
}
.icon--wow {
background-position: -191px -6px;
}
.icon--sad {
background-position: -252px -5px;
}
.icon--angry {
background-position: -314px -6px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
background-color: #fff;
color: #222;
text-align: center;
}
.intro {
width: 80%;
max-width: 30rem;
padding-bottom: 1rem;
margin: 0 auto 1em;
padding-top: .5em;
text-transform: capitalize;
border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
}
.intro small {
display: block;
opacity: .5;
font-style: italic;
text-transform: none;
}
.info {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 1em;
font-size: .9em;
font-style: italic;
font-family: serif;
text-align: right;
opacity: .5;
}
.info a {
color: inherit;
}
kbd {
display: inline-block;
background-color: rgba(0, 0, 0, 0.05);
color: #666;
text-shadow: 1px 1px #fff;
padding: 1px 4px;
border-radius: 2px;
box-shadow: inset 1px 1px 3px -1px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<?php //queries here. $entries=... foreach ($entries as $item) { ?>
<!-- beginning of foreach loop-->
<script>
// in normal this block is activeve to prevent initial appear but commented now.
// var likeLink = document.querySelector('.Like__link'); likeLink.classList.remove('js-hover');
</script>
<div class="box">
<div class="Like"><a class="Like__link js-hover">Like <kbd>hover me!!</kbd></a>
<div class="Emojis">
<div class="Emoji Emoji--like">
<div class="icon icon--like"></div>
</div>
<div class="Emoji Emoji--love">
<div class="icon icon--heart"></div>
</div>
<div class="Emoji Emoji--haha">
<div class="icon icon--haha"></div>
</div>
<div class="Emoji Emoji--wow">
<div class="icon icon--wow"></div>
</div>
<div class="Emoji Emoji--sad">
<div class="icon icon--sad"></div>
</div>
<div class="Emoji Emoji--angry">
<div class="icon icon--angry"></div>
</div>
<script>
// in normal Im putting the javascript here. and it gets called only one for some raeson.
</script>
</div>
</div>
</div>
<?php } ?>
<!-- end of foreach loop-->
</body>
</html>
reference of the code

You should not insert Javascript functions inside a PHP while fetch loop.
The effect is to output your functions as many time as you have rows.
So something like this will obviously not work:
<script>
function something(){
// code
}
</script>
<!-- some HTML for row[0]-->
<script>
function something(){
// code
}
</script>
<!-- some HTML for row[1]-->
<script>
function something(){
// code
}
</script>
<!-- some HTML for row[2]-->
<!-- and so on... -->
You should see right away that the function something() is defined more than one time...
And this is bad.
I think that THIS IS the problem you're facing.

Remove -webkit transform/transform class with JavaScript

I'm trying to create an expanding column layout: when you hover over the pictures it blurs and zooms and when you click on it it expands.
I'm trying to remove the blur and zoom effect once the image has expanded.
I've tried removeProp() and document.getElementById('').style.setProperty("webkit-filter", "none") but neither of them worked.
Any insights or tips would be greatly appreciated!!!
Thank you :)
Here's my JS:
var Expand = (function() {
var tile = $('.photo');
var tileLink = $('.photo > .photo-content');
var tileText = tileLink.find('.photo-inner-text');
var stripClose = $('.photo-close');
var tileAnimate = ('.photo:hover');
var expanded = false;
var open = function() {
var tile = $(this).parent();
if (!expanded) {
tile.addClass('photo__expanded');
// add delay to inner text
tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.addClass('photo-close__show');
stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
tileAnimate.removeProp('filter', '-webkit-filter');
expanded = true;
}
};
var close = function() {
if (expanded) {
tile.removeClass('photo__expanded');
// remove delay from inner text
tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.removeClass('photo-close__show');
stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)')
expanded = false;
}
}
var bindActions = function() {
tileLink.on('click', open);
stripClose.on('click', close);
};
var init = function() {
bindActions();
};
return {
init: init
};
}());
Expand.init();
My CSS (a little messy, I apologize):
#import url(https://fonts.googleapis.com/css?family=Oswald);
body {
margin: 0;
padding: 0;
background-color: #000;
}
div {
margin: 0;
padding: 0;
}
.main-container {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.photo {
background-color: #0c2d50;
will-change: width, left, z-index, height;
position: absolute;
width: 20%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: 1s;
}
.photo:nth-child(1) {
left: 0;
background: url("../images/image1.jpg");
background-size: cover;
}
.photo:nth-child(2) {
left: 20vw;
background: url("../images/image2.jpg");
background-size: cover;
}
.photo:nth-child(3) {
left: 40vw;
background: url("../images/image3.jpg");
background-size: cover;
}
.photo:nth-child(4) {
left: 60vw;
background: url("../images/image4.jpg");
background-size: cover;
}
.photo:nth-child(5) {
left: 80vw;
background: url("../images/image1.jpg");
background-size: cover;
}
.photo:active,
.photo:hover {
opacity: 1;
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transform:scale(1.15); /* Safari and Chrome */
-moz-transform:scale(1.15); /* Firefox */
-ms-transform:scale(1.15); /* IE 9 */
-o-transform:scale(1.15); /* Opera */
transform:scale(1.15);
}
.photo {
background-color: #000;
height: 100vh;
-webkit-transition: all .5s ease; /* Safari and Chrome */
-moz-transition: all .5s ease; /* Firefox */
-o-transition: all .5s ease; /* IE 9 */
-ms-transition: all .5s ease; /* Opera */
transition: all .5s ease;
}
.photo:nth-child(1) .photo-content {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-animation-name: photo1;
animation-name: photo1;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.photo:nth-child(2) .photo-content {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-animation-name: photo2;
animation-name: photo2;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.photo:nth-child(3) .photo-content {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-animation-name: photo3;
animation-name: photo3;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.photo:nth-child(4) .photo-content {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-animation-name: photo4;
animation-name: photo4;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.photo:nth-child(5) .photo-content {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-animation-name: photo5;
animation-name: photo5;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
/*******************************************************
.photo a:active img,
.photo a:hover img {
opacity: .6;
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transform:scale(1.15); /* Safari and Chrome
-moz-transform:scale(1.15); /* Firefox
-ms-transform:scale(1.15); /* IE 9
-o-transform:scale(1.15); /* Opera
transform:scale(1.15);
}
.photo img {
height: 100vh;
-webkit-transition: all .5s ease; /* Safari and Chrome
-moz-transition: all .5s ease; /* Firefox
-o-transition: all .5s ease; /* IE 9
-ms-transition: all .5s ease; /* Opera
transition: all .5s ease;
}
****************************************************/
.photo-content {
position:relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
/* text hidden */
.photo-title {
color: #ffffff;
text-align: center;
font-family: 'Oswald';
font-size: 4em;
line-height: 1.2em;
z-index: 1000;
width: 100%;
position: absolute;
top: 60px;
left: 10px;
opacity: 0;
-webkit-transition: all .5s ease; /* Safari and Chrome */
-moz-transition: all .5s ease; /* Firefox */
-o-transition: all .5s ease; /* IE 9 */
-ms-transition: all .5s ease; /* Opera */
transition: all .5s ease;
}
/* text shown on hover */
.photo a:active .photo-title,
.photo a:hover .photo-title {
opacity: 1;
-webkit-animation: flicker 2s infinite; /* Flicker effect */
-webkit-transition: all 1.5s ease; /* Safari and Chrome */
-moz-transition: all 1.5s ease; /* Firefox */
-o-transition: all 1.5s ease; /* IE 9 */
-ms-transition: all 1.5s ease; /* Opera */
transition: all 1.5s ease;
}
#-webkit-keyframes flicker {
0% {opacity:0;}
9% {opacity:0;}
10% {opacity:.5;}
13% {opacity:0;}
20% {opacity:.5;}
25% {opacity:1;}
}
/* added for slider */
.main-container .photo-content {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.main-container .photo-content:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.05;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.main-container .photo-inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: 70%;
-webkit-transform: translate(-50%, -50%) scale(0.5);
-ms-transform: translate(-50%, -50%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.photo__expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 3;
cursor: default;
min-height: 100vh;
}
.photo__expanded .photo-title {
opacity: 0;
}
.photo__expanded .photo-inner-text {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
.photo-close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 10;
-webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.photo-close__show {
opacity: 1;
}
#-webkit-keyframes photo1 {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo1 {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo2 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo2 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo3 {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo3 {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo4 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo4 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo5 {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo5 {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fa {
font-size: 30px;
color: white;
}
And my HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Abtin Animation</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootloader.css">
</head>
<body>
<section class="main-container">
<article class="photo">
<div class="photo-content">
<div class="photo-title">LAUGH</div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">DREAM</div>
<div class="photo-inner-text"><h1>hey</h1><p>testing</p></div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">LIVE</div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">PLAY</div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">LAUGH</div>
</div>
</article>
<i class="fa fa-close photo-close"></i>
</section>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

chrome set opacity is not consistentanly rendering as expected - javascript

Related

Create Image modal for image gallery

How to use jquery function in a tag

Want to close the sidepanel using the minus icon

facebook reaction buttons / javascript gets called only once in PHP loop

Remove -webkit transform/transform class with JavaScript

Categories

Resources