We Keep Coding

jQuery: animating position isn't affecting DOM

I'm trying to animate the top value of my CSS in order to create a dropdown nav when the user clicks the hamburger button.
The CSS doesn't seem to be getting applied to the element when I view in the Chrome inspector, but I've tried the hide() function on the same element and that works fine.
HTML:
<div class="top section-reversed">
<div class="container">
<div class="row">
<div class="col-2">
<span class="icon icon-logo-ctr"></span>
</div>
<div class="col-2 ml-auto">
<a id="asdf" href="#" class="icon icon-hamburger"></a>
</div>
</div>
</div>
</div>
<div class="nav-mobile">
<div class="content">
<a class="icon icon-close" href="#"></a>
<div class="cta-consult">
<h5>000000</h5>
<span class="telephone">000000</span>
</div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Prices</li>
<li>Furniture</li>
<li>Contact</li>
</ul>
<div class="social-header social-header-mobile">
<img src="image/social-whatsapp.png" alt="Placeholder" />
<img src="image/social-instagram.png" alt="Placeholder" />
<img src="image/social-facebook.png" alt="Placeholder" />
<img src="image/social-twitter.png" alt="Placeholder" />
</div>
</div>
</div>
JS:
$(document).ready(function() {
// nav-mobile
$('#asdf').click(function() {
$('.nav-mobile').animate({
'top': '+=540'
},
5000, function() {
// Animation complete.
});
});
});
CSS:
.nav-mobile {
background: #fff;
color: #000;
height: 100%;
left: auto;
overflow: hidden;
position: fixed;
/*top: 65px;*/
top: -605px;
width: 100%;
z-index: 1;
}
.nav-mobile > .content {
padding: 20px;
}
.nav-mobile .icon-close {
color: #797979;
float: right;
padding: 0;
}
.nav-mobile .cta-consult {
clear: both;
}
.nav-mobile .cta-consult h5 {
font-size: 14px;
margin: 0 0 2px;
letter-spacing: 0;
}
.nav-mobile .cta-consult .telephone {
font-size: 30px;
letter-spacing: .02em;
}
.nav-mobile ul {
border-top: #d0d0d0 solid 1px;
display: block;
list-style: none;
margin: 30px 0 20px;
padding: 20px 0 0;
width: 100%;
}
.nav-mobile a {
color: #000;
display: block;
text-transform: uppercase;
letter-spacing: .25em;
padding: 10px 0;
}

Dropdown won't work when hovering nav bar

I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!

jQuery image slider scrolls page to top when changing image

