Hi I have been trying for the last hour to change the way the default scrollbar looks on browser.I am talking about the main scrollbar on the right not ading a new one and styiling it.I am using the jScrollPane plugin but it does not seem to work or I am not doing something right.Here is my code:
$("window").jScrollPane();
window
{
width: 100%;
overflow: auto;
}
window
{
height: auto;
}
If you go to the website that A.K. has linked, you will see the necessary Jquery and CSS for this to work. I have made them easier to understand for you.
$(function()
{
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function()
{
if (!isResizing) {
isResizing = true;
var container = $('#full-page-container'); //this should be the most parent
// div, right beneath the <body> and covering the entire page. Change the ID HERE.
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css(
{
'width': 1,
'height': 1
}
);
// Now make it the size of the window...
container.css(
{
'width': win.width(),
'height': win.height()
}
);
isResizing = false;
container.jScrollPane( //this is where outer scroll changes
{
'showArrows': true
}
);
}
}
).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#full-page-container').width() != win.width()) {
win.trigger('resize');
}
/*Internal scrollpanes. (Not needed if you want to change only the outer)
$('.scroll-pane').jScrollPane({showArrows: true});
*/
});
Now CSS:
html
{
overflow: auto;
}
#full-page-container
{
overflow: auto;
}
/*** Optional INNER scrolls.
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 200px;
}
***/
Don't forget to include Jquery, jscrollpane.css, mousewheel.js, jscrollpane.js
Related
What is the formula to check if the lowest part of the div is visible in the viewport?
It doesn't matter upper half is visible or gets hidden while scrolling the div
You can use IntersectionObserver to recognise if something is on screen. If you make a placeholder and magnetise it to the bottom of a parent div then you can make it possible.
But if you don't want to use IntersectionObserver API you can try getBoundingClientRect() + window.innerHeight like shown below:
const targetEl = document.querySelector('#target');
const windowsHeight = window.innerHeight;
// I heartily recommend to use some kind of throttling (lo-dash.throttle) here to reduce amount of callback executions
document.addEventListener('scroll', () => {
const bottom = targetEl.getBoundingClientRect().bottom;
if (windowsHeight > bottom) {
console.log('bottom is visible');
} else {
console.log('bottom is hidden');
}
})
/* All css are just for the demo, you only need a JS code */
body {
padding: 300px 20px;
}
#target {
height: 2000px;
width: 100%;
background-color: gray;
}
<div id="target">
content here
</div>
This is a common issue I have found on Mobile. I have been unable to find a solid answer yet.
I won't accept the following as they don't work completely (tested):
Adding the following to the body and html tags
This does work but causes the page to jump to the top. You can break it in Safari if you turn landscape and get the browser toolbar to show on scroll
.noScroll {
height: 100%;
overflow-y: hidden;
}
Adding the following to the body tag
This does work but causes the page to jump to the top.
.noScroll {
height: 100%;
overflow-y: hidden;
position: fixed;
}
A combination of JS and CSS
You can break it in Safari if you turn landscape and get the browser toolbar to show on scroll. This method solves the jump issue
.noScroll {
height: 100%;
overflow-y: hidden;
position: fixed;
}
var body = document.body,
lastTop = 0,
startScroll,
stopScroll;
startScroll = function () {
body.style.top = '';
body.scrollTop = lastTop;
};
stopScroll = function () {
lastTop = document.body.scrollTop;
body.className = 'noScroll';
body.style.top = '-' + lastTop.toString() + 'px';
}
I have tried other methods but they don't work either. You can disable touchmove on the body tag but it does not allow you to scroll anywhere e.g.
document.body.addEventListener('touchmove', function () { return false; });
Is there anything I can do.
A JS scrollbar is the only proper fix at the moment.
Cheers
Is any other alternative for full page scroll?
example of full page scroll
http://jscrollpane.kelvinluck.com/fullpage_scroll.html
step-1 make window width smaller by clicking Restore down button.
step-2 scroll to right
step-3 now, make window width bigger by clicking Maximize button.
now, page is left aligned
jQuery
$(function()
{
var win = $(window);
win.bind(
'resize',
function()
{
var container = $('#full-page-container');
container.css(
{
'width': 1,
'height': 1
}
);
container.css(
{
'width': win.width(),
'height': win.height()
}
);
isResizing = false;
container.jScrollPane(
{
'showArrows': true
}
);
}
).trigger('resize');
$('body').css('overflow', 'hidden');
if ($('#full-page-container').width() != win.width()) {
win.trigger('resize');
}
});
CSS
html
{
overflow: auto;
}
#full-page-container
{
overflow: auto;
}
The thing here is that jScrollPane adds jspPane a left:-***px when you scroll to the right. And never undoes the damage.
If you would add:
$('#full-page-container .jspPane').css('left', 'auto');
In your resize, it will work. Although I suggest you report a bug for jScrollPane guys as well.
I'm using CodeMirror 2 editor. The trouble is that I can't make it fullsize (100%; 100%). I added to the main style:
.CodeMirror {
height: 100%;
width: 100%;
}
And this doesn't work for me in any browser. Any ways?
I'm using the following code in http://jsbin.com to stretch the CodeMirror frame (note that JS Bin in particular stretches to half screen width, but the example code below does "fullscreen"):
.CodeMirror {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I don't remember whether CodeMirror adds the class by default, but if it doesn't, you'll also want to add it in the JavaScript (assuming you've not solved this already):
CodeMirror.fromTextArea('ID_OF_TEXTAREA', {
// .. some other options...
iframeClass: 'CodeMirror'
});
You can't do that with CSS, instead you can use JavaScript:
window.onload = function() {
var oTextarea = document.getElementById("myText");
var oParent = oTextarea.parentNode;
oTextarea.style.width = (oParent.scrollWidth - 30) + "px";
oTextarea.style.height = (oParent.scrollHeight - 30) + "px";
};
This will set the size of the textarea based on its parent size.
Added some "padding" but you can remove or reduce it.
html, body, .container, .subContainer, .CodeMirror {
height: 100%;
width: 100%;
}
Should work as well.
I implemented the Coda Slider tutorial successfully that is located here: http://jqueryfordesigners.com/coda-slider-effect/
The slider works great but I am getting a javascript error that I am not sure how to fix. The error says:
'0.offsetWidth' is null or not an object
coda-slider.js, line 19 character 3
Not sure how to fix it. Anyone have any ideas? Here is my js and css (don't think I need to upload the HTML but let me know if that helps).
JS (coda-slider.js)
// when the DOM is ready...
$(document).ready(function () {
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
// if false, we'll float all the panels left and fix the width
// of the container
var horizontal = true;
// float the panels left if we're going horizontal
if (horizontal) {
$panels.css({
'float' : 'left',
'position' : 'relative' // IE fix to ensure overflow is hidden
});
// calculate a new width for the container (so it holds all panels)
$container.css('width', $panels[0].offsetWidth * $panels.length); <------line 19
}
// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');
// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="/images/layout/navigation/scroll_left.png" />')
.after('<img class="scrollButtons right" src="/images/layout/navigation/scroll_right.png" />');
// handle nav selection
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('#slider .navigation').find('a').click(selectNav);
// go find the navigation link that has this target and select the nav
function trigger(data) {
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('ul.navigation a:first').click();
}
// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset. Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ?
$container.css('paddingTop') :
$container.css('paddingLeft'))
|| 0) * -1;
var scrollOptions = {
target: $scroll, // the element that has the overflow
// can be a selector which will be relative to the target
items: $panels,
navigation: '.navigation a',
// selectors are NOT relative to document, i.e. make sure they're unique
prev: 'img.left',
next: 'img.right',
// allow the scroll effect to run both directions
axis: 'xy',
onAfter: trigger, // our final callback
offset: offset,
// duration of the sliding effect
duration: 500,
// easing - can be used with the easing plugin:
// http://gsgd.co.uk/sandbox/jquery/easing/
easing: 'swing'
};
// apply serialScroll to the slider - we chose this plugin because it
// supports// the indexed next and previous scroll along with hooking
// in to our navigation.
$('#slider').serialScroll(scrollOptions);
// now apply localScroll to hook any other arbitrary links to trigger
// the effect
$.localScroll(scrollOptions);
// finally, if the URL has a hash, move the slider in to position,
// setting the duration to 1 because I don't want it to scroll in the
// very first page load. We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
});
CSS
#slider {
margin-left: 35px;
position: relative;
width: 875px;
}
.scroll {
position: relative;
width: 875px;
height: 268px;
overflow: auto; /* fix for IE to respect overflow */
background: #FFFFFF scroll 0;
}
.scrollContainer div.panel {
position: relative;
height: 210px;
width: 875px; /* change to 560px if not using JS to remove rh.scroll */
}
.scrollButtons {
position: absolute;
top: 115px;
cursor: pointer;
}
.scrollButtons.left {
left: -20px;
}
.scrollButtons.right {
right: -20px;
}
Figured it out. Stupid error on my part. I was including the coda-slider.js in the head that was delivered with every page and therefore every page that did not have the slider was displaying the error. Just took it out to include only on the page where the slider was displayed and fixed.