I've got a logo image that in page load is hidden. I'd like that the image would show after page scroll.
Tried that approach:
CSS:
#logo {
display: none;
}
JS/JQuery:
jQuery( document ).ready(function( $ ) {
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >=100){
$('#logo').show();
} else {
$('#logo').hide();
}
});
});
Case 1: if page is loaded with scroll = 0, after page scroll logo image doesn't show.
Case 2: if page is loaded with scroll > 100, logo image is show or hidden correctly.
Your code seems to work fine on scroll. If you just need to also conditionally hide/show the image based on the scroll position when the page loads, you can call the hide/show code when the page loads as well as when you scroll the page.
jQuery(document).ready(function($) {
function hideShow(scroll) {
if (scroll >= 100) {
$('#logo').show();
} else {
$('#logo').hide();
}
}
hideShow($(this).scrollTop());
$(document).scroll(function() {
hideShow($(this).scrollTop());
});
});
body {
height: 500vh;
}
#logo {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" id="logo">
Related
I'm hidding the sidebar with a button.
But when the view get's under 991px I want to hide the sidebar to have more space for my site.
How can i do this? If I put the code inside the if it will always be toggling. If the size is bigger than 991px it should show the sidebar again
$('#sidebar-btn').click(function () {
$('#sidebar').toggle('visible');
$('.content-wrapper, .full-page-wrapper').toggleClass('content-wrapper full-page-wrapper');
});
//toggle sidebar when width is too small
var browserWidth = $(window).width();
if(browserWidth <= 991 ) {
}
You can use plain CSS for that (EDIT: if you want to toogle classes you need JS).
if(!($(window).width() <= 911)) {
$('.content-wrapper').toggleClass('content-wrapper');
$('.full-page-wrapper').toggleClass('full-page-wrapper');
}
#media screen and (max-width: 911px) {
#sidebar {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="sidebar" class="content-wrapper full-page-wrapper">AAAAAAAAAA</section>
You could try with css as follow :
#media (min-width:991px) {
//Do your css things
}
Else you can catch resize event
Use jQuery to get the width of the window.
if ($(window).width() < 960) { alert('Less than 960'); } else { alert('More than 960'); }
How do I fade in an image once it's in view? I'm trying to make my website responsive, so having it fade in on the amount of pixels scrolled won't do. I need it to be exposed depending on the percent scrolled. Or if there's a way to have it fade in when it's in the field of vision?
Here's the code:
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 300) {
$("#bluprintdesign").fadeIn();
} else {
$("#bluprintdesign").stop().fadeOut();
}
Right now what I have going on is it fades in when scrolled 300px and fades out if you scroll back up. I like that, but I want it in percentages so it's responsive to all screen resolutions.
Thank you!
Here's a function showImages() that will measure your $.scrollTop() + $(window).height() to establish the scroll point of the bottom of the viewport, and will add a class to hidden images when half of the image has passed the bottom of the viewport. I'm calling it on $(document).ready(); and $(window).on('scroll'); so that it will load images in the viewport on page load and as you scroll.
Using opacity: 0 instead of display: none (what $.fadeIn()/$.fadeOut() will toggle) allows the image to still take up space in the document, allowing you to calculate it's height (needed to know when half of the image is in view) without having to do anything tricky, and will also maintain the page layout when the image fades in, versus the page jumping around if you toggle display.
There are also libraries that will do this for you. jQuery waypoints is a popular one.
function showImages() {
var $window = $(window),
thresh = $window.scrollTop() + $window.height();
$('img:not(.show)').each(function() {
if (thresh > $(this).offset().top + ($(this).outerHeight() / 2)) {
$(this).addClass('show');
}
});
}
$(window).on('scroll', function() {
showImages();
})
$(function() {
showImages();
})
section {
height: 200vh;
border-top: 1px solid black;
}
img {
opacity: 0;
transition: opacity .25s;
}
.show {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
<section>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
<section>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
I want to hide my Bootstrap-Navbar on the first section of my one-page site and fade it in when scrolled past this first section.
I tried using the jQuery .hide() effect, telling it to hide the navbar when scrollTop is < 300px and fade it in below - this works fine but the first time the page loads the navbar is not hidden, just after I scrolled down the first time and I can't figure out why.
Here is my code :
$('#wrapper').scroll(function(){
if($(this).scrollTop() < 300) $('#navbar').hide('easing');
if($(this).scrollTop() > 300) $('#navbar').fadeIn('slow');
});
Here is the jsfiddle
How can i do this ?
I think it's becuase the #navbar element is not initially hidden.
Just hide it using css:
#navbar {
height:50px;
background-color:green;
position:fixed;
top:20px;
width:100%;
display: none;
}
Demo: http://jsfiddle.net/Ub4xm/17/
You should set the bar to hide on startup, either in CSS (clean) or in HTML (quick-and-dirty).
The jQuery's .hide() sets the display to "none" if I'm correct, so set the display on page load to "none", since .fadeIn() will set the display to "block".
add display to none:
#navbar {
height:50px;
background-color:green;
position:fixed;
top:20px;
width:100%;
display:none; /* <--add this*/
}
or in your js you can trigger your .scroll() in the doc ready:
$(document).ready(function () {
$('#wrapper').scroll(function () {
if ($(this).scrollTop() < 300) {
$('#navbar').hide('easing');
} else if ($(this).scrollTop() > 300) {
$('#navbar').fadeIn('slow');
}
}).scroll(); // <-----trigger it here first.
});
The above code let you see the hide with easing when doc is ready.
first hide #navbar in load time .
$( document ).ready(function() {
$('#navbar').hide();
$('#wrapper').scroll(function(){
if($(this).scrollTop() < 300) $('#navbar').hide('easing');
if($(this).scrollTop() > 300) $('#navbar').fadeIn('slow');
});
});
demo
Try with this
HTML
<div id="navbar" style="display:none">Teasers Div</div>
Script
$( document ).ready(function() {
$('#wrapper').scroll(function(){
if($(this).scrollTop() > 300)
$('#navbar').fadeIn('slow');
else
$('#navbar').hide('easing');
});
});
DEMO
The JS code below is meant to get the height of the browser and the height of the .banner div. If the banner height is greater than the browser height, append two divs (.title and .social) to the body otherwise don't do anything and leave .title and .social divs where they are.
I'm also wanting the .title and .social divs to fade out when a user scrolls down the page and fade in when they get back to the top of the page.
The problem
This code does work but not all the time. Sometimes it will display correctly other times it won't. By that I mean the height of div.banner can be greater than the height of the browser window yet .title and .social will not be appended to the body. Is there anything wrong with this code that could cause this issue to occur?
$(document).ready(function () {
// fade in/fade out banner titles
$(window).trigger('scroll');
var divs = $('.social, div.banner .title');
$(window).scroll(function(){
if($(window).scrollTop() < 10){
divs.fadeIn("fast");
} else {
divs.fadeOut("fast");
}
});
// Position feature image title and social icons according to browser window height
var windowHeight = $(window).height(); // Gets browser viewport height
var bannerHeight = $(".banner").height(); // Gets .banner height
if (bannerHeight > windowHeight) {
$("body").append($('.banner .title'));
$("body").append($('.social'));
}
else {
//Display .title and .social in .banner div (as originally in HTML)
}
});
My HTML code that is on page load for reference:
<div class="banner y1">
<div class="title" id="feature-title">
<!-- title content here -->
</div>
<div class="social" id="feature-social">
<!-- social content here -->
</div>
</div>
If height changes on images you should use onload method.
http://api.jquery.com/load-event/
jQuery
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
});
}
$(window).scroll(showDiv);
showDiv();
HTML (.lock { display: none; position: fixed; })
<div class="lock">
Text
</div>
I'm trying to get a hidden fixed div to appear when you scroll to a certain part of the page, and to disappear when you scroll back up. What am I doing wrong?
looks like a syntax issue
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
}//); <-- drop this close parenthesis/semicolon
}
jsfiddle example
please test this:
put styles in the div.lock element.
<div class="lock" style="display: none; position: fixed;">
Text
</div>