Normally, if I create:
<meter value="30" max="100">Low</meter>
I'll end up with a horizontal meter/bar if viewed on a browser that supports the html5 meter element.
Is it possible to create a vertical meter with html5?
The only solution I've been able to come up with so far is using CSS3 rotation (transform).
Yeah transform is the only way to do this..
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
Transform is the answer. The whole point of meter is that it's a semantic, not a presentational element and you should be able to style it however you want with CSS>
Using transform on the meter element has a major drawback which I have yet to find an elegant way around, it doesn't seem to change the amount of horizontal width the element requires. eg, for a meter with width 180px and height 15px transformed by 270deg, the meter will show as a vertical bar with height 180px and width 15px, but the bounding box ends up as 180x180 with a huge white space on the left side. Further CSS is then needed to reposition the element so the with gap is hidden. I've observed this behaviour on both Chrome and Firefox.
Related
Summary: My 90-degrees rotated text, put into rowspaned cell, is word-wrapped to two lines, though in my opinion, there is enough space in cell to write it in a single line. Is this some kind of browsers' bug?
Details: I have a single-one text, that I rotate 90 degrees:
.rotate-90-degrees
{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
-moz-transform: rotate(-90.0deg); /* FF3.5+ */
-ms-transform: rotate(-90.0deg); /* IE9+ */
-o-transform: rotate(-90.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-90.0deg); /* Safari 3.1+, Chrome */
transform: rotate(-90.0deg); /* Standard */
}
I then put it into a table cell, rowspaned to four rows:
<td rowspan="4">
<div class="rotate-90-degrees">
Quest. no 1
</div>
</td>
Browser (Chrome) renders div itself as 44px x 40 px, while table cell's as 61px x 148px with padding set to 8px. Though, I was pretty sure, that I'll get entire text in a single line, it is word-wrapped to two lines and produces quite ugly effect:
It seems, that there is enough space to write it in a single line. 44px div's width (which now becomes height, due to rotation) plus 2 x 8px padding is only 60px, which is still far, far less than cell's height set to 148 px. Why, then, it is being word-wrapped?
When I highlight cell (second on image) with Chrome Developers Tools, it seems to me, that browser is adding an enormous height padding to cell's content, completely ignoring CSS-set padding (8px). Or is there any other reason, that I just don't see?
I tried to "fix" this, by changing padding to 0 px or even negative value, but without any luck. Is there any way, that I can force browser to render this text in a single line, if there is space enough to fit it?
BTW: Tests and examples are made in Chrome, but effect in IE and Firefox is exactly the same.
Preventing wrapping in CSS is just:
white-space: nowrap;
(Other values may also be useful.)
I searched for this and found many solutions (using css3 transition).
Actually i am using {zoom:1.5} for all my buttons. But it is not working on firefox.
when I use transition property like:
-moz-transform: scale(1.5); /* Firefox */
-moz-transform-origin: 0 0;
All my buttons are overlapping. See ok and cancel button.
Is there any other alternative for this??
any help??
To scale 50% and keep top center:
transform: scale(0.5);
transform-origin: 50% 0;
This did work with Safari/Firefox/Chrome (I did not test with IE)
You can use:-
-moz-transform: scale(0.8);
in firefox as alternative..
It was a combination of the existing answers that did it for me:
-moz-transform: scale(...);
-moz-transform-origin: 0 0;
With 50% 0 as ricardo's answer suggesst for the latter option there was a left margin.
What others have posted isn't feasible because the image will still take the same amount of space. Granted the image size doesn't need to resize programmatically, you can scale the image using Gimp, and remove zoom.
Image | Scale Image
File | Export As...
put transform: scale(0.5); instead of zoom:0.5px, this will work.
may be you have to change margins accordingly
I have a div (tab) that I rotate 270 degrees like so:
-webkit-transform-origin: 100% 0%;
-webkit-transform: rotate(270deg);
(Example here: http://users.telenet.be/prullen/align.html)
When I want to align the tab with the top edge of the content box, it's pretty easy. i just set "top" to "3px" (the border size). However, for the bottom it's another story.
It appears I need to calculate this with jquery like so:
$tab.css('bottom', (Math.abs($tab.outerWidth()-$tab.outerHeight())
(Though for this example I'm just using a static value. It may not look exactly like I want it to in your browser, here's an image: )
I was wondering if there is a better way since this does not seem to work all that well in firefox for example (1 pixel shift). Is there an easier way by adjusting the transform-origin perhaps?
(Note that I need to keep the same div structure I have now)
Ideally it'd be as easy as setting bottom to: 3px (the border thickness)
Thanks.
When you want to put the tab at the top of the sticky, apply the class .tab-top to the .sticky-tab element.
.tab-top {
transform-origin: 100% 0%;
transform: rotate(270deg);
top: 5px; /*Border Size*/
right: 5px; /*Border Size*/
}
When you want to put the tab at the bottom of the sticky, apply the class .tab-bottom to the .sticky-tab element.
.tab-bottom {
transform-origin: 100% 100%;
transform: rotate(270deg) translateX(100%);
bottom: 0;
right: -18px; /*Height (appearing as width once rotated) of the tab*/
}
Essentially you want to change the transform origin to be at the bottom right-hand corner of the element and then attach the element to the bottom of its parent. This will place the element exactly below the .sticky. Then use the translateX(100%) to force the bottom of the .sticky-tab to align with the bottom of the .sticky.
Problem: css3 transforms applied to a child element inside a div are ignored by the browser (FF5, Chrome12, IE9) when calculating the scrollHeight and scrollWidth of the containing div's scrollbars when using "overflow: auto;".
<style type="text/css">
div{ width: 300px;height:500px;overflow:auto; }
div img {
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
}
</style>
<div><img src="somelargeimage.png" /></div>
I have put together a small test on jsfiddle showing the undesired behavior.
http://jsfiddle.net/4b9BJ/
Essentially I am trying to create a simple web based image viewer using css3 transforms for rotate and scale and would like a containing div with fixed width/height to be able to scroll to see the full content of the image it contains.
Is there an intelligent way to handle this issue, or even a rough workaround? Any help is appreciated.
I added an extra div to each of the transformations and by setting fixed widths for those divs and clipping overflow I manged to make them the correct size. But then I had to use position: relative and top: blah; left: blah to shift the images into the correct position.
http://jsfiddle.net/4b9BJ/7/
I've got a <span class="name"> next to an <img> inside a <div>. Inside this span I have some text which I want to turn 90 degrees. However, when I do this (as code suggests below) the span ends up in a somewhat weird position on top of the image.
In IE, the text doesn't rotate at all.
.name {
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Any suggestions as to how I solve this?
I've fixed this on my own what I needed to do was put a fixed size on the span and then use position:absolute; to position it where I wanted it
I'm not sure how to fix it. But the reason it doesn't rotate in IE is that you are using "webkit" and "moz" to rotate - which are firefox-like-browser specific functions. You'll have to google for an IE-equivalent.