I'm attempting to center my portfolio gallery. I'm having trouble centering it without losing it's function. When you click on either projects or websites it will narrow down the photos. Whenever i try to center it loses the ability to do that.
Some of the elements are floated left [float: left] which i think is causing centering issues but it needs to be floated left in order to function. Does anyone know how i could center it without losing it's ability to narrow down the pictures? I've tried wrapping it in a div and using text-align: center and margin: 0 auto but no luck. I was able to center it when i got rid of all the float: left but it didn't work and it looked distorted.
Html:
<ul id="filter">
<li class="current">All</li>
<li>projects</li>
<li>websites</li>
</ul>
<div id="center_wrapper">
<ul id="gallery">
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="websites">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="websites">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="websites">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
</ul>
</div>
css:
.imgContainer {
width: 400px;
height: 400px;
float: left;
border: solid 1px #999;
}
img {
width: 100%;
height: 100%;
}
ul#filter {
float: left;
font-size: 16px;
list-style: none;
width: 100%;
}
ul#filter li {
border-right: 1px solid #dedede;
float: left;
line-height: 16px;
margin-right: 10px;
padding-right: 10px;
}
ul#filter li.current a {
color: #333;
font-weight: bold;
}
ul#gallery {
list-style: none;
display: inline-block;
}
ul#gallery li {
float: left;
}
.center_wrapper {
text-align: center;
margin: 0 auto;
}
On the parent ul:
ul {
font-size:0;
text-align:center;
}
On li elements instead of floating:
li {
/*float:left;*/
display:inline-block;
font-size:16px;
}
http://codepen.io/nOji/pen/pJGxQE
ul#gallery {
list-style: none;
display: inline-block;
padding-left:0;
padding-right:0;
text-align: center;
}
ul#gallery li {
display: inline-block;
}
Here is a better way to approach this.
Your HTML is the content you are putting out into the world. It needs to be both human and computer readable. You also shouldn’t be using CSS floats for layout in 2015. We have a myriad of better approaches for this such as flexbox or inline-block that are far simpler to work with and less error prone.
* { margin:0; padding:0 }
body {
font-size: 16px;
padding: 1em;
text-align: center;
}
nav {
margin-bottom: 1em;
text-align: start;
}
nav a {
border-right: 1px solid #dedede;
margin-right: 10px;
padding-right: 10px;
}
nav a.current {
color: #333;
font-weight: bold;
}
section {
display: inline-block;
text-align: start;
width: 90%;
}
<nav>
All
projects
websites
</nav>
<section id="gallery">
<img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
</section>
Related
What I want to do looks like this 2 level dropdown menu
My problems:
I can't move the X (close) to the left side so it matches what it should be
I can't make the submenu to work at all since (ulike the first menu) the point from which I control the toggle (menu-item1) disappears (the submenu covers it)
I have accepted my fate that i will have to use js or jQuery, yet my all my tries to understand it or make it work, mostly using onclick function, are to no result so far.
Can somebody help me with that?
Note that it actually looks much better, but since I removed a lot of stuff to isolate the burger menu it messed up all my margins-paddings so don't worry about the display factors.
You can, obviously, pay no attention to the topest bar, I only inserted it as well because the burger disappeared without it, probably relative spacing to it, but I am quite new to html/css so I could be wrong
.bg {
background-color: black;
background-size: cover;
height: 550px;
}
#topestbar {
display: flex;
}
/* dropdown menu */
#menuToggle {
display: block;
position: relative;
top: -70px;
left: 90%;
width: 21px;
z-index: 1;
}
.grey {
position: absolute;
margin: -85px 0 0 -50;
padding-top: 10px;
width: 410px;
height: 45px;
background: #F8F8F8;
z-index: 2;
}
#menuToggle a {
text-decoration: none;
color: #002868;
}
#menuToggle a:hover {
color: #BF0A30;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 4;
}
#menuToggle span {
display: block;
width: 33px;
height: 3.5px;
margin-bottom: 5px;
position: relative;
background: #FFFFFF;
border-radius: 4px;
transform-origin: 5px 0px;
z-index: 3;
}
#menuToggle span:first-child {
transform-origin: 100% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, 0px);
background: #002868;
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menuToggle input:checked~#menu-m {
visibility: visible;
}
#menu-m {
visibility: hidden;
position: absolute;
width: 310px;
height: 400px;
margin: -90px 0 0 -360px;
padding: 50px;
padding-top: 125px;
background: #FFFFFF;
list-style-type: none;
}
.list li,
#menu-m li a,
.user-m {
color: #002868;
padding: 10px 0px;
font-weight: bold;
font-family: 'SourceSansPro';
font-size: 14px;
margin: 0 0 0 -30px;
}
.flag2 {
position: absolute;
margin: 10px 0 0 30px;
}
.down-arrow2 {
position: absolute;
margin: 13px 0 0 60px;
}
.user-m {
list-style: none;
display: inline-flex;
margin: -25px 0 -40px 150px;
}
.user-m img {
margin: -5px 0px 35px -70px;
}
.line {
background-color: #EEEEEE;
width: 410px;
height: 1px;
margin: 0 0px 0 -50px;
}
.list {
list-style: none;
display: inline-flex;
}
.list li a {
width: 360px;
height: 10px;
display: block;
}
.list img {
padding-left: 10px;
padding-top: 10px;
}
/* ----- dropdown sub-menu ------ */
#dropdown-m {
position: absolute;
background: #F8F8F8;
;
width: 340px;
height: 528px;
margin: -150px 0 0 -30px;
list-style: none;
z-index: 5;
visibility: hidden;
}
.back {
list-style: none;
display: inline-flex;
margin: 0 0 0 -50px;
}
#back-text {
font-weight: normal;
font-size: 14px;
}
.back img {
margin: -2 0 0 -35px;
}
<header style="background-color: black;">
<div class="container">
<div class="bg">
<ul id="topestbar">
<li>
<a href="#">
<img src="./images/clock.png" ; alt="time" width="auto" height="auto" class="clock-image" />
</a>
<div class="time">
<h3>location</h3>
<p>13:28</p>
</div>
</li>
<li>
<a href="#">
<img src="./images/cloud-snow.png" ; alt="temprature" width="auto" height="auto" class="cloud-image" />
</a>
<div class="weather">
<h3>storm</h3>
<p>12°C<span style=opacity:0.5;>°F</span></p>
</div>
</li>
<li>
<a href="#" class="down-arrow">
<img src="./images/down.png" ; alt="more languages" width="auto" height="auto" />
</a>
</li>
</ul>
<nav role="navigation">
<div id="menuToggle">
<input id="check" type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu-m">
<div class="grey">
<a href="#" class="flag2">
<img src="./images/flag.png" ; alt="greek" width="auto" height="auto" />
</a>
<a href="#" class="down-arrow2">
<img src="./images/down2.png" ; alt="more languages" width="auto" height="auto" />
</a>
</div>
<li>
<ul class="user-m">
<li> <img src="./images/user-m.png" ; alt="user-login" width="auto" height="auto" /></li>
<li><a id="login-m" href='#'>login</a></li>
</ul>
</li>
<li>
<div class="line"></div>
</li>
<li>
<ul class="list">
<li>menu-item1</li>
<li> <img src="./images/right.png" ; alt="more" width="auto" height="auto" /></li>
</ul>
<div id="dropdown-m2">
<ul id="dropdown-m">
<ul class="back">
<li> <img src="./images/left.png" ; alt="back-arrow" width="auto" height="auto" /></li>
<li><a id="back-text " href='#'>back </a></li>
</ul>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
</ul>
</div>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
I've created dynamic menu in ASP.NET Webform application. Here is the structure of my menu:
In which sub-menu is properly generated.
Now I am going to apply some CSS to make it eye-catching.
Here is my desire output after applying CSS on it by using SCSS pre-processor.
Issue
The issue on the above image is, the sub-menu abcd is hide behind the abcd2. Which means if I add more 3rd level sub-menu then all sub-menus hide behind the last one.
Here is my dynamic generated HTML which I've copied from browser console.
<aside class="ah-master-asidebar">
<ul id="menu">
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: none;">
<li>
<a href="/">
<strong>Dashboard</strong>
</a>
</li>
</ul>
</li>
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-cog fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>Setups</strong>
</a>
<ul style="display: block;">
<li>
<a href="/Views/NavigationCreation.aspx">
<strong>Navigation Creation</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
</ul>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/SetupFormCreation.aspx">
<strong>Form & Navigation Mapping</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleCreation.aspx">
<strong>Role Creation</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleRights.aspx">
<strong>Role Rights</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleAssignments.aspx">
<strong>Role Assignment</strong>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</aside>
CSS:
.ah-master-asidebar {
height: auto;
width: 50px;
background-color: #222222;
position: fixed;
z-index: 999;
margin: 6px;
color: white;
display: inline-block;
border-radius: 6px;
padding: 10px 0 10px 0;
a {
padding: 6px;
color: white;
display: block;
text-align: center;
text-decoration: none;
}
li {
white-space: nowrap;
}
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
ul {
padding-left: 6px;
position: absolute;
top: 0;
left: 200px;
}
}
}
}
#menu > li {
position: relative;
white-space: nowrap;
margin: 3px 0;
.sub-menu {
position: absolute;
top: 0;
left: 50px;
padding: 0;
list-style: none;
padding-left: 6px;
width: auto;
li {
width: 200px;
a {
background-color: #222;
}
}
}
.sub-menu > li:first-child > a {
background-color: #3276b1;
}
}
#menu:first-child > li > a.ah-anchor-tooltip-show:hover {
background-color: #495057;
}
}
JSFiddle
Link
Conclusion
As I describe my problem briefly, please let me know what I'm doing wrong in my above HTML or CSS code?
change third level html structure to be in one ul element, so use this code
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
instead of
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
</ul>
<ul>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
showSubmenu();
function showSubmenu() {
$('#menu li').mouseenter(function () {
$(this).children('ul').stop().show()
$('ul .sub-menu > li > ul').stop().show()
}).mouseleave(function () {
$(this).children('ul').stop().hide()
$('ul > .sub-menu > li > ul').stop().hide()
});
}
.ah-master-asidebar {
height: auto;
width: 50px;
background-color: #222222;
position: fixed;
z-index: 999;
margin: 6px;
color: white;
display: inline-block;
border-radius: 6px;
padding: 10px 0 10px 0;
a {
padding: 6px;
color: white;
display: block;
text-align: center;
text-decoration: none;
}
li {
white-space: nowrap;
}
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
ul {
padding-left: 6px;
position: absolute;
top: 0;
left: 200px;
}
}
}
}
#menu > li {
position: relative;
white-space: nowrap;
margin: 3px 0;
.sub-menu {
position: absolute;
top: 0;
left: 50px;
padding: 0;
list-style: none;
padding-left: 6px;
width: auto;
li {
width: 200px;
a {
background-color: #222;
}
}
}
.sub-menu > li:first-child > a {
background-color: #3276b1;
}
}
#menu:first-child > li > a.ah-anchor-tooltip-show:hover {
background-color: #495057;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="ah-master-asidebar">
<ul id="menu">
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: none;">
<li>
<a href="/">
<strong>Dashboard</strong>
</a>
</li>
</ul>
</li>
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-cog fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>Setups</strong>
</a>
<ul style="display: block;">
<li>
<a href="/Views/NavigationCreation.aspx">
<strong>Navigation Creation</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/SetupFormCreation.aspx">
<strong>Form & Navigation Mapping</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleCreation.aspx">
<strong>Role Creation</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleRights.aspx">
<strong>Role Rights</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleAssignments.aspx">
<strong>Role Assignment</strong>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</aside>
I found the below part was messing with the styling, the elements were absolutely positioned.
-- EDIT --
It's bad practice to blanket a group of elements with the same coordinates while being absolutely positioned. The reason being is that the elements will all collapse onto the single specified position hiding all but the very top one.
A different CSS only solution would be to use flex style for your menus and sub-menus
display: flex;
flex-direction: column;
Although in your case it's odd because of the list elements you use, which already behave in a sort of flexie way.
Original Code Answer
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
/* Edited I changed position to relative and pushed it up a bit */
ul {
padding-left: 6px;
position: relative;
top: -30px;
left: 200px;
}
}
}
}
I'm trying to float two elements and make the second element fill the remaining width space using only CSS, but the more answers & research I do looks like I might need to use JS.
I'm trying to float text with a variable width next to span which I want to fill the remaining space.
ul#filter-list {
list-style: none;
padding-left: 0px;
}
ul#filter-list span {
font-size: 14px;
float: l margin: 0px 5px;
}
span.filter-pill {
border-radius: 4px;
width: 100%;
margin-left: 12px;
height: 10px;
display: inline-block;
}
<ul id="filter-list">
<li>
<a href="{{ route('question.index') }}">
<span>All</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
<li>
<a href="{{ route('question.index') }}">
<span>a big filter name here</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
</ul>
JSFiddle - https://jsfiddle.net/1466qdab/
Note with the width set to 100% it falls to the line under.
If you're willing to use flexbox, it can be pretty easy:
ul#filter-list a {
display: flex;
}
In addition, use align-items: center; for centering vertically.
ul#filter-list {
list-style: none;
padding-left: 0px;
}
ul#filter-list a {
display: flex; /*added*/
align-items: center; /*added*/
}
ul#filter-list span {
font-size: 14px;
margin: 0px 5px;
}
span.filter-pill {
flex: 1; /*added*/
border-radius: 4px;
margin-left: 12px;
height: 10px;
}
<ul id="filter-list">
<li>
<a href="{{ route('question.index') }}">
<span>All</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
<li>
<a href="{{ route('question.index') }}">
<span>a big filter name here</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
</ul>
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/
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";