I am trying to rotate the label on my X-Axis on my flot graph in a similar way a user asked here - Rotate Flot Tick Labels
The problem I am facing is that it looks like the CSS selector for the X-Axis doesn't select anything. The selector I am using is:
div.xAxis div.tickLabel
{
transform: rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
/*rotation-point:50% 50%;*/ /* CSS3 */
/*rotation:270deg;*/ /* CSS3 */
}
I also don't even understand how the graph is even visible. I don't know much about the canvas tag, but it looks like it is completely empty.
I don't understand how the source there is empty. I would think there would be some sort of markup like vector points that represent the graph. Is that just how canvas works? Also, how would you even know what CSS selectors to use at that point if you can't view the source?
You are probably using the canvas plugin, and setting canvas: true in your options. That forces flot to draw the labels on the canvas, rather than putting them where you are expecting (in the divs).
Related
I am trying to integrate some non editable zones in my TinyMCE 4. And it works fine. But now I want a cursor to become "not-allowed" over the non editable elements. I set it in css and it all works fine for Chrome and Firefox but not for IE9 the cursor don't change!
Is there a workaround for this problem?
Thanks
You can find a simple exemple here http://fiddle.tinymce.com/iSeaab
IE only supports CUR and ANI as formats from CSS to change cursor.
{
cursor: url('/cursors/customMoveCursor.png'), /* Modern browsers */
url('/cursors/customMoveCursor.cur'), /* Internet Explorer */
move; /* Older browsers */
}
Please look here. or a good link here
Have you tried to edit the CSS for TinyMCE like (tinymce/skins/lightgray/skin.min.css)
add what you need. Example:
.mce-grid td.mce-grid-cell div[disabled]
{
cursor:not-allowed
}
I still recommend using .cur file for IE.
I'm developing this website
www.goldensprocketzmedia.com/BlackTheme
I'm using a custom cursor.
.png file for chrome n firefox
.cur file for IE
The cursor works perfectly fine on chrome and firefox
but on IE the cursor behaved wired when i hover it on a link. It kind of blinks n then gets back to normal. also lags.
the css code isbelow
a, a:hover{cursor: url(../../../../cursors/camera.png), /* Modern - relative to the document */
url(cursors/camera.cur), /* IE - relative to the root */
default; /* Built-in fallback */} /*new line added*/
body{width:100%;padding-top:3em;background-color:transparent;color:#abaaaa;font-family:"Open Sans",Helvetica,Arial,sans-serif;font-weight:400;
cursor: url(../../../../cursors/camera.png), /* Modern - relative to the document */
url(cursors/camera.cur), /* IE - relative to the root */
default; /* Built-in fallback */
}
Could someone help me in solving this problem.
thanks
Try changing default to auto.
My goal is to increase the size of the checkboxes, cross-browser. I have accomplished this goal in Internet Explorer, Firefox, and Chrome by using the browser prefixes (-moz-, -ms-, etc.) with this:
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(2.1, 2.1); /* IE */
-moz-transform: scale(2.1, 2.1); /* FF */
-webkit-transform: scale(2.1, 2.1); /* Safari and Chrome */
-o-transform: scale(2.1, 2.1); /* Opera */
}
It is not working in Safari (and Opera, but I'm more focused on Safari). I have version 5.7.1 and I am accessing it from a windows desktop.
However, I was playing around with this jsfiddle and noticed that the scale works on divs:
http://jsfiddle.net/webvitaly/KKVXB/
I stripped out the code to get the minimum that will still get the desired result:
<div class="matrix3d"></div>
<input type="checkbox" name="opt1" id="option1" />
input[type=checkbox] {
-webkit-transform: scale(3,3); /* safari and chrome */
}
.matrix3d {
-webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */
}
Here's the jsfiddle for it: http://jsfiddle.net/3xr7Q/
The checkbox is larger as expected, but as soon as I took out the 'matrix3d' class or alter the 'matrix3d' html or css in any way, the checkbox goes back to its normal size.
Does anyone know why it works with the 'matrix3d' class and how I can accomplish the goal without it, preferably by not editing the HTML? I do not want to just add an extra 'matrix3d' div next to my checkbox because I don't know why it affects the checkbox.
Edit: Also, something I notice is if I refresh the page, it flashes to the big size before going back to the small size. Also, it would nice to figure out it on Windows, but if someone says it works on a Mac or iphone, that might be OK.
Input elements are inline not block level elements, and webkit has historically not supported transforms on inline elements.
One way to fix this is to add a display: inline-block to the input's CSS. I'm not an a Mac right now, so can't check this.
My project needs this scroll bar (image given),
I applied this to my css
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: #FFFFFF;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: rgba(242,91,32,0.9);
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-corner {
background-color: #FFFFFF;
}
but when i checked my page only chrome is showing the effect Firefox (27.0.1) and Internet Explorer(10for) are not responding to the changes.What I must add so that it becomes uniform for all of them ?
As mentioned by N.Nihar in a comment, Firefox and Internet Explorer in current versions don't support scrollbar customisation.
If you need to have the scrollbar styled, you may want to use a custom Javscript or perhaps even better a jQuery based scrollbar element. The first one to show up in google search is a Stack Overflow answer, or you can go for the Tiny scrollbar, or one from this list. There are plenty of Javascript and jQuery based scrollbars readily available.
If you do use one of those, though, be sure to test your solution thoroughly, because the behaviour of 'native' scrollbars is not that easy to mimic.
firefox and IE doesn't have capabilities for customizing scrollbar
I found a Stackoverflow article on creating text shadows in IE: StackQuestion
Now I tried all of the 'filter' solutions in there, and in IE9, the text renders horrible(although the shadow shadow shows, the text pixelates heavily...).
Does anyone know of a proper text-shadow technique for IE? Even if it is just for IE9...
Thank You
Check this site out: http://css3pie.com/
It's a plugin that enables you to use CSS3 in IE6-9
You can get text-shadow effects in Internet Explorer, taming IE's crunky filter shadow effects, forcing them to look okay and stop pixelating the text. Use the IE Chroma filter:
Set a background colour that is close to, but not the same as, your shadow colour - e.g. for black shadows, a dark grey, for white glows, a light grey
(set the background colour in a stylesheet or style rule inside an IE-only class or conditional comment, to not wreck your design in every other browser!)
Precede your IE filter CSS rule with a Chroma filter set to the same colour as the background fill
It looks (almost) quite good!
jsfiddle examples (load in IE8, IE9)
...or if you don't have easy access to IE8/9, here's a screenshot from that fiddle in IE9 IE8 mode. Notice the difference between the horrible, artifact-ridden, pixelated mess that is IE's default filter, against the quite crisp, normal-looking Chroma filter equivalents.
CSS code examples. Note how you've got a Chroma filter then another filter, all on one line, in quotes against one -ms-filter - and how the Chroma colour matches the background colour precisely, and how the Chroma colour compliments (but doesn't match) the main effect colour:
.chroma-glow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Glow(color=ffffff,strength=4)";
}
.chroma-shadow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ffffff)";
}
Some requirements (learned the hard way...)
Elements must be block or inline-block, can't be inline.
Filters fail to apply to any children that are position: relative; or position: absolute;
(they work if applied directly to position: absolute; or `position: relative; elements)
If you're adding the filters dynamically, e.g. with jQuery like $elem.css('filter','progid...');, it seems like the background colour must be applied directly to the element with the filter for the chroma to work. A couple of tips:
Have the effect colour, applied background colour, and chroma colour all identical
Since you'll want this background colour only in IE, use feature detection or IE detection.
#element {
filter: glow(color=black,strength=5);
}