When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?
HTML AND CSS:
<div class="searchResult">
//Here I show the search result
</div>
div.searchResult
{
height: 540px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.
Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html
Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:
iScroll is evolving and adding many new features to the basic
scrolling functionality. If all you need is the plain old scroller for
mobile webkit, you should really use iscroll-lite.js instead.
iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.
For some odd reason changing the div to a span works on an iPad.
Related
I'm looking for a way to make the scrollbar invisible in Firefox. That is, you shouldn't be able to see it, but you should still be able to scroll. For other browsers, this works:
::-webkit-scrollbar {display: none;}
However, it seems that this feature has been removed from Firefox. Surely someone has found a workaround just for Firefox?
If you want to hide scroll bar, you will need the CSS
<body style="overflow:hidden;"> ...</body>
I am wondering, if scroll bar will not be available to your page, how your content is going to be read fully. By the way, this CSS works will all elements like <div></div> etc. too.
For scrolling you will need to add scroll event. Take a reference from here for scroll event handling.
I have a self-written lightbox that dymically loads up content from a database, and the result is something like this:
<div class="lightbox">
<div class="lbtop">
</div>
<div class="lbcontent">
lightbox content
</div>
<div class="lbbot">
</div>
</div>
All elements in the lightbox are block-level elements, and are floated (this includes sub elements like p, h1 etc).
The lightbox uses fixed positioning to make sure it is always on the same place like this:
.lightbox {
width: 320px;
height: auto;
z-index: 999;
position: fixed;
top: 0;
left: 0;
display: block;
overflow-y: scroll;
}
So far so good. Adding content to the lightbox is also no problem at all, and the elements all scroll nicely.
But when I then try to add iframes (specifically: soundcloud embeds) inside the lightbox, then the iframe elements scroll differently than the other elements inside of the lightbox like this:
In this example, I've just scrolled down and the iframe element now moved over the text, in stead of staying in place.
I've tried tons of solutions using different combinations of CSS position, overflow and even tried to build my own jQuery powered fix for this (wrapping the iframes in a correctly positioned div), but to no avail. All in all I get the feeling it might be a bug in webkit (i have the problem on Android, the website I'm developing is a mobile site). I did solve the bug in iOs using -webkit-overflow-scrolling : touch;(anyone, is there an android alternative for this?).
Searching the web for a fix also didnt give me any usable results. The closest I got was setting the position of the lightbox to absolute, but this affects the functionality of the lightbox and it does not satisfy me.
I would love any suggestions on this :) thanks in advance :)
After a while I managed to solve this. It was an issue that was only showing up in the android emulator(strangely) from the SDK. Too bad I spent so many hours to fix it but I figured it might be nice to stop other people from wasting time..
If you run into this issue, double check on a physical android device as for me the problem didn't exist there (across different OS / browser versions)
I've been tearing my hair out trying to figure out why my pages based on Bootstrap responsive have an extra 25-30px on the right side in Firefox and IE when the window is <600px in width. I started to remove parts of my code one by one, until I was left only with the fluid nav bar and the Facebook SDK. Once I then removed the Facebook JS SDK reference, the padding on the right side disappeared.
You can see this here:
FB JS SDK included, extra right side padding:
https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm
If you remove the FB JS SDK, it works as expected (no padding on right side):
https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm
Since I need the Facebook JS SDK for the like buttons on my page, how can I work around this?
Oddly, in Safari and Chrome this does not repro.
Screenshot from Firefox:
Screenshot from IE:
As suggested by CBroe, you could try to alter the #fb-root style, but there may some JS actions that will change it again, or it may just disable some functions.
So I would suggest to add this to your styles :
html { overflow-x: hidden; }
With this fix, you may encounter one slight problem if you have a very small window and want an horizontal scrollbar. You might try this, though the padding reappears under 200px :
#media (max-width: 200px) {
html { overflow-x: auto; }
}
Tested on FF13, and IE9 (can't resize IE9 window to less than 200px).
It’s the Facebook DIV element #fb-root that’s causing this – once you set it to display:none or position it absolutely with say left:-200px via Firebug, the extra margin disappears.
However, doing so in your stylesheet might not be a good idea, since the SDK uses this element to display it’s dialogs etc. – so either those might stop working (setting it to display:none is supposed to stop it working in older IEs completely), or the SDK might overwrite such formatting again itself.
You should thoroughly test this, if you try adding formatting of your own to it.
This is what I am trying to achieve:
This is what I get:
Please view the JSFiddle of this with web-kit browser (Chrome or Safari): http://jsfiddle.net/KqEqN/
This is happening when you narrow the screen but there's still visibly enough space for the button.
I've looked into CSS trying to find some sort of padding to the right of the button but couldn't. Also where the hell that horizontal line comes from?
I'm not familiar with jQuery Mobile, so I might be doing this wrong. My guess is that you must add extra classes instead of overriding jQuery Mobile's theme.
The fix involves:
.ui-input-search {
width: 50px;
display: inline-block;
}
Check it in action here: http://jsfiddle.net/NqFhQ/
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.