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";
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 have created a drop down menu.I wanna change the background color of active span tag, which contains the arrow image. And on click of any dropdown option, it should close and that option should come in the menu.
example:- if i click on option 'DROP ITEM 2' option , it should replace the 'ITEM NAME'.
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
ITEM name <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
place the text "item name " in a span with an id named label1
and add the following
e(".dropdown_menu").click(function(event){
e("#label1").text(event.target.textContent.trim());
})
Snippet below
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
});
e(".dropdown_menu").click(function(event) {
e("#label1").text(event.target.textContent.trim());
console.log(this);
})
e(".table-cell-data").click(function(ev){
var that=this;
e(".table-cell-data").each(function(){
if(this.classList.contains("color_me") && this!=that){
this.classList.remove("color_me");
}
})
this.classList.add("color_me")
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.color_me{
background:green;
color:white;
}
#rotate_sign{
background:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
<span id="label1"> ITEM name <span><span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
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>
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/
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.