Hide scroll bars keeping them work (specific case) - javascript

I need to hide some scroll bars in something like a table.
I have a 5 rows table built with some div elements, each row contains a scroll bar for an horizontal scroll.
There is a way for hide them?
I already tryed searching solutions here, but that solutions only work with a single row, or, however, didn't work in my case.
There is the Demo

You can hide scroll bars by giving them a style using pseudo selectors:
.target::-webkit-scrollbar {
display: none;
}
This being said it is a big no no in terms of accessibility to change and hide scrollbars, looking at your code you are also using JavaScript to sets widths. Maybe it's worth looking how to re-work your code to completely negotiate these issues.

Related

Bootstrap grid elements overlapping navbar

I am trying to build grid elements in which there are two columns and each has a couple of rows of panel elements within them. Everything looks great except for when I scroll my navbar to the point of the grid elements. The elements overlap the navbar like they are floating on top. The weird thing is no other part of the page is doing this, everything is behind the navbar when I scroll except for the grid elements.
Here is an image of the effect I'm seeing:
Anyone have any idea what is going on? I am also using headroom.js for my navbar.
EDIT: Here is the link to the live website: (link taken down after finding answer, as website still under construction)
It's an issue with the navigation's z-index. Even just giving it a value of 1 fixed the overlap for me. FYI, the higher the number the less likely it will be under another element, so you should probably make it something like fifty billion (or 999).
.headroom {
z-index: 999;
}

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.

How To Fix Nested Sortable Divs in Jquery UI?

I'm trying to create a UI that allows the user to take a set of window divs in the DOM and drag them around, sometimes appending divs as children of other divs and sometimes pulling those children out to a parent level. I have a working example but it is extremely touchy when you try to append a "uncle" div to a "nephew" div or vice versa. There is about a 1px leeway to nest the div, as you can see in this JSFiddle: http://jsfiddle.net/UdXr4/124/.
How can I "loosen" the sensitivity so it is not so quick to move on to the next sortable in the tree while clicking and dragging?
You probably need to look at snap, snapMode and snapTolerance. See the API here.
I was able to fix it to a large extent. Thanks to a suggestion by Ryan Niemeyer at Knockmeout.net, the problem was largely rectified by setting a min-height on the container div and adding a little padding to make sure there is a target at the drop zone. Here is the fiddle example: http://jsfiddle.net/UdXr4/130/ The only difference you'll see is the sort-fix class with padding and min-height and the sortable tags are classed as sort-fix.

jQuery UI sortable on dynamic width table possible?

Wondering if anyone can help with this.
I have a table with some fixed width boxes. In between these boxes (cells) are cells that stretch to the width required to fill the space in between.
Basically what I'm trying to do is make it so that the fixed width boxes are sortable using jQuery UI's sortable.
I've tried many things with jQuery UI sortable but just can't get the desired effect. As you can see from the JSFiddle demo below the cells are sortable, but end up going next to each other when dragged, as they fit into the empty 'spacer' cell.
Is there any way to fix this? So that the blocks can be dropped into the correct area? and prevent the table from 'jumping' around..?
I tried disabling the 'spacer' cells but could not really understand how its done :/
Just a note: It's vital that the table is able to expand to 100% width (like it does in the JSFiddle). I'm using a table as its the only stable way to get the blocks to space out nicely on a fluid width layout.
(The far right and left blocks need to be up against the end of the container)
JSFiddle: http://jsfiddle.net/JsJMH/
Any help would be really appreciated! Many thanks!
Answer: http://jsfiddle.net/morrison/JsJMH/13/
Notes:
Don't abuse td elements. Empty table cells are usually pointless. I moved the box inside the td.
I had to edit a CSS rule. Sometimes people don't notice that, so I thought I'd point it out.
This is very possible without using tables: http://jsfiddle.net/morrison/quneb/.

Autoresize Element (div) to Fit Horizontal Content

I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.

Categories