I have a scroll to top jquery button that will scroll to top of page when clicked. I'd like to show this button only when scrolling is needed.
For example: if page/content height (not window height) is more than 980px, show the button. if less, hide the button.
How do i do this using pure css? Thanks.
I am not sure if you can do this using pure CSS. You can use media query to achieve this if it depends on window height. You can use something like this:
#media only screen and (max-height: 980px){
#your-button-id{
display:none;
}
}
If you want it to depend on your content's height you can use Javascript. The example I am giving your is in jQuery but you can do it without jQuery:
$(document).ready(function(){ // To make sure the DOM is loaded before you get the body's height
if( $('body').height() < 980 )
$('#your-button-id').css('display', 'none');
else
$('#your-button-id').css('display', 'block');
$(window).resize(function(){ // To make sure that when window is resized, if you have media querys that modify the css and probably the body's height, you still hide the button if the height is no more than 980px
if( $('body').height() < 980 )
$('#your-button-id').css('display', 'none');
else
$('#your-button-id').css('display', 'block');
}
}
UPDATE: You can show the button whenever the page content's height is greater than your window height. In this case the condition would be
if( $('body').height() <= $(window).height() )
Related
I'm working with PrimeFaces and BootsFaces libraries. I have a little form inside bootsfaces modal. The form is used to change system parameters, and for one specific parameter has a <p:keyboard /> to change its value. My problem is that in extra-small devices, the bootstrap modal doesn't allow horizontal scroll, and the keyboard is not showing complete:
The keyboard is not responsive by default when the viewport with is less than 510px, so I have adjusted it to 436px by default in extra small screens. I want to make horizontal scroll on the modal just to see the complete keyboard, but only when I open the modal.
This is my javascript function to adjust the keyboard depending on screen size:
$(document).on('click', '.inpKeyboard', function() {//- The input text has a class called 'inpKeyboard'
if ($(window).width() <= 505) {//- Small screen
$('#keypad-div').css('width', '436px');
$('#keypad-div').css('left', '0px');
//$('.modal-open').css('overflow-x', 'auto');
}
$('#keypad-div').css('z-index', '2000');
});
Any help would be appreciated. Thanks.
What a nice puzzle! :) PrimeFaces calculate the size of the keypad window in JavaScript and stores it as an inline-style. So the clue to solving this is to add a timeout, like so:
<script>
$(document).on('click', '.hasKeypad', () => {
$('#keypad-div').css('z-index', '2000');
if (!(window.width > 505)) { // JSF (i.e. XML) doesn't accept the less-than-operator
// add a timeout to make sure the code is executed after PrimeFaces did its magic
setTimeout(() => {
// set a fixed with
$('#keypad-div').css('width', '436px');
// add the horizontal scrollbar
$('#keypad-div').css('overflow-x', 'auto');
// increase the height to make space for the scrollbar
$('#keypad-div').css('height', '180px');}
,1);
}
});
</script>
<!-- set a minimum width for the keyboard rows -->
<!-- (otherwise the key overflow to the next row) -->
<style>
#media screen and (max-width: 504px) {
.keypad-row {
min-width:470px;
}
}
</style>
I would like my "mega menu" JS to only run at full screen width and for a Responsive Menu (from module) to load at any lower screen width. Currently at lower screen width the responsive menu seems to work correctly, but the JS for the mega menu is still running and so is interfering with the responsive menu. I have set the option for CSS selectors to be removed in the Responsive Menu module, but the id for the menu does not change in the HTML naturally and so the mega menu is still using that id. (Is that the problem perhaps?) How can I get the JS to only run at full screen width? Thank you!
$('#subnav').dcMegaMenu({effect: 'slide', speed: 'slow', rowItems: '5', fullWidth: 'true' });
One piece of javascript that we used as a check if it's a mobile display is this (using 640px wide as our 'mobile display'):
function IsMobileDisplay()
{
if (document.all && !document.addEventListener)
return false;
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return windowWidth <= 640 || navigator.userAgent.match(/iPad/i) != null;
}
Then in your case:
if (!IsMobileDisplay)
{
//do stuff
}
How can I prevent a div which contains a long list of items from expanding the page height. I want the div to take up the entire screen but no more so that it doesn't push the footer down.
Set an specific height for the div container, and also set overflow-y with auto in order to show the scroll bar only when the content of the div is larger than the height set in the container. Like this:
.container {
height: 500px;
overflow-y:auto;
}
Without js, it is not possible because your page can be viewed in different resolution. Different resolutions means different height. Matter of fact, you may want that behaviour when user resizes the browser window as well, am I right? So first, find out the height of the browser, subtract the height of the footer from it, and set this height to your container, which I believe you want to make scroll able on yaxis. That will solve the problem. All these tasks are pretty simple and you can do it by little googling.
Use JavaScript/jQuery for this:
jQuery Solution:
<div id="content-div">some content here</div>
$(document).ready(function() {
var height = $(document).height();
height = height - (your footer height);
$("#content-div").css({ 'max-height' : height.toString() });
});
Standard JavaScript solution:
<div id="content-div">some content here</div>
function myfunction () {
document.getElementById('content-div').style.height = getDocHeight() + 'px';
}
window.onload = myfunction();
document.getElementById('content-div').style.height = getDocHeight() + 'px';
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
Also, change CSS to:
#content-div { background-color:#1d1d1d; color:#eee; overflow-y: scroll; }
I'm running into an issue with the ModalPopupExtender when displayed on a small screen device. The modals height does not rescale to fit within the viewable window. Because it is centered the top and bottom of the modal gets clipped. Trying to scroll it only scrolls the underlying page not the modal. Anyone run into this or have suggestions on a fix?
You have to set Po-pup's panel to use scroll bars.
There is 2 way of doing this :
Set a fixed height (ex : 500px) and overflow to auto using CSS.
Compute the height pup-up using JavaScript, you still have to set the overflow to auto with CSS.
Here an example of a JavaScript function that set the height to 90% of the page's height.
function pageLoad() {
$get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
}
I decided to handle it using a series of media queries....
.sModalCnt {max-height:480px;overflow-y:auto}
#media only screen and (max-height:600px) {
.sModalCnt {max-height:380px}
}
#media only screen and (max-height:500px) {
.sModalCnt {max-height:280px}
}
#media only screen and (max-height:400px) {
.sModalCnt {max-height:180px}
}
#media only screen and (max-height:300px) {
.sModalCnt {max-height:80px}
}
Here's the scenario:
I have an asp.net webpage which displays dynamic data in a gridview.
I'm using a master page to display the header and footer of the page, and this gridview is being displayed inside a div in the contentplaceholder.
The Problem:
What I want is that the size of the page that is displayed remains constant for a user and must be equal to the size of their browser's available display area and the content being visible by scrolling the div.
Sort of like the header and footer remain at the same position and the content inside it is scrollable.
I really don't know how to achieve this.
Any help on the matter is highly appreciated.
Thanks.
Try some jQuery:
function changeHeight(){
var winHeight = $(window).height();
var heightOfHeaderAndFooter = 200px; // change this to what you need
$('#myDiv').height($(window).height() - heightOfHeaderAndFooter);
}
$(window).resize(function() { // changes height with browser window
changeHeight();
});
$(document).ready(function() { // changes height on load of the page
changeHeight();
});
What you want is for your div to use width:auto and to dynamically change the height of it to always keep the footer at the bottom of the page. Also, make sure your div has overflow-y:scroll
Code snippet:
divMain.style.height --> height of div in pixel containing GridView. This div tag also has style setting of style="overflow-y:auto;"
document.documentElement.clientHeight --> height of the working/client area for your display.
document.getElementById("divMain").offsetTop --> height of content prior to divMain.
25 --> this is the height of my additional footer.
The pixel result is the height available for your divMain.
divMain.style.height = (document.documentElement.clientHeight - document.getElementById("divMain").offsetTop - 25) + "px";
Hope this helps.