I am looking for a user friendly way to:
Indicate a table is too wide, and thus scrollable, even when the bottom scrollbar is not visible yet
Allow the user to scroll this table easily, also on mobile
It does not need IE support :)
I found this jquery plugin, which seems to handle that fine:
https://www.jqueryscript.net/table/Mobile-friendly-Scrollable-Table-Plugin-For-jQuery-ScrolTable.html
I would prefer a pure CSS or TS/angular solution, as I would rather not incorporate jQuery when not needed.
Are there any, more modern alternatives? Is there a standard UX approach that I missed?
Related
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."
I've been using the SuckerFish menus for pretty much ever right now... however I need something a little newer. mainly something that will handle drop-down items and fly-outs of variable widths. i.e. I may have 6 drop-down main items, each sub-menu needs to be a variable [dynamic] width AND the fly-outs for each are also of differing widths.
SuckerFish does not handle variable widths for the drop-downs particularly well .... has anyone got any suggestions?
The site is using jQuery, though I am not too hot on javascript 'anything' for navigation a pure CSS would be nice if possible.
-thanks
-sean
CSS has limited animations with limited browser support (looks like only the latest WebKits).
For a cross browser animated menu, you'll have to leverage JavaScript.
jQuery will make doing it quicker and less painful, but is not a requirement.
You could set things up with your usual SuckerFish as a baseline and then add Superfish on top of that to provide the fancy animations and what not. Superfish is built with jQuery so it should drop in fairly easily.
Is there a way to change scrollbar from right to left in divs? I tried applying direction: rtl; but apparently it does not have any affect in firefox. I would prefer a pure css solution but do not mind using js for this.
I don't think it's possible with pure css and html, but you can use a jQuery plugin, like jScrollPane that gives you the ability to use custom scrollbars, and choose their position in the page.
There is no way to this, except for implementing your own scrollbar functionality from scratch. The reason is that the scrollbar is actually an ui element inherited from the operating system, and not something the browser "owns" - and since the operating system doesn't support putting the scrollbar on the left hand side, neither does the browser.
anyone know how to re-design scrollbar slider for IE ??not just a color but perform too..
Googling will lead you to a variety of articles on this, including "10 jQuery Custom Scrollbar Plugins".
In general, a redesign requires JavaScript to control the scrolling of an overflowed container.
The best way to do it would be disabling the browser scroll bar and using a javascript solution instead. This, of course, would effect all browsers instead of just IE.
If you want to go that route, I highly recommend jScrollPane.
http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/
After installing just add this to your css:
html, body {overflow: hidden;}
jScrollPAne is great because you can style it easily with CSS or custom images. You can also easily adjust the scrolling speed and other behaviors.
While the extensions mentioned here are useful most of the time , I find that they are not on parity with native scrollbars.
For example a container with dynamic content or on resize will not trigger scrollbar resize which I find is huge limitation.(HTML5 Mutation Observers will probably make this easier in the future.)
For now I prefer scrollbar styling ,which has all the native functionality.
The downside is that is supported only by Webkit - Chrome and Safari browsers.
Still I consider that is a good trade-of... lately I notice Google is using the same technique for their apps (Gmail, G+, Reader, etc.)
Is possible to change scrollbars' style for all browsers? If it is, how?
It is possible in Internet Explorer using a number of non-standard scrollbar-* CSS properties. See this page for a handy generator tool.
Other than that, it is possible only using custom JavaScript-powered scrollbar solutions. The jScrollPane jQuery plugin looks very nice and easy to install. Here is an example page.
Styling and programming scrollbars are not addressed by standards at this time, but some vendors have extensions to address this problem in desktop web browsers. The jScrollPane jQuery plugin is an excellent choice if you want to use custom scrollbars.
Vendor Extensions
Internet Explorer (starting with version 8) has extensions to CSS and the DOM allowing you to specify color only of the different parts of a scrollbar.
An updated link to the Microsoft documentation is this: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. You'll want to just look at all the properties starting with "-ms-scrollbar".
WebKit (e.g. Safari and Chrome) has a CSS pseudo-element for styling scrollbars which allows you to apply any CSS property to it. To learn more see this Surfin' Safari blog post: http://webkit.org/blog/363/styling-scrollbars/
Example:
::-webkit-scrollbar
{
width: 13px;
height: 13px;
}
Mozilla (e.g. Firefox) and Opera do not seem to have any support for styling scrollbars.
Custom Scrollbars
Regarding the jScrollPane jQuery plugin is an excellent choice, if you want custom scrollbars. It is pretty comprehensive in addressing expected functionality of scrollbars and keeps you from rolling your own.
It is important to realize jScrollPane replaces the browser's native scrollbars, and you might not find the "touch and responsiveness" of those custom scrollbars to be as good as "the real thing." But then again, it might be good enough if you value form over function.
This is a more recent link to the jScrollPane documentation: http://jscrollpane.kelvinluck.com/
Nope. IE allows you to set colours for some constituent parts of the scrollbar. Opera allows a few but not all of those styles.
Scrollbar colour styling is of increasing irrelevance as UIs move towards complex image-based scrollbar theming. In IE, setting any of the colours reverts the rendering back to a Windows 2000-style simple-3D scrollbar instead of any swishy user theme. Windows Vista/7 (Aero) users probably won't thank you for that.
You can of course make your own ersatz-scrollbars out of <div>s and style them how you like. But the result almost always behaves worse than real scrollbars, since you're trying to replicate a complex UI element whose expected behaviour is different for each OS. You can spend a lot of time reproducing paging behaviour, keyboard up/down and the mouse wheel, but it'll never quite feel as smooth a real OS scrollbar.
You can style scrollbars for all browsers with a little bit of Javascript. But at present time there is no way to style them using just CSS alone as a cross-browser solution.
This article will help if you decide to use Javascript.