We Keep Coding

Change the background of nav when scroll

I'm trying to change the background of NAV when i scroll. What i've done already is below. I don't know what else to do!
CSS
html, body{
margin:0;
padding:0;}html{
font-family: Poppins,sans-serif;}.jumbotron{
text-align:center;
color:red;
background-image: url(IMG/dyta.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
height:100vh;
padding-top:100px;}header{
z-index:1;
position:fixed;
display:flex;
width:100vw;
height:100px;
margin-left:80px;
font-size:20px;
line-height:100px;
color:white;}div.logo{
width:40%;}ul.header-menu-ul{
display:flex;}li.header-menu-li{
list-style:none;
margin-left:auto;
margin-right:auto;}.header-menu-li a{
text-decoration:none;
color:white;
text-transform:uppercase;
letter-spacing:2px;
font-weight: 600;
font-size:14px;
font-family: Poppins,sans-serif;}.header-nav.scrolled {
background-color: #fff;
transition: background-color 200ms linear;}
HTML
<header class="container-fluid header-nav">
<div class="logo text-center">
<i class="fab fa-google"></i>
</div>
<nav class="container-fluid nav-items text-center">
<ul class="header-menu-ul nav-links">
<li class="header-menu-li"><a title="AboutUs" href="#">About Us</a></li>
<li class="header-menu-li"><a title="Services" href="#">Services</a></li>
<li class="header-menu-li"><a title="OurProjects" href="#">Our Projects</a></li>
<li class="header-menu-li"><a title="News" href="#">News</a></li>
<li class="header-menu-li"><a title="Contact" href="#">Contact</a></li>
</ul>
</nav></header>
<div class="jumbotron section text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
JavaScript
$(function () {$(document).scroll(function () {
var $nav = $(".header-nav");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});});
I've been stuck in this for 3 days and i don't know what else to do! I don't kno where my problem is.Can anyone please help me??

try this
$(function () {
$(document).scroll(function () {
if($(this).scrollTop() > $(".header-nav").height()) {
$(".header-nav").addClass('scrolled');
}
});
});

make sum height for your content to see your code works, see this: https://codepen.io/anon/pen/bzbOzv
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>

flexslider with caption at top of slide

I am using flexslider with a caption on each slide.
This works, except I want the caption to be at the top of the slide, not the bottom.
The only way I can see to put the caption at the top is to position it absolutely, but when I do that, the width of the caption is too wide (thousands of pixels, instead of as wide as the parent element).
<div class="flexslider">
<ul class="slides">
<li>
<img src="data/homeSlides/brennys.jpg">
<p class="flex-caption">Brenny's Motorcycle Clinic ></p>
</li>
<li>
<img src="data/homeSlides/aledoFireStation.jpg">
<p class="flex-caption">Aledo Fire Protection District ></p>
</li>
<li>
<img src="data/homeSlides/trueNorth.jpg">
<p class="flex-caption">True North ></p>
</li>
<li>
<img src="data/homeSlides/operationThreshold.jpg">
<p class="flex-caption">Operation Threshold ></p>
</li>
<li>
<img src="data/homeSlides/sadler.jpg">
<p class="flex-caption">Sadler ></p>
</li>
</ul>
</div>
the css:
.flex-caption {
background:rgba(73, 92, 94, 1);
height:50px;
line-height:50px;
margin:0;
text-align:right;
color:#ff5200;
padding-right:20px;
bottom:0;
width:98%;
}
jsFiddle
how do I get the caption to display properly at the top of the slide?

.flex-caption {
background:rgba(73, 92, 94, 1);
height:50px;
line-height:50px;
margin:0;
text-align:right;
color:#ff5200;
padding-right:20px;
top:0;
right:20%; /*Adjust this by yourself to make it look better*/
width:98%;
position:absolute;
}
ul.slides li{
position:relative; /*You need this*/
}
#wrapper{
width:80%;
}

you need some adjustement, first you need to set li relative so it becomes the reference box for absolute childs. z-index will bring the text on top for sure:
$(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
.flex-caption {
background: rgba(73, 92, 94, 1);
height: 50px;
line-height: 50px;
margin: 0;
text-align: right;
color: #ff5200;
padding-right: 20px;
top: 0;
left: 0%;/* added */
width: 91%;;/* added */
position: absolute;
z-index: 1;;/* added */
}
li {
position: relative;;/* added */
}
#wrapper {
width: 80%;
}
}
<div id="wrapper">
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/brennys.jpg">
<p class="flex-caption">Brenny's Motorcycle Clinic ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/aledoFireStation.jpg">
<p class="flex-caption">Aledo Fire Protection District ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/trueNorth.jpg">
<p class="flex-caption">True North ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/operationThreshold.jpg">
<p class="flex-caption">Operation Threshold ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/sadler.jpg">
<p class="flex-caption">Sadler ></p>
</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>

click next and previous to show overflow div

