PythonNewb PythonNewb - 7 months ago 35
HTML Question

3D carousel with JQuery and CSS - not rendering correctly

I'm trying to implement a CD carousel with JQuery and CSS and I've been browsing StackOverflow for some ideas. I came across this question. I've been trying to implement the code for idea 2 on my own machine and it doesn't seem to be working.

Here's all the code:



/* Create an array to hold the different image positions */
var itemPositions = [];
var numberOfItems = $('#scroller .item').length;

/* Assign each array element a CSS class based on its initial position */
function assignPositions() {
for (var i = 0; i < numberOfItems; i++) {
if (i === 0) {
itemPositions[i] = 'left-hidden';
} else if (i === 1) {
itemPositions[i] = 'left';
} else if (i === 2) {
itemPositions[i] = 'middle';
} else if (i === 3) {
itemPositions[i] = 'right';
} else {
itemPositions[i] = 'right-hidden';
}
}
/* Add each class to the corresponding element */
$('#scroller .item').each(function(index) {
$(this).addClass(itemPositions[index]);
});
}

/* To scroll, we shift the array values by one place and reapply the classes to the images */
function scroll(direction) {
if (direction === 'prev') {
itemPositions.push(itemPositions.shift());
} else if (direction === 'next') {
itemPositions.unshift(itemPositions.pop());
}
$('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {
$(this).addClass(itemPositions[index]);
});
}

/* Do all this when the DOMs ready */
$(document).ready(function() {

console.log("DOM ready")

assignPositions();
var autoScroll = window.setInterval("scroll('next')", 4000);

/* Hover behaviours */
$('#scroller').hover(function() {
window.clearInterval(autoScroll);
$('.nav').stop(true, true).fadeIn(200);
}, function() {
autoScroll = window.setInterval("scroll('next')", 4000);
$('.nav').stop(true, true).fadeOut(200);
});

/* Click behaviours */
$('.prev').click(function() {
scroll('prev');
});
$('.next').click(function() {
scroll('next');
});

});

html,
body {
height: 100%;
margin: 0;
}

body {
background: -webkit-linear-gradient(top, #4D4D4D 0, #4D4D4D 180px, #939393 400px);
}

.warning {
margin: 10px auto 0;
width: 500px;
text-align: center;
font-size: 20px;
}

#scroller {
width: 500px;
height: 200px;
margin: 0 auto;
padding: 50px 0;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
}

#scroller .item {
width: 500px;
display: block;
position: absolute;
border-radius: 10px;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255, 255, 255, 0.15)));
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
z-index: 0;
}
/* Since inset shadows don't play nice with images, we'll create a pseudo element and apply our image styling to that instead */

#scroller .item:before {
border-radius: 10px;
width: 500px;
display: block;
content: '';
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.4);
}

#scroller .item img {
display: block;
border-radius: 10px;
}

#scroller .left {
-webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
-moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
-o-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
}

#scroller .middle {
z-index: 1;
-webkit-transform: rotateY(0deg) translateX(0) scale(1);
-moz-transform: rotateY(0deg) translateX(0) scale(1);
-o-transform: rotateY(0deg) translateX(0) scale(1);
}

#scroller .right {
-webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
-moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
-o-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
}

#scroller .left-hidden {
opacity: 0;
z-index: -1;
-webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
-moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
-o-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
}

#scroller .right-hidden {
opacity: 0;
z-index: -1;
-webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
-moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
-o-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
}

.nav {
position: absolute;
width: 500px;
height: 30px;
margin: 170px 0 0;
z-index: 2;
display: none;
}
.prev,
.next {
position: absolute;
display: block;
height: 30px;
width: 30px;
background-color: rgba(0, 0, 0, 0.85);
border-radius: 15px;
color: #E4E4E4;
bottom: 15px;
left: 15px;
text-align: center;
line-height: 26px;
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);
}

.next {
left: inherit;
right: 15px;
}

.prev:hover,
.next:hover {
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);
}

<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>
<link href="test.css" rel="stylesheet"/>
</head>
<body>
<div id="scroller">
<div class="nav">
<a class="prev">&laquo;</a>
<a class="next">&raquo;</a>
</div>
<a class="item" href="#">
<img src="http://i.imgur.com/5Mk3EfW.jpg" />
</a>
<a class="item" href="#">
<img src="http://i.imgur.com/79aU67L.jpg" />
</a>
<a class="item" href="#">
<img src="http://i.imgur.com/x3wSoFU.jpg" />
</a>
<a class="item" href="#">
<img src="http://i.imgur.com/27fTqbA.jpg" />
</a>
<a class="item" href="#">
<img src="http://i.imgur.com/RjdFV6n.jpg" />
</a>
<a class="item" href="#">
<img src="http://i.imgur.com/6W8JOza.jpg" />
</a>
<a class="item" href="#">
<img src="http://i.imgur.com/rwLY1JH.jpg" />
</a>
</div>
</body>
</html>





You can see that in the above snippet the code works fine and as it should, however when I try to run it on my own machine it doesn't work correctly. Below is what it looks like when I load the HTML file on Chrome and Firefox:

Firefox

Chrome

You can see it's not loading all the elements properly. This has stumped me since the code is literally identical here and on my machine. I'm hosting using Pythons
http.server
function.

The browser consoles don't give any errors that would hint to what is happening. In fact, both consoles log 'DOM ready' in the
$(document).ready
function in the JS file, so seemingly everything should be fine.

What could be causing this to happen?

EDIT: I tried changing the order of the script tags in the header but it didn't help

Answer

I tested your code locally using npm-lite and found the same error until I moved

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>

out of the <head></head> tags and after the rest of the html code but right before the closing </body> tag.

I tested this in both chrome and firefox and it's now working perfectly

Comments