I'm building a website that allows a user to select one of the character. When the user clicks on 'Confirm', I want the page to be routed by showing the selected image and option to go back and select other characters. I want it to be shown as follows
But for some reason, the code shows up like this:
I don't see the 'Other' button, but it only comes out with a Confirm button. Not sure how to fix it..
Here is the code:
var elementSelected = null;
var typeSelected = false;
$(document).on('click', '.image > img', function() {
$('.image > img').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
elementSelected = $(this);
typeSelected = false;
});
$(document).on('input', '#text-src', function() {
$('.image > img').each(function() {
$(this).removeClass('active');
})
elementSelected = $(this);
typeSelected = true;
})
$(document).on('click', '#button-confirm', function() {
$('.image').hide();
if (typeSelected == true) {
$('.view-image > img').attr('src', elementSelected.val());
} else {
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function() {
$('.view-image').hide();
$('.image').fadeIn('high');
})
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
#dog {
width: 70%;
height: 70%;
}
#mother {
width: 70%;
height: 70%;
}
#soldier {
width: 70%;
height: 70%;
margin-top: 50%
}
#teacher {
width: 70%;
height: 70%;
margin-top: 50%;
}
.button {
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 60%;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
text-align: center;
cursor: pointer;
border-radius: 2px;
}
.button:hover {
background-color: #242424;
}
.button:active {
background-color: #121212;
}
.button>span {
color: #eeeeee
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="./images/Hamburger_icon.svg" alt="Hamburger Menu" />
</a>
<a href="styles/Jason/settings.html">
<ul class="navbar-nav">
<img src="./images/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="50vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<img src="images/dog.png" id="dog" alt="dog">
<img src="images/mother.png" id="mother" alt="mother">
<img src="images/military.png" id="soldier" alt="soldier">
<img src="images/teacher.png" id="teacher" alt="teacher">
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="50vh" />
</div>
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="50vh" />
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="./images/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="50vh" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="./styles/Jason/coach_selection.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
I am not a html/css expert, however I can see in chrome dev tools that the 'Other' button is certainly there (and the script is working as expected) however it is hidden behind the fixed footer. A quick google on 'bootstrap fixed footer body' found this answer -
Flushing footer to bottom of the page, twitter bootstrap
and I indeed got your snippet working (i.e. the 'Other' button showing) by adding the following styles to your css -
body {
padding-bottom:150px;
}
fixed-bottom {
margin-top:-150px;
}
with regards to the confirm button still showing, you can modify the script as following to show/hide the confirm button accordingly -
$(document).on('click', '#button-confirm', function() {
$('.image').hide();
$('#button-confirm').hide();
if (typeSelected == true) {
$('.view-image > img').attr('src', elementSelected.val());
} else {
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function() {
$('.view-image').hide();
$('.image').fadeIn('high');
$('#button-confirm').show();
})
Related
sorry for my English.. I'm very new to javascript...
My code for small gallery build with ekko-lightbox and the Zoom with elevatezoom.
Here can show all my code.
Javascript
<!--- open window small image gallery --->
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({alwaysShowClose: true});
});
<!--- hover small image gallery and display on big window --->
var thumbSelect = document.querySelectorAll('.thumb'),
windowSelect = document.querySelector('.window'), thumbCount;
for (thumbCount = 0; thumbCount < thumbSelect.length; thumbCount++) {
thumbSelect[thumbCount].onmouseover = function() {
windowSelect.src = this.src;
};
};
<!--- zoom window --->
$('#zoom_05').elevateZoom({
zoomType: 'inner',
cursor: 'crosshair',
});
.grosse-bild { padding: 40px; background-color: #dedee0; width: 53.7%; }
#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}
.kleine-fenster{
width: 50%;
border: none;
padding-top: 5px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row {
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="grosse-bild">
<div class="kleine-fenster" >
<img id="zoom_05" src="https://i.imgur.com/51pNImi.png" width="200" height="200" class="window" data-zoom-image="https://i.imgur.com/rt5G4Ol.jpg" >
</div>
</div>
<div class="row">
<a href="https://i.imgur.com/51pNImi.png" data-toggle="lightbox" data-gallery="gallery" class="kleine-bild" id="lalo" style="border-style: solid; border: 1px solid #b3b3b3; width: 5.2%;" >
<img src="https://i.imgur.com/rt5G4Ol.jpg" class="img-fluid thumb" >
</a>
<a href="https://i.imgur.com/S94Kz2A.png" data-toggle="lightbox" data-gallery="gallery" class="kleine-bild" style="border-style: solid; border: 1px solid #b3b3b3; width: 10%;">
<img src="https://i.imgur.com/cneOtx6.jpg" class="img-fluid thumb" >
</a>
</div>
</div>
My question, how does that zoom display on the grosse-bild Div, because now it displays only on kleine-fenster Div.
Can please someone explain with easy words how to solve this problem ?
This solution is similar to what you want:
var zoomConfig = {cursor: 'crosshair', zoomType: "inner" };
var image = $('#gallery_01 a');
var zoomImage = $('img#zoom_03');
zoomImage.elevateZoom(zoomConfig);//initialise zoom
image.hover(function(){
// Remove old instance od EZ
$('.zoomContainer').remove();
zoomImage.removeData('elevateZoom');
// Update source for images
zoomImage.attr('src', $(this).data('image'));
zoomImage.data('zoom-image', $(this).data('zoom-image'));
// Reinitialize EZ
zoomImage.elevateZoom(zoomConfig);
});
.grosse-bild { position: relative;margin-left: 0;width: 70%; display: block;
float: left; box-sizing: border-box;
}
.grosse-bild > img{ position:relative; max-height:100%; max-width: 100%;
vertical-align: middle;
border: 0;}
#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}
.kleine-fenster{
display: block;
overflow: hidden;
height: 350px;
margin-bottom: 1em;
border: 1px solid #d8d8d8;
text-align: center;
line-height: 350px;
cursor: pointer;
}
#gallery_01{
position: relative;
float:left;
display: table;
line-height: 0;
content: '';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="grosse-bild">
<div class="kleine-fenster" >
<img style="border:1px solid #e8e8e6;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png"
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
width="100%" />
</div>
</div>
<div id="gallery_01">
<a href="#" class="elevatezoom-gallery active" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" width="100" />
</a>
<a href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" width="100" />
</a>
<a href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg">
<img class="window" src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg" width="100" />
</a>
</div>
</div>
Just adjust style you want.
I am trying to create a slide animation such that when a link is clicked, the current div hides and the hidden div appears. It seems to work fine however before the slide effect is complete, a white space appears. How can I avoid this white space such that the new div gives an illusion of sliding over without changing the position of the current divs.
Fiddle:
$(document).ready(function() {
$(".c-f").click(function() {
$("#home-intro").hide();
$("#cf-intro").show("slide", {
direction: "right"
}, "slow");
});
});
.left {
width: 50%;
background: red;
float: left;
height: 90vh;
}
.right {
width: 50%;
background: green;
float: right;
height: 90vh;
}
.blue {
width: 50%;
background: blue !important;
float: right;
height: 90vh;
}
#cf-intro {
background: blue;
display: none;
height: 90vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="home-intro">
<div class="left">
some text
</div>
<div class="right">
<a class="c-f" href="#">Some Link</a>
</div>
</div>
<div id="cf-intro">
<div class="left">
some text more
</div>
<div class="right blue">
Some even more text
</div>
</div>
One way is to remove it from the document flow (via position: absolute, although fixed would also work) then animate its right CSS property, like so (see JavaScript comments for further explanation):
$(document).ready(function() {
$(".c-f").click(function() {
// set here and used by both functions to ensure the speed is always the same
var animSpeed = "slow";
// remove from document flow by setting "position: absolute"
// (and ensure width is still 100%)
$("#home-intro").css({
position: "absolute",
width: "100%"
}).animate({
// "push" it from the right
right: "100%"
}, animSpeed, function() {
// hide once it's finished animating
$(this).hide();
});
$("#cf-intro").show("slide", {
direction: "right"
}, animSpeed);
});
});
.left {
width: 50%;
background: red;
float: left;
height: 90vh;
}
.right {
width: 50%;
background: green;
float: right;
height: 90vh;
}
.blue {
width: 50%;
background: blue !important;
float: right;
height: 90vh;
}
#cf-intro {
background: blue;
display: none;
height: 90vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="home-intro">
<div class="left">
some text
</div>
<div class="right">
<a class="c-f" href="#">Some Link</a>
</div>
</div>
<div id="cf-intro">
<div class="left">
some text more
</div>
<div class="right blue">
Some even more text
</div>
</div>
I want to slide my bx-content(div) when i click prev or next button. I have 3 content is visible when others are hidden. i have more than 10 bx-content(div) and if prev or next button is clicked then i want to slide one by one bx-content(div) and if all content is finishes and get clicked next button then show from the beginning again like cycle. could somebody help me please ? my html code is here
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="bx-feature">
<h3>Feature</h3>
<button class="next">Next</button>
<button class="previous">Prev</button>
<hr style="clear: both;">
<div class="bx-slider">
<div class="bx-content">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
<h3>Mount Everest</h3>
</div>
<div class="bx-content">
<img src="https://www.wallpaperup.com/uploads/wallpapers/2013/03/23/58533/a2e7390e04f5ed3b6bba3576f75436bb.jpg" alt="">
<h3>Mount Everest sunset</h3>
</div>
<div class="bx-content">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
<h3>Mount Everest</h3>
</div>
<div class="bx-content">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
<h3>Mount Everest</h3>
</div>
<div class="bx-content">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
<h3>Mount Everest</h3>
</div>
</div>
</section>
and my css code is here
.bx-feature{ background-color: #e9e9e9; height: 360px; width: 90%; overflow:
hidden; margin: auto; margin-top: 100px;}
.bx-feature h3{ float: left; }
button{ float: right; border-radius: 5px; padding: 7px; margin: 10px 5px
0 5px; }
.bx-slider{ margin: 10px 20px; }
.bx-content{ height: 250px; width: 320px; overflow: hidden; float: left;
margin: 20px;}
.bx-content img{ width: 100%; height: 200px; }
You have to get your button in jquery and add a listener on the click event after that just select your container and change play with the transform : translateX css properties.
Something like that :
var width = $(".bx-slider").width();
var numberChild = $(".bx-slider").children().length;
var move = width / numberChild;
var position = 0;
$(".next").click(
() => {
position -= move;
$(".bx-slider").css({'transform' : 'translateX(' + position + 'px)'}
}
);
just change minus to sum for the prev button
and btw put your code in a script tag
I am new to HTML, CSS, and Jquery.
I created the following code for a Material Design Lite (MDL) "card."
Problems: The card will currently resize, but only the space above the title and I need the supporting text section to expand. I also need the supporting text section to expand dynamically only far enough to show all of its' text on the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.article_card {
width: 95%;
height: 200px;
background-color: white;
text-align: left;
scroll-behavior: smooth
}
.mdl-grid {
text-align: center;
justify-content: center;
}
.mdl-card__supporting-text {
height: 70px;
padding-left: 20px;
}
.mdl-button {
background-color: whitesmoke;
color: black;
}
span+span {
margin-bottom: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="mdl-grid">
<span></span>
<span class="article_card mdl-card mdl-shadow--8dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">The Article Title</h2>
</div>
<div class="mdl-card__supporting-text">
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
Read the rest
</a>
</div>
</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(".article_card").click(function() {
var newHeight = 900
if ($(".article_card").height() != 200)
$(".article_card").animate({
height: 400
}, 500);
else
$(".article_card").animate({
height: newHeight
}, 500);
});
</script>
</body>
</html>
Instead of altering the height of the entire .article_card, animate the height of the .mdl-card__supporting-text element. This will cause the entire .article_card to expand in height to show the contents of .mdl-card__supporting-text.
Since we want to animate the height to fit the dynamic content, we'll use max-height instead of height in order for the animation to work.
$(".article_card").click(function() {
if ($(this).height() > 220 ) {
$(this).children('.mdl-card__supporting-text').animate({
maxHeight: '75px'
}, 500);
} else {
$(this).children('.mdl-card__supporting-text').animate({
maxHeight: '1000px'
}, 500);
}
});
.article_card {
width: 95%;
background-color: white;
text-align: left;
scroll-behavior: smooth;
padding-top: 0px;
position: relative;
}
.mdl-grid {
text-align: center;
justify-content: center;
}
.mdl-card__supporting-text {
max-height: 75px;
padding-left: 20px;
}
.mdl-button {
background-color: whitesmoke;
color: black;
}
span+span {
margin-bottom: 10px;
margin-top: 10px;
}
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="mdl-grid">
<span></span>
<span class="article_card mdl-card mdl-shadow--8dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">The Article Title</h2>
</div>
<div class="mdl-card__supporting-text">
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
Read the rest
</a>
</div>
</span>
</div>
I know how to use position: fixed; to get it to scroll with the page but my navbar is not at the top of the page it is under my header. I would like the navbar to remain directly under the header until the top of the page hits it then I want it to scroll down with the page. I have tried using JS to do this and using JSfiddle I am able to get it working http://jsfiddle.net/uaqh018d/78/
However, when I apply this to my site it does not work and I can't figure out why.
site code to follow:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--begin header & navbar-->
<div class="header">
<div class="container">
<div class="banner">
<h1><img src="media/CSG%20header%20final.svg" width="961" height="250" alt="crit strike gaming header"></h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Reviews</li>
<li>Previews</li>
<li>Lets Plays</li>
<li>Forums</li>
</ul>
</div>
</div>
</div>
<!--end header & navbar-->
<!-- begin content-->
<div class="container">
<div class="content">
</div>
</div>
<!--end content-->
<script type="text/javascript" src="navfunction.js"></script>
</body>
</html>
CSS
body{
background: #ffda0a;
width: 100%;
margin: auto;
}
.container{
width: 960px;
margin: 0 auto;
}
.header{
width: 100%;
height: 250px;
margin: 0 auto;
top: 0;
}
.content{
background-color: rgba(255,255,255,.5);
width: 100%;
margin: 0 auto;
margin-left: 1px;
clear: both;
}
a{
text-decoration: none;
color: #ffda0a;
}
li{
list-style: none;
margin-left: 75px;
float: left;
font-size: 25px;
}
.nav{
background: #a71e1f;
width: 960px;
height: 30px;
margin-left: 1px;
}
.nav.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
.banner{
height: 230px;
}
JS
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#header').height())
{
$('#nav').addClass('fixed');
}
else
{
$('#nav').removeClass('fixed');
}
});
});
If anyone can figure out the issue I would really appreciate it.
See the corrected fiddle - http://jsfiddle.net/drecodeam/8Lubmkvw/
You were using classes in the HTML but accessing them as ID in jQuery.
Corrected JS should be
$(document).ready(function () {
$(window).scroll(function () {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.header').height()) {
$('.nav').addClass('fixed');
} else {
$('.nav').removeClass('fixed');
}
});
});