I have a lot of overflow:hidden; items, how can I show overflow:hidden; items when I click next and previous like in my example below? I would also like to have moving forward and backward effect. I have tried some plugin but it doesn't work when I click next and prev. Any idea of how to do that easily ?
.container{
width:580px;
height:70px;
background:#ccc;
overflow-y:hidden;
}
.item{
display:inline-block;
z-index:5;
background:#fff;
margin:5px;
padding-top:10px;
width:100px;
height:50px;
text-align:center;
}
.prev , .next{
cursor:pointer;
width:50px;
}
.prev:hover , .next:hover{
background:#000;
color:#fff;
}
<div class="prev">Prev</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div class="next">Next</div>

HTML: auto increase height based on other div's height

I have 3 <div>s as follows. In that one of the <div> has panel bar so its height may be increased based on the content of each panel bar. Now I want to increase the height of other two divs based on the height of the <div> which has panel bar. How can I achieve this?
<div class="leftdiv">
</div>
<div class="maindiv">
//Panel bar is inside this div.
</div>
<div class="rightdiv">
</div>
"leftdiv" and "rightdiv" height should be increase base on "maindiv" height???

You could also do it using css and positioning the divs absolutely or relatively, with margins for the central item.
Fiddle:
http://jsfiddle.net/o403Ljoq/
Code:
<div class="parentDiv">
<div class="leftDiv" >text</div>
<div class="mainDiv">text<div>Something with height</div>
<div style="height:200px;">something else with height</div></div>
<div class="rightDiv" >text</div>
.parentDiv
{
position:relative;
background-color:gray;
}
.leftDiv
{
background-color:blue;
position:absolute;
left:0px;
top:0px;
bottom:0px;
width:100px;
}
.mainDiv
{
background-color:yellow;
margin-left:100px;
margin-right:100px;
}
.rightDiv
{
background-color:green;
position:absolute;
right:0px;
top:0px;
bottom:0px;
width:100px;
}

Demo
html
<div class="container">
<div class="leftdiv">a</div>
<div class="maindiv">//Panel bar is inside<br/> this div.<br/>//Panel bar is inside<br/> this div.</div>
<div class="rightdiv">c</div>
</div>
css
.leftdiv {
background:red;
display:table-cell;
}
.maindiv {
background:green;
display:table-cell;
}
.rightdiv {
background:blue;
display:table-cell;
}
.container{
display:table;
width:100%;
}

try this example using bootstrap (row col-wrap class) Try the example in full screen mode
#media (min-width: 768px) {
/* top row */
.col .well{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.col-base{
margin-top: -15px;
}
}
#media (max-width: 767px) {
.row.base{
display:none;
}
}
.col-wrap{
overflow: hidden;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row col-wrap">
<div class="col-sm-4 col">
<div class="well">
<p>A </p>
<p>B </p>
<p>C </p>
</div>
</div>
<div class="col-sm-4 col">
<div class="well">
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="well">
<p>D </p>
<p>E </p>
</div>
</div>
</div>
<div class="row base col-wrap">
<div class="col-sm-4 col-base"><div class="well"></div></div>
<div class="col-sm-4 col-base"><div class="well"></div></div>
<div class="col-sm-4 col-base"><div class="well"></div></div>
</div>
</div>

You may use JavaScript for achieving the result:
var commonHeight = $(".maindiv").height();
$(".leftdiv").height(commonHeight);
$(".rightdiv").height(commonHeight);
The full example and demo is here:
http://jsfiddle.net/pLmp1zpr/

Use flexbox to do this.
Wrap your divs in a container.
HTML:
<div class="container">
<div class="leftdiv"></div>
<div class="maindiv"></div>
<div class="rightdiv"></div>
</div>
CSS:
.container{
display:flex;
align-items:stretch;
flex-flow:row wrap;
}
.leftdiv,.rightdiv,.maindiv{
flex:1 0;
}
Here is the DEMO.

scrolling animation horizontally within DIV is behaving weird

I'm trying to make a horizontal scroll anchoring inside a DIV. Seems to work if I just animate the whole body tag but doesnt seem to work in a DIV for me.
Heres the javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('#wrapper').animate({scrollLeft:$(this.hash).offset().left}, 500);
});
});
</script>
and heres the Html
<body>
<div id="wrapper">
<div id="wrappercontent">
<div id="section1" class="section">
<img src="images/big_head.png" />
</div>
<div id="section2" class="section">
<img src="images/whatis.png" />
</div>
<div id="section3" class="section">
<h2>Section 3</h2>
<p>
blahblahblabh
</p>
</div>
</div>
<div id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
</div>
</body>
and heres the stylesheet
*{
margin:0;
padding:0;
}
body{
background:#f0efe4;
letter-spacing:-1px;
font-family:Georgia;
font-size: 34px;
font-style: italic;
width:12000px;
}
#wrapper{
width:1000px;
height:700px;
overflow:scroll;
}
#wrappercontent{
height:auto;
width:12000px;
}
#nav{
z-index:1;
position:fixed;
}
.section{
margin:0px;
bottom:0px;
width:4000px;
float:left;
height:100%;
text-shadow:1px 1px 2px #f0f0f0;
}
Its behaving weirdly. Please help

You just need to account for the current scroll position in your calculation:
scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left
Demo: http://jsfiddle.net/brianpeiris/h6hvq/