Detect if scrolling is possible on a page - javascript

I have a function that adds more content to the container when the viewer has scrolled close to the place where the end of the container is. It works perfectly:
var elem = $('#cont');
var bo = $('body');
$(window).scroll(function(){
if (elem.outerHeight() - bo.scrollTop() - 350 <= 0) {
for(var i = 0; i < 3; i++){
elem.append('<div class="box"></div>');
$('.box').each(function(){
$(this).fadeIn('slow');
});
};
};
});
The issue, is if there is not enough content loaded originally, then it can't load more ever!
What I need to do:
I need to detect if the body cannot scroll. So I can append content until scrolling is possible. How can I do that?
Jsfiddle

You can do this :
while($(document).height() <= $(window).height()){
$('#cont').append($('<div/>', {class : 'box', style : 'display : block'}))
}
$('.box').hide().fadeIn('slow');
Fiddle : http://jsfiddle.net/FYtZX/1/

You can use this function to detect if something is scrollable.
https://github.com/s-a/jQuery.readMore/blob/master/jquery.readmore.js#L6

Related

Hide divs when another div is expanded?

I have 8 divs on my page. 4 at the top and 4 at the bottom. For the 4 divs at the top I have a piece of Javascript code that expands/unhides a div below them (see JSFiddle). I would like to make it so that when these divs are expanded the 4 divs at the bottom of the page hide. Then, when the div is unexpanded, the 4 divs at the bottom of the page show again.
Please see my JSFiddle: https://jsfiddle.net/44478c41/
I don't have much knowledge of Javascript but I had a fiddle around with my existing code to try and get it to work, I managed to hide the div but not the content within the div, nor was I able to get it to unhide again. Here is what I edited my code to:
$(document).ready(function() {
var $cont;
function tgl_conts(){
$('.static').stop().animate({height: 0},1200);
$cont.stop().animate({height:210},1200);
}
$('.tab_collapsable').on('click',function(){
var tabClass=$(this).attr('class').split(' ')[1];
$cont = $('.'+tabClass+':not(.tab_collapsable)');
var h = ($cont.height() === 0) ? tgl_conts() : ( $cont.stop().animate({height: 0},1200) );
});
});
Thanks a lot!
Here you go, you can either check the visibility of content divs or just track open/close via a flag
Here is the Fiddle
Handling via flag;
var bottomDivOpen=true;
function showHideBottomDiv(){
if(bottomDivOpen==true){
$(".static").hide();
bottomDivOpen=false;
}else{
$(".static").show();
bottomDivOpen=true;
}
}
Yet another solution:
$('.tab_collapsable').on('click',function(){
var tabClass = $(this).attr('class').split(' ')[1];
var h = $('.content.'+tabClass).height() ? 0 : 210;
$('.content').stop().animate({height: h},1200)
.not('.'+tabClass).stop().animate({height: 0},1200);
$('.static').stop().animate({height: h ? 0 : 250},1200);
});
JSFiddle
You can do something like this to retain animation effect on static divs.
$(document).ready(function() {
var $cont;
function tgl_conts(){
$('.content').stop().animate({height: 0},1200);
$cont.stop().animate({height:210},1200);
}
$('.tab_collapsable').on('click',function(){
var tabClass=$(this).attr('class').split(' ')[1];
$cont = $('.'+tabClass+':not(.tab_collapsable)');
if ($cont.height() === 0) {
tgl_conts();
$('.static').stop().animate({height: 0},1200);
} else {
$cont.stop().animate({height: 0},1200);
$('.static').stop().animate({height: 250},1200);
}
});
});

JQuery Add Class when bottom of div reaches top

