I went through the Codecademy flipboard tutorial which basically just shows you how to put a .js file together for a carousel. I took the code from the website and created files on my computer.
I'm saving them as separate files on my computer in one folder. I've tried both pointing the file to a js file I downloaded from the js website (that I placed in the same folder) AND I tried using the website Codecademy provided as the source so I don't think that's the issue. I have each of the files saved separately as app.js, index.html, and style.css.
When I run it, it looks as it should but the the carousel isn't working. However, if I run it on Codecademy it runs perfectly. What gives? I'm just trying to understand the carousel fully and the interaction between .js .html and .css I'm also trying to build my own resume type website with a carousel but I can't do that until I fully understand each of these parts. Something Codecademy fails to do in my eyes.
app.js
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);
index.html
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
</a>
<ul class="menu">
<li>Get the App
</li>
<li>Tutorials
</li>
<li>Magazines
</li>
<li>Web Tools
</li>
<li>Support
</li>
<li>Careers
</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Community
</li>
<li>Our Blog
</li>
<li>Maps Blog
</li>
<li>Eng Blog
</li>
<li>Advertisers
</li>
<li>Publishers
</li>
<li>About Us
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Flipboard Is Your Personal Magazine</h1>
<p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png" width="540px">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
</a>
Read Now
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Enjoy Flipboard Magazines</h1>
<h2>on the Web</h2>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared
and enjoyed on the Web by anyone, anywhere.</p>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Badges & Widgets</h1>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png" width="540px">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>
style.css
/* General */
.container {
width: 960px;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 15px;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
}
.dropdown-menu li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 9px;
padding-left: 0px;
padding-top: 9px;
}
.get-app li {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.get-app img {
height: 40px;
}
Snippet:
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);
/* General */
.container {
width: 960px;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 15px;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
}
.dropdown-menu li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 9px;
padding-left: 0px;
padding-top: 9px;
}
.get-app li {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.get-app img {
height: 40px;
}
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
</a>
<ul class="menu">
<li>Get the App
</li>
<li>Tutorials
</li>
<li>Magazines
</li>
<li>Web Tools
</li>
<li>Support
</li>
<li>Careers
</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Community
</li>
<li>Our Blog
</li>
<li>Maps Blog
</li>
<li>Eng Blog
</li>
<li>Advertisers
</li>
<li>Publishers
</li>
<li>About Us
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Flipboard Is Your Personal Magazine</h1>
<p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png" width="540px">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
</a>
Read Now
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Enjoy Flipboard Magazines</h1>
<h2>on the Web</h2>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared
and enjoyed on the Web by anyone, anywhere.</p>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Badges & Widgets</h1>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png" width="540px">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>
There are a few things missing in your code.
Adding this:
currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(500).addClass('active-slide');
below your if statement in your click event handler for arrow-next will do the trick.
See this fiddle: https://jsfiddle.net/6nbo8htt/
Related
New project this time, I'm working on a music player widget and I've hit a wall. I'm looking to make it so that the player can cycle the active track with skip forward and backward buttons and I know that it's easier to do when you put your elements in a list, but I still have no idea. I haven't yet hooked this up to any sort of tracklist or api or anything like that, right now I want to get the visual functionalities working.
Here's the Codepen as well.
function currentlyPlaying(target) {
var current = target.parent();
$('.playingTitle').text(current.children('.title').text());
$('.playingAuthor').text(current.children('.author').text());
}
$(document).on('click', '.play', function(e){
$('.pause').attr('class', 'icon play');
$(e.target).attr('class', 'icon pause');
currentlyPlaying( $(e.target));
});
$(document).on('click', '.playing', function(e){
$('.playing').attr('class', 'playingPaused paused controls');
});
$(document).on('click', '.paused', function(e){
$('.paused').attr('class', 'playingPaused playing controls');
});
* {
font-family: arial;
}
.container {
margin: auto;
padding: 0;
width: 500px;
border: 2px solid black;
}
.header {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #e0e0e0;
border-bottom: 1px solid black;
overflow: hidden;
}
.logo {
float: left;
}
.header h1 {
font-size: 32px;
position: relative;
left: 8px;
}
.songList {
margin: auto;
padding: 0;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.songList ul {
list-style: none;
padding: 0;
margin: 0;
}
.song {
height: 49px;
width: calc(100% - 10px);
padding: 5px;
border-bottom: 1px solid #bbbbbb;
background: #f1f1f1;
}
.song:hover {
background: #dddddd;
}
.icon {
float: left;
opacity: 0.2;
}
.icon:hover {
opacity: 0.7;
}
.play {
content:url(https://png.icons8.com/metro/1600/play.png);
}
.pause {
content:url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}
.title {
opacity: 0.8;
font-size: 20px;
position: relative;
top: 4px;
left: 4px;
}
.author {
opacity: 0.4;
font-size: 14px;
position: relative;
left: 8px;
}
.footer {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #888888;
border-top: 1px solid black;
overflow: hidden;
}
.controls{
float: left;
position: relative;
filter: invert(1.0);
opacity: 0.7;
}
.controls:hover {
filter: invert(0.15);
}
.skipBack {
top: 16px;
}
.skipForward {
top: 16px;
}
.playing {
content:url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
content:url(https://png.icons8.com/material/1600/circled-play.png);
}
.playingTitle {
font-size: 24px;
color: white;
opacity: 0.7;
position: relative;
top: 16px;
left: 8px;
}
.playingAuthor {
font-size: 18px;
color: white;
opacity: 0.45;
position: relative;
top: 12px;
left: 12px;
}
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<div class="container">
<div class="header">
<img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
<h1>Virus Free* Music Player!!</h1>
</div>
<div class="songList">
<ul>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">God's Plan</span><br>
<span class="author">Drake</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Havana</span><br>
<span class="author">Camila Cabello & Young Thug</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">River</span><br>
<span class="author">Eminem & Ed Sheeran</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Perfect</span><br>
<span class="author">Ed Sheeran</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Echame La Culpa</span><br>
<span class="author">Luis Fonsi & Demi Lovato</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Rockstar</span><br>
<span class="author">Post Malone & 21 Savage</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Him & I</span><br>
<span class="author">G-Eazy & Halsey</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Finesse</span><br>
<span class="author">Bruno Mars & Cardi B</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Wolves</span><br>
<span class="author">Selena Gomez & Marshmello</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Feel It Still</span><br>
<span class="author">Portugal. The Man</span>
</div>
</li>
</ul>
</div>
<div class="footer">
<img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
<img class="playingPaused paused controls" height="80px">
<img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
<span class="playingTitle">Select a track to begin</span><br>
<span class="playingAuthor">Go ahead no one is stopping you.</span>
</div>
</div>
I have removed the div tags from the inside of you li tags as they did not serve any purpose except to complicate the HTML structure.
You could show a selected song in your play list and then wire up the previous and next buttons to do something.
Here is an example of how:
$(".song").on("click", function() {
$(".selected").removeClass("selected");
$(this).addClass("selected");;
})
$(".skipBack").on("click", function() {
var target = $(".song.selected").prev(".song");
$(".selected").removeClass("selected");
$(target).addClass("selected");
});
$(".skipForward").on("click", function() {
var target = $(".song.selected").next(".song");
$(".selected").removeClass("selected");
$(target).addClass("selected");
});
* {
font-family: arial;
}
.container {
margin: auto;
padding: 0;
width: 500px;
border: 2px solid black;
}
.header {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #e0e0e0;
border-bottom: 1px solid black;
overflow: hidden;
}
.logo {
float: left;
}
.header h1 {
font-size: 32px;
position: relative;
left: 8px;
}
.songList {
margin: auto;
padding: 0;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.songList ul {
list-style: none;
padding: 0;
margin: 0;
}
.song {
height: 49px;
width: calc(100% - 10px);
padding: 5px;
border-bottom: 1px solid #bbbbbb;
background: #f1f1f1;
}
.song:hover {
background: #dddddd;
}
.song.selected {
background: #aaaaaa;
}
.icon {
float: left;
opacity: 0.2;
}
.icon:hover {
opacity: 0.7;
}
.play {
content: url(https://png.icons8.com/metro/1600/play.png);
}
.pause {
content: url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}
.title {
opacity: 0.8;
font-size: 20px;
position: relative;
top: 4px;
left: 4px;
}
.author {
opacity: 0.4;
font-size: 14px;
position: relative;
left: 8px;
}
.footer {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #888888;
border-top: 1px solid black;
overflow: hidden;
}
.controls {
float: left;
position: relative;
filter: invert(1.0);
opacity: 0.7;
}
.controls:hover {
filter: invert(0.15);
}
.skipBack {
top: 16px;
}
.skipForward {
top: 16px;
}
.playing {
content: url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
content: url(https://png.icons8.com/material/1600/circled-play.png);
}
.playingTitle {
font-size: 24px;
color: white;
opacity: 0.7;
position: relative;
top: 16px;
left: 8px;
}
.playingAuthor {
font-size: 18px;
color: white;
opacity: 0.45;
position: relative;
top: 12px;
left: 12px;
}
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div class="container">
<div class="header">
<img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
<h1>Virus Free* Music Player!!</h1>
</div>
<div class="songList">
<ul>
<li class="song">
<img class="icon play" height="48px">
<span class="title">God's Plan</span><br>
<span class="author">Drake</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Havana</span><br>
<span class="author">Camila Cabello & Young Thug</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">River</span><br>
<span class="author">Eminem & Ed Sheeran</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Perfect</span><br>
<span class="author">Ed Sheeran</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Echame La Culpa</span><br>
<span class="author">Luis Fonsi & Demi Lovato</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Rockstar</span><br>
<span class="author">Post Malone & 21 Savage</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Him & I</span><br>
<span class="author">G-Eazy & Halsey</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Finesse</span><br>
<span class="author">Bruno Mars & Cardi B</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Wolves</span><br>
<span class="author">Selena Gomez & Marshmello</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Feel It Still</span><br>
<span class="author">Portugal. The Man</span>
</li>
</ul>
</div>
<div class="footer">
<img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
<img class="playingPaused paused controls" height="80px">
<img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
<span class="playingTitle">Select a track to begin</span><br>
<span class="playingAuthor">Go ahead no one is stopping you.</span>
</div>
</div>
I'm building a website with C9 and whenever I try and run the webpage and visit it, it simply freezes and stops loading. It loads in the bootstrap and I don't think it's loading in the ../css/hub.css
$(function() {
var rightVal = -350; // base value
$(".five-column").click(function() {
event.stopPropagation();
rightVal = (rightVal * -1) - 350; // calculate new value
$(".drop-details").animate({
right: rightVal + 'px'
}, {
queue: false,
duration: 500
});
});
});
$(function() {
var closeRightVal = -350;
$(".close-details").click(function() {
event.stopPropagation();
$(".drop-details").animate({
right: closeRightVal + 'px'
}, {
queue: false,
duration: 500
});
});
})
$(function() {
$(".nav-custom").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(".content").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(".inner-nav").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(window).resize(function() {
var dropWidth = $(".five-column").width();
$(".drop").css("height", dropWidth + 'px');
$(".five-column").css("min-height", dropWidth + 20 + 'px');
});
});
* {
overflow: hidden;
}
html {
height: 100%;
margin: 0;
max-width: 100%;
}
body {
font-family: 'Ubuntu', sans-serif;
background-color: #F9F9F9;
margin: 0;
height: 100%;
max-width: 100%;
-webkit-font-smoothing: antialiased;
position: fixed;
}
/* Page Components */
.content {
min-width: 100%;
float: right;
height: 100%;
overflow-y: scroll;
overflow-x: none;
margin-left: 250px;
}
.content::-webkit-scrollbar {
display: none;
}
.page-content {
min-width: calc(100% - 250px);
max-width: calc(100% - 250px);
min-height: 100%;
margin-top: 0;
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
.drop-details {
height: 100%;
width: 350px;
z-index: 1000;
color: #FFF;
position: absolute;
right: -350px;
background-color: #FFF000;
}
/* Hub Top */
.hub-jumbo {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
background-size: cover;
background-position: center;
padding-top: 36px;
padding-bottom: 36px;
margin-bottom: 18px;
}
.hub-header {
text-align: center;
}
h2 {
margin-bottom: 0;
}
.hub-btns {
display: block;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
/* End of top */
.container-fluid {
padding: 0;
margin: 0;
height: 10%;
min-width: 100%;
max-width: 100%;
margin-left: 4px;
overflow-y: auto;
margin-right: 0;
}
.ad-box {
width: 20%;
height: 250px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
margin-right: -14px;
top: 50%;
transform: translateY(-50%);
background-color: #000000;
vertical-align: middle;
}
.ad-text {
text-align: center;
color: #FFFFFF;
}
.push-div {
height: 50px;
}
.five-column {
min-width: calc(20% - 20px);
padding: 0;
max-height: 194px;
display: inline-block;
margin: 0;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 14px;
}
.row {
display: inline-block;
max-width: calc(80% - 14px);
margin: 0;
margin-left: 0;
}
/* Drop Styles */
.drop {
width: 100%;
height: 180px;
background-color: #FFF;
border-bottom: 3px solid #EBEBEB;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.drop-image {
background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
background-size: cover;
background-position: center;
}
.drop .name {
height: 36px;
line-height: 36px;
text-align: center;
color: #FFF;
background-color: #03a9f4;
font-size: 1em;
}
.drop .icon {
height: 80px;
vertical-align: middle;
display: block;
margin: 0 auto;
margin-top: 32px;
}
/* SCALING */
#media only screen and (max-width: 1400px) {
.five-column {
min-width: calc(25% - 20px);
}
.drop .name {
font-size: 1.10em;
}
}
#media only screen and (max-width: 1200px) {
.ad-box {
display: none;
}
.row {
max-width: calc(100% - 14px);
}
.five-column {
min-width: calc(33% - 20px);
}
.drop .name {
font-size: 1.20em;
}
}
#media only screen and (max-width: 1000px) {
.five-column {
min-width: calc(50% - 20px);
}
.drop .name {
font-size: 1.30em;
}
.user-name {
left: 7%;
}
.more-dropup {
left: 5%;
}
.user-image {
left: 2%;
}
}
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<title>Hub</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- Mobile Optimization -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Custom styling -->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/hub.css" type="text/css" />
<link rel="stylesheet" href="../partials/nav.css" type="text/css" />
<link rel="stylesheet" href="../css/components.css" type="text/css" />
<!-- Imported Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
</head>
<body>
<div class="nav-custom">
<a class="venos_logo" href="hubs.html">
<img src="venos_logo.png">
</a>
<div class="inner-nav">
<ul class="upper-items smooth">
<li class="label">NAVIGATE</li>
<li class="link"><i class="material-icons nav-icon">home</i> Dashboard
</li>
<li class="link"><i class="material-icons nav-icon">notifications</i> Notifications
</li>
<li class="link"><i class="material-icons nav-icon">cloud</i> Synced Files
</li>
<li class="link"><i class="material-icons nav-icon">create</i> Create Hub
</li>
</ul>
<ul class="lower-items">
<li class="label">HUBS</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> San Haven Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Fargo Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Velva Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Dank Memes
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Squad
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Summer 2017
</li>
</ul>
<div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
</div>
<div class="nav-push-div"></div>
<div class="more-menu">
<ul>
<li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
</li>
<li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
</li>
</ul>
</div>
<div class="nav-user">
<div class="user-image"></div>
<span class="user-name">Jason Procka</span>
<button type="button" class="more-dropup">
<i class="material-icons nav-more-btn">more_horiz</i>
</button>
</div>
</div>
<div class="content">
<div class="page-content">
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="five-column">
<div class="drop">
<div class="name">1.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop drop-image">
<div class="name">2.png</div>
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">3.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">4.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">5.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">6.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">7.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">8.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">9.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">10.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
</div>
<div class="ad-box">
<span class="ad-text">Your ad here.</span>
</div>
</div>
<div class="push-div"></div>
</div>
<div class="drop-details">
<button class="close-details">
<i class="material-icons">close</i>
</button>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<script type="text/javascript" src="../js/hub.js"></script>
</body>
</html>
Here's the link to the webpage to see if it does the same thing for you:
https://venos-git-jasonprocka1.c9users.io/www/html/hub.html
I've already worked on clearing cookies and nothing seems to work. Something has to be wrong with my code.
Any help is greatly appreciated! Thanks!
On the page linked, you have not included the required tether.js library.
Also, the page is requesting a wallpaper image over http (but the page itself is hosted on https, usually you get a warning on the browser's console about this)
And, it's making references to a nav.css file but it cannot find it.
As a side note, you do not need to have each event handler declared in its own function() declaration. You could combined them all in one as below:
$(function() {
// five-column click
var rightVal = -350; // base value
$(".five-column").click(function() {
event.stopPropagation();
rightVal = (rightVal * -1) - 350; // calculate new value
$(".drop-details").animate({
right: rightVal + 'px'
}, {
queue: false,
duration: 500
});
});
// close-detail click
var closeRightVal = -350;
$(".close-details").click(function() {
event.stopPropagation();
$(".drop-details").animate({
right: closeRightVal + 'px'
}, {
queue: false,
duration: 500
});
});
// nav-custom touchmove
$(".nav-custom").on('touchmove', function(e) {
e.preventDefault();
});
// content touchmove
$(".content").on('touchmove', function(e) {
e.preventDefault();
});
// inner-nav touchmove
$(".inner-nav").on('touchmove', function(e) {
e.preventDefault();
});
// window resize
$(window).resize(function() {
var dropWidth = $(".five-column").width();
$(".drop").css("height", dropWidth + 'px');
$(".five-column").css("min-height", dropWidth + 20 + 'px');
});
});
* {
overflow: hidden;
}
html {
height: 100%;
margin: 0;
max-width: 100%;
}
body {
font-family: 'Ubuntu', sans-serif;
background-color: #F9F9F9;
margin: 0;
height: 100%;
max-width: 100%;
-webkit-font-smoothing: antialiased;
position: fixed;
}
/* Page Components */
.content {
min-width: 100%;
float: right;
height: 100%;
overflow-y: scroll;
overflow-x: none;
margin-left: 250px;
}
.content::-webkit-scrollbar {
display: none;
}
.page-content {
min-width: calc(100% - 250px);
max-width: calc(100% - 250px);
min-height: 100%;
margin-top: 0;
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
.drop-details {
height: 100%;
width: 350px;
z-index: 1000;
color: #FFF;
position: absolute;
right: -350px;
background-color: #FFF000;
}
/* Hub Top */
.hub-jumbo {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
background-size: cover;
background-position: center;
padding-top: 36px;
padding-bottom: 36px;
margin-bottom: 18px;
}
.hub-header {
text-align: center;
}
h2 {
margin-bottom: 0;
}
.hub-btns {
display: block;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
/* End of top */
.container-fluid {
padding: 0;
margin: 0;
height: 10%;
min-width: 100%;
max-width: 100%;
margin-left: 4px;
overflow-y: auto;
margin-right: 0;
}
.ad-box {
width: 20%;
height: 250px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
margin-right: -14px;
top: 50%;
transform: translateY(-50%);
background-color: #000000;
vertical-align: middle;
}
.ad-text {
text-align: center;
color: #FFFFFF;
}
.push-div {
height: 50px;
}
.five-column {
min-width: calc(20% - 20px);
padding: 0;
max-height: 194px;
display: inline-block;
margin: 0;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 14px;
}
.row {
display: inline-block;
max-width: calc(80% - 14px);
margin: 0;
margin-left: 0;
}
/* Drop Styles */
.drop {
width: 100%;
height: 180px;
background-color: #FFF;
border-bottom: 3px solid #EBEBEB;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.drop-image {
background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
background-size: cover;
background-position: center;
}
.drop .name {
height: 36px;
line-height: 36px;
text-align: center;
color: #FFF;
background-color: #03a9f4;
font-size: 1em;
}
.drop .icon {
height: 80px;
vertical-align: middle;
display: block;
margin: 0 auto;
margin-top: 32px;
}
/* SCALING */
#media only screen and (max-width: 1400px) {
.five-column {
min-width: calc(25% - 20px);
}
.drop .name {
font-size: 1.10em;
}
}
#media only screen and (max-width: 1200px) {
.ad-box {
display: none;
}
.row {
max-width: calc(100% - 14px);
}
.five-column {
min-width: calc(33% - 20px);
}
.drop .name {
font-size: 1.20em;
}
}
#media only screen and (max-width: 1000px) {
.five-column {
min-width: calc(50% - 20px);
}
.drop .name {
font-size: 1.30em;
}
.user-name {
left: 7%;
}
.more-dropup {
left: 5%;
}
.user-image {
left: 2%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<div class="nav-custom">
<a class="venos_logo" href="hubs.html">
<img src="http://lorempixel.com/50/50">
</a>
<div class="inner-nav">
<ul class="upper-items smooth">
<li class="label">NAVIGATE</li>
<li class="link"><i class="material-icons nav-icon">home</i> Dashboard
</li>
<li class="link"><i class="material-icons nav-icon">notifications</i> Notifications
</li>
<li class="link"><i class="material-icons nav-icon">cloud</i> Synced Files
</li>
<li class="link"><i class="material-icons nav-icon">create</i> Create Hub
</li>
</ul>
<ul class="lower-items">
<li class="label">HUBS</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> San Haven Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Fargo Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Velva Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Dank Memes
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Squad
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Summer 2017
</li>
</ul>
<div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
</div>
<div class="nav-push-div"></div>
<div class="more-menu">
<ul>
<li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
</li>
<li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
</li>
</ul>
</div>
<div class="nav-user">
<div class="user-image"></div>
<span class="user-name">Jason Procka</span>
<button type="button" class="more-dropup">
<i class="material-icons nav-more-btn">more_horiz</i>
</button>
</div>
</div>
<div class="content">
<div class="page-content">
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="five-column">
<div class="drop">
<div class="name">1.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop drop-image">
<div class="name">2.png</div>
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">3.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">4.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">5.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">6.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">7.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">8.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">9.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">10.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
</div>
<div class="ad-box">
<span class="ad-text">Your ad here.</span>
</div>
</div>
<div class="push-div"></div>
</div>
<div class="drop-details">
<button class="close-details">
<i class="material-icons">close</i>
</button>
</div>
</div>
I want to add a active function to the current menu item on page scroll. It’s a single page with different sections. When click on an item, the active state should switch to the current one.
As you scroll down the page, the active menu item changes. How is this done? Would guys give me a answer base on my demo coding? Thanks.
My demo: http://jsfiddle.net/x2skzp1p/1/
var menuContainer = $('header').height();
function scrollToAnchor(anchorName) {
var aTag = $("div[name='" + anchorName + "']");
$('html,body').animate({
scrollTop: aTag.offset().top - menuContainer
}, 'slow');
console.log(anchorName);
}
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
/* Mobile Layout: 480px and below. */
body {
background-color: #EEEEEE;
font-family: "Open Sans", Helvetica, "Heiti TC", "Microsoft JhengHei", "Microsoft Yahei", "PMingLiU", sans-serif;
font-size: 100%;
margin-top: 0px;
}
.gridContainer {
margin-left: auto;
margin-right: auto;
padding-left: 1.1375%;
padding-right: 1.1375%;
clear: none;
float: none;
width: auto;
}
#header {
margin-top: 0;
margin-right: auto;
margin-left: auto;
display: block;
width: 100%;
height: 200px;
max-width: 1000px;
position: fixed;
background-color: #FF6600;
}
/* header - navigation */
#subnav {
height: 100%;
margin-right: auto;
width: 100%;
background-color: #1BBC9B;
font-size: 120%;
}
#navmenu ul {
padding: 0;
margin-top: 4px;
margin-right: auto;
margin-left: 0%;
margin-bottom: 0;
width: 650px;
}
#navmenu li {
display: inline;
float: left;
}
#navmenu a {
color: #294C52;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
#navmenu li a {
border-right: 1px solid #294C52;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#navmenu li:last-child a {
border-right: 1px solid #576979;
/* no border on last list item */
}
#navmenu li:first-child a {
background-color: #294C52;
color: #FFFFFF;
}
#navmenu a:hover,
nav a:active {
background-color: #1BBC9B;
color: #FFFFFF;
}
#content {
width: 100%;
max-width: 1000px;
height: 100%;
margin-top: 1px;
}
#section1 {
background-color: #294C52;
width: 100%;
display: block;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 198px;
}
#section2 {
background-color: #EEEEEE;
}
#section3 {
background-color: #EEEEEE;
}
#section4 {
background-color: #EEEEEE;
margin-left: 0;
width: 100%;
float: left;
}
#content-about-org-left {
width: 48.1012%;
background-color: #FFFFFF;
float: left;
clear: none;
}
#content-about-org-centre {
width: 48.1012%;
margin-left: 1.2658%;
clear: none;
background-color: #FFFFFF;
float: right;
}
#content-about-org-right {
background-color: #FFFFFF;
}
#section5 {
background-color: #EEEEEE;
}
/* content - typography */
.content-list {
list-style-type: none;
color: #294C52;
text-indent: -25px;
font-size: 100%;
line-height: 173%;
}
.content-list-bold {
font-weight: bolder;
font-size: 110%;
color: #294C52;
}
.content-title {
background-color: #903233;
color: #FFFFFF;
padding-top: 3px;
}
.content-p-white {
color: #FFFFFF;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
line-height: 25px;
padding-top: 0px;
padding-bottom: 0px;
}
.content-p-black {
color: #294C52;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
line-height: 25px;
font-size: 100%;
}
.content-p-black-b {
color: #294C52;
font-weight: bolder;
padding-left: 10px;
font-size: 110%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gridContainer clearfix">
<header id="header">
<nav id="subnav" class="fluid">
<ul id="navmenu">
<li><a onClick="scrollToAnchor('section1');" title="成立背景">SECTION 1</a>
</li>
<li><a onClick="scrollToAnchor('section2');" title="協會使命">SECTION 2</a>
</li>
<li><a onClick="scrollToAnchor('section3');" title="營運模式">SECTION 3</a>
</li>
<li><a onClick="scrollToAnchor('section4');" title="協會組織">SECTION 4</a>
</li>
<li><a onClick="scrollToAnchor('section5');" title="活動及刊物">SECTION 5</a>
</li>
</ul>
</nav>
</header>
<!--end of header-->
<!--start of content-->
<div class="fluid" id="content">
<div id="section1" class="fluid" name="section1">
<p class="content-p-white">《2013年香港殘疾人士貧窮情況報告》顯示介乎18至64歲適齡工作的殘疾人士的貧窮率為22.4%，遠較相同年齡群的整體貧窮率10.5%為高。再者，按經濟活動身分劃分，近18萬名的殘疾適齡工作人士當中，只有39.1%有從事經濟活動，遠低於整體人口中同年齡層的72.8%。</p>
<p class="content-p-white">於2013年3月初，一群熱心人士包括郭鍵勳博士、謝俊謙教授及伍杏修先生等有意建立一個各方協作平台，改善殘疾人士的就業困難。</p>
<p class="content-p-white">資訊科技易達協會有限公司 Accessible IT Development Association Limited (AIDA) 於2014年11月正式註冊成立。</p>
<!--<div id="secttion1-bg"></div>--></div>
<!--end of section1-->
<div id="section2" class="fluid" name="section2">
<article>
<h2 class="content-title"> SECTION 2</h2>
<p class="content-p-black">資訊科技易達協會是一個社會企業致力提供專業資訊科技服務，同時為嚴重殘疾人士提供培訓及工作機會，讓學員可選擇在家居從事資訊科技相關工作；協會全力推動無障礙軟件開發，協助社會資訊共融。</p>
</article>
</div>
<!--end of section2-->
<div id="section3" class="fluid" name="section3">
<article>
<h2 class="content-title"> SECTION 3</h2>
<figure>
<img src="images/2-about-us_03.jpg" alt="營運模式示意圖" class="alignRight" title="營運模式示意圖" />
</figure>
<p class="content-p-black">全面利用現代通訊科技的便利，解決殘疾人士面對指定工作地點的限制，讓他們可選擇在家居或院舍工作，同時得到必要的護理。AIDA選擇網頁開發作為起步點，由「無障礙學堂」(Barrier-Free School) 及業界專業義工負責培訓學員，讓他們掌握指定技術。</p>
<p class="content-p-black">AIDA會承接工作項目，將項目分拆，然後將組件分配給技術程度不同的學員，並會密切督導整個項目的進行。AIDA已經與本地多間知名網頁開發公司結為合作伙伴，致力確保AIDA的所有服務均符合市場要求。AIDA會以殘疾友善機構的工作項目作為開始，當累積一定成功往績後，會推廣至主流市場。</p>
</article>
</div>
<!--end of section3-->
<div id="section4" class="fluid" name="section4">
<article>
<h2 class="content-title"> SECTION 4</h2>
<div id="content-about-org-left" class="fluid">
<ul class="content-list">
<li class="content-list-bold">名譽贊助人</li>
<li>謝俊謙教授</li>
<li class="content-list-bold">主席</li>
<li>郭鍵勳博士</li>
<li class="content-list-bold">副主席</li>
<li>劉海軍先生</li>
<li class="content-list-bold">義務秘書</li>
<li>伍杏修先生</li>
<li class="content-list-bold">義務司庫</li>
<li>郭皓君女士</li>
<li class="content-list-bold">核數師</li>
<li></li>
<li class="content-list-bold">義務法律顧問</li>
<li>林子絪女士</li>
<li class="content-list-bold">義務總幹事</li>
<li>蘇炳坤先生</li>
<li class="content-list-bold">諮詢委員及指導</li>
<li></li>
</ul>
</div>
<div id="content-about-org-centre" class="fluid">
<ul class="content-list">
<li class="content-list-bold">董事</li>
<li>張健輝先生</li>
<li>郭鍵勳博士</li>
<li>郭皓君女士</li>
<li>劉海軍先生</li>
<li>羅偉祥先生</li>
<li>伍杏修先生</li>
<li>吳家榮博士</li>
<li>蘇炳坤先生</li>
<li>謝俊謙教授</li>
<li>黃婉冰女士</li>
<li>游寶榮先生</li>
</ul>
</div>
<div id="content-about-org-right" class="fluid">
<ul class="content-list">
<li class="content-list-bold">工作團隊</li>
<li>王乃東 王迪清 江啟暉 利詠然 李俊輝</li>
<li>李豪飛 冼永健 何浚彥 施嶸傑 翁文菁</li>
<li>茹文祥 郭寧 章世恒 曾志豪 曾鈴茵</li>
<li>黃新陽 蔡冀逵 鄭建慧 盧兆豐</li>
</ul>
<p>
<img src="images/2-about-us_06.jpg" alt="工作團隊成員相片" title="工作團隊成員相片" />
</p>
</div>
</article>
</div>
<!--end of section4-->
<div id="section5" class="fluid" name="section5">
<article>
<h2 class="content-title"> SECTION 5</h2>
<ul class="content-list">
<li class="content-list-bold">新春團拜</li>
<li>日期︰2015年3月14日(星期六)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰下午4:00- 5:30</li>
</ul>
<hr>
<ul class="content-list">
<li class="content-list-bold">第一次周年大會</li>
<li>日期︰2015年3月14日(星期六)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰下午3:30- 4:00</li>
</ul>
<hr>
<ul class="content-list">
<li class="content-list-bold">協會發展成長分享會</li>
<li>日期︰2015年2月3日(星期二)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰上午11:00- 下午4:00</li>
<li>內容：</li>
<li>1. Delifrance午膳</li>
<li>2. 匯報協會最新發展，就大家感興趣的事務進行商討</li>
<li>3. IT人Ben Wong 個人經歷分享</li>
<li>4. 參觀香港大學校園或自由活動</li>
</ul>
<hr>
<ul class="content-list">
<li class="content-list-bold">協會發展成長分享會</li>
<li>日期︰2015年2月3日(星期二)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰上午11:00- 下午4:00</li>
<li>內容：</li>
<li>1. Delifrance午膳</li>
<li>2. 匯報協會最新發展，就大家感興趣的事務進行商討</li>
<li>3. IT人Ben Wong 個人經歷分享</li>
<li>4. 參觀香港大學校園或自由活動</li>
</ul>
<hr>
</article>
</div>
<!--end of section5-->
</div>
<!--end of content-->
</div>
<!--end of gridContainer-->
$(document).ready( function (){
var topMenu = $("#navmenu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
// Set/remove active class
menuItems.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
});
<header id="header">
<nav id="subnav" class="fluid">
<ul id="navmenu">
<li>SECTION 1</li>
<li>SECTION 2</li>
<li>SECTION 3</li>
<li>SECTION 4</li>
<li>SECTION 5</li>
</ul>
</nav>
</header>
and add this style
#navmenu li a .active {
background-color: #294C52;
color: #FFFFFF;
}
You can use onscroll event to set active div and an active class to set it:
$(function () {
$("body").onscroll(function () {
$("#navmenu li").removeClass("active");
if ($("body").scrollTop() > $("#section5").offset().top)
$("#navmenu li").eq(4).addClass("active");
else if ($("body").scrollTop() > $("#section4").offset().top)
$("#navmenu li").eq(3).addClass("active");
else if ($("body").scrollTop() > $("#section3").offset().top)
$("#navmenu li").eq(2).addClass("active");
else if ($("body").scrollTop() > $("#section2").offset().top)
$("#navmenu li").eq(1).addClass("active");
else
$("#navmenu li").eq(0).addClass("active");
});
});
im having a problem making an div stop scrolling at a certain point. I've looked at others solutions but i cant make it work on mine. Anybody care to take a look and tell me what i've done wrong?
My code's:
var windw = this;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(windw);
$window.scroll(function(e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#header').followTo(250);
#charset "utf-8";
/* CSS Document */
/*Index*/
#index {
background-image: url(../img/metallica/Metallica_London_2008-09-15_Kirk_and_JamesBL.jpg);
background-repeat: no-repeat;
background-position: center 10;
background-attachment: fixed;
}
#venstre {
float: left;
}
#midt {
float: left;
}
#header {
position: fixed;
top: 0;
left: 0;
height: auto;
}
#header a {
list-style-type: none;
text-decoration: none;
color: #FFFFFF;
font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive;
font-size: 60px;
float: left;
margin-top: 32px;
margin-left: 40px;
margin-right: 650px;
position: relative;
}
#header form {
float: right;
margin-top: 26px;
margin-right: 49px;
}
#righto {
float: right;
}
#lefto {
float: left;
}
#Wrapper {
clear: both;
}
.anker {
width: 67px;
height: 52px;
padding: 10px;
margin-left: 147px;
margin-top: 207px;
float: left;
position: fixed;
}
.anker a {
text-decoration: none;
text-align: center;
}
.anker ul li {
list-style-type: none;
}
.undercirkel {
margin-top: 0;
margin-left: 20px;
list-style-type: none;
}
.undercirkelt {
margin-top: 0;
margin-left: 800px;
list-style-type: none;
}
.box {
background-color: #FFFFFF;
float: left;
width: 700px;
height: 390px;
margin-left: 428px;
margin-top: 187px;
opacity: 0.4;
z-index: -1;
}
.boxt {
background-color: #FFFFFF;
float: left;
width: 700px;
height: 390px;
margin-left: 428px;
opacity: 0.4;
z-index: -1;
}
.dropdown {
width: auto;
float: left;
position: fixed;
margin-top: 190px;
}
.dropdown a {
text-decoration: none;
color: #FFFFFF;
font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive;
text-align: center;
font-size: 18px;
margin: 2px 0 2px 0;
}
.dropdown a:hover {
color: #282828;
}
.dropdown ul a {
display: block;
}
.dropdown ul {
list-style-type: none;
margin: 0 auto;
}
.drop {
background-color: #393939;
border: #D4D4D4;
}
.drop li:hover {
background-color: #808080;
border: #D4D4D4;
}
.undermenu {
display: none;
}
.undermenu li a {
display: block;
text-decoration: none;
margin-left: 50px;
}
.undermenu li {
clear: both;
background-color: #393939;
}
.dropdown li:hover .undermenu {
display: block;
position: absolute;
}
.dropdown li:hover .undermenu li {
float: left;
font-size: 13px;
}
.dropdown ul li ul li a {
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#right {
width: 300px;
background-color: #FFFFFF;
float: right;
margin-right: 52px;
margin-top: 200px;
position: fixed;
margin-left: 1250px;
opacity: 0.4;
}
#right img {
padding: 15px;
}
.footer {
clear: both;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rockentusiasterne</title>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/js.js"></script>
<script>
var windw = this;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(windw);
$window.scroll(function(e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 40
});
}
});
};
$('#scrollto-menu-nav').followTo(250);
</script>
</head>
<body id="index">
<div id="header">
<div id="lefto">Rockentusiasterne
</div>
<div id="righto">
<form>
<label>
<img src="../img/search.png">
</label>
<input type="search" name="search" placeholder="Søg">
</input>
</form>
</div>
</div>
<div id="Wrapper">
<div id="left">
<div class="dropdown">
<ul>
<div class="drop">
<li>Forside
</li>
</div>
<div class="drop">
<li>Genrer
<ul class="undermenu">
<li>Rock'n'Roll
</li>
<li>Alternativ musik
</li>
<li>Grunge
</li>
</ul>
</li>
</div>
<div class="drop">
<li>Om os
</li>
</div>
<div class="drop">
<li>Forum
<ul class="undermenu">
<li>Opret bruger
</li>
<li>FAQ
</li>
</ul>
</li>
</div>
<div class="drop">
<li>Kontakt os
</li>
</div>
</ul>
</div>
</div>
<div id="innerwrapper">
<div id="midt">
<div class="anker">
<ul>
<li>
<a href="#1">
<img src="../img/cirkel.png">
</a>
</li>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<li>
<a href="#2">
<img src="../img/cirkel.png">
</a>
</li>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<li>
<a href="3">
<img src="../img/cirkel.png">
</a>
</li>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<li>
<a href="4">
<img src="../img/cirkel.png">
</a>
</li>
</div>
<div class="box">
<a name="1"></a>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="boxt">
<a name="2"></a>
</div>
</div>
<div id="right">
<img src="../img/metallica/Metallica-on-Howard-Stern-Show-Wallpaper.png" width="81" height="60">
</div>
<div class="footer"></div>
</body>
</html>
Unbind the scroll event. Something like
$(window).unbind('scroll');
Hope this helps.
I'm trying to add this gallery to my blogger blog and I'm not sure how to change the width. I'm using the following code. My blog's width is 980px. I tried to change 550 into a smaller size, but the images went below!
<style type="text/css">
div.ccontent {
/* The display of ccontent is enabled using jQuery so that the slideshow ccontent won't display unless javascript is enabled. */
display: none;
float: right;
width: 550px;
}
div.ccontent a, div.navigation a {
text-decoration: none;
color: #777;
}
div.ccontent a:focus, div.ccontent a:hover, div.ccontent a:active {
text-decoration: underline;
}
div.controls {
margin-top: 5px;
height: 23px;
}
div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container {
position: relative;
clear: both;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url('http://img707.imageshack.us/img707/6035/loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.slideshow a.advance-link {
display: block;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow img {
vertical-align: middle;
border: 1px solid #ccc;
}
div.download {
float: right;
}
div.caption-container {
}
span.image-caption {
display: block;
position: absolute;
}
div.caption {
background-color: #000;
padding: 12px;
color: #ccc;
}
div.caption a {
color: #fff;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;
}
ul.thumbs li {
float: none;
padding: 0;
margin: 0;
list-style: none;
}
a.thumb {
padding: 0;
display: inline;
border: none;
}
ul.thumbs li.selected a.thumb {
color: #000;
font-weight: bold;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;
}
div.navigation div.bottom {
margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #ccc;
}
div.pagination a:hover {
background-color: #eee;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
background-color: #000;
border-color: #000;
color: #fff;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
#captionToggle a {
float: right;
display: block;
background-image: url('http://img94.imageshack.us/img94/2515/captionj.png');
background-repeat: no-repeat;
background-position: right;
margin-top: 5px;
padding: 5px 30px 5px 5px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://galleriffic.googlecode.com/svn/trunk/example/js/jquery.galleriffic.js"></script>
<div id="page">
<div id="container">
<h1>Galleriffic</h1>
<h2>Minimal implementation</h2>
<!-- Start Minimal Gallery Html Containers -->
<div id="gallery" class="ccontent">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">Title #0</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">Title #1</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">Title #2</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">Title #3</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">Title #4</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">Title #5</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">Title #6</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">Title #7</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">Title #8</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">Title #9</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">Title #10</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">Title #11</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">Title #12</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">Title #13</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">Title #14</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">Title #15</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">Title #16</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">Title #17</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">Title #18</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">Title #19</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">Title #20</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">Title #21</a>
</li>
<li>
<a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">Title #22</a>
</li>
<li>
<a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">Title #23</a>
</li>
</ul>
</div>
<!-- End Minimal Gallery Html Containers -->
<div style="clear: both;"></div>
</div>
</div>
<div id="footer">© 2009 Trent Foley</div>
<script type="text/javascript">
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.ccontent').css('display', 'block');
$(document).ready(function() {
// Initialize Minimal Galleriffic Gallery
$('#thumbs').galleriffic({
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls'
});
});
</script>
You don't even need any scripting for this. div.slideshow-container{margin-left:-25px} works just fine.
document.getElementById("thumbs").style.width = "123px";