Rest of divs are shown when resizing browser in single page website - javascript

I am developing a single page website, the page is composed by a header and a footer, both fixed at top and bottom respectively and the content in the middle.
The content is a div with 100% of width and height.
At the header there is a menu to access the sections with smooth scrolling, everything works fine at this point, but when I choose the third section and resize the browser I can see the divs above and below, which should be hidden.
I tried to position the current div absolute with addClass/removeClass and modify the height when resize but did not work either.
This is the code:
CSS:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background-color: red;
overflow: hidden;
}
#cabecera, #footer {
width: 100%;
height: 50px;
background-color: #D1D1D1;
position: fixed;
left: 0;
z-index: 1000;
}
#cabecera {
top: 0;
}
#footer {
bottom: 0;
}
#menu li {
list-style: none;
float: left;
margin-right: 10px;
}
#menu li span {
cursor: pointer;
}
.centrar {
width: 960px;
margin: 0 auto;
}
#section1 {
background-color: #fbfbfb;
}
#section2 {
background-color: #017EFF;
}
#section3 {
background-color: #9F25F6;
}
#section4 {
background-color: #FB8114;
}
#section5 {
background-color: #373737;
}
.layout {
width: 100%;
height: 100%;
}
.active {
position: absolute;
top: 0;
left: 0;
}
</style>
JAVASCRIPT:
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing');
/*$("#section1").removeClass("active");
$("#section2").removeClass("active");
$("#section3").removeClass("active");
$("#section4").removeClass("active");
$("#section5").removeClass("active");*/
/*$target.addClass("active");*/
});
/*$(window).resize(function () {
var doc = $(document).height() || $(window).height();
var cabecera = $("#cabecera").height();
var footer = $("#footer").height();
var margin = doc - cabecera - footer;
$('#section3').css({ 'min-height': + margin + 'px' });
});
$(window).resize();*/
});
</script>
HTML:
<body>
<div id="cabecera">
<div class="centrar">
<ul id="menu">
<li>section1</li>
<li>section2</li>
<li>section3</li>
<li>section4</li>
<li>section5</li>
</ul>
</div>
</div>
<div id="section1" class="layout"></div>
<div id="section2" class="layout"></div>
<div id="section3" class="layout"></div>
<div id="section4" class="layout"></div>
<div id="section5" class="layout"></div>
<div id="footer">
<div class="centrar"></div>
</div>
</body>
EDIT:
Screenshot normal browser //
Screenshot resized browser
Steps to reproduce:
1) Open the browser resized to a small window
2) Open the page
3) Go to "section3"
4) Change the height of the browser, increasing or decrementing
5) Take a look at the divs above and below :S

You have to scroll to the top of the selected element(initialized on first) on the resize event of the window without any animation so that it gets executed transparently for the visitor.
The $target variable needs to be declared "globally" so that the resize function will know which was the last accessed section.
<script type="text/javascript">
$(document).ready(function(){
var $target = $(".layout:first");
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing');
});
$(window).resize(function(){
$(window).scrollTop($target.offset().top);
});
});
</script>

Related

Adding and removing class at div top?

