We Keep Coding

Alternative for scrolling on MacOS

All Macs have this option to show scrollbars but it is turned off by default.
I was wondering if there is a way to show scrollbars even if this option is turned off?
Or is there some sort of alternative (JS/jQuery) that I could use that just puts in an arrow and triggers some sort of scrolling function?
Basically something that would work to scroll without technically having a scrollbar.
Edit
As suggested I've started looking into the scrollTop() function in jQuery. Is there a way to get the current_position variable to get where the scrollbar should be?
$(document).ready(function(){
// var current_position = $("#container").get_current_position();
$("#up").bind("click", function(){
$("#container").scrollTop(current_position - 100);
});
$("#down").bind("click", function(){
$("#container").scrollTop(current_position + 100);
});
});
#container{
width:200px;
height:200px;
padding:20px;
background-color:#e33;
overflow:hidden;
}
#inner{
width:200px;
height:1000px;
background-color:#33e;
}
#up,#down{
width:240px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="up">
Up
</button>
<div id="container">
<div id="inner">
</div>
</div>
<button id="down">
Down
</button>

There are libraries (e.g. https://www.jqueryscript.net/other/iOS-Style-Custom-Browser-Scrollbar-with-jQuery-CSS.html) which add custom scrollbars to pages by js, but you should really question this idea since you are changing the default usability behavior of the browser.
If you just want a button to scroll you can easily implement this e.g. with jquery. See: https://api.jquery.com/scrollTop/#scrollTop2
You can use scrollTop without parameter to get the current scroll position on the page, and if you need you can additional read out the pageheight ($(document).height();) and the viewport height ($(window).height();) in order to calculate the percentage of the page which is shown and where the actual position is relative to the content. See http://api.jquery.com/height/

The closest thing you can get to the scrollbars always being on is using CSS to style the scrollbar.
It won't work in all browsers though

This code does what I want it to do now:
$(document).ready(function(){
$("#up").bind("click", function(){
var current_position = parseInt($("#container").scrollTop());
$("#container").scrollTop(current_position - 100);
});
$("#down").bind("click", function(){
var current_position = parseInt($("#container").scrollTop());
$("#container").scrollTop(current_position + 100);
});
});
#container{
width:200px;
height:200px;
padding:20px;
background-color:#e33;
overflow:hidden;
}
#inner{
width:200px;
height:1000px;
background-color:#33e;
}
#up,#down{
width:240px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="up">
Up
</button>
<div id="container">
<div id="inner">
</div>
</div>
<button id="down">
Down
</button>
<br />

How do I make a dynamic sticky toolbar without weird scroll glitch when page is slightly longer than page height?

I have the following code to move a toolbar that is below a header to stick to the top of the viewport when scrolling down. The problem is when the height of the content is slightly higher than the viewport. When you attempt to scroll to the bottom, it bounces back up to just above the end of the content with a weird visual glitch. It probably has to do with the fact that when the 'sticky' class is added, it increases the height of the page, but I'm not sure how to remedy it.
Javascript/JQuery:
var enableSticky = () => {
let headerHeight = $('.toolbar').offset().top;
$(window).scroll(() => {
if ($(window).scrollTop() > headerHeight) {
$('.toolbar').addClass('sticky');
} else {
$('.toolbar').removeClass('sticky');
}
});
};
CSS:
.toolbar {
width: 100%;
height: 84px;
position: relative;
}
.toolbar.sticky {
background-color: rgba(255,255,255,0.9);;
position: fixed;
top: 0;
z-index: 5;
margin-bottom: -84px;
}
HTML:
<div id="bcmMain" style="display: block;">
<h1 id="event-title"><span class="view-table-value" data-field-name="mopId">927</span> - <span class="view-table-value" data-field-name="subject">Sample Subject</span></h1>
<div class="toolbar">
<div class="status-toolbar-group toolbar-group">
<a class="button" id="level-button">Level <span class="view-table-value" data-field-name="level">3</span></a>
</div>
<div class="toolbar-group">
<a class="button" id="status-button">Status: <span class="view-table-value" data-field-name="status">complete</span></a>
<a class="button" id="pending-button">Mark Pending</a>
</div>
<div class="edit-toolbar-group toolbar-group">
<a class="button" id="submit-changes-button">Submit Changes</a>
<a class="button" id="cancel-changes-button">Cancel Changes</a>
</div>
<div class="toolbar-group">
<a class="button" id="edit-button">Edit</a>
<a class="button" id="clone-button">Clone</a>
</div>
</div>
<div id="edit-details">
<!-- CONTENT HERE -->
</div>
</div>
I've tried doing if ($(window).scrollTop() > headerHeight + 100) to see if allowing further scrolling before the it adds the sticky class, but it just changes the height at which the window is at when the glitch occurs.
What can I do to improve the code to get rid of this glitch?
EDIT: Added HTML. I tried to include just the relevant HTML, but let me know if anything else is needed. Thanks!
NOTE 1: This is embedded in a Confluence page. Confluence page header is hidden, but not the Confluence website header or the sidebar. See the below images to see what I'm talking about. Both images are at the top of the viewport at different scroll points.
Image of Not Sticky
Image of Sticky
NOTE 2: Not sure if this is important... data is pulled from a database via API to fill the fields on this page.

