Make Content Show Up As User Scrolls with Javascript/HTML/CSS/jQuery - javascript

I want contents to be hidden, and when the user is at appropriate position of the page, I want it to show up. I am thinking of something like Apple - iPhone 6 page. I googled for a while but I couldn't seem to find anything appropriate. How would I do this? Is it even possible for amateur people like me to recreate? Sorry for having no code, but everything I tried hasn't been working.

This can be achieved through the use of jQuery. There is a method, $(window).scroll(), which is called when the user scrolls the window. An example use is below
$(window).scroll(function() {
if($(this).scrollTop() > 600 {
// do something (called after the user has scrolled more than 600 pixels down)
}
});

Related

Hide NavBar when pageYOffSet = 0

On my site, I have two Navigation Bars, one scrolls up along with the text but the other hides when I scroll up and shows when I scroll down. I just don't know how to make it invisible once it's back to pageYOffset = 0. Anyone knows how, please?
first, welcome to stackoverflow!
to know when the offset is at a particular position, you need to listen for the scroll and resize events, try something like:
function checkPageOffset() {
if(window.pageYOffset === 0) {
// do your menu manipulation here
}
}
window.addEventListener('scroll', checkPageOffset);
window.addEventListener('resize', checkPageOffset);
this way, the function runs on each scroll and each resize and only runs code if the offset is 0. you may prefer to test window.pageYOffset < someMinimumOffset instead in case the scroll is not exactly to 0.
as i was getting at with my comment above, chances are there's already code somewhere in your system that's testing if the offset is greater than some threshold in order to display the menu in the first place, really you should just have to add on to that function to hide the menu if that condition is not met. if you can post that code, we might be able to help you integrate a solution more cleanly with your existing setup.
edit: incorporate listen for resize as per Tracker1's comment below

jquery animate/scrollTop to multiple anchors inside divs

I'm having a problem implementing relatively complicated auto-scroll functionality on my page. This displays the issue in my code...
http://codepen.io/d3wannabe/pen/XXxdQq
I have multiple divs on my page (blue,red,green in my example) that I not only want to be able to scroll to (which the top 3 buttons in my example achieve perfectly), but I want to be able to scroll WITHIN (which the bottom 3 buttons represent my best attempt at).
The thing I can't figure out, is why the scroll within function works well on my first div ("scrollTo3rdBlueItem" button), but then less accurately with the other divs ("scrollTo3rdRedItem" and "scrollTo3rdGreenItem" buttons). In my full web application (which obviously has more data to scroll through), I basically see that the lower down the page the parent div is positioned, the less accurately I'm able to scroll within it.
I'm struggling to identify much of a pattern though so can't simply try tweaking the offset values. Any ideas what I might be doing wrong here would be hugely appreciated!!
...since I wasn't allowed to post this without quoting code - here's the jquery function you can see in my codepen!
function scrollToParent(parentID){
$('html,body').animate({scrollTop: $('#'+parentID).offset().top}, 500);
}
function scrollToChild(parentID, childID){
//first focus on the parent
scrollToParent(parentID);
$('#'+parentID).animate(
{scrollTop: $('#'+ childID).offset().top - 100}
, 500);
}
UPDATE
Answer here was COMPLETETLY wrong. Left here to preserve the comments.
UPDATE 2
Got IT! You need to take in to account the offset of the parent div. Update your scrollToChild function to the below;
$('#'+parentID).animate(
{
scrollTop: $('#'+ childID).offset().top - $('#'+parentID).offset().top
}, 500);

how to show div when scroll reach?

divs are showing underneath one bye one of DIV
is there any option to show each .slide on the basis of mouse scrolling ?
go to underneath while scroll up
http://jsfiddle.net/WQ3hE/
You can check out the current scroll top, and then based on that, fire a jQuery code to activate the current tab. That's possible. A few things are unclear about your question. First being, this looks like a homework question. We would like to know what you have done so far. Secondly, you didn't provide what you need to do after the scroll.
$(document).ready(function(){
$(window).scroll(function(){
if (window.scrollY > 100)
$(".slide[data-slide='2']").height(2000);
});
});
Fiddle: http://jsfiddle.net/praveenscience/WQ3hE/1/

HTML fixed large element

I've been racking my brain and my Google Fu for a few hours now trying to find a solution to this one, but can't seem to come up with anything satisfactory.
I want to affix an element to the side of the page for some search criteria, much like Bootstrap's "Affix" plugin. (Demo Here). The problem is that it's going to be very common that the element is much taller than the window. So there will be scrolling of the element itself involved.
Usually this wouldn't be a problem because as the user hits the top + bottom of the document they would be able to see the top and bottom of the fixed element. (See bootstrap example while shrinking you're window very short). But we're planning on using infinite scroll on our results set, meaning there won't be a bottom to hit, and therefore they'll never see the bottom of the fixed element. As the user scrolls down, it needs to be bottom fixed so the user sees all criteria, then on the way up, it needs to be top fixed.
So I started off by modifying Bootstrap's plugin (I'm not actually using bootstrap). Now scrolling down the page is easy, using a fixed point on the bottom of the element means that it's not affixed until you reach the bottom of it.
But scrolling back up again is where I'm hitting issues.
Am I missing something really obvious and easy here (it is Monday morning after all), or does anyone know of a plugin / patch to bootstraps affix.
TL;DR
Need to affix a very tall element to the page and allow it to scroll. So it's fixed on the way down, then as they scroll back up, the element isn't fixed so it's also being scrolled up. Once the top of the element is hit, fix it there.
Is this what you Want to do DEMO
Simple jQuery function that will help.
$(function()
{
affix= $(".affix-top");
var affixHeight = parseInt(affix.height());
var affixTop = parseInt(affix.offset().top);
var affixBottom = parseInt(affixTop + affixHeight);
// Bind a scroll event for the whole page
$(document).bind("scroll", function(e)
{
// Calculate how far down the user has scrolled
var screenBottom = parseInt($(window).height() +$(window).scrollTop() );
// Test if the div has been revealed
if(screenBottom > affixBottom)
{
affix.attr("style","");
affix.css({"bottom":"0px","position":"fixed"});
}
else
{
affix.attr("style","");
affix.css({"top":"0px","position":"relative"});
}
});
});

