Develop Reference

Rails: Infinite Scroll, load spinner instead of text

All works properly, but I want to show a spinner loading instead of text. This is my code in Page.js.coffee:
jQuery ->
if $('.pagination').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
$('.pagination').text("Fetching more...")
$.getScript(url)
$(window).scroll().
This line show the text:
$('.pagination').text("Fetching more...")
Thank you guys.

Perhaps css #keyframes suits just fine for your case, you can check possible implementation here https://projects.lukehaas.me/css-loaders/
for example you can take
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
}
.loader {
color: #ffffff;
font-size: 11px;
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before,
.loader:after {
position: absolute;
content: '';
}
.loader:before {
width: 5.2em;
height: 10.2em;
background: #0dc5c1;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.loader:after {
width: 5.2em;
height: 10.2em;
background: #0dc5c1;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
#-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
and then in your coffescript just add and remove the class "loader" loading div, or add/remove div with such a class.
<div class="loader">Loading...</div>

jQuery ".each()" function only applying script to last class on page

I'm attempting to create a script that changes the colour of the navigation bar if the nav is currently hovered over a part of the page that has a light/white background to keep the nav visible.
I want to change the colour of the hamburger menu which is laid out like so:
<div id="nav_ham" onclick="openNav()">
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
To change the colour of the spans, I want to add a class ham_dark which does the following:
.ham_dark { background: #000!important;}
I've given the white backgrounds a class of section_white and have applied the following code:
//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
// Check if the top of the page collides with each section
jQuery('.section_white').each(function() {
var windowScroll = jQuery(document).scrollTop();
var navHeight = jQuery('.nav').height();
// Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
if( windowScroll + navHeight >= jQuery(this).offset().top && windowScroll + navHeight <= jQuery(this).offset().top + jQuery(this).height()) {
// This section is active! Add Highlight
console.log('working');
jQuery('#nav_ham span').addClass('ham_dark')
} else {
// No - Remove highlight class
jQuery('#nav_ham span').removeClass('ham_dark')
}
});
}
jQuery(window).on('scroll resize', function () {
onScreen();
});
The console is logging "working" when the nav is hovering over all of the the section_white classes, however it only applies the addClass to the final section_white class on the page, ignoring all others.
Why is it that the console.log is firing on all of the classes but only applying the addClass to the final instance of section_white?
I have mocked this up and the error is still occuring (nav changes colour on final section_white div but not the first): jsfiddle
Thanks

As per my comments, your loop is not ending once you have added the dark class so it is being removed again. Try this (have returned false when class is added to break loop):
//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
// Check if the top of the page collides with each section
$('.section_white').each(function() {
var windowScroll = $(document).scrollTop();
var navHeight = $('.nav').height();
// Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
if (windowScroll + navHeight >= $(this).offset().top && windowScroll + navHeight <= $(this).offset().top + $(this).height()) {
// This section is active! Add Highlight
console.log('working');
$('.cls-1').addClass('logo_dark');
$('#nav_ham span').addClass('ham_dark')
return false; // break loop
} else {
// No - Remove highlight class
$('.cls-1').removeClass('logo_dark');
$('#nav_ham span').removeClass('ham_dark')
}
});
}
$(window).on('scroll resize', function () {
onScreen();
});
.nav {
position: fixed;
height: 10px;
}
.section_black {
background: black;
height: 300px;
}
.section_white {
background: white;
height: 300px;
}
.ham_dark { background: black!important; }
#nav_ham {
width: 30px;
height: 30px;
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;
}
#nav_ham span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #fff;
border-radius: 1px;
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;
}
#nav_ham span:nth-child(1) {
top: 0px;
}
#nav_ham span:nth-child(2),
#nav_ham span:nth-child(3) {
top: 8px;
}
#nav_ham span:nth-child(4) {
top: 16px;
}
#nav_ham.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_ham.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_ham.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_ham.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div id="nav_ham" onclick="openNav()">
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span></div>
</div>
<div class="section_black">
BLACK
</div>
<div class="section_white">
WHITE
</div>
<div class="section_black">
BLACK
</div>
<div class="section_white">
WHITE
</div>
<div class="section_black">
BLACK
</div>
<div class="section_black">
BLACK
</div>

Background images dont stay on sides of page when resolution changes

