I am trying to make a slide panel, https://codyhouse.co/gem/css-slide-in-panel. when I run the following code, I can't click on my bottom. Can someone please help to fix it.
const panel = document.querySelector('.cd-panel');
var ind = true;
const tr = document.querySelector('.trigger');
btn.addEventListener('click', ()=>{
if(ind){
ind = false;
panel.classList.add('cd-panel--is-visible');
}else{
ind = true;
panel.classList.remove('cd-panel--is-visible');
}
});
tr.addEventListener('click', ()=>{
console.log('here');
});
.cd-panel {
/*...*/
visibility: hidden;
transition: visibility 0s 0.6s;
}
.cd-panel.cd-panel--is-visible {
visibility: visible;
transition: visibility 0s 0s;
}
.cd-panel__header {
/*...*/
position: fixed;
top: 0;
width: 90%;
height: 50px;
transition: transform 0.3s 0s;
transform: translateY(-50px);
}
.cd-panel--from-right .cd-panel__header {
right: 0;
}
.cd-panel--from-left .cd-panel__header {
left: 0;
}
.cd-panel--is-visible .cd-panel__header {
transition: transform 0.3s 0.3s;
transform: translateY(0px);
}
.cd-panel__container {
/*...*/
position: fixed;
width: 90%;
height: 100%;
top: 0;
transition: transform 0.3s 0.3s;
}
.cd-panel--from-right .cd-panel__container {
right: 0;
transform: translate3d(100%, 0, 0);
}
.cd-panel--from-left .cd-panel__container {
left: 0;
transform: translate3d(-100%, 0, 0);
}
.cd-panel--is-visible .cd-panel__container {
transform: translate3d(0, 0, 0);
transition-delay: 0s;
}
<button id='btn'>BTN</button>
<main class="cd-main-content">
<!-- your main content here -->
</main>
<div class="cd-panel cd-panel--from-right js-cd-panel-main">
<header class="cd-panel__header">
<h1>Title Goes Here</h1>
<button class='trigger'>Trigger</button>
</header>
<div class="cd-panel__container">
<div class="cd-panel__content">
<!-- your side panel content here -->
</div> <!-- cd-panel__content -->
</div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->
I want to see 'here' logged in console as I click on the trigger button, I tried to add a cursor: pointer in .trigger, but it didn't work as well.
The problem in .cd-panel__container it should not be postition:fixed
the .cd-panel__container have specific width and height, when you make it's position as fixed, it will cover the elements behind it.
So you just need to modify class .cd-panel__container's position to static
const panel = document.querySelector('.cd-panel');
var ind = true;
const tr = document.querySelector('.trigger');
const btn = document.querySelector('#btn');
btn.addEventListener('click', ()=>{
if(ind){
ind = false;
panel.classList.add('cd-panel--is-visible');
}else{
ind = true;
panel.classList.remove('cd-panel--is-visible');
}
});
tr.addEventListener('click', ()=>{
console.log('here');
});
.cd-panel {
/*...*/
visibility: hidden;
transition: visibility 0s 0.6s;
}
.cd-panel.cd-panel--is-visible {
visibility: visible;
transition: visibility 0s 0s;
}
.cd-panel__header {
/*...*/
position: fixed;
top: 0;
width: 90%;
height: 50px;
transition: transform 0.3s 0s;
transform: translateY(-50px);
}
.cd-panel--from-right .cd-panel__header {
right: 0;
}
.cd-panel--from-left .cd-panel__header {
left: 0;
}
.cd-panel--is-visible .cd-panel__header {
transition: transform 0.3s 0.3s;
transform: translateY(0px);
}
.cd-panel__container {
/*...*/
/* position: fixed;*/
width: 90%;
height: 100%;
top: 0;
transition: transform 0.3s 0.3s;
}
.cd-panel--from-right .cd-panel__container {
right: 0;
transform: translate3d(100%, 0, 0);
}
.cd-panel--from-left .cd-panel__container {
left: 0;
transform: translate3d(-100%, 0, 0);
}
.cd-panel--is-visible .cd-panel__container {
transform: translate3d(0, 0, 0);
transition-delay: 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id='btn'>BTN</button>
<main class="cd-main-content">
<!-- your main content here -->
</main>
<div class="cd-panel cd-panel--from-right js-cd-panel-main">
<header class="cd-panel__header">
<h1>Title Goes Here</h1>
<button class='trigger'>Trigger</button>
</header>
<div class="cd-panel__container">
<div class="cd-panel__content">
<!-- your side panel content here -->
</div> <!-- cd-panel__content -->
</div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->
<script src="index.js"></script>
</body>
</html>
Related
hey i try to fade in pause for a sec and fade out a span , im using class add and remove through timeout and interval . i cant figure it out someone can help?
i tried to do it with active class but i didnt make it .
i searched for it on google and found nothing with JS only Jquery that i dont want to use ATM
--------HTML----
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
-----CSS-----
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
visibility: hidden;
position: absolute;
}
/* .design-kinds.active {
opacity: 1;
visibility: visible;
animation: fade 3s ease-in-out 3s 1;
} */
.design-kinds.fadein {
animation: fadeIn 1s ease-in;
visibility: visible;
}
.design-kinds.fadeout {
animation: fadeOut 1s ease-out;
visibility: hidden;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
#keyframes fadeOut {
0% {
opacity: 100;
}
100% {
opacity: 0;
}
}
---JS---
const changeText = document.querySelector(".what__design");
const textToShow = document.querySelectorAll(".design-kinds");
//Fade in First span and fade out Last span
let index = 0;
let doneOrNot = "not";
function showText() {
const spans = [...textToShow];
if (index === spans.length - 1) {
index = 0;
}
if (doneOrNot === "done") {
doneOrNot = "not";
setTimeout(() => {
spans[index].classList.remove("fadein");
spans[index].classList.add("fadeout");
}, 4000);
index++;
console.log(doneOrNot);
}
if (doneOrNot === "not") {
spans[index].classList.add("fadein");
doneOrNot = "done";
console.log(doneOrNot);
}
}
setInterval(showText, 4000);
THANKS <3
If you want to animate it for a single time, than you don't want to need javascript.
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
position: absolute;
}
.web{
animation: animate1 4s 2s 1 ease-in-out ;
color: black;
opacity: 0;
}
.logo{
animation: animate1 4s 8s 1 ease-in-out ;
opacity: 0;
}
.brand{
animation: animate1 4s 14s 1 ease-in-out ;
opacity: 0;
}
#keyframes animate1{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
#keyframes animate2{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
#keyframes animate3{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds web">WebSite's</span>
<span class="design-kinds logo">Logos</span>
<span class="design-kinds brand">Brands</span>
</div>
</div>
<!-- <script src="index.js"></script> -->
</body>
</html>
The given JS checks whether done is set, if it is immediately sets it to not and then checks if it's not and acts on that. This probably needs changing to an if...else combination.
Although you can do the animation by JS you may like to consider doing it with CSS as that should optimise the system's use of for example the GPU as you are only changing an animatable property (opacity).
While the specific example given here could be done entirely by CSS - setting up one set of keyframes which fade in, pause and fadeout a text for 33.3333% of the total animation time of 3*whatever seconds you choose - to be more general it adds a bit of JS which is run just once at the start to set up the keyframes to give the right %s however many texts there are.
This is done by setting CSS variables which are used in CSS calcs to give the overall animation time and the delay times - each text starts its animation offset depending on its index and then it runs forever.
<head>
<style>
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
/*visibility: hidden;*/
position: absolute;
animation: fadeInOut calc(var(--num) * var(--t)) infinite linear;
animation-delay: calc(var(--n) * var(--t));
animation-fill-mode: forwards;
}
</style>
<style id="keyframes">
</style>
</head>
<body>
div class="desgin">
<div class="im__desgin">
<h1>I'm Desgin.</h1>
</div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
<script>
const showFor = 6; // set this to the number of seconds each text takes to fade in, pause for 1 second and fade out again
const whatDesign = document.querySelector('.what__design');
const designKinds = document.querySelectorAll('.design-kinds');
const len = designKinds.length;
whatDesign.style.setProperty('--num', len);
whatDesign.style.setProperty('--t', showFor + 's');
for (let n = 0; n < len; n++) {
designKinds[n].style.setProperty('--n', n);
}
const pcEachGets = 100 / len; // the percentage of total cycle time each bit of text gets
const pcForOneSecond = pcEachGets / showFor; // the % of total cycle time that equals 1 second - 1 second is the required pause time
const pcFadeInOrOut = (pcEachGets - pcForOneSecond) / 2;
document.querySelector('#keyframes').innerHTML = `#keyframes fadeInOut {
0% {
opacity: 0;
}
` + pcFadeInOrOut + `% {
opacity: 1;
}
` + (pcFadeInOrOut + pcForOneSecond) + `% {
opacity: 1;
}
` + pcEachGets + `% {
opacity: 0;
}
100% {
opacity: 0;
}
}`;
</script>
</body>
I think this will help you.
if you want this animation as a infinite loop.
const changeText = document.querySelector(".what__design");
const textToShow = document.querySelectorAll(".design-kinds");
//Fade in First span and fade out Last span
let index = 0;
function showText() {
setInterval(() => {
if (index < 2) {
textToShow[index].classList.add("fadeinOut");
index++;
}
else {
textToShow[index].classList.add("fadeinOut");
setTimeout(() => {
textToShow[2].classList.remove("fadeinOut");
}, 4000);
index = 0;
}
if (index > 0) {
setTimeout(() => {
textToShow[index - 1].classList.remove("fadeinOut");
}, 4000);
}
}, 5000);
}
showText();
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
visibility: hidden;
position: absolute;
}
/* .design-kinds.active {
opacity: 1;
visibility: visible;
animation: fade 3s ease-in-out 3s 1;
} */
.design-kinds.fadeinOut {
animation: fadeInOut 4s ease-in;
visibility: visible;
}
#keyframes fadeInOut {
0%,100% {
opacity: 0;
}
20%,80% {
opacity: 100;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I figure some out but still i have a delay that i doest succeed to manage the delay after the function is done
<div class="im__desgin"><h1>I Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds" id="Kind-1">WebSite's</span>
<span class="design-kinds" id="Kind-2">Logos</span>
<span class="design-kinds" id="Kind-3">Brands</span>
</div>
</div>
.desgin {
text-align: center;
font-size: 40px;
color: aliceblue;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
position: relative;
}
.design-kinds {
text-align: center;
opacity: 0;
position: absolute;
}
.effect {
animation: animate1 4s 2s 1 ease-in-out;
transform: scale(0.5);
opacity: 0;
}
#keyframes animate1 {
0%,
100% {
transform: scale(0.5);
opacity: 0;
}
30%,
50% {
transform: scale(1);
opacity: 10;
}
30% {
transform: scale(1);
opacity: 10;
}
}
const spans = document.querySelectorAll(".design-kinds");
//call function before page load
showText();
//Changing Text
function showText() {
//Kind --1--
$("#Kind-1").addClass("effect");
setTimeout(() => {
$("#Kind-1").removeClass("effect");
}, 6000);
//Kind --2--
setTimeout(() => {
$("#Kind-2").addClass("effect");
}, 3700);
setTimeout(() => {
$("#Kind-2").removeClass("effect");
}, 9800);
//Kind --3--
setTimeout(() => {
$("#Kind-3").addClass("effect");
}, 7700);
setTimeout(() => {
$("#Kind-3").removeClass("effect");
}, 14000);
}
setInterval(showText, 13000);
I have buttonclick function in jquery which gives a magnified popup effect of given div test-popup in button test..
i want that magnified popup effect of div test-popup to happen when i call javascript function caller() when i click button go.
How to achieve this?
function caller() {
$.magnifiedeffect();
};
$.magnifiedeffect = function() {
};
var theControl = $("#test-popup");
$('#clickMe').magnificPopup({
items: {
src: theControl,
},
type: 'inline',
mainClass: 'mfp-zoom-in mfp-with-anim', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out', // CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
}
});
html,
body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/* ====== Zoom effect ======*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<input type="button" value="go" onclick=" caller();">
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Congradulations </div>
You can simulate a click on an element and trigger all the corresponding events with .click().
function caller() {
$('#clickMe').click();
};
var theControl = $("#test-popup");
$('#clickMe').magnificPopup({
items: {
src: theControl,
},
type: 'inline',
mainClass: 'mfp-zoom-in mfp-with-anim', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out', // CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
}
});
html,
body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<input type="button" value="go" onclick=" caller();">
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Congradulations </div>
I want to darken an image, but it isn't fully black in the end, because I can see the image some extent. I want to use vanilla JS only (no jQuery).
I have used a color array (colorArr), but I think there are much more elegant ways for darkening.
var element = document.getElementById("img");
var colorArr = ["#fff","#ddd","#bbb","#999","#777","#555","#333","#000",];
var counter = 0;
var j=0;
var i = setInterval(function(){
if(j < colorArr.length){
element.style.backgroundColor = colorArr[j];
j++;
}
counter++;
if(counter === 8) {
clearInterval(i);
}
}, 250);
div.darken img {
background-color: white;
}
<html>
<body>
<div class="darken">
<img id="img"
src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />
</div>
</body>
</html>
I'll do it using CSS and JavaScript.
window.onload = function () {
document.getElementById("mask").classList.add("on");
};
.dark-img {display: inline-block; position: relative;}
.dark-img .mask {position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; opacity: 0; background-color: #000; transition: opacity 2.5s linear;}
.dark-img .mask.on {opacity: 1;}
<div class="dark-img">
<div class="mask" id="mask"></div>
<img src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" alt="" />
</div>
This technique allows me to use any colour and duration. Let's say orange for 1.5 seconds:
window.onload = function () {
document.getElementById("mask").classList.add("on");
};
.dark-img {display: inline-block; position: relative;}
.dark-img .mask {position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; opacity: 0; background-color: #f90; transition: opacity 1.5s linear;}
.dark-img .mask.on {opacity: 1;}
<div class="dark-img">
<div class="mask" id="mask"></div>
<img src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" alt="" />
</div>
This is a CSS only solution!
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0;
}
<a href="http://google.com" class="darken">
<img src="http://www.placehold.it/200x200" width="200">
</a>
You can use Web Animations API, Promise.all() to animate the background-color of <img> .parentElement from #fff to #000 and animate <img> element opacity to 0 in parallel.
const element = document.getElementById("img");
element.parentElement.style.width = `${element.naturalWidth}px`;
const button = document.querySelector("button");
const colorArr = ["#fff", "#ddd", "#bbb", "#999", "#777", "#555", "#333", "#000"];
const settings = {
easing: "linear",
fill: "forwards",
duration: 2500,
iterations: 1
};
button.onclick = () =>
Promise.all([element.parentElement.animate(colorArr.map(color => ({
backgroundColor: color
})), settings)
, element.animate([{opacity: 0}],
settings)]);
div.darken img {
background-color: white;
position: relative;
opacity: 1;
}
<html>
<body>
<button>click</button>
<div class="darken">
<img id="img" src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />
</div>
</body>
</html>
Use a pseudo element and keep the markup as is, add a CSS transition and then fire it with a hover or script, which ever suit best
window.addEventListener('load', function(){
document.querySelector('button').addEventListener('click', function (){
document.querySelector('.darken').classList.toggle('on');
})
})
div.darken img {
background-color: white;
}
div.darken {
display: inline-block;
position: relative;
}
div.darken::after {
content: '';
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
background: black;
opacity: 0;
transition: opacity 1s;
}
div.darken:hover::after {
opacity: 1;
}
div.darken.on::after {
opacity: 1;
background: lightgray;
}
#keyframes darken {
0% { opacity: 0; }
100% { opacity: 1; }
}
<html>
<body>
<button>Click here (or hover image) to toggle darken</button><br>
<div class="darken">
<img id="img"
src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />
</div>
</body>
</html>
I am following this tutorial to build a simple sidebar. I follow the exact steps and code except for some controller/app names. I didn't see anything wrong with it. However it doesn't show up. Can anyone point me out? See the comment for a plunker link with full code...
html code:
<!DOCTYPE html>
<html ng-app="sideBarApp">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="app.js"></script>
<script src="directive.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="sidebar">
<button ng-click="showLeft($event)">Show left Menu!</button>
<button ng-click="showRight($event)">Show Right Menu!</button>
<menu visible="visible" alignment="left">
<menu-item hash="first-page">First Page></menu-item>
<menu-item hash="second-page">Second Page></menu-item>
<menu-item hash="third-page">Third Page></menu-item>
</menu>
</body>
</html>
app.js
var app = angular.module('sideBarApp', []);
app.run(function ($rootScope) {
document.addEventListener("keyup", function (e) {
if (e.keyCode == '27') {
$rootScope.$broadcast("escapePressed", e.target);
}
});
document.addEventListener("click", function (e) {
$rootScope.$broadcast("documentClicked", e.target);
})
});
controller.js
app.controller("sidebar", function ($scope, $rootScope) {
$scope.leftVisible = false;
$scope.rightVisible = false;
$scope.close = function () {
$scope.leftVisible = false;
$scope.rightVisible = false;
};
$scope.showLeft = function (e) {
$scope.leftVisible = true;
e.stopPropagation();
};
$scope.showRight = function (e) {
$scope.rightVisible = true;
e.stopPropagation();
}
$rootScope.$on("documentClicked", _close);
$rootScope.$on("escapePressed", _close);
function _close() {
$scope.$apply(function () {
$scope.close();
});
}
});
style.css
.border-box {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
menu {
display: block;
}
menu > div {
position: absolute;
z-index: 2;
top: 0;
width: 250px;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: -webkit-transform ease 250ms;
-moz-transition: -webkit-transform ease 250ms;
-ms-transition: -webkit-transform ease 250ms;
-o-transition: -webkit-transform ease 250ms;
transition: -webkit-transform ease 250ms;
-webkit-transition: transform ease 250ms;
-moz-transition: transform ease 250ms;
-ms-transition: transform ease 250ms;
-o-transition: transform ease 250ms;
transition: transform ease 250ms;
}
menu > div.left {
background: #273D7A;
left: -250px;
}
menu > div.show.left {
transform: translate3d(250px, 0, 0);
-ms-transform: translate3d(250px, 0, 0);
-webkit-transform: translate3d(250px, 0, 0);
-o-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
}
menu > div.right {
background: #6B1919;
right: -250px;
}
menu > div.show.right {
transform: translate3d(-250px, 0, 0);
-ms-transform: translate3d(-250px, 0, 0);
-webkit-transform: translate3d(-250px, 0, 0);
-o-transform: translate3d(-250px, 0, 0);
-moz-transform: translate3d(-250px, 0, 0);
}
menu > div > menu-item {
display: block;
}
menu > div > menu-item > div {
float: left;
width: 100%;
margin: 0;
padding: 10px 15px;
border-bottom: solid 1px #555;
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #B0B0B0;
}
menu > div > menu-item > div:hover {
color: #F0F0F0;
}
menu > div > menu-item > div > span {
float: left;
color: inherit;
}
directive.js
app.directive("menu", function () {
return {
restrict: "E",
template: "<div ng-class='{ show: visible, left: alignment === \"left\", right: alignment === \"right\" }' ng-transclude></div>",
transclude: true,
scope: {
visible: "=",
alignment: "#"
}
};
});
app.directive("menuItem", function () {
return {
restrict: "E",
template: "<div ng-click='navigate()' ng-transclude></div>",
transclude: true,
scope: {
hash: "#"
},
link: function ($scope) {
$scope.navigate = function () {
window.location.hash = $scope.hash;
}
}
};
});
The working Plunkr link: http://plnkr.co/edit/D6HBIekwmJUsuYZQSPxI?p=preview
Also, your compiled CSS doesn't seem to work. I copied the exact LESS styles and it's working perfectly fine.
Here is your modified HTML file,
<!DOCTYPE html>
<html ng-app="sideBarApp">
<head>
<style type="text/less">
.transition (#value1,#value2:X,...) { #value: ~`"#{arguments}".replace(/[\[\]]|\,\sX/g, '')`; -webkit-transition: #value; -moz-transition: #value; -ms-transition: #value; -o-transition: #value; transition: #value; }
.transform (#value1,#value2:X,...) { #value: ~`"#{arguments}".replace(/[\[\]]|\,\sX/g, '')`; transform:#value; -ms-transform:#value; -webkit-transform:#value; -o-transform:#value; -moz-transform:#value; }
.border-box { box-sizing:border-box; -moz-box-sizing:border-box; }
body { font-family:Arial; font-size:14px; }
body>span, body>h1 { float:left; width:100%; margin:0; padding:0; margin-bottom:10px; }
span { color:#888888; }
button { width:auto; padding:7px 22px; }
menu { display:block;
#menu-width:250px;
>div { position:absolute; z-index:2; top:0; width:#menu-width; height:100%; .border-box; .transition(-webkit-transform ease 250ms); .transition(transform ease 250ms);
&.left { background:#273D7A; left:#menu-width*-1; }
&.show.left { .transform(translate3d(#menu-width, 0, 0)); }
&.right { background:#6B1919; right:#menu-width*-1; }
&.show.right { .transform(translate3d(#menu-width*-1, 0, 0)); }
>menu-item { display:block;
>div { float:left; width:100%; margin:0; padding:10px 15px; border-bottom:solid 1px #555; cursor:pointer; .border-box; color:#B0B0B0;
&:hover { color:#F0F0F0; }
>span { float:left; color:inherit; }
}
}
}
}
</style>
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js"></script>
<script src="app.js"></script>
<script src="directive.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="sidebar">
<button ng-click="showLeft($event)">Show left Menu!</button>
<button ng-click="showRight($event)">Show Right Menu!</button>
<menu visible="leftVisible" alignment="left">
<menu-item hash="first-page">First Page</menu-item>
<menu-item hash="second-page">Second Page</menu-item>
<menu-item hash="third-page">Third Page</menu-item>
</menu>
<menu visible="rightVisible" alignment="right">
<menu-item hash="first-page">First Page</menu-item>
<menu-item hash="second-page">Second Page</menu-item>
<menu-item hash="third-page">Third Page</menu-item>
</menu>
</body>
</html>
Quite simply, you've bound your menu's show class to the isolate scope's visible property which is bound to the visible property in your controller's scope.
Your buttons work on the visibleLeft and visibleRight scope properties but nothing sets the visible property.
I wanted to create a card with text which will flip and show a backside with some other text, whenever you click on the "card" (div). I checked for any mistakes and stuff but somehow its not working on chrome.
HTML:
<div class="card effect__EFFECT">
<div class="card__front">
<span class="card__text">front</span>
</div>
<div class="card__back">
<span class="card__text">back</span>
</div>
</div>
CSS:
.card {
position: relative;
float: left;
padding-bottom: 25%;
width: 25%;
text-align: center;
}
.card__front,
.card__back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card__front,
.card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.card__front {
background-color: #ff5078;
}
.card__back {
background-color: #1e1e1e;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__click.flipped .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__click.flipped .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
Javascript:
(function() {
var cards = document.querySelectorAll(".card.effect__click");
for ( var i = 0, len = cards.length; i < len; i++ ) {
var card = cards[i];
clickListener( card );
}
function clickListener(card) {
card.addEventListener( "click", function() {
var c = this.classList;
c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
});
}
})();
Here is a working fiddle http://jsfiddle.net/hzsbzxw6/ it seems that this should all work, it could be the way you're embedding the script.
<script type = "text/javascript">
Try fixing that, or ultimately not embedding it inline.