I am using this JQuery plugin to show (Scroll to Top) button, but I want this link or button to be appeared after scrolling down of specific part of the page. For instance, inside the body tag I have many divs and many discription but I want the (scroll to Top) link to be appeared after scrolling down the third div inside the body.
What should I do to get this issue?
looks like you just have to set the top to the position of your div:
try changing
var top = $(document.body).children(0).position().top;
to
var top = $('#your_div').offset().top;
Related
I have some custom buttons overlayed on a Google Map. When you click on one of the buttons it slides the map div right 360px and slides in a 360px wide div on the left in the place where the map vacated. When I click the button on the map it works as designed and slides the map over and div in like it should and when you click the close button on the div it slides out of focus and the map goes back to where it was before.
My issue is I am trying to have this div that slides in to show on load. My solutions I have tried haven't quite worked and I am not great with Javascript. If I use CSS z-index 1 it will load when the page loads but it shows it on top of the map instead of the map sliding over 350px. So a CSS solution won't work in this case because the div overlays on the map instead of sliding it over and covers the map which has a logo in the top left corner.
This is how I open and close the div.
HTML
<button id="alertBtn" class="map__control_icon" onclick="openAlerts();"><i class="fa fa-exclamation-triangle"></i></button>
Javascript
function openAlerts() {
document.getElementById("alert-list").style.minWidth = "360px";
document.getElementById("map-wrapper").style.marginLeft = "360px";
document.getElementById("mapButtons").style.marginLeft = "-360px";
}
function closeAlerts() {
document.getElementById("alert-list").style.width = "0";
document.getElementById("map-wrapper").style.marginLeft= "0";
document.getElementById("mapButtons").style.marginLeft = "0";
}
So how can I have this show by default when the page loads but slide the map over like it does when you click the button? Also is there someway to get the width .style.marginLeft to auto so it slides over based on the size of the div that slides in as sometimes the content is dynamic but if I set a hard set margin then there is extra space when the div isn't filling the full width. Hench why "alert-list" is set with a minWidth.
-Thanks!
I was able to easily solve this by adding the follow to the top of my Javascript.
$(document).ready(openAlerts());
If you want pure JavaScript then use this
document.addEventListener('DOMContentLoaded', openAlerts, false);
I would like you to help me make a Javascript code with autoscroll down in one particular div in one page, and while it scrolls down i want to make one procedure.
Im new in javascript but i know these things to help you out
<div class="uiScrollableAreaWrap scrollable" data-reactid=".c6.0">
This is the div of the box that is scrollable.
Could you give me an example of how can i make a javascript code
to take this class and scroll down until the end of the Wrap??
Update one.
http://screencast.com/t/8WNIFZB8rYG
Check out this photo to see all the divs of the box that i want to scroll down.
Relevant SO Link
Just for your case:
This will scroll down to bottom of the div
var objDiv = document.querySelector("._5tee .uiScrollableAreaWrap");
objDiv.scrollTop = objDiv.scrollHeight;
DEMO
Update:
based on your screenshot, Assuming that you want to scroll the ul list to the bottom.
var ulList= document.querySelector("._5tee .uiScrollableAreaWrap");
ulList.scrollTop = ulList.scrollHeight;
In case you want it for other div, use this pattern
.uiScrollableAreaWrap.scrollable yourdivselector
How can you make an element with a scrollbar start off at the bottom of the scroll?
I have a div that has overflow: scroll. When the element is loaded, by default, we see the top of the element and you have to scroll down. I want the view to start at the bottom of the div instead.
JS fiddle example. Goal is to load the bottom element by default:
http://jsfiddle.net/2WpQf/
If you can use javascript, then you may do this (demo: http://jsfiddle.net/2WpQf/1/):
var div = document.getElementById("div");
div.scrollTop = div.scrollHeight;
There's a Jquery Plugin called ScrollTo, which can scroll for you progamatically.
ScrollTo()
I have a website that uses dialogs. When I open that dialogs the body scrollbar is hidden and the scrollbar of the div that contains the dialog shows its scrollbar.
But, when I hide the body scrollbar, the content moves to the begining. How do I keep the position of the content when the dialog is opened?
For more information about this question, look the photos on Facebook. When you click a photo, I like to do that.
Can you give us the code you are using or a link to the site you are talking about? How are you hiding the scroll bar?
If it is by changing the overflow style property to hidden then am I correct in guessing that this only occurs the first time you show the dialog and subsequent appearances of the dialog do not move the content back to the top? If so I am not sure of the best way to prevent this but a quick hack would be to get your javascript to assign the overflow style property of the 'body's container div to auto upon loading.
Add the following to the top of your javascript:
window.onload = function ()
{
document.getElementById('container').style.overflow = 'auto';
}
where container is the id of the div containing your 'body' code.
try to use JavaScript to move the scroll to position:
document.getElementById('container').scrollTop = 50;
above will move scroll bar 50pix to the top, and you can get the max scroll height by:
document.getElementById('container').scrollHeight
Wait, I can't understand your question to well. If you wish to hide the scrollbars, use CSS to hide them.
<style type="text/css">
selector {
overflow: hidden;
}
</style>
I am trying to customize a photo gallery in Squarespace. A test gallery can be found here - http://dzrtgrls.squarespace.com/gallery/test-2/4011897 . What I would like is to have the next or previous images load so that the prev - / + next navigation is at the top of the browser window. So it seems I need to somehow append each url with #content so the content div is at the top of the window whenever the previous or next links are used. Is there a way to do this with javascript or jquery?
Do you mean you want to make the content div scroll so that it's at the top of the page? You can do that with scrollIntoView:
document.getElementById('content').scrollIntoView();