I've just started to get into jQuery, so I apologise for the bad coding in advance. I just recognised that whenever I scroll a bit down so that just a bit of the jQuery image slider is visible on the top of the page, it scrolls me automatically back to top when the jQuery image slider changes the picture. But when I am as far down on the page that the slider isn't visible at all or when I barely scroll down so that the most part of the slider is still on the screen, it doesn't scroll me back to top.
I would appreciate any help since I am not able to find the issue.
Thanks in advance.
$('#back_to_top').click(function()
{
$('html, body').animate({scrollTop: 0});
return false;
});
// Nav bar drop down code
$('#deals_a').hover(function(){
$('#deals_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#deals_dropdown').is(':hover')){
$('#deals').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#deals_dropdown').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
};
$('#services_a').hover(function(){
$('#services_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#services_dropdown').is(':hover')){
$('#services').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#services_dropdown').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
};
// Slider button code
$('.slider_button').hover(function(){
$('.slider_button').removeClass('active_button');
$(this).addClass('active_button');
$('.slide').hide();
$($('#slider').children()[$(this).index()]).show();
});
// Slider code
$(document).ready(function(){
// Set options
var speed = 500; // Fade speed
var autoswitch_speed = 4000; // Auto slider speed
var myInterval = setInterval(nextSlide, autoswitch_speed);
// Add initial active class
$('.slide').first().addClass('active');
// Hide all slides
$('.slide').hide();
// Show first slide
$('.active').show();
// show the first node
($($('#slider_button_container').children()[0])).addClass('active_button');
var counter = 1;
// Switch to next slide
function nextSlide(){
clearInterval(myInterval);
$('.slider_button').removeClass('active_button');
($($('#slider_button_container').children()[counter - 1])).removeClass('active_button');
($($('#slider_button_container').children()[counter])).addClass('active_button');
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
($($('#slider_button_container').children()[3])).removeClass('active_button');
($($('#slider_button_container').children()[0])).addClass('active_button');
counter = 0;
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
counter = (counter + 1) % 4;
myInterval = setInterval(nextSlide, autoswitch_speed);
}
});
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height: 600px;
text-align: center;
}
#nav_menu{
height: 98px;
display: inline-block;
border-bottom: 2px solid #FFF;
padding: 0 20px 0 20px;
position: relative;
z-index: 2;
}
.nav_menu_items{
float: left;
margin: 10px;
padding-bottom: 10px;
width:auto;
line-height: 80px;
}
.nav_menu_items a{
text-decoration: none;
color: #FFF;
font-size: 20px;
font-weight: bold;
position: relative;
font-family: 'Exo 2', sans-serif;
font-style: italic;
}
.nav_menu_sup:hover::after{
content: "\25B2";
position: absolute;
left: 40%;
top: 14px;
}
#back_to_top, #back_to_top img{
position: fixed;
width: 50px;
height: 50px;
right: 50px;
bottom: 50px;
display:block;
}
.dropdown{
display:none;
height: auto;
width: auto;
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
position: absolute;
background: #FFF;
top:100px;
line-height: 20px;
list-style-type: none;
}
.color_1{
background: #4BB7BE;
}
.color_2{
background: #2A7287;
}
.dropdown li{
padding: 10px;
;
}
.dropdown li:hover{
}
.dropdown li a{
color: #FFF;
}
.dropdown li a:hover{
color: #FFA;
}
#slider{
position: relative;
width: 100%;
height: 100%;
margin-top: -105px;
z-index: 1;
overflow: hidden;
}
.slide img{
height: 600px;
}
.darkening_layer{
width: 100%;
height: 600px;
position: absolute;
background: rgba(0, 0, 0, 0.2);
}
#slider_button_container{
position: relative;
display: inline-block;
top: -50px;
z-index: 2;
}
.slider_button{
height: 18px;
width: 18px;
border-radius: 50%;
border: 3px solid #FFF;
float: left;
z-index: 100;
margin-left: 10px;
cursor: pointer;
position: relative;
display: block;
}
.slider_button:hover{
background: #FFF;
}
.active_button{
background: #FFF;
}
#first_slider_button{
}
#welcome{
background: #007DCC;
width: 100%;
height: 400px;
}
#advertise{
background: #004E7F;
width: 100%;
height: 400px;
}
footer{
width: 100%;
height: 400px;
background-color: #007DCC;
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sea Kozmetik ve Güzellik</title>
<link rel="stylesheet" style="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="nav_menu">
<div id="home" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ANASAYFA</a>
</div>
<div id="about" class="nav_menu_items">
<a class="nav_menu_sup" href="#">HAKKIMIZDA</a>
</div>
<div id="deals" class="nav_menu_items">
<a class="nav_menu_sup" id="deals_a" href="#">KAMPANYALAR</a>
<ul id="deals_dropdown" class="dropdown">
<li class="color_1">Öğrenci Kampanyaları</li>
<li class="color_2">Epilasyon Kampanyaları</li>
<li class="color_1">Cilt Bakımı Kampanyaları</li>
</ul>
</div>
<div id="services" class="nav_menu_items">
<a class="nav_menu_sup" id="services_a" href="#">HİZMETLERİMİZ</a>
<ul id="services_dropdown" class="dropdown">
<li class="color_1">Cilt Bakımı</li>
<li class="color_2">Depilasyon</li>
<li class="color_1">Epilasyon</li>
<li class="color_2">Manikür</li>
<li class="color_1">Pedikür</li>
<li class="color_2">Tırnak Bakımı</li>
<li class="color_1">Kaş Tasarımı</li>
<li class="color_2">Makyaj</li>
</ul>
</div>
<div id="products" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ÜRÜNLERİMİZ</a>
</div>
<div id="gallery" class="nav_menu_items">
<a class="nav_menu_sup" href="#">GALERİ</a>
</div>
<div id="contact" class="nav_menu_items">
<a class="nav_menu_sup" href="#">İLETİŞİM</a>
</div>
</div>
<!-- Picture size must be 1519px x 600px -->
<div id="slider">
<div id="first_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_7.jpg" alt="">
</div>
<div id="second_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_8.jpg" alt="">
</div>
<div id="third_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_9.jpg" alt="">
</div>
<div id="fourth_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_10.jpg" alt="">
</div>
</div>
<div id="slider_button_container">
<div id="first_slider_button" class="slider_button"></div>
<div id="second_slider_button" class="slider_button"></div>
<div id="third_slider_button" class="slider_button"></div>
<div id="fourth_slider_button" class="slider_button"></div>
<div class="clear"></div>
</div>
</header>
<div id="back_to_top">
<img src="images/arrow_up.png" alt="back to top">
</div>
<section id="welcome">
</section>
<section id="advertise">
</section>
<footer>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>

Editing html+css+js for a drop down nav bar

I found perfect code for drop down nav bar. But I'm stuck trying to edit it for my needs. Original complete code is situated here: https://github.com/vandoan/Elli/blob/master/dropDownNav.html
And how it looks: http://codepen.io/Xia-lj/pen/KdKOxw
HTML:
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc...
</div>
</div>
</div>
CSS:
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS:
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
What I'm trying to get: drop down nav bar like in example, but with three buttons "History", "Philosophy", "Physics". And each of this three sections must contain few books' names, e.g:
History:-
The History of Herodotus.
Titus Livius. The History of Rome.
Ivan Krypiakevych. The Great History of Ukraine.
"Philosophy":-
Works by Plato.
Nicomachean Ethics By Aristotle.
Fables And Aphorisms by Hryhorii Skovoroda.
"Physics":-
Stephen Hawking. A Brief History of Time.
Yakov Perelman. Physics for Entertainment.
I would be grateful to hear from anyone who may be able to help. I'm new in Web-development.

How about something like this CodePen which is same example you provided just a bit modified on the HTML and CSS parts, inside div#sections_panel I've added 3 divs - you mentioned 3 sections in the question - with a .sub_sections class name.
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
padding:0 10px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > .sub_sections {
background: #333;
padding: 10px;
height: 258px;
margin:10px 2px 0 0;
color: #FC0;
width:calc(31% - 10px);
display:inline-block;
float:left;
}
#sections_panel > .sub_sections > a{
color:#EEE;
display:block;
padding:10px 5px;
text-decoration:none;
border-bottom:1px dotted #666;
}
#sections_panel > .sub_sections > a:hover{
color:#333;
background-color:orange;
}
#sections_panel > .sub_sections > h3{
color:orange;
text-align:center;
padding-bottom:5px;
border-bottom:1px #222 solid;
}
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div class="sub_sections">
<h3>Search Engines</h3>
Google
Yahoo!
Bing
</div>
<div class="sub_sections">
<h3>Social Networks</h3>
Facebook
Twitter
</div>
<div class="sub_sections">
<h3>Video Networks</h3>
Youtube
Vimeo
</div>
</div>
</div>

