I've been looking a solution for this but I couldn't get it to work.
I would like my page header to change from a transparent background to a red background as the user begins scrolling the page.
$(window).on("scroll", function() {
if($(window).scrollTop() > 800) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
* {margin:0;padding:0}
html {
background: lightgray;
height: 5000px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 1s ease-in-out;
height: auto;
background-color: rgba(17, 42, 107, 0.7);
text-align: center;
line-height: 40px;
}
.header.active {
background: red;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">the header</div>
$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= 10) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
Related
I moved a page from my old site to my new one, and cannot for the life of me figure out why the CSS isn't working.
https://ericaheinz.com/art/turrell/
It should have 5 concentric white ovals in the middle. I've inspected everything, the divs and CSS are there but they won't show up.
Here's the JS/CSS/HTML
// color looping
// http://forrst.com/posts/Endlessly_Looping_Background_Color_jQuery_Functi-ey7
var colors = new Array('#077bf4', '#9554d6', '#e62e5c', '#ff9466', '#CCCCCC', '#ffbe0a', '#46b3f2', '#70dab3', '#af93af', '#e51717', '#ffd1d9');
var color_index = 0;
var interval = 3000;
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index === colors.length) { color_index = 0; }
else { color_index++; }
bg_color_tween();
});
}
// rotation
$(document).ready(function() {
bg_color_tween();
$('.turrell').each(function(){
var r=Math.floor(Math.random()*90);
$('.carton').css({
'-moz-transform':'rotate('+r+'deg)',
'-webkit-transform':'rotate('+r+'deg)',
'transform':'rotate('+r+'deg)'
});
var t=Math.floor(Math.random()*10)+2;
var l=Math.floor(Math.random()*7)+3;
$('.egg').css({
'top':t+'%',
'left':l+'%'
});
});
});
.carton {
height: 95%;
width: 90%;
margin-left: 10%;
text-align: center;
position: relative;
z-index: -10;
}
.egg {
height: 76%;
width: 80%;
position: relative;
top: 12%;
left: 10%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
-webkit-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
color: #FFF;
}
.art-caption {
position: absolute;
bottom: 20px;
left: 3.5%;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
line-height: 13px;
margin: 0;
padding: 0;
}
.art-caption a {
color: #FFF;
opacity: .3;
transition: all 0.25s ease-in-out;
}
.art-caption a:hover {
opacity: .8;
}
<body class="turrell">
<div class="container">
<div class="carton">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<!-- THE LIGHT -->
</div>
</div>
</div>
</div>
</div>
</div>
<h6 class="art-caption">Homage to <em>Aten Reign</em> by James Turrell</h6>
</div>
</body>
You're missing "height" attributes in html, body and .container div. If you inspect, they had height 0 which simply do not display them.
If i added height: 100% to all of them, this is what i saw:
I have so far create a page that when scrolling down and a container div is reached, a number of divs within it begin to scroll horizontally along the page. My problem is that I want the page to stop scrolling vertically until all the divs have scrolled all the way along to the left then for the page to begin scrolling vertically again. Essentially, the user scrolls down to the container, horizontal scrolling of the divs are triggered, once across the page, begin scrolling down again. This is what I have so far:
Code:
$(document).ready(function() {
var windowWidth = $(window).width();
$("#service1, #service2, #service3").css({
"left": windowWidth
});
$(window).scroll(function() {
$("#service1, #service2, #service3").css({
"left": windowWidth - $(window).scrollTop()
});
});
});
#hero {
background-color: rgba(0, 0, 0, 0.5);
height: 900px;
position: relative;
top: 0;
left: 0;
width: 100%;
}
#about {
background-color: rgba(0, 0, 0, 0);
height: 900px;
width: 100%;
}
#services {
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
height: 900px;
margin-bottom: 900px;
width: 100%;
}
#service1 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
position: absolute;
width: 1200px;
}
#service2 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 1300px;
position: absolute;
width: 1200px;
}
#service3 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 2600px;
position: absolute;
width: 1200px;
}
<div id="hero"></div>
<div id="about"></div>
<div id="services">
<div id="service1"></div>
<div id="service2"></div>
<div id="service3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I hope I have been clear.
You can use DOMMouseScroll event for check the scroll and block this with detect and replace event. Please try below. I have block vertical scroll when scroll arrive in third section and reactive when is arrive a size defined left. You can modify with what you want.
$(document).ready(function() {
var windowWidth = $(window).width();
$("#service1, #service2, #service3").css({
"left": windowWidth
});
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
$(document).scrollLeft($(document).scrollLeft()-(delta*40));
$("body").scrollLeft($(document).scrollLeft()-(delta*40));
e.preventDefault();
}
$('html').on ('DOMMouseScroll', function (e) {
var sens = e.originalEvent.detail;
var lastDivTop = ($(window).scrollTop() - $("#services").offset().top)
var lastDivLeft = ($(window).scrollLeft() - $("#services").offset().left)
if (sens < 0) { //scroll Up
if(lastDivLeft > 0 && lastDivTop < 100 ){
scrollHorizontally(e)
$(window).scrollTop($("#services").offset().top)
}
} else if (sens > 0) { //scroll down
if(lastDivTop > 0 && lastDivLeft < 1500){
scrollHorizontally(e)
$(window).scrollTop($("#services").offset().top)
}
}
});
});
#hero {
background-color: rgba(0, 0, 0, 0.5);
height: 900px;
position: relative;
top: 0;
left: 0;
width: 100%;
}
#about {
background-color: rgba(0, 0, 0, 0);
height: 900px;
width: 100%;
}
#services {
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
height: 900px;
margin-bottom: 900px;
width: 100%;
}
#service1 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
position: absolute;
width: 1200px;
}
#service2 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 1300px;
position: absolute;
width: 1200px;
}
#service3 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 2600px;
position: absolute;
width: 1200px;
}
<div id="hero"></div>
<div id="about"></div>
<div id="services">
<div id="service1"></div>
<div id="service2"></div>
<div id="service3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I have code below for an accordion list. How do I get a plus and minus sign in the left corner of the heading when opened I open and close the list, without changing the position of the text? Anything helps, cheers.
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
<section class="accordion js"><section class="sections">
<h1>
<span style="font-size: 18px;">1</span></h1>
<div>
<br/>
<p id="p">One</p>
</div> </section>
<br style="line-height: 15px;"/><section class="sections2">
<h1>
<span style="font-size: 18px;">2</span></h1>
<div>
<br/>
<p id="p">Two</p>
</div>
</section>
You'll have to add <span class="chevrone"></span> to each h1, and include css, I've added below. Note, that no additional javascript needed.
Additional CSS
.accordion.js .chevrone {
position: absolute;
left: 30px;
}
.accordion.js > *:not(.expanded) .chevrone:before {
content: '+';
}
.accordion.js >.expanded .chevrone:before {
content: '-';
}
Modified snippet
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion h1 {
width:100%;
}
.accordion.js .chevrone {
position: absolute;
left: 30px;
}
.accordion.js > *:not(.expanded) .chevrone:before {
content: '+';
}
.accordion.js >.expanded .chevrone:before {
content: '-';
}
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
<section class="accordion js"><section class="sections">
<h1>
<span class="chevrone" ></span>
<span style="font-size: 18px;">1</span></h1>
<div>
<br/>
<p id="p">One</p>
</div> </section>
<br style="line-height: 15px;"/><section class="sections2">
<h1>
<span class="chevrone" ></span>
<span style="font-size: 18px;">2</span></h1>
<div>
<br/>
<p id="p">Two</p>
</div>
</section>
The code below is for an accordion list I have created using HTML, CSS and JavaScript. Is there any way add a plus and minus picture in the left corner of the heading? So when I clicked on heading "A" or "B" the picture goes from the plus sign to the minus sign. Here are the two images I would like to use:
https://www.independencecenter.org/wp-content/uploads/2014/04/wellness.png
https://web.archive.org/web/20150227045704/http://licensing.paperbagrecords.com/wp-content/themes/licensing/assets/images/minus.png
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
<style>
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
</style>
<section class="accordion js">
<section class="sections">
<h1><span style="font-size: 18px;">A</span></h1>
<div>
<p class="p" style="text-align: center;"><span style="color: #007a5e;">aerheahqeh.</span></p>
</div>
</section>
<br style="line-height: 15px;"/>
<section class="sections2">
<h1><span style="font-size: 18px;">B</span></h1>
<div>
<p class="p" style="text-align: center;">Twtjwrjwrj </p>
</div>
</section>
</section>
Use pseudo-elements on the child of your expanded class and a background image. Something like:
.accordion.js h1{
position:relative;
}
.accordion.js h1::before{
content: "";
display:block;
height:20px;
width:20px;
position:absolute;
left:0;
top:0;
background: url(YourPlusImageUrlHere);
}
.accordion.js .expanded h1::before{
background: url(YourMinusImageUrlHere);
}
Adjust for your styles.
I'm trying to implement this example locally:
The first is to import:
jquery library and turnjs.
Turn JS
HTML:
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/07.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/08.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/09.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/10.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/11.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/12.jpg)"></div>
</div>
JavaScript: It seems the error is here, but I have little experience in JavaScript. I do not understand why this happens.
window.addEventListener('resize', resize);
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
// e.stopPropagation();
});
function loadApp() {
console.log('Load App');
var size = getSize();
console.log(size);
// Create the flipbook
$('.flipbook').turn({
// Width
width: size.width,
// Height
height: size.height,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
function getSize() {
console.log('get size');
var width = document.body.clientWidth;
var height = document.body.clientHeight;
return {
width: width,
height: height
}
}
function resize() {
console.log('resize event triggered');
var size = getSize();
console.log(size);
if (size.width > size.height) { // landscape
$('.flipbook').turn('display', 'double');
}
else {
$('.flipbook').turn('display', 'single');
}
$('.flipbook').turn('size', size.width, size.height);
}
// Load App
loadApp();
CSS:
html,
body {
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
body {
overflow: hidden;
background-color: #fcfcfc;
margin: 0;
padding: 0;
}
.flipbook-viewport {
overflow: hidden;
width: 100%;
height: 100%;
}
.flipbook-viewport .container {
position: absolute;
top: 0;
left: 0;
margin: auto;
}
.flipbook-viewport .flipbook {
width: 922px;
height: 600px;
}
.flipbook-viewport .page {
width: 461px;
height: 600px;
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.flipbook .page {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.flipbook-viewport .page img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
}
.flipbook-viewport .shadow {
-webkit-transition: -webkit-box-shadow 0.5s;
-moz-transition: -moz-box-shadow 0.5s;
-o-transition: -webkit-box-shadow 0.5s;
-ms-transition: -ms-box-shadow 0.5s;
-webkit-box-shadow: 0 0 20px #ccc;
-moz-box-shadow: 0 0 20px #ccc;
-o-box-shadow: 0 0 20px #ccc;
-ms-box-shadow: 0 0 20px #ccc;
box-shadow: 0 0 20px #ccc;
}
but not working.
This is console logs:
what should I do?
Thanks!
The problem is (as you can see in the console error) that the document.body is null.. That's because Dom (html structure) is not fully loaded, AKA ready..
Wrap your code in jQuery ready handler..
jQuery(document).ready(function() {......});
Note that this is better than `window load' as suggested in comments because this doesn't wait for every image to be fully loaded to execute.