I'm working on a div that overflows with a scroll. The expected behavior is when the scroll-able div is focused via clicking on the div or clicking on the scroll bar, keyboard commands will be enabled (i.e. cursor keys, page up page down etc.). Here's some sample test code:
<html>
<head>
<script type="text/javascript">
function handle() { console.log("fired"); };
</script>
</head>
<body>
<div style="width:200px; height:500px; overflow-y: scroll; border: 1px solid gray;" onscroll="handle()">
<div style="width:150px; height:2000px;"> </div>
</div>
</body>
</html>
This will work on IE, Chrome, Safari. But for Firefox, the keyboard actions are only activated when clicking on the div, NOT the scroll bar itself, so this is the problem.
Apparently making the div tab-able solves the problem! I simply added tabindex="0" attribute and in Firefox clicking on the scroll bar will now enable keyboard controlls.
Related
I have a problem with iOS browsers
This is starter conditions:
- We have a simple html page and it contains iframe
- iframe also contains simple html page with form
- iframe haven't scroll and it sizes is fixed
Bug:
Now, if we will open this page on iPhone(from Chrome/Safari browser) and start fill form,
then in some moment when text printing, page scroll down by itself
This is example link
<div id="container">
<iframe src="https://www.w3schools.com/php/demo_form_validation_complete.php" frameborder="0"></iframe>
</div>
Why is this happening? How to prevent these automatic "jumps" of the page?
This might work:
HTML:
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div>
CSS:
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* important: dimensions or positioning here! */
}
.scroll-wrapper iframe {
/* nada! */
}
Source: https://davidwalsh.name/scroll-iframes-ios
I'm trying to have a basic HTML page, split three way, top and bottom panes should have a fixed fix, or autosize, and middle should fill the remaining.
I got it working once using position:fixed, but that is very ugly and doesn't work once things get more dynamic.
I finally got this to work on Chrome using tables and making the height:100% in the middle tr. I celebrated, then tried Firefox, and it does not work.
Here is the fiddle,
https://jsfiddle.net/b1uxcupv/6/
HTML is basically,
<html style="height:100%;width:100%;max-height:100%">
<body style="height:100%;width:100%;">
<table style="height:100%;width:100%;">
<tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
<tr><td style="height:100%;width:100%;background-color:grey">
<div style="overflow:auto;height:100%">
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
</div>
</td></tr>
<tr><td style="height:50px;width:100%;background-color:green"></td></tr>
</table>
</body>
<html>
I have basically two versions of this, one the page should fill the browse window with the middle pane taking all the extra room and scrolling if required.
The second is basically the same but the whole thing is in a fixed sized div inside a page. Both work on Chrome, but Firefox does not give the scrollbar in the middle pane, it just ignores the max-size and keeps filling the page.
Here's probably the easiest, modern way of handling it.
HTML
<div class="container">
<div class="head"></div>
<div class="mid"></div>
<div class="foot"></div>
</div>
CSS
.container {
display:flex;
flex-direction:column;
height:100vh;
width:100%;
}
.head {
background:blue;
min-height:100px;
}
.mid {
background:#eee;
overflow:auto;
flex-grow:1;
}
.foot {
background:green;
min-height:100px;
}
Okay I found a solutions... but is requires JavaScript, which I am finding required to layout things correctly in a web app, CSS really needs to support dynamic web app layouts better.
Here it is,
https://jsfiddle.net/b1uxcupv/15/
<html style="width:100%;height:100%;">
<body style="height:100%;width:100%;padding:0;margin:0">
<table style="height:100%;width:100%;">
<tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
<tr><td style="height:100%;width:100%;background-color:grey">
<div id="scroller" style="max-height:100px;overflow:auto;height:100%">
xxblah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
</div>
</td></tr>
<tr><td style="height:50px;width:100%;background-color:green"></td></tr>
</table>
<script>
var scroller = document.getElementById('scroller');
console.log(scroller);
console.log(scroller.parentNode);
console.log(scroller.parentNode.offsetHeight);
scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
var reset = true;
window.onresize = function() {
console.log(scroller.parentNode.offsetHeight - 4);
scroller.style.maxHeight = "100px";
if (reset) {
reset = false;
setTimeout(function() {
reset = true;
scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
}, 100);
}
};
</script>
</body>
Basically I set a max-height on the middle scroller to something smallish (100px) then is JavaScript resize the maxHeight to the parent's offestHeight, and register for resize events.
Perhaps not pretty, but it works Chrome, Firefox, IE, and Safari.
I still think there must be a css solution that does not require JavaScript or position:fixed, and works on more than just Chrome. Anybody got an idea?
Thanks for the users who submitted answers, they were good attempts, but did not fill the window, or used static fixed positions.
Based on this SO and this SO, it seems like <td> does not support the overflow attribute. Placing a <div> within the <td>, and also setting a fixed height for the <td> but a height:100% for the <div> got it working for me. Any tag with an overflow attribute should either have a fixed height or be nested within another tag with a fixed height.
Here is my fiddle that works in Chrome and Firefox: https://jsfiddle.net/rgutierrez1014/b1uxcupv/13/
I would like to scroll the page to the top of the e.g. navigation div ID when clicking either any of the links inside the navigation div ID or (if possible) when clicking anywhere into the div ID itself containing the navigation links.
I have researched this and the closest I have come to is jQuery - How to scroll an anchor to the top of the page when clicked? however for some reason it does not seem to work when I try to do this in my example. What am I doing wrong?
I am new to jQuery and medium at html and css (and used inline styling of the divs since I did not want to supply a separate css just for the example).
When I load the html and script from jQuery - How to scroll an anchor to the top of the page when clicked? in Aptana it also does not scroll. Even with a content div above the div class work so that there is space to scroll to at all.
I have included two little paragraphs inside the concerning divs to explain exactly what I mean.
Any help is very much appreciated. Thank you.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#scroll_navigation ul li').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
</script>
<body>
<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>
<div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">
<p>Scroll navigation to top of page</p>
<p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>
<div id="navigation">
<div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">
<ul>
<p>Catch clicks on anchors to scroll the div id to the top of the page</p>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>
</body>
EDIT
Beware this when using scrollTop in Firefox.
Animate scrollTop not working in firefox
jQuery scrollTop - no support for negative values in Mozilla / Firefox
Took me a while to figure out my code was fine but scrollTop was this issue in FF. In this same example the behaviour can also be observed. When scrolling down and making the anchors fixed, FF will scroll up to random positions either 2-4px before or after the target div.
I am now using Scrolld.js to achieve pixel perfect scrolling to the desired points across major browsers. I don't understand how different browser engines can render such a common thing as scrollTop from different (either html or body) inputs as far as I understand and I am new to jQuery. Guess this is not "the fault" of jQuery but how the browser engines render scrollTop.
I dont know if you did, but you have to include jquery to use it.
Another thing would be, that your "click listener" has to be in jqueries document ready function like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#scroll_navigation ul li').on('click', function(){
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
});
</script>
I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.
Please no jQuery - only JavaScript or better yet simply CSS
You can see the problem here: Try to resize div.
I have a series of div tags that have dynamic content and need to be re-sizable by users. When the inner content has a hover event,it grabs the event and the user can't re-size. The dynamic content can be any size -usually bigger than the outer div. I'd love to solve this with css, but adding padding or margins to the outer div does not seem to help. This only has to work on latest Firefox and Chrome. This is not the exact code, but it's show the problem - at least in FireFox:
<head>
<style>
#inner:hover {
display:block;
color:#FF00FF;
background-color:grey;
width:500px;
height:400px;
}
</style>
</head>
<div id="outer" style="resize:both;width:20px;overflow:hidden;">
<div id="inner" style="width:90px;height:90px;">
foobar<br>
foobar<br>
foobar<br>
foobar<br>
foobar<br>
foobar
</div>
</div>