try this......
Html
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('The History of Herodotus,Titus Livius. The History of Rome,Ivan Krypiakevych. The Great History of Ukraine','sections_panel')">History <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Works by Plato,Nicomachean Ethics By Aristotle,Fables And Aphorisms by Hryhorii Skovoroda','sections_panel')">Philosophy <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Stephen Hawking. A Brief History of Time,Yakov Perelman. Physics for Entertainment','sections_panel')">Physics <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
</div>
</div>
</div>
CSS
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: auto;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS
function toggleNavPanel(text,x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
var books=text.split(",");
var html='';
for(var i=0; i<books.length; i++){
html+=(i+1)+") "+books[i]+"<br/>";
}
if (panel.style.height == maxH) {
panel.style.height = "0px";
panel.innerHTML="";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
panel.innerHTML="<div>"+html+"</div>";
navarrow.innerHTML = "▴";
}
}

are you looking for something like http://codepen.io/fwpolice/pen/pqlgy
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 () {
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");
})
});
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font: 13px Helvetica, Tahoma, serif;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 1 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Drop Item 1
</a>
</li>
<li>
<a href="#">
Drop Item 2
</a>
</li>
<li>
<a href="#">
Drop Item 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 2 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
asdf
</a>
</li>
</ul>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Maybe this toolbar is one for you:
http://w2ui.com/web/demo/toolbar

extend images across slide active slide

