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;
}
Related
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 = ()=>{
}
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).
which is positioned 113px from the top, to be on top when users are scrolling the page.
I know there is a similar question, but I am not sure where to put the js code. (Yes I am a newbie)
Old question:
How to "fixed" menu only when it get to the top?
Let me know if you want to see an example.
Best regards
Carsten
Here's an example on how to do this: http://jsfiddle.net/andunai/9x74vkvw/
I've also wrapped .menu into a .menu-placeholder div to reserve place for menu prevent page from "jumping" when it changes state.
You'll need 2 CSS definitions for your menu: .static and .fixed. Here's the example CSS:
.menu {
width: 100%;
margin: 0px 10%;
display: block;
}
.menu.floating {
position: fixed;
top: 0;
left: 10%;
width: 10%;
}
Well, you can put you code in page head like:-
<html>
<head>
<script>
$(document).ready({
$(window).on('scroll', function(){
// instead of 113 use the scrollTop when the element touches the top of the window
if($(window).scrollTop()>=113){
$(element).css('position', 'fixed');
}
else $(element).css('position', 'relative');
});
});
</head>
<body>
// your stuff goes there.
</body>
</html>
You don't need JS for this just use:
#idOftheDiv
{
position:fixed;
top:113px;
}
in your CSS.
I am using the great jquery plugin jtable.
But I can't find any examples showing a vertical scrollbar.
I tried setting a height and overflow.auto on the div that contains it - the scrollbar then scrolls the whole table including header - I only want to scroll the rows not the header and not the footer.
Has anyone found a way to do this?
A solution that works some way is inserting:
$('.jtable').wrap('<div class="jtable-main-container scroll-content" />');
and
.scroll-content {
overflow-y: auto;
width:100%;
}
div.jtable-main-container {
height:100%;
}
And setting height on the div.
However it also scrolls the table header - but it is better than scrolling the whole jtable - I tried to make a solution where jtable generates 2 tables - one with header and one with body but the header gets out of sync.
see it here: http://jsfiddle.net/j5Q4L/3/
$('.jtable').wrap('<div class="jtable-main-container scroll-content" />');
and
.scroll-content {
overflow-y: auto;
width:100%;
}
div.jtable-main-container {
height:100%;
}
Thank you!
<style type="text/css">
#StudentTableContainer {
width: 100%;
display: block;
}
#StudentTableContainer tbody, .jtable tbody {
height: 100px;
overflow-y: auto;
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#StudentTableContainer').jtable({
//...
});
});
</script>
<div id="StudentTableContainer" class="jtable"></div>
Add this to css
table.jtable{
overflow-y: scroll;
display:block;
overflow-x: hidden;
}
I'm using jquery jscrollpane plugin http://jscrollpane.kelvinluck.com/ in my web application. I want to use it to scroll only in horizontal position.
Like shown here http://jscrollpane.kelvinluck.com/basic.html
Here is my html:
<div class="addbox horizontal-only scrollpane">
<h4><span class="addbox-text">Pick your best work from <b class="highlight-text">Flickr</b> to display in your portfolio</span></h4>
<div class="addmenu-item"><span class="addmenu-image"><img class="addmenuimage" src="http://farm8.staticflickr.com/7122/7424355198_72620895bd_m.jpg"></span><span class="addmenu-info">Orchid Profiles</span></div>
<div class="addmenu-item"><span class="addmenu-image"><img class="addmenuimage" src="http://farm8.staticflickr.com/7122/7424355198_72620895bd_m.jpg"></span><span class="addmenu-info">Orchid Profiles</span></div>
</div>
CSS:
.scroll-pane
{
height: auto;
max-height: 400px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 200px;
}
JQuery:
$(".addbox").jScrollPane();
But it is not working ( the height is messing up and jscrollpane is in the vertical position ). Here is the css for the rest of the code https://gist.github.com/2984404
Thanks!
UPDATE
Please check this jsfiddle http://jsfiddle.net/cWcWb/
It is because the width of your .addbox is enough to show all the content without scroll (700px).
Try changing it to 400px for example and you will see the horizontal scroll will appear