Not entirely sure I get what you mean, but I think you're referring to the 'bounce' of the content caused by removing the toolbar from the flow of the page.
The content always bounces the distance of the height of the toolbar regardless of the height of the content in relation to the viewport, but maybe it's more apparent then because you see the bottom of the content bounce as well as the top.
Anyway, if that is what you're referring to, I think this is your fix:
.toolbar.sticky {
position: fixed;
top: 0;
background-color: rgba(255,255,255,0.9);
}
.toolbar.sticky + #edit-details {padding-top:84px;}
I removed z-index:5; and margin-bottom:-84px; because they weren't doing anything.
Instead I added the .toolbar.sticky + #edit-details {padding-top:84px;} rule.
What this does is, it adds padding-top to the #edit-details that directly follows the .toolbar.sticky (that's what the + is for, read about it here). In other words; the padding-top of the content is dependent on the toolbar having the sticky class.
So when the .sticky class is added to the toolbar - and thereby 84px is removed from the flow of the page (which caused the 'bounce') - that same 84px is added again just before the content in the form of padding, causing the content to stay at exactly the same place.
When the .sticky class is removed again, the padding is removed again too.
- The padding-top should have the same value as the toolbar height.
I also removed position:relative; from .toolbar, because again, it wasn't doing anything.
You can test it below in the code snippet, though it may be easier to test in the jsfiddle, because there you can adjust the height of the viewport.
$(document).ready(function() {
let headerHeight = $('.toolbar').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > headerHeight) {
$('.toolbar').addClass('sticky');
} else {
$('.toolbar').removeClass('sticky');
}
});
});
.toolbar {
width: 100%;
height: 25px;
border-bottom: 2px solid blue;
}
.toolbar.sticky {
position: fixed;
top: 0;
background-color: rgba(255,255,255,0.9);
}
.toolbar.sticky + #edit-details {padding-top:25px;}
/*ONLY FOR VISUAL STYLING*/
.toolbar-group {margin-right:5px; float:left;}
.toolbar-group a {float:left; padding:1px;}
.toolbar-group .button {background:lightblue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bcmMain" style="display: block;">
<h1 id="event-title"><span class="view-table-value" data-field-name="mopId">927</span> - <span class="view-table-value" data-field-name="subject">Sample Subject</span></h1>
<div class="toolbar">
<div class="status-toolbar-group toolbar-group">
<a class="button" id="level-button">Level <span class="view-table-value" data-field-name="level">3</span></a>
</div>
<div class="toolbar-group">
<a class="button" id="status-button">Status: <span class="view-table-value" data-field-name="status">complete</span>|</a>
<a class="button" id="pending-button">Mark Pending</a>
</div>
<div class="edit-toolbar-group toolbar-group">
<a class="button" id="submit-changes-button">Submit|</a>
<a class="button" id="cancel-changes-button">Cancel</a>
</div>
<div class="toolbar-group">
<a class="button" id="edit-button">Edit|</a>
<a class="button" id="clone-button">Clone</a>
</div>
</div>
<div id="edit-details">
content - first<br>content - second<br>content - third<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content - forelast<br>content - last<br>
</div>
</div>
jsfiddle: https://jsfiddle.net/nd9etLjy/1/
I added some CSS to style the toolbar, this is not important for functionality.
I also changed your arrow-functions to regular ones, because I couldn't get the arrow-functions to work, but that's most likely due to my inexperience with them.

Cannot get push menu inline with Bootstrap

I'm using Bootstrap as UI framework, what I'm trying to do is make a push menu on the left. Actually, I almost achieve this result, but there are some bugs on the system. In particular, I'm not able to get the menu inline. See the code for more details:
HTML
<div id="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div id="resource-bar" class="sidenav col-sm-2">
<h4>Resource</h4>
<div class="input-group">
<input type="text" placeholder="Search resource"
class="form-control resource-filter"/>
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div id="popover-content" hidden></div>
</div>
<div id="calendar-container" class="col-sm-10">
<div id="calendar" class="well"></div>
</div>
</div>
</div>
</div>
<br><br><br>
<button type="button" id="show" >Show</button>
<button type="button" id="hide" >Hide</button>
Note that the html above is adapted for a fiddle example.
CSS
.sidenav
{
background-color: azure;
height: 100%;
width: 0;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
}
#calendar-container
{
background-color: whitesmoke;
transition: margin-left .5s;
padding: 16px;
}
JS
$(document).ready(function()
{
var resourceContainer = $('#resource-bar');
var calendarContainer = $('#calendar-container');
$('#show').click(function()
{
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '250px');
});
$('#hide').click(function()
{
resourceContainer.css('width', '0px');
calendarContainer.css('margin-left', '0px');
});
})
The result when the menu on the left is closed:
Seems that both divs are inline, the problem occurs when I press show button and the menu appears:
BUG actually noticed:
When the menu is opened I get the divs in two line instead of one row
Adding the class col-sm-2 to resource-bar the overflow-x: hidden; doesn't working, in fact, seems that the menu is visible when it should be closed.
col-sm-2 does not go in another line when the minimum resolution of the screen doesn't have enough space in width.
Someone could help me to fix this issues? Thanks. JSFIDDLE.

