Develop Reference

Quill: How to prevent toolbar from scrolling and set the height?

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).

bigvideo.js - stack DIVs over and under bigvideo container

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).

Check if element can be scrolled to the left or right

I would like to display indicators for a certain div to show that it can be scrolled right or left depending on its state. To do so I would need to know if element can be scrolled to respective positions, e.g. if there is content to be seen on the right show indicator and after scrolling show another indicator on the left to indicate that users can now scroll there as well. I have a simple setup like this one: https://jsfiddle.net/udv8u596/
(You can scroll horizontally, scrollbar is hidden intentionally)
HTML:
<div class="scroll-container">
<div class="scroll-content">
Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally
</div>
</div>
CSS:
.scroll-container {
width: 80%;
margin: 0 auto;
background: cyan;
overflow-y: hidden;
height: 36px;
}
.scroll-content {
padding: 10px 0;
height: 50px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}

To check if an element is overflowing along the x-axis, you can simply compare its computed width, accessible via jQuery's .width() method, and its scrollWidth, a native JS function:
var $ele = $('.scroll-content'),
overflowing = $ele[0].scrollWidth > $ele.width();
You can then check the boolean value of overflowing if the element is overflowing or not. However, note that if you want this variable to be updated if the window resizes, a little more work has to be done:
var $ele = $('.scroll-content'),
overflowing = function() {
if($ele[0].scrollWidth > $ele.width()) {
return true;
} else {
return false;
}
};
console.log(overflowing());
$(window).resize(function() {
console.log(overflowing());
});
Here's a fiddle with the above logic implemented, with some slight modifications: https://jsfiddle.net/teddyrised/udv8u596/5/

Ilya basically you need to check your element right postion. On way of achieving this is to set the inner element to have absolute oistion and get right postion with jQuery
parseInt($('.scroll-content').css('right')) >= 0
I have modified you code as: https://jsfiddle.net/udv8u596/4/
In this example before animating the element it checks if the righ position is bigger than 0.
Please not that righ position is calculated based on the parent element. Left position is set to be 0 in the css but righ postion will be calculated in this example is ~-250.
I hope this gives you an idea how to solve your problem.

Here's a quick start for what you are looking for :
HTML
<div class="scroll-container">
<div class="mask">
<div class="scroll-content">
Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally
</div>
</div>
</div>
<div class="scrollRight">Scroll Right »</div>
<div class="scrollLeft">» Scroll Left </div>
CSS
.scroll-container {
width: 80%;
margin: 0 auto;
background: cyan;
overflow-y: hidden;
overflow-x: hidden;
height: 36px;
}
.mask{
position:relative;
overflow-x: hidden;
overflow-y: hidden;
height: 36px;
width: 100%;
}
.scroll-content {
position:absolute;
padding: 10px 0;
height: 50px;
white-space: nowrap;
overflow-x: visible;
width:auto;
}
.scrollRight, .scrollLeft{
font-size:10px;
display:none;
}
JS
var contentWidth = $(".scroll-content").width();
var containerWidth = $(".scroll-container").width();
if(contentWidth>containerWidth){
$(".scrollRight").show();
}
$("body").on("click", ".scrollRight", function(){
var scrollValue = contentWidth-containerWidth;
$(".scroll-content").animate({"margin-left":"-"+scrollValue+"px"});
$(".scrollRight").hide();
$(".scrollLeft").show();
})
$("body").on("click", ".scrollLeft", function(){
var scrollValue = contentWidth-containerWidth;
$(".scroll-content").animate({"margin-left":"0px"});
$(".scrollRight").show();
$(".scrollLeft").hide();
})
See Update JSFiddle

jScrollPane not working for full page scrallbar

i'm trying to implement jScrollPane in my whole page to change scrollbar of page,but it doesn't working.
my code is as css:
html,body {
height: 100%;
width: 100%;
overflow: hidden;
}
#main-wrap {
height: 100%;
}
jquery:
jQuery(document).ready(function ($) {
"use strict";
$('#main-wrap').jScrollPane();
});
and html:
<div id="main-wrap">
all other contents...
</div>
and all the things that are given in the jScrallPane.
the problem is:
scrollbar appears but the page doesn't scroll directly with pinch scroll or mouse scroll.
please help and thanks in advance.

did you try to specify a width for #main-wrap in css
#main-wrap{
width:400px;
overflow:auto;
}

div at bottom of the page?

How to show a div.bottom of some 100px height at the bottom of the page. If the content height is less than window's height, div.bottom will be shown at the bottom of the window. If the height of the content is greater than window's height it will be shown at the bottom of the page.

Do you need something like this?
<div style="position:absolute; bottom:0;">Hi</div>
http://jsbin.com/ayaqo4

What you're talking about is called a sticky footer, and it can be done with just html and css. The basic idea is to use a wrapper with heights: 100% and a negative margin to move it above the very bottom. Stole the code snippet from here and here:
<body>
<div class="wrapper">content here!
<div class="push"></div>
</div>
<div class="footer">footer content</div>
</body>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}

This is my personal favorite for sticky footers:
http://www.cssstickyfooter.com/

You need to use css,
div.pos_fixed_footer{
position:fixed;
bottom:0%;
right:0px;
background:transparent url(../img/bg_header.png) repeat scroll center top;
width:100%;
height:40px;
}
and then call in your script like this
<div id="pos_fixed_footer"><?php include "footer.html"; ?></div>

I think you mean a footer that is in the bottom of the window only if the content doesn't overflow the window, otherwise it has to go down on the page.
Just implement the code from here http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page