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>
Related
I have an issue where a fixed-position menu needs to be scrolled, but the outer body already has scrollbars. Even if I remove the outer body's scrollbars then the menu div's scrollbars intersect with the "Close" button, which itself is fixed at the top-right of the screen.
From the image you can see that there are two scrollbars and the inner bar intersects the "Close" button. I'd like to have only 1 scrollbar and no intersect. However, when the menu is closed the scrollbar needs to scroll the page, and when the menu is open it needs to scroll the menu (which is in a fixed position div.)
Is there a way I can use the scrollbar from the entire page to scroll the page when the menu is closed and to scroll only the menu when the menu is open?
Or is there another way to achieve the desired effect?
Here's the code I suggest to freeze the webpage behind the menu when the menu is open:
var top;
function menuOpen() {
top = $("body").scrollTop();
$("html").css({"position":"fixed", "top":-top});
}
function menulose() {
$("html").css({"position":"static", "top":0});
$("html, body").scrollTop(top);
}
Following css is required for it to work properly:
html {
width: 100%
height: 100%;
}
Let me know if this code works, if not it migth be required to add overflow hidden to menuOpen and overflow auto/scroll to menuClose.
The close button is probably a whole different issue, post a link to the code or the website so we can look into that properly...
I have a fixed size div that dynamically shows content.
Should the content be too large for the div what I'd like to happen is for the contents of the div to start scrolling on it's own so the all the content can be seen.
Off the shelf solutions seem to force content to always scroll regardless if it fits inside in the div.
Thank you.
Adding to what Shahar mentioned, you can use jQuery animate api to scroll till the bottom of the div.
var dynamicDiv = $("#dynamic_div");
scrollHeight= dynamicDiv[0].scrollHeight;
divHeight = dynamicDiv.height();
if(scrollHeight > divHeight){
pageScrolls = scrollHeight/divHeight;
$("#dynamic_div").animate({
scrollTop: scrollHeight // scroll till the end of the div
}, 1500 * pageScrolls); // adjust the time based on how much scrolling needs to be done
}
Here's the jsfiddle
If you don't have css rules overriding your browser default styles, it's likely that scrollbars will appear automatically whenever there is overflowing content inside the element.
You can use javascript to test if the content overflows, and if it does, do whatever you want (add scrollbar, change style, use a jquery plugin for it etc...).
With jQuery:
var myDiv = $('#overflowing-div');
if (myDiv[0].scrollHeight > myDiv[0].clientHeight) {
// handle this
}
Based on this answer to check if container is overflowing:
How to detect overflow in div element?
I have created a popup div which pops up over the main page. It is position:fixed; and with overflow:scroll;.
The issue is, unless the user positions their mouse over this div, the scroll feature on touch mouses or scroll wheels, scrolls the parent window - not the div. The same applies to trackpads.
Is there a way to lock the scroll of the parent window, and set the div as the scroll through jQuery? I have found a lot of posts about the opposite - with people wishing to look the div scroll and use the parent.
Any help would be greatly appreciated.
If you want to use jquery, here's a way you can set the body's overflow to hidden whenever the popup occurs and undo that whenever the popup goes away:
css:
body.popup-open {
overflow: hidden;
}
and jquery:
$("#popup").on("show", function () {
$("body").addClass("popup-open");
}).on("hidden", function () {
$("body").removeClass("popup-open")
});
==================
Name: //html text box//
age: //text box//
//div//
//table//
==================
Assume the above as a HTML page. Also assume the table has atleast 50 rows so that, the entire page could be scrolled. currently, when I scroll the page, the entire page (div, table) scrolls. I want the div to be at top of the page while scrolling such as the figure below:
==================
//div//
...
...
...
//row21//
//row22//
...
...
==================
I would like to know if this is possible at all. I tried using CSS for div:
//CSS for div:
position: fixed;
width: 100;
But, it displays the position of the div exactly where it was earlier. But, I would like to move the div to the top of the page while scrolling.
Thanks.
This is NOT trivial
You will need to use JavaScript to copy div and make its position fixed.
You will need to handle scroll event to hide and show fixed div
I have a small library to do such thing for table headers , I think you can read the source code or use as-it-is for a table
demo : http://www.agyey.com/demo/stickyhead/demo.html
code: https://bitbucket.org/anuraguniyal/stickyhead
This is not possible in the CSS alone. As you already know you can use:
position: fixed
to keep the element in the same place with respect to the browser window, but in order to move it to the top when the content is scrolled you need to use JavaScript.
You may want to look at this SO post to get an idea how to achieve that effect.
You need to add this to the css.
top:100px;//adjust til the div is below the name and age section.
position:fixed;
I think that's what you are looking for.
I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.