Best ways to display notifications with jQuery

I have a form which is a simple CRUD.
I am trying to display a cool looking success message when user enters or deletes a record. I've seen this a lot around the web.
I am very new to jquery. does anyone know any examples that would show how to do this?
Basically a div that would slowly dim out.
Your question is a little vague as a "cool looking success message" is not much to go with.
If you are interested, however, through answering questions here I have replicated the functionality of two of Stackoverflow's "notification" features that people seem to enjoy: the banner at the top of the page that comes up when you get a new badge, etc. and the red boxes around the site whenever something goes wrong with an action. I've used techniques similar to these to show success messages in my applications and my clients have loved them.
To show the top banners - demo
To show the red boxes - demo
The examples are very simple, as all it is doing is showing a DIV somewhere in the document and fading it in and out depending on the situation. That's all you really need to get started.
In addition to this, if you are a Mac fan (and even if you're not) there is the jQuery Growl plugin which is based on the OS X notification system. I am also a big fan of using the BeautyTips plugin to show messages near an element, as the bubbles are very nice and easy to style.
I really like jGrowl. It's very unobtrusive as the messages appear in the left corner and the user can continue to do whatever he's doing, but he does get feedback from the system. And it also looks very fancy :).
Just throw in a new absolutely positioned div and use the fadeOut-function to animate it's opacity with a slow animation.
Something like this:
var newDiv = $('div').css({position: 'absolute', left: '100px', top: '100px'}).text('SUCCESS!!!').appendTo($('body'));
newDiv.fadeOut(5000);
This should work:
function showSnazzySuccessMessage(text)
{
if($("#successMessage").length < 1)
{
//If the message div doesn't exist, create it
$("body").append("<div id='successMessage' style='text-align:center;vertical-align:middle;width:400px;position:absolute;top:200px;left:300px;border:2px solid black;background:green;margin:20px;display:none'>" + text + "</div>");
}
else
{
//Else, update the text
$("#successMessage").html(text);
}
//Fade message in
$("#successMessage").show('slow');
//Fade message out in 5 seconds
setTimeout('$("#successMessage").hide("slow")',5000);
}
You'll have to play with the style to get it to look the way you want, but you get the idea.
Perhaps you're looking for something like this or a straight fade like this. There are a few effects to choose from.

Categories