I am trying to add a class when the bottom of a div reaches the top of the window, but am not sure of how to do it.
I have managed to add the class when the top of the div gets to the top of the window, but am not having much luck with the bottom of the div.
Code I am using:
$(document).ready(function() {
var menuLinksTop = $('.container').offset().top;
var menuLinks = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > menuLinksTop) {
$('header').addClass('black-links');
} else {
$('header').removeClass('black-links');
}
};
menuLinks();
$(window).scroll(function() {
menuLinks();
});
Any help is appreciated.
You should use javascript's getBoundingClientRect() method, watch $(window).scroll event, and look at element's rectangle, its bottom value will give you what you need (if it's negative, your element is all the way up)
$(window).scroll(function() {
console.log($("div.watch")[0].getBoundingClientRect());
if ($("div.watch")[0].getBoundingClientRect().bottom < 0)
alert ("i'm out :3");
});
see jsFiddle http://jsfiddle.net/ja5nnbwr/2/
Add the height of the div. Assuming it is the .container :
var menuLinksTop = $('.container').offset().top + $('.container').height();

execute a jQuery slideUp event when screen width exceeds a certain value

I am making a responsive site in which I add event listeners to blocks to slide down. If I resize my browser window to become wider I want to execute a slideUp to this blocks so that they're all neatly slided up. Does anyone know how to achieve this?
My jquery function:
function mobileFunctions(){
if($(window).width() < 600){
$(".replace-url").attr('href', '#');
$(".list-categories li").removeClass('click');
categoryActive();
}
}
function categoryActive(){
$(".title-click").click(function(){
var e = $(this).parent("li");
var i = ".list-categories li";
var c = "active";
var d = ".content-category";
if(!$(e).hasClass(c)){
$(i).removeClass(c);
$(i).children(d).slideUp("slow");
}
$(e).children(d).slideDown("slow");
$(e).addClass(c);
});
I believe you are looking for this?
$('window').resize(function() {
var someValue = 1024;
if ($('window').width() > someValue) {
// function here...
}
});

Capture first visible div id while scrolling (viewport)

I have this page:
I want to capture on which div I am while I'm scrolling.
I know If I use:
if( $(document).scrollTop() > $('#div1').position().top) {
console.log('Div1')
}
...it will capture the div1 but instead of using this code for every div I want to set 1 snippet for all divs
Something like:
var a = // The div i am at
if( $(document).scrollTop() > $(a).position().top) {
console.log($(a).attr('id'))
}
I am looking something like the viewport: http://www.appelsiini.net/projects/viewport/3x2.html
Can I achieve that without a plugin, simply 2-3 lines?
Here's a nice way to do it. You may want to optimize the '<=' with a pixel offset to improve user experience and move the div selector ($divs) outside the callback to increase performance. Have a look at my fiddle: http://jsfiddle.net/brentmn/CmpEt/
$(window).scroll(function() {
var winTop = $(this).scrollTop();
var $divs = $('div');
var top = $.grep($divs, function(item) {
return $(item).position().top <= winTop;
});
});
Just throw it into a loop.
var list = [];
$("div").each(function(index) {
if( $(document).scrollTop() > $(this).position().top)
list.push($(this));
});
alert(list);
The list will than have every div that is within your viewport.
I'd suggest using the jQuery Inview plugin:
https://github.com/protonet/jquery.inview
Well maintained Plugin that detects whatever content is in the viewer currently, enabling you to bind functions to an inview event. So as soon as your div is in view you could fire off all the relevant functions you wanted and then again when it has left the users view. Would be great for your needs.
$(window).scroll(function () {
$("#privacyContent div").each(function () {
var bottomOffset = ($(this).offset().top + $(this).height());
console.log("Botom=",bottomOffset ,"Win= ", $(window).scrollTop());
if (bottomOffset > $(window).scrollTop()) {
$("#menu a").removeClass("active");
// console.log("Div is= ",$(this).attr('id'));
$("#menu a[href='#" + $(this).attr('id') + "']").addClass("active");
$(".b").removeClass("fsActive");
var div = $(this);
div.find(".b").addClass("fsActive");
return false;
}
});
});
I do it like this it works fine it detect all div id

Menu that fit to the buttom/top of the screen

I saw a cool style/js function (I can tell what it is) that implemented on a side menu.
You know the situation when you have a long center page and one of / both of you sides ends and that leave a blank space? Well this site implemented this thing that just when the user scrool to the place where the side menu end - the menu get absolute postion and doesnt move.
How can I do this?
If you want to see an example you can look here (just scroll and look on the sides)
I believe you can achieve similar effect using this: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/ (just making it move with 0 as speed parameter instead of slow, as in the example) and adding conditions about whether the current position fits within the box it is displayed (you can take height of the box - menu being moved on page or box that contains the menu - by using .height() jQuery function).
EDIT:
The page you referenced uses the following JavaScript code to support what you try to accomplish:
<script type="text/javascript">
$(function(){
var seoHeight = $$('dvIndexSeoMaster').height();
seoHeight = (seoHeight > 0) ? seoHeight : 0;
var documentHeight = $(document.body).height() - 120 - seoHeight;
var fixedMode = false;
var hasFixedClass = false;
var leftColElm = $sc('dvFixed');
var leftColPos = leftColElm.offset().top;
var leftColHeight = leftColElm.height();
var rightColElm = $$('dvIndexMasterRightCol');
var rightColPos = rightColElm.offset().top;
var rightColHeight = rightColElm.height();
function scrollElm(elmPos,elmHeight,objElm, cssClass){
var fixedMode = false;
var hasFixedClass = false;
var windowTop = $(window).scrollTop();
(windowTop >= elmPos && (windowTop + elmHeight) < documentHeight) ? fixedMode = true : fixedMode = false;
if( fixedMode){
$(objElm).addClass(cssClass);
hasFixedClass = true;
}else if( (fixedMode == false)){
$(objElm).removeClass(cssClass);
hasFixedClass = false;
}
};
$(window).scroll(function(){
scrollElm(leftColPos,leftColHeight,leftColElm,'make-fixed');
scrollElm(rightColPos,rightColHeight,rightColElm, 'make-fixed');
});
});
</script>
And the make-fixed CSS class has the following definition:
.make-fixed {
position: fixed;
top: 0;
z-index: 200;
}
You can make an element stay in the same place, even as the user scrolls, with the CSS position:fixed property: http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

Categories