I have this strange bug
I have an div #page that I set to overflow :scroll, and i have the body with overflow:hidden because i want to prevent the pull down, and make the site feel like an "app"
html,body {
height: 100vh;
min-height: 100vh;
overflow: hidden;
}
#page {
overflow: scroll;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
pseudo page
<div #page>
<div .image>
<div .image>
<div .text>
<div .image>
<div .text>
</div>
inside the #page I have divs with images and text like in a long one-pager.
for some strange reason due to knows which conflict, when I scroll the #page it works well until I hover an image , not a text, contained in the page and in that case the scroll-wheel of my mouse wont scroll anymore. almost like the images overwrite the scroll.
I can't use pointer-events:none because of other reasons
add in your code
window.onscroll = () => {
window.scrollTo(0,0);
};
blocked the scroll
for reset:
window.onscroll = ()=>{
}
Related
I'm trying to replicate this overlay phone effect from this website:
https://www.beemit.com.au/
Basically, when you scroll down, the contents inside the fixed div (phone) also change.
I cannot grasp my head around the revealing effect created when you scroll down. I have only managed to create the fixed div and the various sections on the webpage.
Here's a simple version of the overlay-on-scroll.
There are 3 elements, the first image you want to be shown in the 'phone', the second image which gradually gets revealed and the footer element. They have different z-indexes so footer is behind both first and second and second is behind first.
The phone has a fixed position so it doesn't move on scrolling. The footer is placed relative to the body (or whatever container you have) just out of view at 100%.
We introduce a simple event listener on scrolling which tests whether there is an overlap between the footer and the phone. If there is then we set the height of the first image element to be its original height minus the overlap. This reveals the bottom part of the second element.
Without seeing your code I can't tell whether you need more sophistication (for example, you have to be aware of stacking contexts if your phone and footer are not in the same one).
const footer = document.querySelector('.footer');
const first = document.querySelector('.first');
const firstBottom = first.getBoundingClientRect().bottom;
const firstHeight = firstBottom - first.getBoundingClientRect().top;
function checkOverlay() {
const top = footer.getBoundingClientRect().top;
if ( top < firstBottom) {
first.style.height = firstHeight - firstBottom + top + 'px';
}
}
body {
width:100vw;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
.first, .second {
position: fixed;
top: 50%;
left: 50%;
border: 1px solid black;
width: 20vmin;
height: 30vmin;
overflow:hidden;
}
.first {
background-image: linear-gradient(magenta, pink);
z-index: 0;
}
.second {
background-image: linear-gradient(cyan, lime);
z-index: -1;
}
.footer {
width: 100%;
height: 50%;
background-image: linear-gradient(red,blue);
position: relative;
top: 100%;
z-index: -2;
}
<body onscroll="checkOverlay();">
<div class="first"></div>
<div class="second"></div>
<div class="footer"></div>
</body>
I am trying to follow the sample at https://quilljs.com/playground/#autogrow-height but have problems setting the height of the editor box and preventing the toolbar from scrolling off-screen.
My code is:
<div id="editorcontainer" style="height:10em; min-height:100%; overflow-y:auto;">
<div id="editor" name="editor" style="min-height:100%; height:auto;"></div>
</div>
<script>
var quill = new Quill("#editor",{
modules: {
toolbar: [ ... ]
},
scrollingContainer: "#editorcontainer",
theme: "snow"
});
</script>
The JS Filddle is available at https://jsfiddle.net/OldGeezer/xpvt214o/556844/
The output looks like this:
There are two problems:
The tool bar is not fixed and scrolls.
The vertical scrollbar has a scrollable region all the time, even when the editor is empty.
How do I solve these two problems?
I had to modify two of quill's classes to get what I wanted. Like so
.ql-container.ql-snow {
height: auto;
}
.ql-editor {
height: 150px;
overflow-y: scroll;
}
My solution was to add an additional encapsulating div with position:relative to establish the reference frame for ql-toolbar which is set to position:absolute.
The editorcontainer is then given a margin-top:3em to hold the toolbar (when it is short enough to fill a single row).
<div style="position:relative;margin-top:5em;">
<div id="editorcontainer" style="height:10em; min-height:100%;
overflow-y:auto;margin-top:3em">
<div id="editor" style="min-height:100%; height:auto;"></div>
</div>
</div>
<style>
.ql-toolbar { position: absolute; top: 0;left:0;right:0}
</style>
The working fiddle is at https://jsfiddle.net/OldGeezer/oLq2bnzv/
You will need to modify one of quill's class
.ql-container.ql-snow {
border: none;
height: 150px;
overflow: scroll;
}
For those who suffered from Angular quill in this question,
I suggest you should add this code in the style.css.
.ql-toolbar {
position: sticky;
}
.ql-container {
overflow-x:auto;
height: 300px; /* whatever you what */
}
The tool bar is not fixed and scrolls.
You can change the CSS of the toolbar like the following:
.ql-toolbar {
position: fixed;
top: 0;
}
The vertical scrollbar has a scrollable region all the time, even when the editor is empty.
You can lower the min-height of the editor so it's lower than the container (80% for example).
So I've started playing around with bigvideo.js (which is built on top of video.js) and it works fine for the basic usage of having a fixed background video over the whole screen. I have also managed to show it inside of a div.
My problem though, is that I can't seem to stack other DIVs with other content over or under the bigvideo.js container div, and I can't seem to figure out how to solve this.
My HTML:
<div style="float: left; width: 100%; height: 300px;">
<h1>hi there</h1>
</div>
<div style="float: left; width: 100%; height: 500px;" id="intro-video-container">
</div>
JS firing up bigvideo:
$(function() {
var BV = new $.BigVideo({container: $('#intro-video-container'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
So the video container div ALWAYS gets stuck up to the left top of the body, no matter if I try to force it down with margin-top, or place divs before it, etc.
Any ideas?
Update, here is an illustration of what I kind of what to achieve:
Try to use container div (so called wrapping) in your page where you will place the desired content (as on the plugin's example page):
CSS
.box {
background:#444; background:rgba(0,0,0,.6);
padding:20px;
border-radius:5px;
margin-bottom:20px;
}
.main {
position:relative;
margin:50px 50px 440px 220px;
min-width:300px;
-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.dimmed {
color: #ccc;
}
#big-video-wrap {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
HTML
<div id="big-video-wrap"></div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>Simple Ambient Video Example</h2>
</div>
</div>
JavaScript
$(function() {
var BV = new $.BigVideo({container: $('#big-video-wrap'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
EDIT:
Now, it is more clear what you are trying to achieve, the simplest solution is to include an iframe on place of the div, which points to your full-screen video page.
I.e. create page video.html with all initializations and plug-in includes, then use it as source of your iframe on main page. Your iframe can be styled to match the desired dimensions (for example 100% width and 300px height).
Portrait img contained within a div does not get it's height set correctly... in FF(27.0.1) only. Works with Chrome, and IE8.
I have the following:
html, body {
margin: 0;
border: 0;
padding:0;
width: 100%;
height: 100%;
overflow:hidden;
}
.photo-container {
position: absolute;
right: 0;
top: 0;
width: 79%;
height: 100%;
overflow-y: auto;
}
img#photo {
margin-top: 0.5%;
max-width: 100%;
max-height: 95%;
}
In the html...
<div class="photo-container">
<div id="pic"></div>
</div>
<script type="text/javascript">
function f_pop(theImg) {
document.getElementById('pic').innerHTML = "<img id='photo' src='" + theImg + "' alt='photo'>";
}
http://jsfiddle.net/isherwood/sFZgn
Notes:
The photograph is portrait orientation.
This works with Chrome and IE8, but not in FF 27.0.1
In the img#photo, I changed the height to 50%. Chrome and IE8
sized the photo down. In FF it was truncated (and required the div's scroll bar to move down).
I initially had this (without the photo-container) as a page in a frameset, that is the hierarchy was body, div id=pic. It worked in that design with FF.
I converted the frameset to a single page with two column (divs), the right side being the photo-container, and now it does not work in FF.
Your help is greatly appreciated.
Thanks.
You need to set a height on #pic:
#pic {
height: 100%;
}
http://jsfiddle.net/isherwood/sFZgn/2/
I solved this by removing the div around the img. (This is what I had in my frameset version, and I'm not sure why I added it to this 2 column div version).
Also changed the photo-container from a class to a id.
So the only change in the CSS is .photo-container becomes #photo-container.
The html
<div id="photo-container">
<img id="photo" src="default.gif" alt="photo">
<div id="blurb"></div>
<div id="contributor"></div>
</div>
The js
document.getElementById('photo').src = pic;
document.getElementById('blurb').innerHTML = blurb;
document.getElementById('contributor').innerHTML = contributor;
I have a menu on the highest zone of my web, but not on the top. I want that when the user scrolls the page it stays on the top, but only when it would disapear instead. If the title is visible i want the menu under it, on an apparent static position.
Is it possible without javascript, only with css? I see it on a website, but I don't remeber where.
Thank you in advance (and sorry for my ugly english!) ;)
I think this is what you are looking for: https://jsfiddle.net/QuVkV/2/
Here html structure:
<div id='wrapper'>
<div id='upper'>This is upper content</div>
<div id='position-saver'>
<div id='bar'>This is the menu bar</div>
</div>
<div id='lower'>This is some content lower than the menu bar</div>
</div>
This is the css :
#wrapper {
width: 100%;
height: 2000px;
}
#upper {
width: 100%;
height: 100px;
}
#position-saver {
height: 50px;
width: 100%;
}
#bar {
position: static;
height : 50px;
width: 100%;
}
And here is the javascript :
$(document).on('scroll', function(){
if ($('#bar')[0].offsetTop < $(document).scrollTop()){
$("#bar").css({position: "fixed", top:0});
}
if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
$("#bar").css({position: "static", top: 0});
}
});
I'm not sure but I've seen this type of thing on many site. One on 9gag.com
Anyway, you can use the position property of the css.
like this one: JSFiddle
#scroll-me{
width:100%;
height:100px;
background:#333;
position: fixed;
top:15px;
}
The position:fixed with top:15px of the scroll-me div makes it always 15px on top