Edited to another workaround which wouldn't affect bootstrap grid:
With this setup sidebar would be absolute, since it's out of viewport and you set it to a fixed width (250px), using the grid wouldn't be necessary.
Visible input will not overflow once sidebar shows.
Raised buttons above sidebar.
Note the HTML structure was tweaked.
$(document).ready(function() {
var resourceContainer = $('#resource-bar');
var calendarContainer = $('#calendar-container');
$('#show').click(function() {
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '250px');
});
$('#hide').click(function() {
resourceContainer.css('width', '0px');
calendarContainer.css('margin-left', '0px');
});
})
div.sidenav {
background-color: azure;
height: 100%;
width: 0;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
/* added absolute to sidenav since it will have fixed width anyways */
position: absolute;
}
#calendar-container {
background-color: whitesmoke;
transition: margin-left .5s;
padding: 16px;
/* this is just to vertically align with sidebar input */
padding-top: 36px;
}
button {
position: relative;
z-index: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div id="calendar-container" class="col-sm-12">
<div id="calendar" class="well"></div>
</div>
<div id="resource-bar" class="sidenav">
<h4>Resource</h4>
<div class="input-group">
<input type="text" placeholder="Search resource" class="form-control resource-filter" />
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div id="popover-content" hidden></div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<button type="button" id="show">Show</button>
<button type="button" id="hide">Hide</button>

You're issue lies with the mix of bootstrap and your own JavaScript generated style. It seems you already have knowledge of the Bootstrap Grid layout, but to reinforce, https://v4-alpha.getbootstrap.com/layout/grid/ will tell you that there are 12 columns in a row.
Each column is styled by Bootstrap to a set width with set margins in between. You've have all 12 columns filled up in your row. As you add an additional margin to your already-filled-up calendarContainer column, it will pop out of the row.
Therefore, the easiest way to achieve what you want without affecting any other styles is too make your column smaller and reduce the amount of 'margin-left' you push on the column like so https://jsfiddle.net/Zeenglishking/DTcHh/28837/
<div id="calendar-container" class="col-sm-8">
<div id="calendar" class="well"></div>
</div>
$('#show').click(function()
{
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '50px');
});
Also, as you say "seems infact that the menu is even visible also when is closed.", the menu is indeed visible. This is again down to the fact of the bootstrap styling of the grid-layout. If you can figure out what styles are creating this issue (F12), you can override them using "something:!important". https://css-tricks.com/snippets/css/style-override-technique/ . Otherwise, find another way. If you mess around with css positioning elements too much, it's easy to get lost and jumbled with the rest of your code.
EDIT (in regard to comment):
What needs to be used in addition to this is 'col-xs-**' with a smaller size column, allowing for a responsive design and for it to work on the smaller viewports such as the one in JSFiddle. I have updated my fiddle to include
col-xs-1
and
col-xs-4
on resource-bar and calendar-container respectively. This will change the size of the column, upon resize of the screen/viewport to ensure it doesn't drop down on extra-small viewports. More info at http://getbootstrap.com/css/#grid-options
Upon using Bootstrap framework you almost acquire yourself to a certain standard. Shortcuts in fixing this can cause problems with other elements. You're probably best to read more into it before chucking random positioning in to fix certain elements on a page.

