From the Google Results page, the examples I saw were working only in IE and one case in Opera.
Is there any way this can be done consistently across all browsers?
Also, is there a difference between the main scrollbar of the browser (which appears across the whole page) and the scrollbar in a text area withing the page? Can I manipulate only the latter if not the former?
You can create your own scrollbars within a page using a combination of CSS and JavaScript. See https://stackoverflow.com/questions/780674/scroll-bar-with-images.
However, rendering of the scrollbar outside the page is up to the browser.
WebKit recently added the ability to style the default scrollbars, but this still only applies within the page.
EDIT: It seems that MooScroll has managed to 'replace' the browser's main scrollbar by telling it there's nothing to scroll and then creating their own scrollbar at the right-most side of the window. Clever!
Steve
Steve had a good answer, but allow me to continue.
In IE 5.5-7 (but I think they're getting rid of it in 8), you could style the scrollbars with some proprietary MS CSS properties. I wouldn't recommend this.
Steve mentions that the scroll bar outside of the page is up to the browser. Whilst this is true, you could fake it by setting the body element to overflow: hidden and then placing a huge container in the HTML with height: 100%; width: 100%.
I wouldn't recommend you touch the user's scroll bars. They are a well known convention, and they are quickly recognisable by the end user. They know how to use the default OS styled scroll bars, not your quick attempt at cross browser CSS/JS implementation. I think it was Steve Krug that said 'Don't make me think!'
Have you ever seen Flash sites that rolled their own scroll bars? ugh!
There is no cross-browser method.
Short answer no.
The appearance of the browser is out of your control unfortunately - you're only supplying the contents. It's up to the browser to decide how it wants to scroll the contents.
Related
I searched this site and google and found no way to simply add a plain simple scrollbar to my webpage. Is there no such way? I'm rendering a web page and there is no scrollbar. Can't understand why the default behavior is faulty. Default is you want a scrollbar for overflow but no, with CSS everything has to be tricks and workarounds.
Are you probably looking for a way to always have a scrollbar present, also if the page is short enough to not have one?
Then, yes there is a way. You might wanna do:
html {
overflow-y: scroll;
}
I understand why one would do so.
It prevents jumps when navigating between pages, which have enough content to show a scrollbar and pages which do not.
I have a page in asp.net that does not render correctly in Chrome: when a certain block becomes smaller (because of the number of the elements of a grid on the page) the background does not get entirely refreshed, it leaves a part fom the previous rendering, until changing the tab browser and returning back. Same thing happens when going through blocks that become visible and then hidden. Is there a way to force a re-render of the background (I'm using UpdatePanel and Chrome v 24.0.1)? Or has anyone seen this behaviour and managed to solve this (could it be some z-index css problem)? Please help...
After a while of researching the asp code, the properties of the grid, the css, the foums on chrome bugs, it seems that a css property modification of the div underneath the grid did the trick, I had to change overflow: visible to overflow: hidden.
i am currently building a website using HTML and and external CSS Stylesheet. I have a "container" which holds the content of my page, central to the body. What i want is that when a user adjusts the text size using there browser that the "container" automatically resizes with the text so that it stays in proportion. At the moment the text size changes but the container doesn't. I hope someone can help me with this problem.
Thanks in advance
Matt
This is a bug in IE, in other browsers e.g. Firefox, the containers will be correctly resized.
You would need to detect the browser type; then if it's IE use some fancy javascript workarounds to get it to work.
Catch browser's "zoom" event in JavaScript
The jQuery time-picker plugin that I wrote uses a div as the containing block for the list of times, and on Mobile Safari there are no scrollbars to indicate that there are more available times than are visible. I know about using two fingers to scroll within the div (on the iPad at least), but that only works if the user knows that there is more content to scroll to, and there's no indication that there is. So, my question: Has anyone been able to get scrollbars to show in Mobile Safari? How'd you do it?
Assuming you are using iOS5.0 or later, I think you have to use the following:
-webkit-overflow-scrolling: auto (this is default style)
auto: One finger scrolling without momentum.
The other available style is
-webkit-overflow-scrolling: touch
touch: Native-style scrolling. Specifying this style has the effect of creating a staking context (like opacity, masks, and transforms).
Using touch mode, the scrollbar will be visible when the user touches and scrolls, but disappear when not in use. If you want to make it always visible, then this old post will help you:
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
Another Piece of Code for Thumb by #BJMC:
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Original Source
Edit: with respect to this demo's behaviour, you should use jQuery because it will help you a lot, $(document).ready(function(){//your code with timer}) code with timer will need to reset the CSS property to normal after desired time(let's say 5 sec.)
For the demo( that you have described), this is initiated with the onhover event, please check this fiddle I have created for that.
That reproduces the results in a desktop browser, and will also work in iPad, just add your timer code to suit your requirements.
Regarding the original question: the best solution to have scrollbars would be to use an external library (already recommended iScroll is good, but even jQuery UI itself contains scrollbars). But displaying ever-present scrollbars might deviate from the general iOS UI (see below).
Alternative would be to indicate with other GUI elements that the content is scrollable. Consider small gradient fields in the end of the element (the content fades to background there) that suggest that content continues when touched and scrolled.
In iOS5 overflow: scroll functions as expected, i.e it allows the the div to be scrolled up/down with one finger within the area specified by the dimensions of the div. But scrollable div doesn't have scrollbars. This is a bit different from the general UI in iOS(5). Generally there are no scrollbars also, but they appear when user starts scrolling a content area and fade out again after the touch event has stopped.
To answer Sam Hasler comment above.
Nicescroll 3 is a jquery plugin that does just what you want with fade in/out effect and work in all major Mobile/Tablet/Desktop browsers.
Live demo
Code:
$(document).ready(function() {
$("html").niceScroll({styler:"fb",cursorcolor:"#000"});
$("#divexample1").niceScroll();//or styles/options below
$("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
$("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
});
If you want to have the scroll to be always visible,
Do not set -webkit-overflow-scrolling: touch
then set custom style for scrollbar
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
You loss the momentum effect, but scrollbar will always be there.
(tested under iPhone 4/ iOS 7)
Mobile safari, as far as I have seen won't support scrollbars.
The best plugin I could find to get the job done is this.
Its Demos are available here.
It also has multiple predefined skins to suit your application.
here's a sample of what you'll get -
By convention, scrollbars are not used on iOS.
For a div with overflow: scroll, the only native way to scroll is with two fingers.
You might take a look at iScroll, a JavaScript library which handles touch events and implements single-finger momentum scrolling (what users generally expect in native apps) for divs.
until ios5 you could not scroll internal divs - so you probably are not seeing a scroll bar when you try to scroll because there isn't one.
I haven't tested on ios5 but supposedly scrolling internal divs now works.
If it isn't an internal div then you should be able to see the scroll bar when it is scrolling only - this isn't just on ios anymore - lion has gotten rid of all native scroll bars too. You can only see them when a window is scrolling or when the window is first loaded.
I have a div and an iframe on the page
the div has
z-index: 0;
the iframe has its content with a popup having a z-index of 1000
z-index: 1000;
However, the div still overshadows the popup in IE (but works fine in Firefox).
Does anyone know what I can do?
Explorer Z-index bug
In general, http://www.quirksmode.org/ is an excellent reference for this sort of thing.
Which version of IE?
I'm no javascript guru, but I think hiding the div when the popup pops might accomplish what you need.
I've had to work with divs and iframes when creating a javascript menu that should show overtop dropdown boxes and listboxes -- other menu implementations just hide these items whose default behavior in IE6 is to show on top of any DIV, no matter the z-index.
I face the same problem. The problem in my case is that the content in the iframe is not controlled by IE directly, but by Acrobat as it is a pdf file. You can try to show the iframe without the content, in which case the popup displays normally. For some reason IE is not able to control the z-index for external helpers.
It was tested with IE7
Without seeing your code, it's difficult to determine the problem. But it's worth noting that z-index only works when the element has been positioned (e.g. position: absolute;), so perhaps that could be an issue?
There's a good article on CSS Z-index from the Mozilla Developer Center.
Without seeing a code snippet, it's hard to determine what the issue is. You may want to try appending an iframe under your popup that is the same size as your popup. With IE7 if you render the iframed popup after the other iframe has already loaded you should be able to cover up elements that are beneath. I believe some JS calendars and some lightbox/thickbox code does this if you are looking for examples.
never set your z-index to anything bellow 1 enless you want to hide it. I'm not sure about 7.0 but older versions of IE I've had issues with doing that. IE doesn't like z-index that much. Also check your positioning. Positioning may be your issue. sorry, i don't have enough info to help you further.