Basically I'm looking to shim all modern browser so that the scroll bar acts the same way.
On newer macs the scroll bar hovers over content in webkit, on firefox the scroll takes about 15px of the content area. I'm wondering if anyone has see something that would gets these all to a similar state.
Thanks!
That's the browser's decision, you can't change the size of scrollbars in modern browsers.
What you could do, if it's really important that the scrollbars be the same in all browsers, is use a Javascript/jQuery library like this one or this one... But generally you should just use whatever content area you are given.
Related
I am developing chat and call application in my project.
So there are 3 tabs.
people to chat
dialer to dial to particular person
chat / call history
in this tabs there are 3 portions.
header
chat / call / history portion.
tab changer navigator.
I make middle portion scrollable.
I want to make that scrollbar thinner. I don't want to use browser's default scrollbar.
For this I find "::-webkit-scrollbar" which is perfect only for chrome.
I want to apply this css to all browsers.
I find scroll plugins but I don't want to use any external plugin. I want to solve this by using jquery / css/ javascript.
is there any property or anything which can solve my issue?
The ::webkit-scrollbar pseudo element is NON-Standard and there is no way to make this cross-browser-compatible at the moment. There are good reasons why this hasn't evolved as standard yet. Just imagine some touch devices having browsers without scrollbars or with scrollbars, which are hidden by default and shown only when scrolling (to save valuable space). Custom styling would need to fit all these use cases.
Therefore I'd generally recommend you not to style the browser scrollbar with this hack. If you really need a solution, you could try jquery.scrollbar. IMHO this is no robust solution, however. It relies purely on JavaScript and may be jiggling around on some devices.
edit: further info on MDN
How can I make my scroll bar black for a <div>?
Is there anything that will work in Webkit, IE7 to IE9 and Firefox?
You cannot do this in Firefox. Only IE and webkit browsers support modifying the scrollbar.
See http://msdn.microsoft.com/en-us/library/ie/ms531153%28v=vs.85%29.aspx on how to do it in MSIE and http://www.webkit.org/blog/363/styling-scrollbars/ on how to do it in webkit.
You cannot style the scrollbar of the browser. It's not universally supported (although IE did try to implement it).
Also, it's a bad idea to do so from an accessibility perspective. Think of (old) people who cannot see your very slim, almost invisible custom scroll bar or don't know that what you have there is actually a scroll bar.
You can use custom scrollbar plugins in JS like this one. It's all over the place
As Pez Cuckow said:
I imagine that custom scrollbar is implemented in javascript, it looks
very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at:
http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this
includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly
what you want) with Javascript and jQuery:
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at
http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
I agree you shouldn't tamper with the visibility (I'm looking at you Apple) of the scrollbar of a scrollable region. Sometimes, a box with scrollable text fits just inside the boundaries and there is no visual clue letting a user know that it scrolls thereby confusing the user. Is it really a good idea to prevent the user from being able to use your application? Most likely not, but you can also argue back that your target demographic wont have any problems; an application for extreme inline competition is probably not going to be used by people who aren't able to see very well. However there are accessibility/usability concerns that go beyond visual hinderances; cognitively impaired, or non tech-savvy, individuals might be very good at said aggressive inline and want to compete in your upcoming event but wont be able to because the black-on-black scrollbar looks awesome.
That all said, do what make you happy. That's what I do.
I am using text-shadow for all p and headline tags (2px white glow for better readability), everything works fine until page is scrolled and javascript changes absolute positioning on one element to fixed - which I want to stay visible.
Is there any way apart of changing style for opera to make it scrolled smoothly? overflow:auto is not working in this case...
Thanks
it's hard to say 100% without seeing the code, but I guess that the way you've styled this page makes Opera do a lot of reflowing and painting when it is scrolled, and the combination of styles will make this a very expensive operation. (It would be nice to see a jsfiddle or get a link to the actual page, this would also make it simpler to advice on possible workarounds).
There are various fixes you could try - like keeping the element you want on-screen styled with position:absolute and move it from JavaScript after scroll events, or simply avoid setting position:fixed in Opera and letting the element scroll away for better scroll performance.
However, I'd strongly recommend that you first report a bug to Opera. Why?
The reason and the genesis of the web is collaboration. It may not be obvious to (understandably) frustrated web developers struggling with browser bugs, but they have a responsibility for helping browser vendors improve when they find problems, thereby contributing to moving the web forward. A minority browser like Opera admittedly has less development and QA staff resources, but to some extent support from the user community and "normal" web developers makes up for this and makes it possible also for smaller players to develop in the Web ecosystem. I think that's one of the web's strengths and the real reason why no single corporation has been able to dominate it.
So please report your issues and problems :)
This is a problem with Opera, not any way you've written the code. Opera is a gigantic steaming pile of doo-doo with almost no market share, and you should use another browser.
That's basically all anyone could tell you here, unfortunately. I understand that everyone loves their browser of choice but some just don't handle these things well. Other examples: browser with a poor javascript engine rendering animations erratically and jerky, etc.
I've got a div that I want to position at the bottom of the mobile browser (Safari + Android) viewport. Currently my div is fixed at the bottom on all the top 5 browsers on Windows (IE, FF, Saf, Chrome, Opera), but that's "the browser window", not "the viewport".
On mobile devices (I've only tried on Samsung Galaxy Tab with Android 2.2 so far) the div appears at the bottom of the page, but if you pinch/punch to zoom in, the fixed div doesn't follow. It stays behind, outside of the viewport.
I'm specifically using the position:fixed and bottom:0 CSS properties to maintain the position, and as I said, it works fine on a non-touch browser.
Am I going to have to resort to keeping the div in the position I'd like it to be (at the bottom of the viewport) by hooking into the touchmove event and looking at (a) the zoom level, (b) the viewport position, and (c) the scroll position?
I'm using JavaScript to inject the div into the page rather than using inline CSS. The good thing is that I don't have to worry about quirks mode (as I'm only targeting Webkit browsers), so that's one positive thing.
I can't set doctype, use inline CSS or inline DIVs. Everything has to be added dynamically via JavaScript. Here's what I've done in my test so far:
var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";
Your position:fixed won't work on mobile webkit browsers. Take a look at the mobile webkit fixed position problem on http://www.position-absolute.com/. They have a few ways of keeping something at the bottom.
Check out iScroll:
http://cubiq.org/iscroll-4
It seems to be one of the better options out there - definitely worth looking into.
I have used the previous version of iScroll but unfortunately there were a few things that didn't work to standard so we had to scrap the idea. However, the guys at Cubiq have just released v4 of iScroll which promises to fix a lot of the things that were issues in the previous version.
Best of luck!Dan
How can I replace the scrollbar's images using HTML/CSS?
I have:
scrollbar-base-color: #00acee;
scrollbar-dark-shadow-color: #00acee;
scrollbar-track-color: #ffffff;
scrollbar-face-color: #00acee;
scrollbar-shadow-color: #00acee;
scrollbar-highlight-color: #00acee;
scrollbar-3d-light-color: #00acee;
Can I use an image to accomplish the same idea?
No you can't use images in place of the scroll bar. I'll also just mention that changing the colours is very annoying to users and it only works in IE anyway, so just stick with the standard GUI elements.
For webkit based browsers (for a sufficiently new value of "webkit") there are a collection of propriety CSS properties.
No, you can't use an image in the scroll bar. (Also, even changing the color is only supported in IE in non-standard mode.)
The only way to use images in a scroll bar would be not to use the standard scroll bar at all, but implement a replacement scroll bar yourself using DHTML, or find someone who has done that already.
However, you should be a bit restrictive when changing the look of controls that the users are already used to. If you are not careful you may end up confusing people so that they don't even recognise it as a scroll bar at all...
It is not possible to put an image inside the scrollbar. Customizing the scrollbar is not a W3C spec (IE only CSS), but details on what is possible can be found here:
http://www.quirksmode.org/css/scrollbars.html
as far as i know you cant style a scroll bar with an image.
if you want to use jquery, you can do so easily using this jquery plugin:
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
The trick there is to "simulate" a scroll bar using some divs, which you can style any way you want, since they are just regular divs. After that its easy to just use the scrollTop property and scroll events etc (but you dont really need to know how it works to use it)
For MooTools, there's MooScroller.
Steve
jScrollPane (demo)
or
Interface (demo).
Both using jQuery.
Webkit == Safari and Chrome, but Firefox and Opera have plans to implement similar in upcoming releases. The spec is a killer though, so it may not be worth using even if you have the support.
Mootools has quite a few:
Mooscroller (will be
implemented into Mootools -more),
MooScroll (based on
Solutaire's?)
UvumiScroll
MochaUI's
I imagine it is part of Ext UI, and probably JQ's UI library, but have no personal experience there.
One non-library dependent class: http://www.hesido.com/web.php?page=customscrollbar