We Keep Coding

Javascript detect if html elements fit screen

Is there a way to use javascript to detect if html content can't fit the screen (is scrollable) to show a "back to top button" only if necessary?

If you're happy to use jQuery, you could try finding the window height and comparing it to a wrapper element height. If the element height is greater, show the button.
var x = $(window).height();
if ($('#test').height() > x) {
alert('scrollable');
//add in button here
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" style="height:2000px;background:silver"></div>

Hard to tell, but perhaps you could get the element using document.getElementById(), then use innerHeight (http://www.w3schools.com/jsref/prop_win_innerheight.asp) to determine if the element exceeds the height.
Edit - seems like I might have misread a bit. If you want to check the entire HTML content on the page, you can use something like scrollHeight (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) on document.

You can compare the height of the page to the height of your browser:
document.body.offsetHeight < screen.availHeight
That will return true if the page fits. Although for your purpose, why not just show the button if the user is scrolled down at all? Assuming you can use jQuery,
$(window).scroll(function(){
if ($(document.body).scrollTop() > 0)
{
//Add or show button here
}
})

It's not IE supported, but my fave vanilla javascript is always:
var scrollHeight = window.scrollY;
console.log(scrollHeight);

Jquery width() Function Doesn't Return The Full Width of My Window

I am trying to get full size of my window(browser) which is 1366px. I use jquery width() function to achieve this. But It returns 1349px instead of 1366px. Therefore my slider appears 17px less than it should be. What did I do wrong you guys think?
var theWithObj = $('body').width();
console.log(theWithObj); //It returns 1349 but actual 100% size is 1366
Thank you!

Try
$(window).width();
If that's still not 1366 then you've probably calculated that number incorrectly - if you think you've calculated it correctly and jQuery's still wrong then please tell us how you came to find the width as 1366 :)

Using $(window).width() will give you the width of the browser (with or without srollbars)
If you use only $('body').width(), you'll get the width of the page only (so the width of the browser minus the width of the scrollbars.
alert($(window).width());
alert($('body').width());
FIDDLE

For solve the problem add this rule css:
body {overflow:hidden;}

Javascript function to find total page height

I'm after a simple javascript function that will detect the total height of my web page which is dynamic and apply it to the height of a div which is the page background. Would it be possible to implement it?
The div is called bg...
Any ideas? Thanks in advance

Try:
var height = body.offsetHeight ? body.offsetHeight : html.offsetHeight;
document.getElementById ('divID').style.height = height + 'px';
Here an useful documentation:
http://www.quirksmode.org/dom/w3c_cssom.html

Im using currently following code to do that:
var getBodyHeight = function () {
var d = document,
bd = d.body,
dd = d.documentElement,
max = Math.max(
bd.scrollHeight,
bd.offsetHeight,
bd.clientHeight,
dd.offsetHeight,
dd.scrollHeight,
dd.clientHeight
);
return max;
};

This is what I use to figure out the height of content in iFrame for the purpose of adjusting it properly.
var body = document.body,
html = document.documentElement,
height = 0;
height = body.offsetHeight;
if(height === 0){
height = html.offsetHeight;
}
The reason for checking the body first is that the height of html is actually the height of the iFrame, which could be bigger than the content itself. However, in certain cases such as when body has no height, then it falls back to use height of html instead.
For your case, you might want to experiment with a similar scheme. I'm not sure why you have to use a div to set background so I can't really suggest a better alternative (if any).
Solution based on the comment below:
What you can do is the following. Have a div inside the main container with position absolute, width/height 100% and z-index -1. Then it will always be the correct size no matter how large the contain grow or shrink. With this approach, you will have to make sure that container always has size. This is a pure CSS solution, which might be simpler than using Javascript to adjust.

var height = screen.height;
var width = screen.width;
var resolution = width+"x"+height;
alert(resolution);
it gives the resolution of the screen.i know you want page height and width but it will help you later in web development. i am using it as most important part for my web!

Wrong div width when getting it with javascript

I'm trying to get div's width with javascript. Initially div's width is undefined, ie width depends on amount of text on it. Is it possible to get width of this kind of div? I'm trying to do it with following javascript code, but i'm getting width differerent from Chrome console when i'm inspecting div
var mydiv = document.getElementById("error_message");
var curr_width = mydiv.clientWidth;
alert(curr_width);
Thank you for your attention

use offsetWidth
clientWidth is calculated width, offsetWidth is the one in "Chrome inspect element" (i think)
also read the comments :P

While the OP doesn't specify one way or the other, if you happen to have jQuery available, you can always use this:
var curr_width = $('#error_message').width();

I managed to solve the problem! I was trying to create div directly in javascript, without defining div on html body. So inside of tag i've created
<div id="error_message" style="visibility:hidden;"></div>
and it's worked!
Final javascript code is:
document.write("<div id=\"error_message\">Wrong username or password!</div>");
var mydiv = document.getElementById("error_message");
var curr_width = mydiv.offsetWidth;
alert(curr_width);

Adjusting elements based on scrollHeight using JQuery

Here's what i have so far:
function loadOff(){
$(document).ready(function(){
$("#eLoader").ajaxStop(function(){
$(this).hide();
$("#eventsContent").show();
var h = document.body.scrollHeight;
$("#bodyBackground").css("height",h+100+"px");
$("#sidePanel1").css("height",h-105+100+"px");
$("#bottom").css("top",h+100+"px");
});
});
}
This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished .ajaxStop() it hides the loader then shows the content.
The problem i am having is adjusting bodyBackground, sidePanel, and bottom to fit the content. I dont care to have it elastic and retract for short content at this point, i would just like it to extend to proper positioning based on content length.
All divs are absolutely positioned. The numbers in the function are broken down simply to make it easy to explain. -105 is the offsetTop of that element and +100 is the margin between the end of the content and the elements.
if there is a better, more efficient way to achieve this outcome, please, do tell.
Thanks.

Based on your code, the only thing you ought to see is the top 105px of #sidePanel1. Is that your intent? (h = the bottom of the window, according to your code.)
Sticking with the JQuery patterns, you would use
var h = $(window).height();
Maybe you're looking for this instead of the browser window's height? It will get the height of the content element.
$("#eventsContent").outerHeight();