I need to jump to the bottom of page after button click. After clicking, some hiden information becomes visible and it expands the page. I tried this:
onclick='if(event.pageY > (document.body.parentNode.scrollHeight - 250)) {window.scrollBy(0, (document.body.parentNode.scrollHeight));}
where:
event.pageY - mouse position on click
(document.body.parentNode.scrollHeight - 250) - i need to do this
action just after clicking last few buttons (250px above bottom)
But this jumps only to the bottom of previous (not expanded) page with hidden lines. Then i need to scroll to see information that become visible. I need to jump to the bottom of expanded page with shown information that was hiden.
2nd problem that it works different in chrome and firefox. Chrome works only with bottom of whole page - 250px and firefox works with visible part of page - 250px.
Any advice?
Thanks in advance
Related
I've got three DIVs right under each other along the flow of the document, and all except the first DIV is set to display: none;. Therefore the first DIV (main_content) is the only DIV of the three that's visible when the page loads.
I need a jQuery script that would allow the next DIV to appear, and scroll to the top of the viewport (for clarification, this increases the document height) when the user has scrolled to the bottom of the page I also need the script to hide the newly appeared DIV when the user scrolls back up.
This is what I have to far; it works but there's some weird looping going on.
$(window).scroll(function(){
showDiv();
});
function showDiv(){
if( $(window).scrollTop() + $(window).height() >= (($(document).height())-10)){
$("#main_content2").fadeIn(1000);
$('html,body').animate({scrollTop: ($("#main_content2").offset().top - 88)}, 800);
$(document).height('auto');
$(window).height('auto');
}else{
$("#main_content2").fadeOut();
$(document).height('auto');
$(window).height('auto');
}
}
Not sure if my question is clear to you guys but let me know and I'll try to word things a little better. Thanks in advance.
EDIT: Thanks for the reply freedom. But this is not what I was looking for. I do not want the next DIV to affix to the top. I want the next DIV to appear, and snap to the top when the user scrolls to the bottom of the document. After the DIV snaps to the top the user is able to scroll through it as he would normally until he reaches the bottom of that DIV and then next DIV (3rd) appears and snaps to the top. I apologize if I wasn't clear enough before.
Here is my problem, follow the steps below as not sure how to explain this without seeing it happen:
https://www.facebook.com/TheBackyrdCricketr/app_203351739677351
1) Click on the "About Us" button" - A section should slide down
2) Click on the "Rules" button (the top left image of the group of 9) - another section should slide down
3) Click on the red "Twenty20" button (the left of the 3 emblem options) - another section should slide down.
4) Minimise all the sections by clicking all the buttons in the reverse order from above i.e.(Twenty20 then, rules then about us)
5) Scroll to the bottom of the page where you will find a large blank section below my footer which hasn't slid back up to the bottom of my footer.
How do I fix this so that this empty space/height of my webpage is always the height of the bottom of my footer even when different divs are sliding down/up?
No one will open the FB through your link, so you need to understand that it's a matter of security.
According to heading of your post I think you need this:
http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-a-floating-div-which-will-come-up-and-down-automatica/
I am working on a page that has two states: edit mode and normal mode. The user switches between these states by clicking on a toggle button. Triggering edit mode adds more elements to the page (buttons, etc) and thus forces the body element to increase its height.
My issue arises when a user has scrolled down the page and then triggers edit mode - since the page's height has now increased, their current scroll position is lost. I have been trying to find a way through which I can calculate what the new scrollTop should be, but have not been successful.
I've got a jsFiddle as an example of my issue. It automatically scrolls to the third "entry", to simulate a user having scrolled down that far. Clicking the "trigger change" button in the top right hand corner will add more elements to the page, and the scroll position of having the third entry at the top of the page is lost.
I am aware that I could just redo $('body').scrollTop($('.entry:nth-child(3)').offset().top); after the new contents have been added, but I want the scroll position to be remembered for no matter where the user has scrolled to on the page.
http://jsfiddle.net/Jn8wq/2/
Any help is greatly appreciated!
Check this fiddle.
http://jsfiddle.net/Jn8wq/4/
I added this
var tempScrollTop = $(window).scrollTop();
//your append logic
$(window).scrollTop(tempScrollTop+9);
You would notice that I added '9' to the scroll position. It suits your requirement in the given fiddle. But when you implement this on your actual site, you would have to calculate the height of new appended divs dynamically and add that height instead of '9'.
To keep an element where it is in the window after something changes above it, try this:
var tmp = $('#element').offset().top - $(document).scrollTop();
// add stuff
$(document).scrollTop($('#element').offset().top - tmp);
I'm building a progressively-enhanced, Bootstraped web application that features task-centric help on every page. The help area div (id="help_area") loads in a hidden state; generally when the user clicks on the "help" button (a id="nav_help_button"), the main content div condenses from span12 to span9, and the help area is revealed as a span3. This works well.
Because I want to support mobile and tablet, I'm using Bootstrap's responsive scaffolding. So if you are viewing the page on a narrow viewport, clicking on the help button "reveals" the hidden help area at the bottom of the page‡. I'm trying to use jQuery's .slideToggle()'s callback method to execute JavaScript (window.location.hash = "help_area";) that "jumps to" the help area after it is revealed, but having no luck with the jumping (it doesn't error; it just doesn't move browser focus to the help area).
How can I reveal a div at the bottom of a page, then jump to it? I'm also using preventDefault so the browser won't try to jump to the internal link before the target is revealed. Could that be the conflict?
Here's the relevant ECMA script:
$('#nav_help_button').click(function(event) {
"use strict"; //let's avoid tom-foolery in this function
event.preventDefault(); //don't let a tag try to jump us to #help_area before we reveal it
//adjust spans of main block and help area, set aria-hidden attribute on help block to help screen-readers
if ( $('#help_area').attr('aria-hidden')==='true' ) {
$('#content_container.span12').switchClass('span12', 'span9', 300);
$('#help_area').delay(300).slideToggle(300, function() { window.location.hash = "help_area"; }).attr('aria-hidden', 'false');
}
else {
$('#help_area').slideToggle(300).attr('aria-hidden', 'true');
$('#content_container.span9').delay(300).switchClass('span9', 'span12', 300);
}
});
I have also set up a JSFiddle that illustrates the problem.
To duplicate
open http://fiddle.jshell.net/jhfrench/HdCbu/7/show
then resize that browser window until "PTO, AIT Life, Hours Worked", etc stacks on top of each other
click on the button in the upper-right corner (the one with three white horizontal bars) to reveal the nav menu
click on the blue "help" button to execute the reveal/jump-to.
‡ As the right-most div, everything to the left of it gets stacked on top, so the newly "revealed" help area is generally below the visible portion of the page.
Related:
Javascript to make the page jump to a specific location
http://api.jquery.com/event.preventDefault/
http://api.jquery.com/slideToggle/
Your JSFiddle does jump when I do exactly as you say (steps 1-4) for my browser, which is Chrome 24. What's your browser?
But perhaps this is your problem. If I navigate to http://fiddle.jshell.net/jhfrench/HdCbu/7/show/#help_area (note the appended hash tag) and perform your steps 1-4, my browser does NOT jump. Note that when you first navigate to that URL, there is no visible #help_area. Thus, the URL you're navigating to specifies a hash tag that's invisible. Perhaps the browser is a bit confused by this and just leaves the #help_area hash tag in a bad state. It won't allow scrolling to it from then on, even after it becomes visible. Speculation, but I hope it's helpful!
So i want to disable the window scrolling on mousedown+mousemove, i searched everywhere, but i can't find anything.
body { overflow: hidden } doesn't work, you can still scroll if you press the mouse, and you go down.
The problem i have, is that on clicking on an image thumb, it opens a positioned absolute div (100% height & width and a 50% black transparent .png) that shows the original image, and when i press the left mouse button and i move down, all the items behind the absolute div, start to scroll down.
Here is an example of what is happening. http://jsfiddle.net/T2qBw/1/
(Click the black div, a position fixed div opens, press left click, and move down).
Thanks in advance.
PS: I apologize if i made any grammar or spelling mistake. (English isn't my native language)
$(".open-overlay").click(function(){
$(".overlay").css("display","block");
$("body").css({overflow:'hidden'});
$(window).on('mousedown', function(e) {
e.preventDefault();
})
});
Don't forget unbind mouse event
$(window).off('mousedown')