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.)
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?
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
As a purely aesthetical design thing, I'm wondering if it's possible to have an element with a non-opaque background blur out the content behind it.
More specifically, when I have a modal box appear (as part of my custom alert/confirm/prompt setup), currently the background content is "faded" by having a mask over the screen the same colour as the document's background.
What I'd like to do is apply a small amount of blur (just a few pixels) to the masked content to further direct attention to the modal box.
Browser compatibility is not an issue, since as I mentioned it's purely aesthetical. Preferably I'd like it to work in IE9 as a minimum, and Chrome if possible.
Also, no jQuery. By all means, provide an answer in jQuery if you want, but I'll be translating it to raw JS before letting it near my site.
Nowadays you can use the backdrop-filter CSS Property.
CSS:
.modal {
backdrop-filter: blur(10px);
}
Not possible with pure CSS..
You could use (with its limitations) the html2canvas script to render the pages to a canvas.
Then blur that image or the part you want with http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Use the toDataUrl to get the image and use it as a background to your popup...
It is quite an involved process and requires a lot of javascript, but i believe it to be the only way to do it...
This would require javascript (and fairly complex javascript).
From what I understand, it sounds like you're trying to create an 'Aero glass' effect where the content behind a semitransparent element is given a blurred effect. It is not possible with HTML and CSS alone (unless you consider using IE-only filters).
At the moment, there aren't any CSS properties that can dynamically apply image filters like you're describing.
The html2canvas solution presented by Gaby is potentially overkill. You can get the same effect with an iframe of the same website that has been blured (via filter blur or another technique - "-webkit-filter: blur(2px)" only works in chrome as far as I know.
This said, I'd say both solutions are really really hacky and I'd personally never use either myself. I tried this out just to see if it was possible at all out of curiosity.
See a (chrome only) example here: https://s3.amazonaws.com/blur-demo/index.html
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.
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.