We Keep Coding

floating horizontal bar for a div

I have an html table that is very tall. The web page has to be scrolled vertically to reach the horizontal scroll bar at the bottom of the table. It would be nice if I could float the horizontal scroll bar for the table at the bottom of the browser window.Can such a thing be done?Is der any plugin available for it?
JS Fiddle is : http://jsfiddle.net/RurTZ/1/

I created a solution with the demo table from Maddy (I hope you don't mind):
Use a range input and bind a handler for the input event to it. Then you can use jquery's .scrollLeft to scroll your table.
This way you can position the scroll bar wherever you want it, and even style it the way you want.
fiddle here

I don't know if this is what you want but, I suggest you to use the CSS property
overflow: scroll;
to your table.. This should do the work.

Try this, may be its helpful for you:-
Demo
<div style="width: 300px;overflow: scroll;height:400px">
<div>
<div style="height: 100%;">
<table class='sample'>

If you can use javascript, you can access the documents height using document.height.
Then calculate your elements css positioning accordingly, set the height of the tables parent div to document.height - 100px etc.
NOTE: this will require proper testing as it will not work for many scenarios. But if you have a simple page and understand the basics of page layout and css positioning it could do the trick.
Since you asked for a plug-in or something, try datatables , this would be easy to implement and can handle alot of customizations etc. , browser the docs. However if your requirements remain simple, this may be overkill.

Hide scrollbar / remove scrollbar

I have been wondering for quite a while now how can you achieve this: https://www.apple.com/mac-pro/
As I put it in my own terms, removing the scrollbar or hiding it. I know you can easily put overflow:hidden but that wouldn't really solve the problem, as in Chrome for example it will not let you scroll with the mouse-wheel (pretty annoying).
I've been looking for quite a while now how to achieve something similar to that, which by the way I have no idea how to call it (again I search it as hiding the scrollbar, removing scrollbar) but no success yet.
If anyone can point me to the right direction, that would be really awesome!

I think that the page does not fill more than the window , so that is why there is no scroll bar. When you do scroll up or down , there are most likely event listeners that are just altering the content.
body { overflow:hidden } would work in some browsers , but not all - So , to avoid having a scroll bar, just don't have the content get larger than the window.

It seems like a slightly altered take on Parallax Scrolling.
If you google for it, you can find a million and one different ways of doing it, tutorials, examples, templates, etc.

Change overview.css on line no 10
position: fixed;
Remove following from overview.css on line 415 and 8
overflow: hidden;

Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.

html margin issue - "Shaking" Website

Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?

Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?

You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window

The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.

body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)

I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.

jQuery-autocomplete scroll issue

I'm using rails3-jquery-autocomplete in my application. I've faced the following issue:
if you enter something in the input field so that autocomplete data gets displayed and scroll the page after that, the box with the autocomplete data isn't scrolled with the page. It stays at the same position.
You can look at what i'm facing here. Note that this example isn't created by me, so i'm not sure the same jquery plugin is used here. Nevertheless the issue is pretty the same.

add this to the css
.ui-autocomplete {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}

Probably you are missing appendTo-attribute from options to Autocomplete. It defaults to body, but you probably want to have it your container div (hard to say exactly without seeing your code).
See documents.

But have you checked the scenario, after applying height and overflow for the result can't able to scroll through the list using keyboard down arrow, which can able to scroll using mouse. If we use keyboard to scroll it keeping the scroll bar ideal and making the highlight value to traverse throughout the list.

I know this is old but I just fixed this in my own project by adding a CSS property of "position: fixed" to ".ui-autocomplete" in my project. Check it out here if u want: 34.212.191.181:3000.
P/s the page is in Vietnamese, just play with the search box in the nav bar :)

CSS / JavaScript: How do I hide the vertical scroll bar?

I am trying to use jQuery to handle the scroling, so I want to get rid of the browser's scroll bar... how do I do that?

well with css you could do that -> overflow:hidden on the body tag but you will not be able to scroll down anymore if the page is larger then the browser screen (unless you use your keyboard arrows)

Use CSS: overflow:hidden; will disable the scroll-bars of the element.
Not certain whether it will work on the whole page (ie at the body level), but you can always wrap your content in a div and style that.

The way to prevent the browser scroll bar using jQuery is to keep your document height less than your window height. Meaning you would need a wrapping div and make sure your content never exceeds the window height.
$(document).height();
$(window).height();
Not sure what you are trying to accomplish though.
as others have suggested you can use the CSS property
body{
overflow: hidden;
}
The actual use case would need to be presented to find which way would be best.

For finer control over which scrollbar to show and hide you can also use overflow-x and overflow-y. Browser support is a bit tricky. You can check it with this testcase if there is a solution for only get rid of the vertical scrollbar in your case.