JavaScript getting window height is wrong on site refresh - javascript

I'm trying to find out wether the site is scrollable or not.
Currently I'm comparing $("body").height() and window.innerHeight.
As long as the user opens it with the url or with a link it's all fine, I'm getting the height of the whole site. But if I'm already on this page and just press F5 this $("body").height() returns the height of the window and no longer of the whole page (I can still scroll).
I already tried $(window).height() and document.documentElement.clientHeight as well. All three methods are always returning the same. (Right value if with url or link, wrong if F5 or Ctrl+ R).
Somebody know where my mistake is or is there another method i could use?
Thanks in advance!
EDIT: For clarification: I have a footer bar, which should always be on the bottom of the current page. If the page is scrollable, the div with the footer shows up in the end of the page. If not, im setting the main div too 100%, so the footer shows up in the bottom. I'm checking it currently that way:
$(document).ready(function() {
if (document.body.scrollHeight == document.body.clientHeight) {
document.getElementById("mainbody").style = "height: 100%";
}
});
And my body is like this:
<body>
<div class="mainbody" id="mainbody">
<?php include "assets/header.php" ?>
<?php include $currentsite ?>
<?php include "assets/footer.php" ?>
</div>
</body>
The div with the footer has width: 100%; bottom: 0; position: absolute;. But if you just reload the page scrollHeight, clientHeight, innerHeight and height() are all returningthe height of thr screen and no longer of the actual document. I hope that more understandable. And sorry for my bad english.
Here's the problem visualized: https://www.youtube.com/watch?v=pzWHUsE0ozA

Try comparing scrollHeight and clientHeight. Like so:
if (document.body.scrollHeight !== document.body.clientHeight){
// Scrollable
} else{
// Not scrollable
}

Related

How to detect when at the bottom of a scrollable div?

I created a website that loads data as you scroll down. Every time you hit the bottom of the page, it loads another 100 rows. I'm trying to replicate this in a div so that the header is always at the top no matter how far you scroll down.
I'm using JQuery and the scrollTop() function to do this.
Here is my code that works if it is not detecting the scroll bar in the div, but the whole window.
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
for(i; i < size+100; i++){
document.getElementById('myTable').innerHTML += IPAMArray[i];
}
size = i;
}
});
Now i change the div to this:
<div class = "tableDiv" id="myTableDiv" style="height:800px;width:1000px;border:1px solid #ccc; overflow: scroll;"><table id = "myTable"></table></div>
I dont know how to change this line from "document" and "window" to the correct div variables:
if ($(window).scrollTop() == $(document).height() - $(window).height()){
Here is where i'm currently at with that line:
if ($("div.tableDiv").scrollTop() == $(document).height() - $("div.tableDiv").height()){
I've tried quite a few variants, but i'm completely guessing the code so it could take forever. I would prefer to refer to this div by its ID rather than its class, but i just started using the class references because thats how most of the examples are online. I have tried $(document).getElementById('myTableDiv') in various ways as well but cant seem to find the solution.
if ($("#myTableDiv").scrollTop() == $("#myTable").outherHeight() - $("#myTableDiv").height()){
use ids to identify elements
the height of the inner element is what you need ($("#myTable").height())
jquery's height() function doesn't include borders margins and / or paddings as noted in the doc. Use outherHeight() instead.
OR
make your header position: fixed in css

parent div having content pushed in firefox only by child divs scrolling js

I have been having the oddest bug in firefox. I have a parent div (divbodycontainer) that is having its content scrolled down the screen when a child div containing a floated div with a base height of 0 is dynamically scrolled using javascript. If you scroll half way down any of the main pages in firefox and refresh the page the parent divs content will jump down. Odd thing is firebug reports no css or code change that could be doing this?
Bug also randomly pops up during fast scrolling.
Tried to fix bug by adding a height style to the javascript function since the bug is tied to the scrolling action.
$(window).scroll(function () {
var ntMin = 0+"px";
var newTop = $(window).scrollTop();
if (newTop <= ntMin){
newTop = ntMin;
}
$("#floatPitchButton").stop()
.animate({'top': newTop}, "slow")
document.getElementById('floatPitchButton').style.height = ntMin;
});
This idea did not fix my problem? Anyone have any idea whats going on?
Site: www.webstudioproductions.com
It looks like I was able to solve the problem by deleting the server js file and re-ftping the file.

Stop page scroll after the page reaches certain point

How can scroll be prevented after scrollTop reaches certain value say 150.
$(window).scroll(function() {
if($(window).scrollTop() >=50)) {
return false; // basically don't scroll
}
});
the .scrollTop set the scrollHeight using scrollTo function. It doesn't scroll from x to y, It just goes to y.
So basically you cannot stop the scroll as your event will be called after it is set to y. You can probably set the desired scrollHeight inside the handler after comparing the height.
if($(window).scrollTop() >=50)
{
$(window).scrollTop(0);
}
Note: using it on an element is bearable, but on window object will be annoying to the user. Above is just to show how it works.
Try scrolling in >> http://jsfiddle.net/KwgMj << and see how annoying it can be.
$(window).scroll(function(e) {
if($(window).scrollTop() >=50)) {
$(window).scrollTop(50)
}
});
Apart from the obvious question; why would you want this?
I would suggest another approach.
Have a wrapper which fills the entire window, have a certain height and use overflow-x: hidden in css.
This may and may not be what you're after though.
If you wish to make a continuing site that allows you to keep scrolling for the next step, I'd suggest you to simply .slideDown() relevant content.
The scroll is a really basic function which shouldn't be modified with for no good reason.
EDIT:
For a ipad specific solution, use a wrapper:
<? if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')): ?>
<!-- If iPad, add style -->
<style type="text/css">
div#wrapper {
height: 100%;
overflow: hidden;
}
</style>
<? endif; ?>
<body>
<div id="wrapper">
<!-- Content here -->
</div>
</body>

