I'm using EasyUI Frozen Columns for DataGrid, so how to change jscrollpane style, was trying:
::-webkit-scrollbar {
width: 12px;
}
but that doesn't work.
one solution is to keep the datagrid in div and add a style .scrollpane now apply the css as below:
For Chrome:
div.scroll-pane::-webkit-scrollbar {
width: 12px;
}
/* Track */
div.scroll-pane::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
div.scroll-pane::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255, 156, 0, 0.89);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
div.scroll-pane::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 156, 0, 0.44);
}
For FireFox using jsscrollpane
$(document).ready(function () {
var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
$('.scroll-pane').jScrollPane();
}
});
Related
I have some overflowing horizontal content and want to have a scrollbar visible always to support Windows devices, but I don't want scrollbars anywhere else. `
::-webkit-scrollbar {
display: none;
}
.polls-row::-webkit-scrollbar {
height: 1rem;
}
.polls-row::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.polls-row::-webkit-scrollbar-thumb {
background-color: $color-border;
border-radius: $radius;
outline: 1px solid slategrey;
}
I have this CSS/sass, which I think should work because the class has higher specificity, however I still don't get a scrollbar on .polls-row
How can I do this?
Update your code with below css
::-webkit-scrollbar {
overflow:hidden;
}
Right Way -> ::-webkit-scrollbar{ overflow:hidden; }
Wrong Way -> ::-webkit-scrollbar{ display:none; }
i have the following code that customizes a webkit scroll bar....
/*webkit scroll bar*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
what i would like to do is customize the scrollbar of a page loaded in firefox the same way... for which i tried the following code..
/*mozilla scroll bar*/
::-moz-scrollbar {
width: 6px;
}
::-moz-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-moz-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-moz-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
but it does not work..... how can i customize the scrollbar in the same way i did for webkit... any help would be appreciated... thanks in advance... :)
You can't because of bug #77790 (Link#1).
Bug 77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)\
The only way is to use jQuery. I don't know how to code it, so don't ask me. I prepared the following links for jQuery scrollbars. Click here!(Link#2)
Links:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
http://plugins.jquery.com/custom-scrollbar/
FireFox support these two:
scrollbar-width : auto|thin|none...
scrollbar-color
for firefox now you can use this
.element{
scrollbar-width: thin;
scrollbar-color: blue transparent;
}
where blue is for the thumb and transparent for the track
I have used div event which appear with scrollbar on the page to show content.
Though I have adjusted the width of div, When it appears on the page; it reaches to right corner of the screen.
code:
<div id="txtHint" align="justify" style="z-index: 1; color:green; left: 350px; top: 270px; position: absolute; margin-top: 0px; width:500px;height:250px;overflow:auto;">
Height gets adjusted correctly, for width whatever I take i.e. 200,300, or 800px. It spans up right end.
I checked in mozilla and chrome both. I am testing it for my ec2 amazon instance.
Similarly my css button :
<input class="uibutton confirm large" type="submit" value="Connect with facebook" onclick="AjaxResponse()" >
When I click it, all actions performed correctly but it does not show any effect so that user can realize whether button is clicked or not.
Can someone tell me effect which can be realized on click event. I tried on google with css button click effect and tested someof them. But does not make any difference.
Here is css for this:
.uibutton,
.uibutton:visited {
position: relative;
z-index: 1;
overflow: visible;
display: inline-block;
padding: 0.5em 0.8em 0.5em;
border: 1px solid #999;
border-bottom-color: #888;
margin: 0;
text-decoration: none;
text-align: center;
font: bold 13px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
white-space: nowrap;
cursor: pointer;
/* outline: none; */
color: #333;
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1;
*display: inline;
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 2.0px;
border: 0;
}
.uibutton.large {
font-size: 16px;
}
/* ............................................................................................................. Submit, etc */
.uibutton.confirm {
border-color: #29447e #29447e #1a356e;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Sounds a lot like you need css click events. This can be achieved with a simple checkbox.
Here is a link demonstrating it:
http://tympanus.net/Tutorials/CSSClickEvents/index.html
http://jsfiddle.net/Hive7/gd7AJ/
Edit
To do the current element you give the class of css effect to the current element
Edit
Also if you want to make the clicked element change you need to put the checkbox before
Here is a fiddle demo of both:
http://jsfiddle.net/Hive7/gd7AJ/1/
I'm stuck, I am designing a webpage on resolution 1266px.
I want it to fit on 1024px because 13% of the people are still using that resolution.
So I thought I could change the fontsize of my h1 and my nav_items.
So that they will fit, if the resolution drops below 1260 else I want them to stay at the fixed px given to them.
This is what I got:
header {
width:100%;
background: #222;
color: white;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
text-shadow: 2px 2px 0 #000;
}
header h1 { /* TAVERNE DE STADSPOORT */
font-size: 40px;
float:left;
color:white;
margin: 0px 0px 0px 0px; /* top, left, bottom, right*/
padding: 10px 30px 10px 20px; /* top, right, bottom, right*/
}
header ul {
float: right;
width: 680px;
padding: 20px; 0px; 0px; 0px; /* top, left, bottom, right*/
}
.nav_items li {
display:inline;
font-size:22px;
margin: 0px 4px 0px 4px; /* top, left, bottom, right (outside) */
padding: 0px 4px 0px 4px; /* top, left, bottom, right*/
}
<div id="logo">
<h1 class="nav_items">Taverne De Stadspoort</h1>
</div>
<nav id="top">
<ul class="nav_items">
<li>Menukaart</li>
<li>Suggesties</li>
<li>Onze wijnen</li>
<li>Ligging/contact</li>
<li>Gastenboek</li>
</ul>
</nav>
Maybe I did something wrong, and I could resolve this problem a other way.
Or should I use jquery instead for archieving this? since I am not familair with that
an other solution would be great.
i added this: thx all
#media all and (max-width: 1259px) { h1 { font-size: 25px; } }
#media all and (min-width: 1260px) { h1 { font-size: 40px; } }
/* http://www.w3.org/TR/css3-mediaqueries/ */
Check out CSS media queries. They let you specify styles for specific screen resolutions (an much more).
$('#fit').resizable({
resize: function( event, ui ) {
divWidth = ui.size.width/(len*9);
divHeight = ui.size.height / (len *2.2);
abc = divWidth;
if (divWidth < divHeight) {
abc = divWidth;
} else {
abc = divHeight
}
ui.element.css({'font-size': abc +'em'});
console.log(abc);
}
});
E.g
#media all and (min-width: 1266px) {
h1 {
font: (large-size)px;
}
}
#media all and (max-width: 1265px) {
h1 {
font: (smaller-size)px;
}
}
I have a web page with a inner div that should be scrolled. That works fine in IOS5, but when I customize the scrollbars is still see the native one?
How can native scrollbars be removed when using custom ones?
The custom scrollbars seems also only to be updated after scroll complete, how to get them scroll when you are dragging the div?
What I've tried:
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#info{
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 400px;
}
You have to remove
-webkit-overflow-scrolling:touch;
to disable that native scroll
Try this:
.webkitScrollClass {
overflow-y:auto;
overflow-x:hidden;
}
.webkitScrollClass::-webkit-scrollbar {
-webkit-appearance: none;
}
.webkitScrollClass::-webkit-scrollbar:vertical {
width: 6px;
}
.webkitScrollClass::-webkit-scrollbar:horizontal {
height: 6px;
}
.webkitScrollClass::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(0, 0, 0, .3);
}