Change hover button class from onClick of other div

Change hover button class from onClick of other div - javascript

That button changes "TE LAAT" into "NU BETALEN" on hover with CSS, which works like a charm. Now I want the "TE LAAT" text to change only when you click the "collapsible-header" div. So when that div becomes active (I added that class now, but the active class toggles when you click it.) the text in the button changes to NU BETALEN.
Basically change the "TE LAAT" into the data-hover or data-active "NU BETALEN" when the div collapsible-header also has the active class.
.collapsible-header.active {
background-color: #e4e4e4;
}
/* .button */
.button {
display: inline-block;
position: relative;
min-width: 7rem;
margin-top: 3.7em;
margin-right: 15px;
padding: 5 6px;
border: 3px solid #EE6E73;
border-radius: 2px;
overflow: hidden;
text-decoration: none;
font-size: 0.8rem;
font-weight: bold;
outline: none;
color: #fff;
background-color: #EE6E73;
font-family: 'Roboto', sans-serif;
line-height: 1.7rem !important;
}
.button span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.button:before,
.button:after {
content: '';
position: absolute;
top: ;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: .4s,opacity .6s;
-moz-transition: .4s,opacity .6s;
-o-transition: .4s,opacity .6s;
transition: .4s,opacity .6s;
}
/* :before */
.button:before {
content: attr(data-hover);
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
}
/* :after */
.button:after {
content: attr(data-active);
-webkit-transform: translate(150%,0);
-moz-transform: translate(150%,0);
-ms-transform: translate(150%,0);
-o-transform: translate(150%,0);
transform: translate(150%,0);
}
/* Span on :hover and :active */
.button:hover span,
.button:active span {
opacity: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
/*
We show :before pseudo-element on :hover
and :after pseudo-element on :active
*/
.button:hover:before,
.button:active:after {
opacity: 1;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
/*
We hide :before pseudo-element on :active
*/
.button:active:before {
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
<link href="https://raw.githubusercontent.com/Dogfalo/materialize/master/css/ghpages-materialize.css" rel="stylesheet"/>
<button class="button right" type="button" data-hover="NU BETALEN" data-active="NU BETALEN TWEE"><span>TE LAAT</span></button>
<div class="collapsible-header active">
<p>content</p>
</div>

You should just need to replace .button:hover/.button:active with .button.active in your CSS, then add the JS below to toggle its .active class:
$('.collapsible-header').click(function(){
$('.button').toggleClass('active');
});

Related

Responsive menu not opening on IE 11

Why doesn't this JS code work in IE11? Burger menu does not open. Thought the problem was onclick, tried to do it via addEventListener, it still doesn't work.
//
I tried to use Babel, it didn't change anything, added only "use strict".
//
IE11 doesn't support toggle? It says here that the second argument is not supported only.
//
Can you tell me how to get the code to work?
document.querySelector(".animated-icon2").onclick = function (e) {
e.preventDefault();
this.classList.toggle("open");
document.querySelector(".sidebar-main").classList.toggle("show");
};
.sidebar-main{
display:none;
}
.sidebar-main.show{
display: block;
}
.mobile-menu{
position: absolute;
background-color: transparent;
border: none;
outline: 0;
top: 25px;
right: 50%;
display: block;
z-index: 7;
}
/*animated icon*/
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon2 span {
background: #000;
}
.animated-icon2 span:nth-child(1) {
top: 0px;
}
.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}
.animated-icon2 span:nth-child(4) {
top: 20px;
}
.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
<header>
<button class="mobile-menu"><div class="animated-icon2"><span></span><span></span><span></span><span></span></div></button>
<div class="sidebar-main">
<h1>Header</h1>
</div>
</header>

The following JS code works for IE11.
The onclick event is executed for the button element in your HTML structure in IE11.
document.querySelector(".mobile-menu").onclick = function (e) {
e.preventDefault();
document.querySelector(".animated-icon2").classList.toggle("open");
document.querySelector(".sidebar-main").classList.toggle("show");
};
.sidebar-main{
display:none;
}
.sidebar-main.show{
display: block;
}
.mobile-menu{
position: absolute;
background-color: transparent;
border: none;
outline: 0;
top: 25px;
right: 50%;
display: block;
z-index: 7;
}
/*animated icon*/
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon2 span {
background: #000;
}
.animated-icon2 span:nth-child(1) {
top: 0px;
}
.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}
.animated-icon2 span:nth-child(4) {
top: 20px;
}
.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
<header>
<button class="mobile-menu"><div class="animated-icon2"><span></span><span></span><span></span><span></span></div></button>
<div class="sidebar-main">
<h1>Header</h1>
</div>
</header>

This might work:
Add this to the top of the HTML file.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Your page may be forced to an IE compatibility mode for some reason, which makes it behave like an old version of IE. Adding the meta tag forces it back into IE11 mode.

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>

Getting image to display after hiding it

I am working on a slideout nav screen. I got the horizontal slide out menu to work perfectly without media queries, but when I tried to add my slide out navigation menu to my normal navigation menu, I cannot get the three line hamburger menu image to display when in a media screen on max-width: 640px;. I hide the nav-btn (menu image) when the normal navigation menu is displaying, but I want the nav-btn to display when I get to the smaller screen size to allow me to open the menu.
Does anyone see why my nav-btn will not display within my media query?
//open the lateral panel
$('.nav-btn').on('click', function(event){
event.preventDefault();
$('.nav-panel').addClass('is-visible');
});
//clode the lateral panel
$('.nav-panel').on('click', function(event){
if( $(event.target).is('.nav-panel') || $(event.target).is('.nav-panel-close') ) {
$('.nav-panel').removeClass('is-visible');
event.preventDefault();
}
});
.nav_list {
text-decoration: none;
background-color: #F0F0F0;
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav_list > a {
display: inline-block;
padding: 25px 15px;
text-decoration: none;
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #45a5ba;
}
.nav_list > a:hover {
color: #FFF;
background-color: #CCC;
}
.nav-btn {
display: none;
}
/*.nav-panel {
display: none;
}*/
#media screen and (max-width:640px) {
.header {
display: none;
}
.nav-panel {
display: block;
}
.nav_list {
text-decoration: none;
background-color: #F0F0F0;
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav_list > a {
display: block;
padding: 15px 15px;
text-decoration: none;
/*border-bottom: 1px solid #FFF;*/
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #45a5ba;
}
.nav_list > a:hover {
color: #FFF;
background-color: #CCC;
}
.nav-btn {
position: absolute;
display: block;
right: 2%;
top: 3%;
}
.nav-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition: visibility 1s;
-moz-transition: visibility 1s;
transition: visibility 1s;
}
.nav-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
-webkit-transition: background 0.8s 0.8s;
-moz-transition: background 0.8s 0.8s;
transition: background 0.8s 0.8s;
}
.nav-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.nav-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;
}
.nav-panel.is-visible .nav-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;
}
.nav-panel.is-visible .nav-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);
}
}
.nav-panel-header {
position: fixed;
width: 70%;
height: 50px;
line-height: 50px;
background: rgba(255, 255, 255, 0.96);
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;
}
#nav-slide-title {
font-weight: bold;
color: #45a5ba;
padding-left: 5%;
}
.from-right .nav-panel-header, .from-left .nav-panel-header {
top: -50px;
}
.from-right .nav-panel-header {
right: 0;
}
.from-left .nav-panel-header {
left: 0;
}
.is-visible .nav-panel-header {
top: 0;
-webkit-transition: top 0.3s 0.3s;
-moz-transition: top 0.3s 0.3s;
transition: top 0.3s 0.3s;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
<div class="header_wrap">
<div class="logo">Optimum Designs</div>
<nav>
<img src="http://optimumwebdesigns.com/icons/mobile_menu_bttn.png" style="height: 28px; width: 28px;">
<!-- <span class="nav-btn"></span> -->
<ul class="nav_list">
<li>Home</li>
<li>Work</li>
<li>Approach</li>
<li>Company</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main class="cd-main-content">
<h1>Slide In Panel</h1>
</main>
<div class="nav-panel from-right">
<header class="nav-panel-header">
<div id="nav-slide-title">Menu</div>
Close
</header>
<div class="nav-panel-container">
<div class="nav-panel-content">
<ul class="nav_list">
<li>Home</li>
<li>Work</li>
<li>Approach</li>
<li>Company</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div> <!-- nav-panel-content -->
</div> <!-- nav-panel-container -->
</div> <!-- nav-panel -->

I figured it out. I had the nav-btn within my header div. I was doing this .header {display: none;} which was not allowing my button to show within my media query.
For those that looked, thanks.

Text rendering changing un-expectedly

I've got an issue which I'm struggling to isolate whereby some of my text changes it appearance, looking slightly more bold than other times. This is in sync with a "pulsing" effect I've introduced, but I'm struggling to see why.
Here's an example of the affect. Things to look for in this animated GIF:
Name: Notice the exclamation mark that appears with a grey pulse over it
Server Item/Item Type/File Extension: Watch carefully and you'll see the text get bolder
Note that the other changes (the larger exclamation and the Item Type data changing and irrelevant, I've since commented out and still see the affect).
EDIT I've managed to get a reproduction and updated the snippet to this affect.
I should note that I've only seen this in Chrome. Firefox seems fine, IE unfortunately doesn't yet work with the codebase so I can't test until I get a reproduction working.
What the code below does is to simply toggle an animate class on a new <span class="pulse"> that has been added. This should trigger the CSS animation to kick in again, which changes the size of the grey pulse.
// Sets up a pulsing affect on any invalid icons within the Deck
(function () {
setInterval(function () {
// Check for any invalid classes, if none were found then just return
var cardErrors = $(".card.invalid");
if (cardErrors.length === 0) return;
function pulse(selection, size, position) {
var missingPulses = selection.filter(function (index, element) {
return $(element).find(".pulse").length === 0;
});
missingPulses.prepend("<div class='pulse'></div>");
// Find the pulse and remove the animation class
var pulse = selection.find(".pulse");
pulse.removeClass("animate");
// Define the pulse size if it's not done already
if (!pulse.filter(function (index, element) {
return !pulse.height() && !pulse.width();
}).length !== 0) {
pulse.css(size);
pulse.css(position);
}
//set the position and add class .animate
//pulse.css(position)
pulse.addClass("animate");
}
pulse(cardErrors, {
height: 12,
width: 12
}, {
top: 11 + 'px',
left: 316 + 'px'
});
}, 2500);
})();
.pulse {
display: block;
position: absolute;
background: #555;
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.pulse.animate {
-moz-animation: pulse-ripple 0.65s linear;
-o-animation: pulse-ripple 0.65s linear;
-webkit-animation: pulse-ripple 0.65s linear;
animation: pulse-ripple 0.65s linear;
}
#keyframes pulse-ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
/* Mixins */
/* Comment here */
html {
height: 100%;
}
body {
height: 100%;
}
body {
scrollbar-base-color: #999;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar {
width: 10px;
height: 30px;
}
::-webkit-scrollbar-button {
height: 0px;
}
::-webkit-scrollbar-track-piece {
background-color: #EBEBEB;
}
::-webkit-scrollbar-thumb {
height: 20px;
background-color: #999;
border-radius: 5px;
}
::-webkit-scrollbar-corner {
background-color: #999;
}
::-webkit-resizer {
background-color: #999;
}
.deck {
background: rgba(250, 250, 251, 0.88);
position: absolute;
top: 0;
right: 0;
width: 345px;
padding: 10px 10px 10px 10px;
opacity: 1;
height: 100%;
z-index: 10;
}
.deck .scrollable {
overflow-y: scroll;
width: 338px;
height: 100%;
padding-right: 7px;
}
.deck .non-scrollable {
width: 338px;
overflow: hidden;
}
.deck .non-scrollable .card {
width: 338px !important;
}
.deck .card {
margin-bottom: 11px;
background: #FFFFFF;
float: right;
clear: both;
font-family:'Open Sans', Arial, sans-serif;
width: 318px;
padding: 10px 12px 10px 12px;
-moz-transition: box-shadow 0.5s ease;
-webkit-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
box-shadow: 0px 1px 5px 1px rgba(198, 198, 198, 0.75);
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
position: relative;
overflow: hidden !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* remove padding added by bootstrap, but only within cards */
}
.deck .card[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.deck .card.summary-card {
cursor: pointer;
/* https://github.com/ConnorAtherton/loaders.css MIT */
}
.deck .card.summary-card:hover {
box-shadow: 10px 10px 50px 0px #c6c6c6;
}
.deck .card.summary-card .title {
color: #33BDDE;
font-size: 14px;
font-weight: normal;
display: block;
padding-bottom: 5px;
padding-left: 10px;
}
.deck .card.summary-card .notification {
top: 5px;
right: 5px;
width: 20px;
height: 20px;
position: absolute;
}
.deck .card.summary-card.busy .notification {
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
border: 3px solid #33BDDE;
border-bottom-color: transparent;
height: 15px;
width: 15px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 1.25s 0s linear infinite;
-moz-animation: rotate 1.25s 0s linear infinite;
-o-animation: rotate 1.25s 0s linear infinite;
animation: rotate 1.25s 0s linear infinite;
}
.deck .card.summary-card.filtered .notification:before {
position: relative;
font-family: FontAwesome;
top: 0px;
left: 0px;
color: #33BDDE;
font-size: 18px;
content:"\f0b0";
}
.deck .card.summary-card .content {
padding: 0 0 0 0;
}
.deck .card.summary-card .content .label {
color: #303E45;
font-size: 12px;
font-weight: normal;
float: left;
}
.deck .card.summary-card .content .value {
color: #8BC34A;
font-size: 12px;
font-weight: normal;
float: right;
}
.deck .card.summary-card .content .ellipsis {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#keyframes rotate {
0% {
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
/* ripple effect from http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design */
/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
display: block;
position: absolute;
background: rgba(198, 198, 198, 0.5);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
/* animation effect */
.ink.animate {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear;
}
#-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-moz-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-webkit-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* end of cards menu */
/* tooltips */
.dxc-tooltip {
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="deck">
<div class="scrollable">
<div>
<div class="card summary-card string-card aggregate-card clickable filtered invalid" id="FI.NAM">
<div class="notification"></div> <span class="title" data-bind="text: name">Name</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.SER">
<div class="notification"></div> <span class="title" data-bind="text: name">Server Item</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.FIL">
<div class="notification"></div> <span class="title" data-bind="text: name">File Extension</span>
</div>
</div>
</div>
</div>

CSS3 hover on icon element

html code..
<div>
<ul class="social-icon">
<li><a href="#" class="social-facebook"><i class="fa fa-facebook"></i></a</li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-dribbble"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-rss"></i></li>
</ul>
</div>
css code..
.social-icon {
text-align: center;
text-decoration: none;
position: fixed;
}
.social-icon li {
list-style: none;
display: inline-block;
float: left;
}
.social-icon a {
display: inline-block;
font-size: 18px;
line-height: 38px;
width: 35px;
border: 1px solid #f7f7f7;
border-left: 0;
text-decoration: none;
}
.social-icon a.social-facebook {
opacity: 0;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.social-icon a.social-facebook:hover {
background-color: #0e39d8;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.social-icon a:first-child {
border-left: 1px solid #f7f7f7;
}
.social-icon a i {
color: #d2d2db;
}
The problem is that.. I need one static icon and one hover icon... my static icon opacity was-0.. but i want to show static icon in same position and when hover the icon gonna be down and up.......please help me..... the fb icon not shown when hover its show.
Here is the jsfiddle link
Sorry for my bad English.

You try this
I have done it using CSS3 keyframes
CSS
.social-icon a:hover {
-webkit-animation: 0.3s popIn;
-moz-animation: 0.3s popIn;
animation: 0.3s popIn;
background-color: #0e39d8;
}
#-webkit-keyframes popIn
{
0% {-webkit-transform: scale(1)}
50% {-webkit-transform: scale(2)}
100% {-webkit-transform: scale(1); background-color: #0e39d8;
opacity: 1;}
}
#-moz-keyframes popIn
{
0% {-moz-transform: scale(1)}
50% {-moz-transform: scale(2)}
100% {-moz-transform: scale(1); background-color: #0e39d8;
opacity: 1;}
}
#keyframes popIn
{
0% {transform: scale(1)}
50% {transform: scale(2)}
100% {transform: scale(1); background-color: #0e39d8;
opacity: 1;}
}

What I usually do is:
create a tiny DIV element,
set a background to it using CSS (your image).
then create a :hover setting in CSS with a different background.

Why you set the opacity 0, that make your image trasparent.
if you want to see the static image you have to set opacity not 0 but 1 for see the image.

I do not quite understand what you want but give effect your varinat think that my version will help you
DEMO
DEMO 2
DEMO 3
.social-icon a {
opacity: 1;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.social-icon a:hover {
background-color: #0e39d8;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}

We Keep Coding

JavaScript is the programming language of the Web.

Change hover button class from onClick of other div - javascript

You should just need to replace .button:hover/.button:active with .button.active in your CSS, then add the JS below to toggle its .active class: $('.collapsible-header').click(function(){ $('.button').toggleClass('active'); });

Related

Responsive menu not opening on IE 11

Create Image modal for image gallery

Getting image to display after hiding it

Text rendering changing un-expectedly

CSS3 hover on icon element

Categories

Resources