Chrome Extension Scrollbar Placement

After dabbling in Chrome Extensions I've noticed that when the data inside the Page Action gets to a certain point the scroll bars automatically attach themselves to the popup, this I expect. However, instead of pushing the content to the left of the scroll bar it overlays the content causing a horizontal scrollbar to become active. I ended up just adding a check on my data and applying a css class to push the content to the left more to run parallel to the scroll bar and beside it not under it. What is the correct way to handle this besides my hackish solution?
I was wondering this myself too. Currently I just don't put anything important closer than 20px to the right side of a popup and disable horizontal scrollbars:
body {overflow-x:hidden;overflow-y:auto;}
So when a vertical scrollbar appears the content at least doesn't jump.
Perhaps you need to specify a width on the scrollbar.
::-webkit-scrollbar {
width: 42px; //Do not know actual width, but I assume you do
}
I haven't found a way to do this that isn't a hack, but here's the simplest hack I could think of:
<script type="text/javascript">
function tweakWidthForScrollbar() {
var db = document.body;
var scrollBarWidth = db.scrollHeight > db.clientHeight ?
db.clientWidth - db.offsetWidth : 0;
db.style.paddingRight = scrollBarWidth + "px";
}
</script>
...
<body onresize="tweakWidthForScrollbar()">
The idea is to detect whether the vertical scrollbar is in use, and if it is, calculate its width and allocate just enough extra padding for it.

Always scroll a div element and not page itself

I have a page layout with an inner <div id="content"> element which contains the important stuff on the page. The important part about the design is:
#content {
height: 300px;
width: 500px;
overflow: scroll;
}
Now when the containing text is larger than 300px, I need to be able to scroll it. Is it possible to scroll the <div>, even when the mouse is not hovering the element (arrow keys should also work)?
Note that I don’t want to disable the ‘global’ scrolling: There should be two scrollbars on the page, the global scrollbar and the scrollbar for the <div>.
The only thing that changes is that the inner <div> should always scroll unless it can’t be moved anymore (in which case the page should start scrolling).
Is this possible to achieve somehow?
Edit
I think the problem was a bit confusing, so I’ll append a sequence of how I would like it to work. (Khez already supplied a proof-of-concept.)
The first image is how the page looks when opened.
Now, the mouse sits in the indicated position and scrolls and what should happen is that
First the inner div scrolls its content (Fig. 2)
The inner div has finished scrolling (Fig. 3)
The body element scrolls so that the div itself gets moved. (Fig. 4)
Hope it is a bit clearer now.
(Image thanks to gomockingbird.com)
I don't think that is possible to achieve without scripting it, which could be messy, considering the numerous events which scroll an element (click, scrollwheel, down arrow, space bar).
An option could be using the jQuery scroll plugin. I know it has the availability to create scrollbars on an div. The only thing you need to add yourself is the logic to catch the events when keyboard buttons are pressed. Just check out the keycodes for the arrow keys and make the div scroll down.
The plugin can be found here.
You can use it like this;
<script type="text/javascript">
// append scrollbar to all DOM nodes with class css-scrollbar
$(function(){
$('.css-scrollbar').scrollbar();
})
</script>
here is a solution that might work: (fiddle: http://jsfiddle.net/maniator/9sb2a/)
var last_scroll = -1;
$(window).scroll(function(e){
if($('#content').scrollTop());
var scroll = $('#view').data('scroll');
if(scroll == undefined){
$('#content').data('scroll', 5);
scroll = $('#content').data('scroll');
}
else {
$('#content').data('scroll', scroll + 5);
scroll = $('#view').data('scroll');
}
/*
console.log({
'window scroll':$('window').scrollTop(),
'scroll var': scroll,
'view scroll':$('#view').scrollTop(),
'view height':$('#view').height(),
'ls': last_scroll
});
//*/
if(last_scroll != $('#content').scrollTop()){ //check for new scroll
last_scroll = $('#content').scrollTop()
$('#content').scrollTop($('#content').scrollTop() + scroll);
$(this).scrollTop(0);
//console.log(e, 'scrolling');
}
})
It is a bit buggy but it is a start :-)
The only way I believe you can achieve this is through the use of frames.
Frames - W3Schools Reference
If you just want to have a fixed positioned "div" and scroll only it, maybe you could use a trick like:
http://jsfiddle.net/3cpvT/
Scrolling with mouse wheel and all kinds of keys works as expected. Only thing is that the scrollbar is on the document body only.
I found a solution... Not perfect... http://jsfiddle.net/fGjUD/6/.
CSS:
body.noscroll {
position: fixed;
overflow-y: scroll;
width: 100%;
}
JS (jQuery):
if ($("body").height() > $(window).height()) {
var top;
$('#scrolldiv').mouseenter(function() {
top = $(window).scrollTop();
$('body').addClass('noscroll').css({top: -top + 'px'});
}).mouseleave(function() {
$('body').removeClass('noscroll');
$(window).scrollTop(top);
});
}
The text wrapping problem can be solved putting the whole content in fixed-width div. There is another bug for IE browser. If the page has center-aligned backgrond, it will move left-right on mouseenter on #scrolldiv

Categories