Change the background of nav when scroll - javascript

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>

Related

How to get background of light box to fill the entire page

I currently have a lightbox effect affecting one of my buttons. Now it works fine, the only problem is the background is suppose to be dark black. However it only effects a certain bit of the pannel rather than the whole body.
So the codepen Example
Everything goes black. Which is what i am trying to make, however on mine it actually just goes black on a certain part.
HTML:
<div class="panel panel-default">
<div class="panel-heading"><b>Product</b></div>
<div class="panel-body">
<div class="pull-left col-xs-12 col-sm-4">
<a href="#">
<img class="img-thumbnail img-responsive" src="Image/coconut.jpg">
</a>
<a id="show-panel" class="btn btn-success btn-block btnrec" href="#">View product</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center"><a id="close-panel" href="#">Close this window</a></p>
</div>
<div id="lightbox"></div>
</div>
CSS:
/* Lightbox background */
#lightbox {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:700px;
height: 700px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
JS:
$(document).ready(function() {
$("a#show-panel").click(function() {
$("#lightbox, #lightbox-panel").fadeIn(300);
});
$("a#close-panel").click(function() {
$("#lightbox, #lightbox-panel").fadeOut(300);
})
});
Fiddle
So again just want everything to be black and the light box panel to attention
Thanks

CSS - Need help figuring out where I went wrong with my dropdown menu nav

