how to use custom Scrollbar in firefox?? i am using this but not working..
#-moz-document url("chrome://browser/content/scratchpad.xul"),
url("chrome://stylish/content/edit.xul") {
scrollbar,
scrollbar thumb,
scrollcorner {
-moz-appearance:none!important;
background:none!important;
border:none!important;
min-height:9px!important;
min-width:9px!important;
}
scrollbar thumb {
background:rgba(0,0,0,.2) padding-box!important;
border:1px solid rgba(0,0,0,.6)!important;
border-radius:3px!important;
}
scrollbar thumb:-moz-any(:hover, :active) {
background:rgba(0,0,0,.8) padding-box!important; /* Why doesn't :active work? */
}
scrollbar scrollbarbutton {
visibility: collapse !important;
}
}
Here is an excellent cross-browser scrollbar styler. It actually mimics a scrollbar instead of styling the native browser scrollbar.
http://livepipe.net/control/scrollbar
As far as I know, there isn't a scrollbar element, and you can't style scrollbars with CSS (in Firefox, anyway). Where'd you find out about that element?
Related
I am looking for a way to hide div in IE11 and lower, but still have it display in Edge and other browsers.
Is it best to hide elements like this using Javascript?
Any direction would be appreciated.
http://browserhacks.com/
IE8-11:
#media screen\0 {
body { display: none };
}
IE <= 8:
#media \0screen\,screen\9 { body { display: none } }
Detecting IE11 using CSS Capability/Feature Detection
#JanKyuPeblik:
This works because IE11 doesn't actually even support #supports, and all other relevant browser/version combinations do.
body { display:none }
/**/#supports not (old: ie) {
body { display:unset }
/**/}
If I set the following css for a div:
-webkit-overflow-scrolling: touch;
the custom css I use for hiding the scrollbar gets overridden and the default scrollbar appears on iPad.
This is the css I use to hide the scrollbar:
::-webkit-scrollbar {
width: 12px;
opacity:0;
}
::-webkit-scrollbar-track {
opacity:0;
}
::-webkit-scrollbar-thumb {
opacity:0;
}
If you know any solution to override the default scrollbar when the overflow-scrolling is set to touch, I would be grateful for your help.
Thanks!
You should have a look on some jQuery custom content scroller plugins and especially with the options like contentTouchScroll: integer which might help you to detect the touch screens and then play with this.
OR
Otherwise, and probably a better solution, you should (like suggested here) use Modernizr.
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
}
Why not using both of them with
if (Modernizr.touch){
$(".content").mCustomScrollbar({
contentTouchScroll: false
});
}
Good Luck'
I use the following rule to make scrollbars invisible:
::-webkit-scrollbar { display: none; }
How do I override this rule to make scrollbars visible again? I tried the following:
::-webkit-scrollbar { display: initial; }
In this case scrollbars reserve their space, but the thumb is not visible.
See a short demo here.
try
::-webkit-scrollbar { visibility: hidden; }
and
::-webkit-scrollbar { visibility: visible; }
Edit:
Though, that would keep the space... So, add "width: 0 !important;"
I'd like my WebKit scrollbars to have a different color when its container is hovered over. I want the entire scrollbar to light up.
I was thinking something like this would do the trick (but it doesn't):
.scroller:hover::-webkit-scrollbar {
background: green;
}
I've styled the scrollbars the same way: on .scroller, not globally. (That works: .scroller::-webkit-scrollbar) I want the overflowed divs special, not the document.
Another (related) problem: light up the thumb when hovering over the scrollbar. This doesn't work:
.scroller::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb
This is possible using pure CSS, at least with Chrome version 29.
http://jsfiddle.net/eR9SP/
To style the scrollbar when its container (in this case .scroller) is hovered over, use:
.scroller:hover::-webkit-scrollbar { /* styles for scrollbar */ }
.scroller:hover::-webkit-scrollbar-thumb { /* styles for scrollbar thumb */ }
.scroller:hover::-webkit-scrollbar-track { /* styles for scrollbar track */ }
Additionally, you can style the scrollbar thumb itself when it's hovered over or active (being clicked) using the following:
.scroller::-webkit-scrollbar-thumb:horizontal:hover,
.scroller::-webkit-scrollbar-thumb:vertical:hover { /* hover thumb styles */ }
.scroller::-webkit-scrollbar-thumb:horizontal:active,
.scroller::-webkit-scrollbar-thumb:vertical:active { /* active thumb styles */ }
Changing the background color works just fine for me.
http://jsfiddle.net/QcqBM/1
div#container:hover::-webkit-scrollbar {
background: lightyellow;
}
Are you sure there isn't something else wrong with your CSS call?
There's a very easy way to do it -- just add the webkit scrollbar in the CSS using class, then remove it from your element using classList.remove on your element.
A few more details here
how can hide iframe in ie 6,7,8? setting attribute of style = "display:none" does not work!
sorry, i foreget to post the context.
The iframe is dynamic generated by javascript.such as :
function addIframe(node) {
var iframe = document.createElement("div");
iframe.src = ****;
iframe.style = "display:none";
node.appendChild(iframe);
}
the hidden frame generated by function above works in firefox and chrome but fails in ie.
Target IE8 Only
iframe { //display:none }
Target IE7, IE6
iframe { *display:none }
It should work. Try display:none !important. Otherwise, try ugly hack
border:none;
width:1px;
height:1px;
visibility:hidden
You could try moving it off-screen. Be careful with something like this as there may be security implications from trying to hide an iframe.
.some-selector {
margin-left: -2000px;
position: absolute;
}