I am trying to make a class fade in when 'register' class div top enters the window and otherwise have the class fade out
How can I make this work?
$(window).scroll(function() {
var tint = $('.register').offset().top;
if ($(this).scrollTop() > tint) {
$('.tint').fadeIn(1000);
} else {
$('.tint').fadeOut(1000);
}
});
section {
height: 100vh;
width: 100%;
}
.tint {
background-color: #000;
width: 100%;
height: 100vh;
opacity: 0.6;
position: absolute;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section></section>
<section class="register">
<div class="tint"></div>
<div>Content</div>
</section>
Class example code you posted seems to work correctly, I think you should check css also if there is any problem. But if want any other methods then here are some methods: you can use fadIn() - fadeOut(), or hide() - show() or css visibility or display block and none , or simply can jquery UI animate functionality. Here is animation example to hide div jquery animate
$(window).scroll(function() {
var top_of_element = $("#element").offset().top;
var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
// the element is visible, do something
} else {
// the element is not visible, do something else
}
});
$(window).scroll(function() {
var tint = $('.register').offset().top;
if ($(this).scrollTop() > tint) {
$('.register').fadeIn();
// OR
//$(".register").show();
// OR
//$(".register").css('visibility', 'visible');
} else {
$('.register').fadeOut();
// OR
//$(".register").hide();
// OR
//$(".register").css('visibility', 'hidden');
}
});
.tint {
background-color: #000;
width: 100%;
height: 100vh;
opacity: 0.6;
position: absolute;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="register">
<div class="tint"></div>
<div>Content</div>
</section>
The only problem, that you've passed a string to fadeOut, which expects a number.
So, remove the quotes around '1000', and you'll be right:
$(window).scroll(function() {
var tint = $('.register').offset().top;
if ($(this).scrollTop() > tint) {
$('.tint').fadeIn(1000);
} else {
$('.tint').fadeOut(1000);
}
});
section {
height: 100vh;
width: 100%;
}
.tint {
background-color: #000;
width: 100%;
height: 100vh;
opacity: 0.6;
position: absolute;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section></section>
<section class="register">
<div class="tint"></div>
<div>Content</div>
</section>

Allowing for changes in element height during a scroll animation

Got a JS/JQuery issue I'm struggling to solve.
I'm building a simple one page site with a fixed header and anchor based scrolling navigation. When a user clicks a link the the scrollTop of the body is animated to the top of the relevant section. Included in this function is a calculation that subtracts the height of the header from the scroll distance to ensure the fixed header doesn't obscure the top of the section
The issue I'm having is because of a separate function that applies a class to the header if a user scrolls past a certain distance. This class causes a few properties to change and therefore the height of the header element changes.
This means that the value of $('header').outerHeight(); at the end of the scrolling animation is smaller than what it was when the animation began. This change means that the distance scrolled is wrong and the window ends up slightly too short of the desired location.
How do I allow for this change in value during the scrolling animation? Ideally I want everything to stay dynamic rather than specifying fixed heights/sizes. TIA.
$('a[href^="#"]').on("click", function() {
let headerHeight = $('header').outerHeight();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - headerHeight
}, 500);
});
$(window).on('load resize scroll', function() {
if ($(window).scrollTop() >= 100 ) { // this refers to window
$('header').addClass('scroll');
} else {
$('header').removeClass('scroll');
}
});
body,html {
margin: 0;
padding: 0;
}
header {
padding: 30px 30px;
position:fixed;
left:0;
right: 0;
top: 0;
z-index:99;
transition: all .3s ease;
}
header h1 {
display:inline-block;
width:10%;
color: white;
}
header.scroll {
background: black;
padding: 15px 30px;
}
header nav {
display:inline-block;
width: 89%;
}
header nav ul {
margin: 0;
list-style: none;
text-align:right;
}
header nav ul li {
display:inline-block;
}
header nav ul li a {
color: white;
padding: 0 10px;
}
.hero {
height: 600px;
background: blue;
}
section h2 {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
text-align: center;
color: white;
}
section {
height: 600px;
}
#one {
background: red;
}
#two {
background: green;
}
#three {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>Title</h1>
<nav>
<ul>
<li>Section 1 </li>
<li>Section 2 </li>
<li>Section 3 </li>
</ul>
</nav>
</header>
<section class="hero"><h2>Hero</h2></section>
<section id="one"><h2>Section 1</h2></section>
<section id="two"><h2>Section 2</h2></section>
<section id="three"><h2>Section 3</h2></section>
If you run the above snippet and click on the link for "Section 1" at the top of the page. You can see the distance scrolled is slightly too short and the bottom of the .hero element is still visible due to the change in height.
Try this, I'm subtracting 30 from header's height because in start padding was "30px 30px" and then it's going to be "15px 30px" means header height should be:
height = actualHeight - - ,
and this required when your header is expanded(means header does not have class scroll) so I added condition.
$('a[href^="#"]').on("click", function() {
let headerHeight = $('header').outerHeight();
if(!$('header').hasClass('scroll')) {
headerHeight -= 30; //The padding removed
}
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - headerHeight
}, 500);
});
$(window).on('load resize scroll', function() {
if ($(window).scrollTop() >= 100 ) { // this refers to window
$('header').addClass('scroll');
} else {
$('header').removeClass('scroll');
}
});
body,html {
margin: 0;
padding: 0;
}
header {
padding: 30px 30px;
position:fixed;
left:0;
right: 0;
top: 0;
z-index:99;
transition: all .3s ease;
}
header h1 {
display:inline-block;
width:10%;
color: white;
}
header.scroll {
background: black;
padding: 15px 30px;
}
header nav {
display:inline-block;
width: 89%;
}
header nav ul {
margin: 0;
list-style: none;
text-align:right;
}
header nav ul li {
display:inline-block;
}
header nav ul li a {
color: white;
padding: 0 10px;
}
.hero {
height: 600px;
background: blue;
}
section h2 {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
text-align: center;
color: white;
}
section {
height: 600px;
}
#one {
background: red;
}
#two {
background: green;
}
#three {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>Title</h1>
<nav>
<ul>
<li>Section 1 </li>
<li>Section 2 </li>
<li>Section 3 </li>
</ul>
</nav>
</header>
<section class="hero"><h2>Hero</h2></section>
<section id="one"><h2>Section 1</h2></section>
<section id="two"><h2>Section 2</h2></section>
<section id="three"><h2>Section 3</h2></section>
Ended up solving this by adding a callback to my animation function. The callback checks if the height of the header has changed since the function was first called and if it has, then the scrollTop is increased by this amount.
$('a[href^="#"]').on("click", function() {
let headerHeightOne = $('header').outerHeight();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - headerHeightOne
}, 500, function() {
let headerHeightTwo = $('header').outerHeight();
let difference = headerHeightOne - headerHeightTwo;
if (difference > 0 ) {
$('html,body').animate({
scrollTop: $(window).scrollTop() + difference
}, 100);
}
});
});