Hi I posted two days ago and got some feedback but am still having issue getting my drop down nav working. Any feedback on how I can get my drop down nav working or if there is a cleaner, simpler way to execute this?
Here is my code as it stands now with the fixes from the previous post implemented.
JSfiddle as well.
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="template_ss.css"/>
<title></title>
</div>
</head>
<body>
<!--------------------------header--------------------------->
<div id="headerDiv">
<div id="titleDiv">
<p id= "titleText"><span>Ti</span>t<span>le</span></p>
</div>
<div class="navDiv">
<ul class="navUL">
<li>Home</li>
<li>
Top
<ul class="dropdown">
<li>Menu</li>
<li>Plus</li>
<li>Constant</li>
</ul>
</li>
<li>
Browse
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Random
<ul class="dropdown">
<li>blank</li>
<li>none</li>
<li>all</li>
</ul>
</li>
<li>
Profile
<ul class="dropdown">
<li>My profile</li>
<li>Edit profile</li>
</ul>
</li>
<li>
How it works
</li>
</ul>
</div>
<div class="searchDiv">
<form>
<input type="text" placeholder="blah..." required>
<input type="button" value="Search">
</form>
</div>
<!---------------------------body--------------------------->
<div class="bodyDiv">
</div>
</body>
</html>
CSS:
/*-------------------header----------------------*/
body{
margin:0px;
}
#headerDiv{
position: fixed;
height:12%;
width:100%;
background-image:url("header.png");
background-repeat:repeat-x;
text-align: center;
}
#titleDiv{
width: auto;
margin: auto 0;
}
#titleText{
color:white;
font-size:130%;
text-allign:center;
font-family:verdana,san serif;
}
span:first-child{
color:red;
}
span{
color:blue;
}
.navDiv{
display:inline-block;
z-index:10;
}
.navUL{
position:relative;
display:inline-block;
list-style-type:none;
margin: auto 0;
padding:0;
border-top:1 solid;
border-right:1 solid;
border-left:1 solid;
width:100%;
}
.navUL:after{
content:"";
display:table;
}
.navUL li{
padding: .2em 2em;
margin:2em,2em,2em,2em;
color: #fff;
background-color: #036;
display:inline-block;
text-align:center;
position:relative;
}
.navUL li:hover{
background-color:#07427c;
}
.navUL li a{
color:#fff;
}
.navUL li p{
margin:0;
}
.dropdown{
position:absolute;
display:none;
background-color:#036;
padding:0
left:0;
}
.navUL ul li:hover > ul{
display:inline;
}
.navUL>ul>li:after{
content:"\25BC";
font-size:.5em;
display:inline;
position:relative;
}
.searchDiv{
display:inline-block;
}
/*------------------body--------------------*/
.bodyDiv{
text-align:center;
float:left;
background-color:grey;
height:80%;
width:70%;
position:relative;
top:80%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
I can't be sure exactly what you're looking for, since neither of your two posts specified what your question was, but from looking at your jsfiddle, I saw two noticeable fixes that were needed. First, your html body was floating up into your nav. You need to clear those floats. Secondly, your css for displaying the dropdown was invalid. You were setting a rule on .navUL ul li:hover > ul. Since .navUL is the class of the unordered list, it has no child ul. The proper path would be ul.navUL li:hover ul.
Here is an update of your jsfiddle

How to change styles of several child divs of a div?

I'm making a navigation and I don't want to use CSS3 to make gradient background instead of that i use images. But buttons has corners so my button is made from 3 images to make its size proportional to text. I am trying to change background on hover and I need to change all 3 backgrounds: left, right and mid. I tried jquery but it doesn't seem to work..
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$('.topnavbtn').mouseenter(function(){
$(this).$('.left').css('background','url(images/nav/images/navLeft_on.png) no-repeat');
$(this).$('.mid').css('background','url(images/nav/images/navBg_on.png) no-repeat');
$(this).$('.right').css('background','url(images/nav/images/navRight_on.png) no-repeat');
}).mouseout(function(){
$(this).$('.left').css('background','url(images/nav/images/navLeft.png) no-repeat');
$(this).$('.mid').css('background','url(images/nav/images/navBg.png) no-repeat');
$(this).$('.right').css('background','url(images/nav/images/navRight.png) no-repeat');
});
});
</script>
HTML:
<ul style="list-style-type: none; margin:0; padding:0;padding:10px;">
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
</ul>
And CSS:
.topnavbtn {
height:34px;
float:left;
display:inline-block;
margin:7px;
font-weight:bold;
text-transform:uppercase;
color:#FFF;
line-height: 34px;
}
.topnavbtn .left {
height:34px;
width:9px;
background:url(images/nav/images/navLeft.png) no-repeat;
float:left;
display:inline-block;
}
.topnavbtn .right {
height:34px;
width:9px;
background:url(images/nav/images/navRight.png) no-repeat;
float:left;
display:inline-block;
}
.topnavbtn .mid {
background:url(images/nav/images/navBg.png) repeat-x;
height:34px;
width:auto;
float:left;
display:inline-block;
}
This is a syntax error :
$(this).$('.left').css(...
try
$('.left', this).css(...
Just replace
$(this).$('.left')
with
$(this).children('.left')
and so on for rest of classes .

javascript image pan 'blocking' nav links and making div elements opaque

I have an image, bg, embedded in a div using CSS just above the footer. The idea is when the mouse moves left or right, the image moves along with it. The Javascript above /body is what causes this to work. It works well, but the nav links are now unclickable and the content divs are opaque where you can see the bg image through them. When I remove the #bg div, everything works fine. Any ideas how to fix it? HTML and CSS are below. I got this from tutorial here: panning.
<!DOCTYPE HTML>
<html>
<head>
<title>portfolio</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/web.css">
<script src="js/modernizr.custom.js"></script>
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="site">
<header>
<nav>
<ul>
<li>HOME</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>PORTFOLIO</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>CODE</li>
<li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<div id="left_col1">
<a href="../photo_collection_blom/index.html" target="blank"><img src="img/10.png" alt="image" width="280"
height="170" class="fade"></a>
<p>lorem ipsum</p>
</div>
<div id="mid_col1">
<a href="../non_profit/index.html" target="blank"><img src="img/vpf.png" alt="image" width="280" height="170"
class="fade"></a>
<p>lorem ipsum</p>
</div>
<div id="right_col1">
<a href="../cd/index.html" target="blank"><img src="img/cd.png" alt="image" width="280" height="170"
class="fade"></a>
<p>lorem ipsum</p>
</div>
<div class="clearfix"></div>
<div id="left_col2">
<img src="img/zen.png" alt="image" width="280" height="170">
<p>lorem ipsum</p>
</div>
<div id="mid_col2">
<a href="../practicum/index.html" target="blank"><img src="img/practicum.png" alt="image" width="280"
height="170"></a>
<p>lorem ipsum</p>
</div>
<div id="right_col2">
<a href="../dropdown_nav/index.html" target="blank"><img src="img/navs.png" alt="image" width="280"
height="170"></a>
<p>lorem ipsum</p>
</div>
<div class="clearfix"></div>
<div id="left_col3">
<a href="http://centralpaintstore.com" target="blank"><img src="img/cps.png" alt="image" width="280"
height="170"></a>
<p>lorem ipsum</p>
</div>
<div id="mid_col3">
<img src="img/88.png" alt="image" width="280" height="170">
<p>lorem ipsum</p>
</div>
<div id="right_col3">
<img src="img/99.png" alt="image" width="280" height="170">
<p>lorem ipsum</p>
</div>
<div class="clearfix"></div>
<div id="bg"></div>
<footer>
<p>lorem ipsum</p>
</footer>
</div>
<!-- close site -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script>
$(document).ready(function () {
$('#bg').mousemove(function (e) {
var mousePos = (e.pageX / $(window).width()) * 100;
$('#bg').css('backgroundPosition', mousePos + '% 0');
});
});
</script>
</body>
</html>
CSS:
* {
text-decoration:none;
font-family:Helvetica, sans-serif;
z-index:100;
}
html {
background:url(../img/background.gif);
height:100%;
}
body {
height:100%;
z-index:100;
}
#site {
width:1200px;
min-height:100%;
margin:auto;
position:relative;
z-index:100;
}
header {
background:url(../img/background_design.jpg);
height:63px;
padding-top:25px;
z-index:100;
}
nav {
width:500px;
padding:10px;
margin:auto;
font-family:helvetica, arial, sans-serif;
font-size:1.2em;
color:#dcd8cf;
z-index:100;
}
nav ul {
word-spacing:20px;
}
li {
display:inline;
margin:auto;
}
a:link {
color:#dcd8cf;
}
/* unvisited link */
a:visited {
color:#e25d33;
}
/* visited link */
a:hover {
color:#e25d33;
}
/* mouse over link */
a:active {
color:#e25d33;
}
/* selected link */
p {
font-family:Arial, Helvetica, sans-serif;
color:#000;
line-height:1.2em;
margin:10px 5px 20px 5px;
}
#site p a:link {
color:#ed1b24;
}
#site p a:visited {
color:#ed1b24;
}
#site p a:hover {
text-decoration:underline;
}
#site p a:active {
color:#ed1b24;
}
h3 {
font-family:helvetica, arial, sans-serif;
font-size:1.5em;
color:#000;
margin:20px;
}
#bg {
background:url(../img/boston_skyline4.png) no-repeat 0 0 scroll;
height:auto;
left:0;
min-height:100%;
min-width:1024px;
overflow:hidden;
position:fixed;
top:0;
width:100%;
z-index:1;
}
#left_col1, #left_col2, #left_col3 {
border:1px solid #e0dfdf;
width:280px;
height:384px;
margin-left:120px;
margin-right:20px;
background:white;
padding:10px;
overflow-x:scroll;
float:left;
z-index:100;
}
.clearfix {
height:20px;
clear:both;
}
#mid_col1, #mid_col2, #mid_col3 {
border:1px solid #e0dfdf;
width:280px;
height:384px;
margin-right:20px;
background:white;
padding:10px;
overflow-x:scroll;
float:left;
z-index:100;
}
#right_col1, #right_col2, #right_col3 {
border:1px solid #e0dfdf;
width:280px;
height:384px;
background:white;
padding:10px;
overflow-x:scroll;
float:left;
z-index:100;
}
#left_col1, #mid_col1, #right_col1 {
margin-top:20px;
}
#left_col3, #mid_col3, #right_col3 {
margin-bottom:20px;
}
footer {
background:url(../img/footer.gif);
margin:auto;
position:absolute;
bottom:0;
width:1200px;
height:55px;
}
footer p {
font-family:helvetica, arial, sans-serif;
color:#e0dfdf;
font-size:.9em;
margin:auto;
padding-top:1.5em;
padding-left:1.5em;
}
The <div id="bg"> tag is sitting on top of everything else in the <div id="body" wrapper. Z-index won't work on your floated columns, so you'll have to wrap your columns in another div or move the <div id="bg"> tag outside of the <div id="body" tag.
Here's a fiddle of the first solution: http://jsfiddle.net/hjeAT/3/
And the second: http://jsfiddle.net/hjeAT/4/
i think the z-index of <div id="bg"> changed when run. you should check the z-index when the nav links are unclickable. may be you can change the z-index in your javascript. i have another advise that you'd better remove the z-index in the css of the * selector as follows
* {
text-decoration:none;
font-family:Helvetica, sans-serif;
z-index:100;
}
Here is one solution:
Just delete <div id="bg"></div> and
CSS:
body {
height:100%;
background:url(../img/boston_skyline4.jpg) no-repeat 0 0 scroll;
}
script:
You can change the mousemove event target.
<script>
$(document).ready(function () {
$('body').mousemove(function (e) {
var mousePos = (e.pageX / $(window).width()) * 100;
$('body').css('backgroundPosition', mousePos + '% 0');
});
});
</script>

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/

Categories