Make footer, with variable height, at the bottom

Well, I'm using Materializecss framework and I have a issue with the footer. Materialize's footer have a variable height. In small devices, it gets bigger. So I can't use the classics method that use a padding-bottom equal to footer height.
My CSS:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height: 100%;
position: relative
}
#conteudo {
padding-bottom:425px; /* Fail height equal to footer height */
}
#rodape {
width:100%;
position:absolute;
bottom:0;
left:0;
}
My HTML:
<html>
<body>
<div id="wrapper">
<div id="conteudo">
<div class="container">
</div>
</div>
<div id="rodape">
</div>
</div>
</body>
</html>
I tried to add this script, but doesn't work:
JS:
$(document).ready(function fix_layout(){
if($(#rodape).height()<350){
$("#conteudo").css("padding-bottom", "276px");
}
if($(#rodape).height()>350 && $(#rodape).height()<500){
$("#conteudo").css("padding-bottom", "354px");
}
if($(#rodape).height()>500){
$("#conteudo").css("padding-bottom", "506px");
}
$(window).trigger('fix_layout');
});
Help!

If a jQuery solution is fine for you, then you can count the footer height and add it as padding-bottom to #conteudo, either once on DOM ready or on resize:
$(document).ready(function(){
var $conteudo = $('#conteudo'),
$rodape = $('#rodape'),
addPaddingBottom;
addPaddingBottom = function addPaddingBottom(){
var extraPadding = 6,
rodapeHeight = $rodape.height();
$conteudo.css({
'padding-bottom' : (rodapeHeight + extraPadding) + 'px'
});
}
//make it once on DOM ready
addPaddingBottom();
//and recalculate padding when window is resized
$(window).resize(addPaddingBottom);
});

How to add `scroll` bar to a `div`, when its height as `auto`

In my container, there is multiple childrens, one of the 'div' getting appended by content in that.
when the total height of the container(parent) overflows, i would like to add the scroll bar to the div
is it possible to do by css?
here is the html :
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Js :
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
jsfiddle
UPDATE
I don't want to put the over-flow to container, if so my footer will hide. i require my user need to see the add button always. I can't put my button out side of the container again there would be multiple content in to the container
UPDATE
I find a solution by js is it possible to made without using `js'?
jsSolution

Yes, it is possible to do in CSS. Simply add this CSS rule to #container:
overflow-y:scroll;
Alternatively add this to show the scroll bar only when necessary:
overflow-y:auto;

http://jsfiddle.net/doesfmnm/2/
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
.content{
border:1px solid red;
height:300px;
width:200px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Adding a little more explanation to what #Guy3000 said. You're appending (adding after) into an element with the class 'content'. Let's consider what that means for the parent .container class. By adding content into a div inside of the parent, your parent will need to either grow to compensate for the added content, or it will need to have a y-axis scroll that permits content longer than the height of the container.
This means you can approach the dilemma you're facing by adding height to the container element, or you can keep a fixed height on the container and have a frame with a y-axis scroll bar contain the added content.

Here is the solution i find :
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">
<div class="content"></div>
</div>
<div class="misc"><button>Add</button></div>
</div>
css :
#container { width: 300px; height: 300px; border:1px solid red;display:table;}
#up { background: green;display:table-row;height:0; }
#down { background:pink;display:table-row; overflow-y:auto}
.misc {
display:table-row;
background:gray;
height:30px;
}
.content {
overflow:auto;
height:100%;
}
Live
js solution :
http://jsfiddle.net/doesfmnm/4/