I am creating a website for a school project and we were asked to choose a company to design a mock promotional website for. I chose CVS but you could choose anyone. I managed to use a template which I had done completing some codecamdemy classes but the tutorials didn't appear to be helpful in regards to changing the length of the images. What I want to do is to extend the images called "nyse", "mentor" and "mountain" across the length of the whole slide container, but so far, when I change it, the image doesn't seem to do anything. Can anyone tell me where it is going wrong or where to put my code to extend the images? I have tried numerous divs but no luck so far. My code is presented below.
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="img/cvs.png">
</a>
<div class="headerNi">
<div class="container">
<a href="#" class="logo-icon">
<p><a href title="Click this link to view the scheme.">NIDC Graduate Scheme</a></p>
</a>
<div id ="headerMission">CVS Health's Northern Ireland Development Centre, which opened in 2012,<br>
creates software solutions for all parts of the US company,<br>
with particular focus on internet and mobile applications.</div></div>
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Curriculum</li>
<li>Staff Profiles</li>
<li>Careers</li>
<li>Register</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Graduate Scheme</li>
<li>What we look for</li>
<li>Links</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="slider">
<div id="nyse-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>CVS is now hiring</h1>
<p>We will soon have a nice new building.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="img/nyse.jpg" width="540px">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
Accountability
<p>Take responsibility for your actions.</p>
</div>
</div>
</div>
</div>
<div id="mountain-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Collaboration</h1>
<p>At CVS, it's important to work together with your mentor!</p>
</div>
<div class="slide-img col-xs-7">
<img src="img/mountain.png">
</div>
</div>
</div>
</div>
<div id="pharm-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Tenacity</h1>
<p>Be determined.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="img/pharm.jpg" width="540px">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
.container {
width: 960px;
color: gray;
}
/* 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%;
}
.slide {
text-align: center;
height: 550px;
}
#nyce-slide{
background-image: url('nsce.jpg');
}
#pharm-slide-feature{
background-image: url('pharm.jpg');
}
#mountain-slide-feature{
background-image: url('mountain.jpg');
}
.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://devonsstudio.com/businesspeople.png');
height: 550px;
}
.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;
}
.slide-feature p {
color: red;
}
.slider-nav {
text-align: center;
margin-top: 80px;
}
.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;
}
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://devonsstudio.com/businesspeople.png');
height: 550px;
}
.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;
}
.slide-feature p {
color: red;
}
.slider-nav {
text-align: center;
margin-top: 80px;
}
.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;
}
JAVASCRIPT
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(e) {
e.preventDefault();
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();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function(e) {
e.preventDefault();
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);

Heres a DEMO FIDDLE (You only need to add your images URLS to the CSS)
The first thing you need to do is to add e.preventDefault(); to your click evennts like this:
$('.arrow-next').click(function(e) {
e.preventDefault();
//..more code
});
$('.arrow-prev').click(function(e) {
e.preventDefault();
//..more code
});
Then you need to give each slide a unique ID and give it a background for the image, just like you have a background for the .slide-feature like this:
HTML:
<div id="nyce-slide" class="slide">
<!-- ...code.. -->
</div>
<div id="mountain-slide" class="slide">
<!-- ...code.. -->
</div>
<div id="mentor-slide" class="slide">
<!-- ...code.. -->
</div>
CSS:
.slide {
text-align: center;
height: 550px;
}
#nyce-slide{
background-image: url('nyce.jpg');
}
#mentor-slide{
background-image: url('mentor.jpg');
}
#mountain-slide{
background-image: url('mountain.jpg');
}
Heres the final edit:
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="img/cvs.png">
</a>
<div class="headerNi">
<div class="container">
<a href="#" class="logo-icon">
<p><a href title="Click this link to view the scheme.">NIDC Graduate Scheme</a></p>
</a>
<div id ="headerMission">CVS Health's Northern Ireland Development Centre, which opened in 2012,<br>
creates software solutions for all parts of the US company,<br>
with particular focus on internet and mobile applications.</div></div>
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Curriculum</li>
<li>Staff Profiles</li>
<li>Careers</li>
<li>Register</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Graduate Scheme</li>
<li>What we look for</li>
<li>Links</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="slider">
<div id="nyce-slide" class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>CVS is now hiring</h1>
<p>We will soon have a nice new building.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
</div>
</div>
</div>
<div id="accountability-slide" class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
Accountability
<p>Take responsibility for your actions.</p>
</div>
</div>
</div>
</div>
<div id="mountain-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Collaboration</h1>
<p>At CVS, it's important to work together with your mentor!</p>
</div>
</div>
</div>
</div>
<div id="mentor-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Tenacity</h1>
<p>Be determined.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(e) {
e.preventDefault();
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();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function(e) {
e.preventDefault();
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);
</script>
</body>