I found a great example of d3.js drag slider https://bl.ocks.org/mbostock/6452972 However I can't use the drag feature using iOS10. How can I enable touch features to this slider?
This is interesting. In that code, the *drag events" are set up on an invisible line painted on top of the slider. Looks like iOS won't reliably honor the touch events on it because it is not stroked or filled. You can get it to work though by changing the css definition on .track-overlay to:
.track-overlay {
pointer-events: stroke;
stroke-width: 50px;
cursor: crosshair;
stroke: black; /*<-- give it a stroke */
opacity: 0; /*<-- but don't show it */
}
I have a jqGrid and it comes with default background image, I want to change the background image of it. I tried couple of ways as suggested in online
METHOD 1. I added below code in my CSS
.ui-jqgrid .ui-widget-header
{
background-image:url(images/my-header.png) repeat-x !important;
}
METHOD 2.Added below code to load complete event of jqGrid
loadComplete: function () {
$("#gview_jqgCUST .ui-jqgrid-titlebar").removeClass('ui-widget-header');
$("#gview_jqgCUST .ui-jqgrid-titlebar").addClass('jqgrid-header');
}
in CSS I added
.jqgrid-header{
background:red url(images/my-header.png) repeat-x scroll 50% 50%;
border:1px solid black;
color:Blue;
font-weight:bold;
}
and I am loading css files after jqGrid css file but could not achieve it
How can I do it ?? Any sample code please... I am new to jqGrid and jQuery..
First of all you can use ThemeRoller of jQuery UI to customize theme which you use on the page. You can reduce the applying of the theme only to a paer of your page by usage of "CSS Scope" (see the answer).
Alternatively you can specify background of .ui-jqgrid .ui-widget-header. The demo uses the background from "Dot Luv" theme. Additional to background I specified colors of the text and the border to make the look of header better. I used CSS
.ui-jqgrid .ui-widget-header {
border: 1px solid #0b3e6f;
background: #0b3e6f url(http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/dot-luv/images//ui-bg_diagonals-thick_15_0b3e6f_40x40.png) 50% 50% repeat-x;
color: #f6f6f6;
}
The resulting grid looks like on the picture below
I've been having difficulty changing the active colour of an icon in my tabpanel item in Sencha Touch 2.2. I've tried lots of variations of CSS and SASS but have not managed to change it. The CSS I have tried:
.x-tabbar.x-docked-bottom .x-tab-active {
color: #000000;
background-color: #000000;
}
.x-tab-active {
background-color: #000000;
color: #000000;
}
I've also tried setting the active colour in SASS, but this doesn't seem to work either. The only bit of CSS that seems to have that blue in it is this bit:
.x-tabbar-light .x-tab-active .x-button-icon::before {
color: #1da2ff;
}
...but when I try setting that to black, nothing happens! Anyone have any ideas how I can change it??
EDIT: I tried the first suggestion changing the CSS to this:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #000000;
}
...but this is what I see:
Applying color: #1da2ff; to the :before pseudo-element is the right thing.
The reason why it doesn't work for you is that the rule get overridden by another one with a more specific selector:
.x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon:before {
color: #50b7ff;
}
This is the exact situation where using !important is appropriate and not shameful:
.x-button-icon:before {
color: #1da2ff !important;
}
You have the right idea by selecting the icon, which is a span, and not the wrap, which is a div.
The div wrap .x-tab-active has a background color that decides the background of the active box. The icon has an image mask so background color or background-image gradient will determine the color of the icon. There is an additional span that wraps the text, like "x-button-label, for which a color style will change its color.
For changing the color of the icon try:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #1da2ff;
}
Thanks a lot, it was enough to add this in my CSS:
.x-tabbar-light.x-docked-bottom .x-tab-active .x-button-icon:before {
color : #000;
}
There was no need to add !important for me as I was using the new base theme for ST 2.2, but your solution worked great!
:-)
I have a CSS3 transition set to trigger on an h1 element, whenever some JavaScript changes the class name of a containing element to include "active". To do so I have two CSS declarations:
#idname .classname h1 {
opacity: 0;
left: -1.25em;
z-index: 3;
position: relative;
}
Followed by:
#idname .classname.active h1 {
opacity: 1;
left: 0;
-webkit-transition : all 4s ease;
-moz-transition : all 4s ease;
-ms-transition : all 4s ease;
-o-transition : all 4s ease;
transition : all 4s ease;
}
This works beautifully in webkit browsers, but appears to be failing in Firefox. My suspicion is this is something to do with how I'm triggering based on a class name change, though I could be wrong. Does Firefox not allow you to do this? Has anyone got a good workaround? Thanks in advance for any help you might be able to provide.
My problem was resolved by adding a slight delay between adding something to the DOM, and then adding a specific class name to trigger the animation. 20ms was long enough for me to get it working in Firefox.
I'm trying to use the following CSS styles. They are working on most browsers, including ie7. However in ie8, the transparent background does not show and instead I get the background color which I would like to leave set as a fallback color.
section.rgba{
background-color: #B4B490;
background-color: rgba(200, 0, 104, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
zoom: 1
}
I would like to be able to get this to work without having to resort to an IE stylesheet where i set the background color to none. Is this possible?
Anybody know how to fix it?
After glancing over at CSS3please I realized I was doing overkill with my IE7/IE8 gradient styles. Simply using the following style does the job:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
Apparently, there is no need for the -ms-filter and zoom rules.
Just adding this as an update - I know the OP got their answer but I found this question while trying to figure out why it (the "fallback") was even "working" in IE7, it confused me no-end so here's what I found out.. it's not working properly in IE6/7...
IE8 is right here, what you're seeing (with the code in the OP) in IE8 is the background color showing through the gradient filter overlay, and as it's the same color that makes the gradient look like it's not working and that all you're getting is the solid color. That's what should happen in all IE's!
IE6 & 7 are incorrectly ignoring the fallback (so it's not really a fallback) and have their transparent background-color because of a bug, purely because the OP has the colors, both hex and RGBa specified using background-color
There are many ways to workaround this.. see: IE Background RGB Bug - and the last comment especially for ways - this workaround would only really be applicable if not using filters/gradients i.e. really using just RGBa (semi-transparent) backgrounds.
If using MS "filter" Gradients to simulate RGBa, The MS filters are stable back to IE5.5 so the reality is that they don't need a fallback and background: none; fed to IE only browsers, to override the fallback required for other browsers (weird huh!) is likely the best solution in the original case - A fallback colour is only necessary for older browser versions of Opera(especially) & Firefox, Safari et al in the case of their gradients/rgba not yet being supported.
It appears, you have to put either width or height to DIV CSS for gradient to work in IE 7+
( at least I had to )
.widget-header {
text-align: center;
font-size: 18px;
font-weight: normal;
font-family: Verdana;
padding: 8px;
color: #D20074;
border-bottom: 1px solid #6F6F6F;
height: 100%;
/* Mozilla: */
background: -moz-linear-gradient(top, #FFFFFF, #E2E2E2);
/* Chrome, Safari:*/
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E2E2E2));
/* MSIE */
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E2E2E2');
/* Opera 11.10 + */
background-image: -o-linear-gradient(top, #FFFFFF, #E2E2E2);
}
Hope this helps
I found I had to change the <a> element from display:inline to display:block before the filter style would work. Also, the color can be specified with a 4-byte sequence where the first byte is opacity, then rgb, ie. #oorrggbb. Eg.
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;
You're using Modernizer wrong. Modernizer places classes on the HTML element; not each individual element. Here's what I used in IE8 to color the SECTION tags.
.rgba section {
background-color: rgba(200, 0, 104, 0.4);
}
.no-rgba section {
background-color: #B4B490;
}
.no-cssgradients section {
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
zoom: 1;
}
The zoom rule is to make sure hasLayout was triggered, your use-case not having a need for it is probably because hasLayout is already being triggered.
regarding the -ms- prefix, according to Microsoft's documentation ( http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx scroll down to "Downlevel Support and Internet Explorer 4.0 Filters", no anchors I can link to), to target IE8, one should be using the -ms- prefix, to target anything prior to that, one should be using the unprefixed one
#element {
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -ms-linear-gradient(black, white); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(black, white); /* the standard */
}
The best solution that works for IE7 and IE8 is to use a gradient image and set repeat-x: true while putting it in the background. This works for all browser types that I have found.
you can use the -ms-filter but i guess its the same issue as opacity if you do filter before -ms-filter it fails se more at:
http://www.quirksmode.org/css/opacity.html for that theory
so you need to do like this:
background-color: #D5D6D7;
background-image: linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -o-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -moz-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -ms-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(213,214,215)),
color-stop(1, rgb(251,252,252))
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D5D6D7',EndColorStr='#FBFCFC')";
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D5D6D7', endColorstr='#FBFCFC');
this works for me
besides that you cant have a 8 char hexcode (hex is latin for six) and on top of this you have the same color to gradient between you have to have different colors