I have a specific question about .scrollTop. I have a div with a specific height and a lot of p tags inside:
<div id="scroll">
<p>name1</p>
<p>name2</p>
<!-- till name50 -->
</div>
depending on the name you click it gets a class .active. What I then want to do is scroll the div so, that the name is at the top. So what I get is that I can use scrollTop in an animate function like this:
$('#scroll').animate({scrollTop: value });
but how can I get the var value. I tried it with
var value = $('#scroll p').hasClass('active').position().top;
But somehow it does not work.
Some help is much appreciated.
You need to check scrollTop() for the container #scroll and add that back to the position() arg.
var $scroll = $('#scroll');
$('p').click(function(e){
var $this = $(this);
$scroll.animate({
"scrollTop": $this.position().top + $scroll.scrollTop()
}, 1000);
});
http://jsfiddle.net/yCEap/1/
To just get the value:
var value = $('#scroll').scrollTop();
Related
I have this jquery code that adds a class to a div(#menu) after the user scrolled that far on a page. But I am searching for a way to change that code into adding that class when the div(#menu) is on top of another div with the class(.remove) and remove the class again when it's on a div with the class(.add). Here is my code:
jQuery(window).scroll(function(){
var fromTopPx = 400; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('#menu').addClass('scrolled');
}else{
jQuery('#menu').removeClass('scrolled');
}
});
You need to find the position of the div that you want to "be on top of".
To do that you can use
$('.remove').offset().top;
Hope this helps.
I have a structure like the following to create a one page web application, using some scroll functionalities:
<div class="home_section"></div> <!-- 1 -->
<div class="home_section"></div> <!-- 2 -->
<div class="home_section"></div> <!-- 3 -->
<div class="home_section"></div> <!-- 4 -->
I need to scroll to each of the above DIVs when the scroll event starts.
So, for example, when the scroll starts, if the first DIV visible from top is <!-- 2 -->, the body will have to scroll to the DIV <!-- 3 --> automatically.
This is what I am doing:
if ($(this).attr('id') == 'home') {
$(document).on("scrollstart", function (e) {
console.log('scrolling started on home');
e.preventDefault();
var next = $(this).find(".home_section"); //here I need to calculate which is the next DIV to scroll to
$('html, body').animate({
scrollTop: next.offset().top
});
});
}
The problem is that I do not know how to check which is the first .home_section DIV visibile starting from top, so I am unable to calculate which is the next target DIV to scroll to.
Thanks for ay help
I would loop through all the .home_sections divs, and get the first :visible like this
var divs = $(".home_section");
for(var x = 0; x < divs.length; x++){
if($(divs[x]).is(":visible")){
//do what you need here
var me = divs[x];
var next = x < divs.length - 1 ? divs[x] : undefined;
if(next){
//do the scroll
}
//then break the for loop
break;
}
}
This way you have an array of divs, you find the first visible and then you have the reference to the nth+1 div.
Another solution that should work:
var firstVisible = $(".home_section:visible:eq(0)");
var next = $(firstVisible).next();
hope this helps
next div would be $(this).next();
var next = $(this).next();
But you would need to modify this line for it to work for all divs:
if ($(this).attr('id') == 'home')
Modify the line var next = $(this).find(".home_section"); as below to get first div with class "home_section".
var next = $(this).getElementsByClassName("home_section")[0];
On window scroll end I want to know which div is current visible to user?
How can i get the name of the div which is currently on the screen or you can say the div which is currently visible by user through jquery?
Check the visibility of the div using it's id. Then retrieve the name of the div.
if($('#divId').is(':visible'))
{
alert($('#divId').attr('name'));
}
You can apply a class on all the divs in the form, and loop through them.
$(".appliedClassName:visible").each(function(){
alert($(this).attr('id'));
})
in place of alert you can get the div element and do whatever you want.
Assuming that you want to display the last div visible in CURRENT VIEWPORT, try this:
$.fn.inView = function(){
var win = $(window);
obj = $(this);
var scrollPosition = win.scrollTop();
var visibleArea = win.scrollTop() + win.height();
var objEndPos = (obj.offset().top + obj.outerHeight());
return(visibleArea >= objEndPos && scrollPosition <= objEndPos ? true : false)
};
var lastelem;
$('div:visible').each(function(){
if($(this).inView()){
lastdiv = $(this);
}
});
console.log(lastdiv);
OR
If you want to just know the last visible div on the window you can just use $('div:visible:last')
Hi below code can help you
$( "div:visible").each(function () {
alert($(this));
});
I'm Ajaxing in elements. I want to decide where to put them based on their height (think box-packing type algorithm).
When I loop through my elements as such, I always get 0 for the outerHeight:
posts.each(function(i, e) {
var elementHeight = $(e).outerHeight();
// elementHeight is always 0
});
How can I get the display height of my element?
It appears I have to add the element to the page to get the height, which makes sense.
What's the best way of doing this while being invisible to the user as simply as possible?
Append the posts to a hidden (display: none) div element and then iterate over them to get their respective outerHeight values.
HTML
<div id="postContainer"></div>
CSS
#postContainer { display: none;}
JS
var cont = $('#postContainer'), postsLength = posts.length;
posts.each(function(i, e) {
cont.append(e);
if (!--postsLength) calcOuterHeight();
});
function calcOuterHeight(){
cont.find('.posts').each(function(i, e){
var oh = $(e).outerHeight();
})
}
You have to add the elements to the page so that they go through the layout process, then they will have a size.
You can add them to the body, get the height, and then remove them. As the browser is busy running your code while the elements are in the page, the elements will never show up:
var el = $('<div>test</div>');
$(document.body).append(el);
var h = el.height();
el.remove();
I'm trying to append a div to the bottom of a another div, by clicking a button in javascript, but once the height of the outer container is reached, it no longer scrolls the list to the bottom, after an insert.
Please see the fiddle here
If you click the red add button until you get to about 13 items in the list, it seems something goes wrong with the scrollTop function, and it it no longer functions correctly (hovers around the same spot in).
I'm pretty lost on this, and have tried a bunch of different combinations of css settings for both the container and side div. Please help me.
I've reformatted your code to be more jQuery-esque. The main change, however, was to change the list.scrollTop() function so that it just scrolls to the bottom of list:
$(document).ready(function() {
var list = $("#q-d-list");
$(document).on('click', '#add', function() {
$('.active', list).removeClass("active");
var count = list.children().length + 1;
var active = $('<div />', {
'data-qid': count,
'class': 'mli active'
}).text('q' + count).appendTo(list);
list.scrollTop(list[0].scrollHeight);
});
});
Demo: http://jsfiddle.net/MrvcB/19/
Use
list.scrollTop(list.get(0).scrollHeight);
rather than
list.scrollTop($(".active").offset().top);
Try:
$(document).ready(function () {
var count = 2;
$("#add").live("click", function () {
var list= $("#q-d-list");
// remove the active class from the old item
var $clone = $(list.find("div:last-child").removeClass("active").clone());
count+=1;
var str_count = "q"+count.toString();
$clone.addClass("active").attr("data-qid",str_count).text(str_count);
list.append($clone);
list.scrollTop(list.get(0).scrollHeight);
});
});
http://jsfiddle.net/H4Kb3/