How to rotate a column text in a table in HTML - javascript

I'm getting tired to trying to rotate the column text from a table in html.
This is what I have, it just works in chrome and Firefox, but not in IE9.
http://contoso2.azurewebsites.net/scores/listscores
I was seeing these examples about the vertical text. I'm using IE9 and it looks good, I supposed they are using something like a canvas, I really not sure.
http://jsfiddle.net/R4JvP/11/
http://www.ok-soft-gmbh.com/jqGrid/CheckboxesWithVerticalHeaders1.htm
The second link is what I'm interested show all the header columns in rotation: (-90)deg How can I implement this in all browsers?

You could use -ms-transform: rotate(-45deg);

-moz-transform: rotate Firefox 4+
-webkit-transform: rotate Safari 5+, Chrome 10+
-ms-transform: rotate Internet Exlorer 9+
transform: rotate

Related

CSS overflow hidden property is not working on iOS

I have a sidebar and when the button is pressed it goes in front of part of the main page. In order to prevent scrolling on the page in the back I use $("div").css('overflow','hidden').
This solution works fine for any browsers on my computer however it does not work on iOS devices. I did not check other phones because I don't have any.
Any reason why it fails on iOS, although it is working pretty fine on computers?
For whatever reason, certain css rules need the graphics accelerator turned on in iOS and it will not do it automatically.
This rule will turn on the hardware acceleration for iOS:
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
Apply it only to elements you know will need it, using it excessively can have negative performance implications.

Disappearing element with fullPage.js

I'm trying to get the fullPage.js (https://github.com/alvarotrigo/fullPage.js) on my site but when I slide down one and slide back up, the div on the video element is like disappearing and not sliding back with the video nicely, just pop, and appears. As far as I see it works well in Firefox.
Demo: http://beta.brainfunkers.co
Any ideas on this?
Thanks in advance!
That's a webkit bug as you can see here, so the problem its in Chrome.
Anyway, to solve it add the following style for your logo:
.topImage .topImageContainer .bfLogo{
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

Arrows diseappear on Safari Mac OS

I'm working on a wordpress website that uses the fullpage.js plugin (https://wordpress.org/plugins/wp-fullpage/).
There is a problem with the fullpage's arrows (left and right) on Safari on Mac OS: they seem to appear and disappear randomly. These arrows are printed through the CSS's ::before and ::after directives. From what I saw during my Googling, ::before and ::after compatibility with Safari is known to be problematic.
Has anyone already had and maybe solved this problem?
You are using and old version of fullPage.js. (2.4.3). That's like 22 versions old!
Try to update to the latest one (2.6.5).
Or, if you can not updated because of limitations with the wordpresss plugin, then, just add the following to your CSS stylesheet:
.fp-controlArrow {
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

Is it possible to rotate HTML object without CSS3?

I'm building an app, where I create an canvas element of a specific div with the html2canvas javascript library. The problem is that it doesn't support CSS3 rotate property so if an image is rotated in the app html2canvas doesn't render it correctly (it doesnt apply rotate).
So, is it possible to rotate an HTML object without CSS3?
you can rotate in within an other canvas element, that can be rendered in html2canvas. here is an post about that workaround:
html2canvas and css transform rotate
(If you don't need to use the html2canvas library perse)
It's is not (yet) possible to rotate objects without the use of css.
Some browsers (e.g. Firefox, Safari, Chrome) have there own transform
tag which is explained here:
http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html
.transformed {
-webkit-transform: rotate(15deg) scale(1.25, 0.5);
-moz-transform: rotate(15deg) scale(1.25, 0.5);
-ms-transform: rotate(15deg) scale(1.25, 0.5);
transform: rotate(15deg) scale(1.25, 0.5);
}
Extra:
for images you could use the jquery rotating plugin:
https://code.google.com/p/jqueryrotate/
for other object rotations this may be a possible solution but I don't have any experience with it:
http://coursesweb.net/javascript/rotate-html-objects-div-span-image-jquery_t

Rotate a webpage clockwise or anticlockwise

I want to give user the option to rotate the content of my webpage, including images, text and divs. Is this possible?
PS:
I want to rotate the entire webpage. Not just a container div.
You could use CSS3
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
http://jsfiddle.net/KdNNy/1/
Doesn't work on all browsers though. This example is only for firefox and chrome/safari. Opera should have it as well. Maybe even IE
EDIT
And just in case anyone thinks "oh he's just rotating a DIV!", check this
http://jsbin.com/utupu5/ (full page)
the only way I have heard of to make this achieved is embeding your HTML in a SVG foreign content element.
If you're using jQuery you can use the jRumble plugin to achieve this
The relevant website can be found here

Categories