How am I able to adjust the design of the browsers scrollbar? For example, giving it a black color, adjusting it's width, etc.
I'd like to achieve this without using webkit (since I want this effect aswell for IE users, IE7+).
I think You should use "Tinyscrollbar" Plugin for That which is nice and elegant way to enable the scrolling of content on mobile and desktop devices.
I hope it must help you. you can check the link.
http://baijs.com/tinyscrollbar/
Good luck
Related
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?
I'm trying to work with the nice parallax effect in this template. It seems to work well with all browsers except mobile Safari (unusually)!
http://wrapbootstrap.com/preview/WB002R8U1
Look at the ABOUT and FOURTH sections on an iPad and the background image goes missing (presumably because it's stuck to the top of the page behind the other elements.
Anyone know a workaround for this?
Many thanks.
parallax on mobile iOS is not that easy: safari blocks all rendering while scrolling (for performance boosting), therefore you can't measure the current scrolled distance and apply it to the background position. the picture would only refresh it's position when you've finished scrolling (and without animation, so you wouldn't see anything of it).
There are workarounds but they're not as easy to implement. one of them is http://markdalgleish.com/projects/stellar.js/ with its iOS techdemo.
Best solution: split your css markup and let parallax only be visible to desktop devices. As parallax needs a lot of power (because it's not hardware accelerated), it's not very suitable for mobile devices anyway.
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.)
ok i need to make a whole background image so that it resizes with the window and keeps the same proportions
i need to do this only using css
does anybody know how i have looked but cannot find a working solution.
i tried some suggestions on here too but does not seem to work for me either
thankyou
You might want to read the article "Supersize that Background, Please!" on A List Apart. It presents "old" as well as modern techniques.
In order to do it in vanilla CSS, you cannot settle for less than CSS3 since both Background and Borders and Media Queries modules are required.
What you are asking for is not possible. Not with standard CSS2.0 and XHTML.
You can make an image tile, but not scale to fit your page.
The link you provided does just that, it repeats the image in a tile fashion. Background images do this by default.
Sorry, CSS can't stretch images. Only an <img> tag can do that. So you'll have to put one of those in the background.
Maybe you can do that with CSS3, I don't know, but even then browser support is not very good yet.
Here is an example of using a div (100% width + height) containing an img tag to use as the background, might be worth a look.
Try this technique: http://css-tricks.com/perfect-full-page-background-image/
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.