Customizing jQuery scrolling effect

I'm working on a website where I have made a simple scrolling effect using jQuery. Basically, I just have the page scroll to a specified section when the user clicks on one of the navigation links. I would like to customize this so that the header (which I'm using as my scrolling target) is not at the very top of the page. I want it more in the middle. Does anybody know how I can easily customize this? Below is my jQuery code.
jQuery Scroll effect
$('a[href*="#"]').on('click', function(e) {
e.preventDefault()
$('html, body').animate(
{
scrollTop: $($(this).attr('href')).offset().top,
},
500,
'linear'
)
});
Thank you!
The key is to calculate the offset, Try this:
$('a[href*="#"]').on('click', function(e) {
e.preventDefault()
var id = $(this).attr('href');
var $element = $(id);
var elementHeight = $element.height();
var winHeight = $(window).height();
var offset;
if(elementHeight >= winHeight) //if element height > window height, just put the element to top place.
{
offset = 0;
}
else // else make it to the middle place of window.
{
offset = Math.round((elementHeight - winHeight) / 2);
}
$('html, body').animate(
{
scrollTop: $element.offset().top + offset,
},
500,
'linear'
)
});
body, html {
padding: 0;
margin: 0;
}
.nav-wrap {
width: 100vw;
position: fixed;
background: rgba(0,0,0,0.5);
padding: 10px;
}
.nav-wrap > a {
color: #ffffff !important;
padding: 10px;
}
section {
display: block;
width: 100vw;
}
#id1 {
background: #ff0000;
height: 50vh;
}
#id2 {
background: #00ff00;
height: 80vh;
}
#id3 {
background: #ffff00;
height: 120vh;
}
#id4 {
background: #0000ff;
height: 30vh;
}
#id5 {
background: #000000;
height: 60vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrap">
ID1
ID2
ID3
ID4
ID5
</div>
<div class="section-wrap">
<section id="id1"></section>
<section id="id2"></section>
<section id="id3"></section>
<section id="id4"></section>
<section id="id5"></section>
</div>

In Javascript, Hiding a div when scrolling and showing it on mouseover

