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);
Related
I'm using JQuery and learning as I go, I was just curious is there a way to have a DOMwindow auto resize to its content?
I managed to figure out how to change the parameters to take % width and height instead of px but I'm finding that a dynamic resizing view would utilize my site's purpose better.
Should I be looking into a different type of code to accomplish this?
If you had a containing wrap element, which holds all of the content, and is not set to 100%:
<div id="main_container">
// page contents
</div>
You could now get the dimensions of the containing element and then resize your window to suit.
In jQuery:
$(document).ready(function() {
var myElement = $('#main_container');
var sWidth = myElement.width();
var sHeight = myElement.height();
window.resizeTo(sWidth, sHeight);
})
There are other ways of doing this, if you search thoroughly on this website, you will find your answer. You can use (document).width() and (window).width(), as this answer describes: jQuery(document).width() doesn't include width outside of viewable area
I'm writing a script that creates a popup that dims the screen behind the popup. I'm using JQuery's $("#dim").css("height", $(document).height()); to resize the div element in question, but it doesn't cover the master page area. Is there a way I can get the height of the WHOLE page and not just the child page?
EDIT: The problem may actually lie in the positioning, and not the size, of my div. I have it set to top:0, but maybe I need to move it using javascript?
Give this a shot:
var width = screen.availWidth;
var height = screen.availHeight;
Since .outerHeight() isn't supported for window or document, you'll have to add the padding to the height() yourself.
$("#dim").css( "height", $(document).height() + 2*parseInt($(document).css("padding"),10) );
A view in my web app has a table which may be extremely long, so I wrapped it in a div with overflow: auto; max-height: 400px; so users can scroll through it while keeping the other controls on the page visible.
I want to use a bit of JavaScript to dynamically adjust the max-height CSS property so the div stretches to the bottom of the browser window. How can I determine this value? jQuery solutions are fine.
The table doesn't start at the top of the page, so I can't just set the height to 100%.
Something like this would work I think:
var topOfDiv = $('#divID').offset().top;
var bottomOfVisibleWindow = $(window).height();
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100);
I had a very similar problem, except in my case I had a dynamic pop-up element (a jQuery UI Multiselect widget), to which I wanted to apply a max-height so that it never went below the bottom of the page. Using offset().top on the target element wasn't enough, because that returns the x coordinate relative to the document, and not the vertical scroll-position of the page.
So if the user scrolls down the page, the offset().top won't provide an accurate description of where they are relative to the bottom of the window - you'll need to determine the scroll position of the page.
var scrollPosition = $('body').scrollTop();
var elementOffset = $('#element').offset().top;
var elementDistance = (elementOffset - scrollPosition);
var windowHeight = $(window).height();
$('#element').css({'max-height': windowHeight - elementDistance});
window.innerHeight gives you the visible height of the entire window. I did something almost identical recently so I'm pretty sure that's what you need. :) Let me know, though.
EDIT: You'll still need the Y-value of the overflowed div which you can get by document.getElementById("some_div_id").offsetHeight, seeing that .style.top won't give you a result unless it has been specifically set to a point via CSS. .offsetHeight should give you the correct 'top' value.
Then it's just a matter of setting the size of the table to the window height, minus the 'top' value of the div, minus whatever arbitrary wiggle room you want for other content.
something like max-height: 100%, but not to forget the html and body height 100%.
Is there a simple way in jQuery to detect when scrollbars appear and disappear on a div that has overflow:auto? (Like an event? Fingers crossed...)
(I'd prefer not to have to look at the height of the content of the div)
Another way to achieve this is to check whether there are scrollbars present using scrollLeft or scrollTop:
//nudge the scrollbar away from its starting position
$('#your_selector').scrollLeft(1);
//A value of 0 is assigned if the scrollbars are at their default position,
//or are abscent
if($('#your_selector').scrollLeft() !== 0) return true;
//put the scrollbar back to its starting position
$('#your_selector').scrollLeft(0);
As others have said, there is no easy way. Here's some code I've used in the past to detect if a scrollbar is present.
// Used like $('#my-id').hasScrollbar();
jQuery.fn.hasScrollbar = function() {
var scrollHeight = this.get(0).scrollHeight;
//safari's scrollHeight includes padding
if ($.browser.safari)
scrollHeight -= parseInt(this.css('padding-top')) + parseInt(this.css('padding-bottom'));
if (this.height() < scrollHeight)
return true;
else
return false;
}
You'll manually need to call this after adding or removing content from the div and it probably will only work if you call it on visible elements, but it's better than starting from scratch.
As far as I know, there is not event for that.
However, you "could" write your own special event for that, I guess you have to check
for the height and width.
It should be possible to detect scrollbars if the .innerHeight exceds the .outerHeight
value of an element.
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();