How to enable SlimScroll when reach max height - javascript

I am using slim scroll for a div. I want show the slim scroll only when the content of the div reach the max-height of the div. Is there any way i can achieve this?
$('#main-table-body').slimScroll({
height: '66px',
width: '100%',
size: '10px',
alwaysVisible: true,
distance: '7%'
});
Like this I have added slim scroll to the div.Div have a static height 66px. And content are getting added to the div dynamically. When content reach the max space in the div only slim scroll need to be showing. Otherwise don't need.

Related

Disable automatic height from jQuery draggable

I have a Div with some prestyle that includes height: 100%
If I add jQuery draggable to the div, and moves it around it sets a fixed height on the div.
How can I disable the fixed height so it still works with the height from my stylesheet?
$('.DTable').draggable({
heightStyle: '100%'
}).draggable({
containment: "window",
});
use a parent element in your css
.parent .DTable {height:100px;}
or use the !important on the hight
.DTable {height:100px!important;}

ScrollTo post Offsettop

I have a position:fixed; menu on top of my page with a height of
175px. I used the code from scrollTo but the scroll effect puts the
chosen container on the top of the page, behind my menu.
How can I assign margin-top: 175px; to the scrollTo code, so it shows up
underneath the menu <div>?
JSfiddle
You can use the offset option of jQuery.scrollTo, e.g.
$.scrollTo(scroll, {
duration: 500,
axis: 'y',
offset: {top: -175, left: 0}
});
In your particular case you'll have to make some calculations in your scroll() function as well.
Check this JSFiddle

Hide default browser scroll bar without overflow:hidden when using Perfect Scrollbar

I'm using "perfect scroll bar" on my web page. To hide the default browser scroll bars it adds "overflow:hidden". (http://noraesae.github.io/perfect-scrollbar/)
I'm also using Jquery Sortable in the scrollable section. (http://jqueryui.com/sortable/)
The overflow hidden needed for perfect scroll is a barrier for sortable. When I drag a div it won't scroll down as needed because overflow is hidden. ( But when you scroll with the mouse wheel it will scroll ).
When I removed overflow:hidden the default scrollbar AND the perfect scroll bar shows. (Both of them work as expected)
So, how do I visually hide the scrollbar so that the overflow is not hidden but only the scrollbar is just not visible.
You can enclose your entire page inside a div whose height and width are equal to that of the window and then apply the perfect scroll bar on that div.
HTML:
<div class="body">
<!-- page content -->
</div>
JS
$(".body").css({
"width": $(window).width() + "px",
"height": $(window).height() + "px"
});
The short answer here, is that without using overflow: hidden you're not going to be able to hide the scrollbars.
While webkit browsers do support ::-webkit-scrollbar, ::-webkit-scrollbar-button, ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner and ::-webkit-resizer in your CSS, targeting other browsers will be difficult.
A possible "hack" could be wrapping your content in a div with the same size as the window, applying PerfectScrollbars to said div, and placing your jQuery Sortable content inside a child div.
You can try this
HTML
<body>
<div id="scroll">
//Your all content
</div>
</body>
CSS
body{
overflow: hidden;
}
#scroll{
position: relative;
margin: 0px auto;
padding: 0px;
width: auto;
height: auto;
}
JS
$(window).resize(function(){
$("#scroll").css({
"width": $(window).width() + "px",
"height": $(window).height() + "px"
});
});
const ps = new PerfectScrollbar('#scroll', {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
ps.update();

use browser default scrollbar on jquery ui modal dialog

Is it possible to use jquery ui's dialog, and span it across the full browser height?
Then, if there is extra page, use the browser default scrollbar to go up and down, freezing the rest of the page behind the overlay?
$(function()
{
$('#category_modal').dialog({
autoOpen: false,
title: 'hello',
modal: true,
height: auto,
width: 500,
resizable: false
});
});
Not using the default dialog. You can make the dialog 100% height/width and "overflow" text scrollable using CSS. Your dialog would look something like this in CSS:
#dialog_box {
width: 100%;
height: 100%;
overflow-y: scroll;
}
You could also put an iFrame within the dialog if you wanted. However, this is no way to completely "Freeze" what is in the background. The user can always select the background and use the mouse-wheel or simply use the browser's scroll bar. Using overflow-y will create a 2nd scroll bar on the edge of the dialog that will scroll the content within (should you need to).

Incorrect displayed width for JQuery UI button

A common way to create a button to access another page (i.e. link) using JQuery-UI is the following:
<div id="hb">
<form action="index.html"><input type="submit" value="Home" id="but_hb"></form>
</div>
In order to set the width and layout, one can do:
$('#but_hb').button().css({ width: 70 });
$('#hb').css({
textAlign: 'center',
width: 70,
top:0,
left:0,
position:"absolute"
});
My question is: why is the displayed width only 68 pixels? How to solve this?
See here for a replication of the issue.
Add additional styles to your button, your OS (or possibly a plugin) is styling it for you. Add a background:"#f00" and border:"none" to the CSS then remeasure.
$('#hb').css({
textAlign: 'center',
width: 70,
top:0,
left:0,
position:"absolute",
background:"#f00",
border:"none"
});
In Firefox 9, the actual width is 64px and the border is 3px on the left and 3px on the right, totaling the intended visible width to 70px. You always have to take the border and padding into account. Padding will expand the element's width. See The CSS Box Model
70px -2Xborder. The border will depend on your browser unless you define it yourself. Box Model

Categories

Resources