I am searching for a solution like LinkedIn header functionality after login.
header is fixed on top.
one div(.topBlocks) after header, after scrolling it should be hide and show- its done by using following code
$(window).scroll(function(){
if ($(this).scrollTop() > 0) {
$('.topBlocks').fadeOut("slow", 0);
} else {
$('.topBlocks').fadeIn();
}
});
after content scrolls down... and on moseover of header (.topBlocks) div should be hide and show without moving back content.. and reset css
I have done it like this...
HTML :
<header>some content goes here, height is fixed 33px </header>
<section>
<div class="topBlocks"> some content goes here, height is fixed 123px, width 635</div>
<div class="wrapper">
<div class="fixedLeftSection"></div>
<div class="stickyListWrap"> blog type content, so it scrollable </div>
</div>
</section>
CSS :
header {
width: 100%;
background: #474747;
min-height: 33px;
padding: 11px 0;
position: fixed;
top: 0;
z-index: 1000;
}
.wrapper {
width: 940px;
margin: auto;
padding: 0 10px;
}
.topBlocks {
width: 635px;
margin: auto;
background: #e7e7e7;
height:123px;
}
.fixedLeftSection {
position: fixed;
top: 85px;
}
.stickyListWrap {
margin-top: 30px;
}
Javascript as follows for on header hover hide and show
var hoverMenu = $('.topBlocks'),
hoverSpace = $('header'),
secWrap = $('#mainSectionWrap');
$(window).scroll(function () {
if ($(this).scrollTop() > 0 && !$('header').hasClass('open')) {
$('.topBlocks').fadeOut("slow", 0);
} else {
$('.topBlocks').fadeIn();
}
});
$('header').mouseover(function (e) {
if ($(window).scrollTop() > 0) {
e.stopPropagation();
$('.topBlocks').addClass('testThing');
$('.topBlocks').css("display", "block");
}
});
$('.topBlocks').mouseleave(function (e) {
if ($(window).scrollTop() >= 0) {
e.stopPropagation();
$('.topBlocks').css("display", "none");
$('.topBlocks').removeClass('testThing');
}
});
I try to rebuild the effect of the Linkedin header, I don't know if this can help you.
$(window).scroll(function() {
if($(this).scrollTop() == "0") {
$('#hiddenHeader').show();
} else {
$('#hiddenHeader').hide();
}
});
$('#header').mouseenter(function() {
$('#hiddenHeader').css("top", "50px").show();
}).mouseleave(function() {
if($(window).scrollTop() != "0") {
$('#hiddenHeader').hide();
}
});
http://jsfiddle.net/sing0920/wM7w2/
Try this out
<div class="fixedhead">header tag with</div>
<div class="item">red div1 red div1 red div1 red div1
<br/>
</br/>red div1 red div1 red div1 red div1</div>
css
.fixedhead {
position: fixed;
top: 0;
width: 100%;
height:60px;
background-color:green;
z-index: 999;
}
.item {
background-color:red;
margin: 60px auto 0;
width: 100%;
height:510px;
}
Fiddle reference

JQuery .animate() only works in Chrome

I am using the JQuery .animate() function to slide divs in a container div. This works without issue in Google Chrome, but when I try in either Firefox or IE, the divs become a garbled mess and don't actually slide. I'm new to Javascript and ignorant in the ways of browser compatibility, can anyone point me in the right direction? Here is the relevant code:
The HTML
<div id="slider">
<div id="main" class="content">
</div>
<div id="projects" class="content">
</div>
<div id="about" class="content">
</div>
<div id="contact" class="content">
</div>
</div>
The CSS
#slider {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
#main {
background-color: red;
width: inherit;
height: inherit;
position: absolute;
}
#projects {
background-color: blue;
width: inherit;
height: inherit;
position: absolute;
}
#about {
background-color: yellow;
width: inherit;
height: inherit;
position: absolute;
}
#contact {
background-color: green;
width: inherit;
height: inherit;
position: absolute;
}
.content {
left: 0;
top: 0;
}
The JavaScript
$(document).ready(function() {
var contentWidth = '100px';
for( var i=0; i < 2; i++) {
$('.gallery' + (i + 1)).colorbox({ opacity:0.5 , rel:'gallery' + (i+1)});
}
$('.content').css({
position: 'absolute',
left: contentWidth
});
$('#main').addClass('visible');
document.getElementById('main').style.left = "0";
$("li a").click(function () {
event.preventDefault();
var $blockID = $( $(this).attr('href') );
if ($blockID.hasClass('visible')) { return; }
$('.content.visible')
.removeClass('visible')
.animate({ left: '-=100px' }, {
duration: 'slow',
complete: function () {
$(this).css('left', '100px');
}
}
);
$blockID
.addClass('visible')
.animate({ left: 0 }, {duration: 'slow'});
});
});
JSFiddle: http://jsfiddle.net/bwvVZ/
I can also provide a link to the site in question, although I will hold off because I am not sure if its against the rules. Any help is much appreciated!
You are missing the event argument from your click handler
$("li a").click(function(){
event.preventDefault();
//...
});
It should be
$("li a").click(function (event){
event.preventDefault();
//...
});
DEMO.
Can't test in IE myself but this fixes Firefox and the returnValue should fix IE. CSSDeck Test - I can't access jsfiddle from my current location.
$("li a").click(function (event){
event.returnValue = false; //ie
if(event.preventDefault) //prevents error if not found
event.preventDefault();
var $blockID = $($(this).attr('href'));
...

Categories