I'm pretty new to css animations but I've got my page looking how I want except for this one glitch. I have a scrolling animation using scrollspy.js and when it hits a certain div images slideinleft or slideinright into the page.
Link here
However when you hit control + mwheel down it doesn't start the anims from outside of the browser window like i would prefer it to. I'm using 1920x1080 res, for reference.
Basically, on page load it looks fine:
But again, when employing the ctrl + mwheel down it becomes this ugly looking page:
I need it to scale.
Any css gurus know what I'm doing wrong?
HTML:
<div class="flex-row panel-row-style panel-row-style-for-4-1 page left-phone has-bg feed active" style="margin-top: 100px; animation-name: slideInLeft;">
<div id="pgc-4-1-0" class="panel-grid-cell panel-grid-cell-empty"></div><div id="pgc-4-1-1" class="panel-grid-cell">
<div id="panel-4-1-1-0" class="so-panel widget widget_sow-image panel-first-child panel-last-child" data-index="2">
<div class="top-img panel-widget-style panel-widget-style-for-4-1-1-0">
<div class="so-widget-sow-image so-widget-sow-image-default-eef982a7180b">
<div class="sow-image-container phone">
<img src="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png" width="400" height="831" srcset="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png 400w, http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2-144x300.png 144w" sizes="(max-width: 400px) 100vw, 400px" class="so-widget-image">
<img class="screen-left layer" src="http://streamlistapp.com/wp-content/uploads/2017/07/purse-inside-screen.png">
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-2" class="panel-grid-cell panel-grid-cell-mobile-last animated" style="visibility: visible; animation-name: undefined;">
<div id="panel-4-1-2-0" class="so-panel widget widget_siteorigin-panels-builder panel-first-child panel-last-child" data-index="3">
<div id="pl-w5973cd6d9c123" class="panel-layout">
<div id="pg-w5973cd6d9c123-0" class="panel-grid panel-no-style">
<div id="pgc-w5973cd6d9c123-0-0" class="panel-grid-cell">
<div id="panel-w5973cd6d9c123-0-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="0">
<div class="link-s front panel-widget-style panel-widget-style-for-w5973cd6d9c123-0-0-0">
<div class="so-widget-sow-editor so-widget-sow-editor-base">
<div class="siteorigin-widget-tinymce textwidget">
<h4>
STREAMING<br>
MARKETPLACE
</h4>
<h3>Streamlist</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-3" class="panel-grid-cell panel-grid-cell-empty"></div>
CSS:
.can-transform3d .active.has-bg:before,
.can-transform3d .active.has-bg:after,
.can-transform3d .past-active.has-bg:before,
.can-transform3d .past-active.has-bg:after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
/*transform: translate3d(328px, 0, 0);*/
transform: translate3d(0px, 0, 0);
}
.has-bg {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.has-bg:before,
.has-bg:after {
content: '';
position:absolute;
display: block;
opacity: 0;
-webkit-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-moz-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-o-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-ms-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-webkit-transition-delay: .25s; /* Safari */
transition-delay: .25s;
z-index: 1;
visibility: visible;
background-repeat: no-repeat;
background-attachment: scroll;
clear: both;
/*width: 100%;*/
}
.past-active:before,
.past-active:after,
.active:before,
.active:after {
opacity: 1 !important;
}
.page {
height: auto;
width: 100%;
position: relative;
text-align: center;
/*padding-top: 60px;*/
z-index: 1;
}
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:after,
.can-transform3d .left-phone:after {
-webkit-transform: translate3d(150px , 0, 0);
-moz-transform: translate3d(150px , 0, 0);
-o-transform: translate3d(150px , 0, 0);
-ms-transform: translate3d(150px , 0, 0);
/*transform: translate3d(682px , 0, 0);*/
transform: translate3d(150px , 0, 0);
}
.left-phone:before,
.left-phone:after {
margin-left: 0;
/*right: 0;*/
}
.active .phone .screen-left, .active .phone .screen-right,
.past-active .phone .screen-left, .past-active .phone .screen-right {
opacity: 1;
}
.phone .screen-left, .phone .screen-right {
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.phone .screen-left {
position: absolute;
top: 12.06656%;
left: 22.37791%;
/*width: 75.460123%;*/
}
.layer {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.feed:before, .discover:before {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/watch3-transparent-bg-e1500713498530.png);
/*top: -150px;*/
height: 564px;
width: 330px;
/*right: -425px;*/
right: -425px;
/*background-position: right center;*/
}
.feed:after, .discover:after {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/bracelet-e1500713698821.jpeg);
height: 260px;
width: 260px;
bottom: 0;
/*right: 15%;*/
right: -6%;
/*background-position: 70% center;*/
}
Scroll spy functions:
//First phone (left)
$('#pgc-4-1-2').on('scrollSpy:exit',function(){
$('.panel-row-style-for-4-1').removeClass('past-active').removeClass('active');
wow.addBox(this);
}).scrollSpy();
$('#pgc-4-1-2').on('scrollSpy:enter',function(){
$(this).removeClass('animated');
$('.panel-row-style-for-4-1')
.removeClass('past-active')
.addClass('active')
.removeClass('animated')
.css({
'animation-name' : 'slideInLeft'
})
wow.addBox(this);
}).scrollSpy();

jquery button trigger css

i want to make a button which have jquery function can trigger the css which will flip the card.
i do not know Trigger , toggle or addClass to use. Help thanks !
I actually want it to automatically flip from num 1 to 10.
With looping , how is it going to achieve ?
html
<div class="panel" id="card2">
<div class="front card">
<img src="0.png">
</div>
<div class="back card">
<img src="2.png">
</div>
</div>
css
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .front, .togglefront {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back ,.toggleback{
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}

You could use jQuery UI's .switchClass() function to remove and add the specified class. Here is an example:
$("#flip").click(function() {
$(".card").each(function(index) {
if ($(this).hasClass("front")) {
$(this).switchClass("front", "back");
return;
}
if ($(this).hasClass("back")) {
$(this).switchClass("back", "front");
return;
}
});
});
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .front,
.togglefront {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back,
.toggleback {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<button type="button" id="flip">Flip!</button>
<div class="front card">
<img src="http://i.stack.imgur.com/lSjRc.jpg">
</div>
<div class="back card">
<img src="http://i.stack.imgur.com/j5qcg.jpg">
</div>
Or you just use the .removeClass() and .addClass() functions. Here is an example without jQuery UI:
$("#flip").click(function () {
$(".card").each(function (index) {
if ($(this).hasClass("front")) {
$(this).removeClass("front");
$(this).addClass("back");
return;
}
if ($(this).hasClass("back")) {
$(this).removeClass("back");
$(this).addClass("front");
return;
}
});
});

JQUERY
$('.btn').click(function() {
$('.front').addClass('front-flip');
$('.back').addClass('back-flip');
});
You'll need to create a <button> element, and assign an event handler to that button using the code above. Essentially you'll create two new classes front-flip and back-flip which mimic the same CSS that you're currently assigning on hover to flip the card/image over.
See working example here - should set you on the right path EXAMPLE

Example Fiddle
I'm not sure this is the right way to do that, but it's work and you can improve it :
HTML :
<div class="panel panel_1" id="card2">
<div class="front card">
<img src="http://fr.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211813364.png">
</div>
<div class="back card">
<img src="http://fr.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211808744.png">
</div>
</div>
<button id='flip_card'>Flip card</button>
CSS :
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
JS :
//Flip card function
$('#flip_card').click(function(){
var card_id = 'card2';
if($('#'+card_id+' .front').css('z-index')==1)
flip_front(card_id);
else
flip_back(card_id);
});
//Flip back of card
flip_back = function(card_id){
$('#'+card_id+' .front').css({
"z-index": 1, "-webkit-transform": "rotateY(180deg)", "-ms-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)", "transform": "rotateY(180deg)"
});
$('#'+card_id+' .back').css({
"z-index": 2, "-webkit-transform": "rotateY(0deg)", "-ms-transform": "rotateY(0deg)", "-moz-transform": "rotateY(0deg)", "transform": "rotateY(0deg)"
});
}
//Flip front of card
flip_front = function(card_id){
$('#'+card_id+' .back').css({
"z-index": 1, "-webkit-transform": "rotateY(180deg)", "-ms-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)", "transform": "rotateY(180deg)"
});
$('#'+card_id+' .front').css({
"z-index": 2, "-webkit-transform": "rotateY(0deg)", "-ms-transform": "rotateY(0deg)", "-moz-transform": "rotateY(0deg)", "transform": "rotateY(0deg)"
});
}
Hope this helps.

jQuery panel slider opens with button click but won't close

I have a button on my page which opens a right panel by using jquery and modernizr frameworks. Button is placed on the rightmost place of screen. When it is clicked it slides to the left with the panel which it opens. The problem is, it won't slide back to where it was when it is clicked again.
HTML:
<!-- right panel -->
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container">
Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
Panel elements
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
Javascript:
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//clode 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();
}
});
});
JsFiddle demo (You can see the CSS on JSFiddle)

jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
//use toggleClass
$('.cd-panel').toggleClass('is-visible');
});
});
JSFIDDLE
http://jsfiddle.net/Lecgrfvu/3/

Try this i used toggleClass (View in full screen mode to see the result)
jQuery(document).ready(function ($) {
//open the lateral panel
$('.cd-btn').on('click', function (event) {
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
//clode the lateral panel
});
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 60px;
/* 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: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #424f5c;
/* 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: #424f5c;
}
.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;
width: 90%;
height: 100%;
top: 0;
background: #dbe2e9;
z-index: 1;
-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;
}
.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;
}
#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 20%;
}
}
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
.cd-btn {
visibility: visible !important;
position: absolute;
top: 400px;
left: -50px;
font-size: 16px;
padding: 10px;
margin: 0 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container"> Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
<ul class="collapsible-list">
<li class="nav-header">Views</li>
<li class="collapsible-list-subnav" ng-repeat="treeObject in treeObjects"><a class="collapsible-list-parent">{{treeObject.name}}</a>
<ul class="collapsible-list secondary">
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Public Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="publicView in treeObject.publicViews" ng-click="viewClick($event, publicView)"><a>{{publicView.title}}</a>
</li>
</ul>
</li>
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Private Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="privateView in treeObject.privateViews" ng-click="viewClick($event, privateView)"><a>{{privateView.title}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
</div>