Objective: Add a scroll bar when internal content exceeds maximum height, otherwise set to hidden overflow (as scroll bar shows up if setting overflow-y: scroll)
Context: This is in a win8.1 app (so ie11 trident)
Problem: the style.maxHeight on the #table-wrapper div is set to ''
My css
#threads table {
width: 100%;
}
#table-wrapper {
max-height: 600px;
}
My Js
var threadTable = document.getElementById('thread-table');
var tableWrapper = document.getElementById('table-wrapper');
if (threadTable.clientHeight > tableWrapper.style.maxHeight) {
tableWrapper.style.overflowY = 'scroll';
} else {
tableWrapper.style.overflowY = 'hidden';
}
My html
<div id="threads" class="info">
<h3>IE Build Info</h3>
<div id="table-wrapper">
<table id="thread-table"></table>
</div>
</div>
Suggestions would be helpful. There is probably a better way to do what I'm doing, but I don't want a scroll bar (even if it disappears after a while) to be there when it doesn't need to be.
If you are doing just a vertical scroll it is very simple. Here is the markup I use:
<div class="y-scroller-wrapper movie-showtimes-scroller">
<div class="movie-showtimes-wrapper">
<!-- Items go here -->
</div>
</div>
The y-scroller wrapper is the container where the overflow is set. The width has to be the 100%, the height is also 100% of its container. So this needs to be inside something with set dimensions. A lot of times in my modern layouts the main element is absolutely positioned so I can do a fluid layout.
This is the CSS:
.x-scroller-wrapper, .xy-scroller-wrapper, .y-scroller-wrapper {
-webkit-overflow-style: none;
-ms-overflow-style: none;
-moz-overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
overflow-style: none;
-ms-scroll-chaining: none;
-ms-scroll-snap-type: proximity;
-ms-scroll-translation: vertical-to-horizontal;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 0;
width: 100%;
height: 100%;
}
.x-scroller-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.y-scroller-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y;
overflow: hidden;
overflow-x: hidden;
overflow-y: scroll;
}
I have a sort of working demo up right now, you will need to reduce the browser width to < 600 pixels for the vertical scroll. If it is wider it adjust to a horizontal scroll. It looks like there is a bug where it is not resizing properly if you manually shrink so just refresh at small width if it does not reset. http://pentonmovies.love2dev.com/
If you are curious the vertical to horizontal is managed through media queries for a responsive effect. I need to change from the resize event to a media query listener to make it better right now ;)
Also IE has some great touch and native scroll support the other platforms do not have at this time. I hope this helps you out.
Related
https://codepen.io/thomaslindstr_m/pen/qJLbwa
Pretty bare bones example above. I want to fade out the child I scrolled away from, but when CSS Scroll Snap is enabled, it starts glitching really bad on my iPhone iOS 12.0.1.
See video here: https://file-qacepzxlkb.now.sh/
Before the reload I disabled Scroll Snap (JavaScript still running), after the reload, I enable it.
Here's the JavaScript:
const windowWidth = window.innerWidth;
const viewsElement = document.querySelector('.views');
const firstViewContainer = viewsElement.querySelector('.container');
function scrollHandler(event) {
const {scrollLeft} = viewsElement;
const opacity = 1 - ((scrollLeft / windowWidth) / 1.5);
firstViewContainer.style = `opacity:${opacity};`;
}
viewsElement.addEventListener('scroll', scrollHandler, {passive: true});
CSS excerpt:
.views {
overflow: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-snap-stop: always;
}
.view {
/* NOTE remove to see that this issue is related to scroll snap */
scroll-snap-align: start;
}
Any ideas on what is causing this issue, and possibly how to fix it? I realise this might require a hack, as it runs perfectly fine in Chrome 70 on macOS.
What helped me was adding overflow: hidden; for each child element.
In your case the code would like like this:
.view {
/* NOTE remove to see that this issue is related to scroll snap */
scroll-snap-align: start;
overflow: hidden;
}
hey there this syntax can help you:-
<style>
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
#gallery img {
scroll-snap-align: center;
}
</style>
<div id="gallery">
<img src="#">
<img src="#">
<img src="#">
</div>
css help
if (CSS.supports('scroll-snap-align: start')) {
// use css scroll snap
} else {
// use fallback
}
I have a simple 3 column layout with a left sidebar, content area, and right sidebar. I am using flexbox to handle widths. I would like to make it so that when a user drags the right border of the left sidebar, the div can be resized. I would prefer a css solution if it makes sense but am open to javascript or jquery. Whichever approach is easiest for me to understand : )
Here is a possible solution using the css resize property (click Run code snippet to see the result).
Notes:
The resize handler is in the bottom right corner of the left sidebar
The resize property is not yet fully supported by all browser (~74% see caniuse)
The styles for the resize handler are still limited (see this question)
.container {
height: 500px;
display: flex;
}
.left-sidebar {
display: flex;
flex-direction: row;
background-color: #364F6B;
color: #fff;
/* This is for resizing */
overflow: scroll;
resize: horizontal;
}
.center-aria {
background-color: #3FC1C9;
flex-grow: 2;
}
.right-sidebar {
background-color: #FC5185;
}
.left-sidebar, .right-sidebar, .center-aria {
padding: 8px;
}
<div class="container">
<div class="left-sidebar">
Left Sidebar - Resize me
</div>
<div class="center-aria">Center Aria</div>
<div class="right-sidebar">Right Sidebar</div>
</div>
Sorry if the title isn't descriptive, but I'm working on a web-based application in javascript using the HTML5 canvas. I want the page to adjust to the window size, but I also want the columns to be resizable - that is, you can drag the vertical lines to change their width. The thing is, the canvas width and height attributes must be in pixels (setting the CSS properties stretches the image instead of widening the drawing surface). I need to change the canvas attributes through javascript. I have trouble working with all of these constraints together.
I tried Making the templates-panel float left and the properties-panel float right, but it ends up below the canvas and above the status-bar everytime. I've also got the status bar set to position:fixed but it tends to go above the canvas a bit. How would you do it? Keep in mind I have to be able to resize the window or the panels individually (except the menubar and status bar which never change size).
EDIT: quick edit to add that I can't use JQuery / JQuery-UI. The application is quite computer-intensive, so I had to get rid of it. My compatibility target is IE9 anyway.
I did a quick google search on how to do this and found a stack overflow post with a similar answer, here is the fiddle that was provided, here is the javascript portion:
var i = 0;
$('#dragbar').mousedown(function(e){
e.preventDefault();
$('#mousestatus').html("mousedown" + i++);
$(document).mousemove(function(e){
$('#position').html(e.pageX +', '+ e.pageY);
$('#sidebar').css("width",e.pageX+2);
$('#main').css("left",e.pageX+2);
})
console.log("leaving mouseDown");
});
$(document).mouseup(function(e){
$('#clickevent').html('in another mouseUp event' + i++);
$(document).unbind('mousemove');
});
http://jsfiddle.net/gaby/Bek9L/
And here is the post:
Emulating frame-resize behavior with divs using jQuery without using jQuery UI?
The fiddle uses jQuery but not jQuery UI,
You will need to use percentages for width, look into responsive design.
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
I hope this helps
it's this are you looking for?
fiddle link
<style>
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%;}
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
</style>
<div class="section group">
<div class="col span_1_of_3" style="background-color:red;color:white;text-align:center;">
template
</div>
<div class="col span_1_of_3" style="background-color:blue;color:white;text-align:center;">
canvas
</div>
<div class="col span_1_of_3" style="background-color:gray;color:white;text-align:center;">
properties
</div>
</div>
Good morning everyone!
I was hoping if any you masters would be able to assist - I have a div on a site I am building which has been applied with a CSS of "height: 100%" and been given the "display: table" property. There is another div within this div with a "display: table-cell" and a "vertical-align: middle". However, this code is not centering vertically? Additionally, I have a "margin-left: auto" and a "margin-right: auto" applied yet it does not center horizontally either as it should - any thoughts?
I have 4 animations on the page but the one I am working on right now will only display for mobile phones, so you will either need to use this (http://mobiletest.me/#d=iPhone_5_portrait&u=http:// energyamplified.co.za/home.php) or make sure your view port when visiting (http:// energyamplified.co.za/home.php) is within 227-449 pixels wide.
The CSS:
#animation_wrapper {
height: 100%;
display: table;
}
#media only screen and (min-width: 227px) and (max-width: 449px) { /* Very Small Animation */
div #frameContainer_very_small {
display: table-cell;
vertical-align: middle;
padding-top: 25%;
margin-left: auto;
margin-right: auto;
}
div #frameContainer_very_small iframe {
width: 100%;
height: 100%;
display: block;
}
}
The HTML/JS (which in this viewport, the css elsewhere on the site loads the iframe "animation_very_small.html":
<div id="animation_wrapper">
<div id="frameContainer">
<script type="text/javascript">
onload=function(){
var el1=document.getElementById("frameContainer")
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation.html\"></iframe>"
var el2=document.getElementById("frameContainer_medium")
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>"
var el3=document.getElementById("frameContainer_small")
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\"> </iframe>"
var el4=document.getElementById("frameContainer_very_small")
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\"> </iframe>"
}
</script>
</div>
<div id="frameContainer_medium">
</div>
<div id="frameContainer_small">
</div>
<div id="frameContainer_very_small">
</div>
</div>
Your time and assistance would be greatly appreciated.
Kind regards,
Byron
Okay, one of the other divs was causing an issue and after I added the height as suggested, it is working now. Thank you for your direction Mr Lister - feel free to add this as an answer if you want me to mark it for you.
In Chrome for Mac, one can "overscroll" a page (for lack of a better word), as shown in the screenshot below, to see "what's behind", similar to the iPad or iPhone.
I've noticed that some pages have it disabled, like gmail and the "new tab" page.
How can I disable "overscrolling"? Are there other ways in which I can control "overscrolling"?
The accepted solution was not working for me. The only way I got it working while still being able to scroll is:
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
In Chrome 63+, Firefox 59+ and Opera 50+ you can do this in CSS:
body {
overscroll-behavior-y: none;
}
This disables the rubberbanding effect on iOS shown in the screenshot of the question. It however also disables pull-to-refresh, glow effects and scroll chaining.
You can however elect to implement your own effect or functionality upon over-scrolling. If you for instance want to blur the page and add a neat animation:
<style>
body.refreshing #inbox {
filter: blur(1px);
touch-action: none; /* prevent scrolling */
}
body.refreshing .refresher {
transform: translate3d(0,150%,0) scale(1);
z-index: 1;
}
.refresher {
--refresh-width: 55px;
pointer-events: none;
width: var(--refresh-width);
height: var(--refresh-width);
border-radius: 50%;
position: absolute;
transition: all 300ms cubic-bezier(0,0,0.2,1);
will-change: transform, opacity;
...
}
</style>
<div class="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#inbox');
inbox.addEventListener('touchstart', e => {
_startY = e.touches[0].pageY;
}, {passive: true});
inbox.addEventListener('touchmove', e => {
const y = e.touches[0].pageY;
// Activate custom pull-to-refresh effects when at the top of the container
// and user is scrolling up.
if (document.scrollingElement.scrollTop === 0 && y > _startY &&
!document.body.classList.contains('refreshing')) {
// refresh inbox.
}
}, {passive: true});
</script>
Browser Support
As of this writing Chrome 63+, Firefox 59+ and Opera 50+ support it. Edge publically supported it while Safari is an unknown. Track progress here and current browser compatibility at MDN documentation
More information
Chrome 63 release video
Chrome 63 release post - contains links and details to everything I wrote above.
overscroll-behavior CSS spec
MDN documentation
One way you can prevent this, is using the following CSS:
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body > div {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
This way the body has never any overflow and won't "bounce" when scrolling at the top and bottom of the page. The container will perfectly scroll its content within. This works in Safari and in Chrome.
Edit
Why the extra <div>-element as a wrapper could be useful: Florian Feldhaus' solution uses slightly less code and works fine too. However, it can have a little quirk, when it comes to content that exceeds the viewport width. In this case the scrollbar at the bottom of the window is moved out of the viewport half way and is hard to recognize/reach. This can be avoided using body { margin: 0; } if suitable. In situation where you can't add this CSS the wrapper element is useful as the scrollbar is always fully visible.
Find a screenshot below:
You can use this code to remove touchmove predefined action:
document.body.addEventListener('touchmove', function(event) {
console.log(event.source);
//if (event.source == document.body)
event.preventDefault();
}, false);
Try this way
body {
height: 100vh;
background-size: cover;
overflow: hidden;
}
html,body {
width: 100%;
height: 100%;
}
body {
position: fixed;
overflow: hidden;
}
position: absolute works for me. I've tested on Chrome 50.0.2661.75 (64-bit) and OSX.
body {
overflow: hidden;
}
// position is important
#element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
Bounce effect cannot be disabled except the height of webpage equals to window.innerHeight, you can let your sub-elements scroll.
html {
overflow: hidden;
}