Is it possible to rotate a div element using Javascript & NOT using HTML 5?
If so what attributes of the element do I set/change to make it rotate? Ie, div.what?
PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.
Old question, but the answer might help someone...
You can rotate elements using proprietary CSS markup in all major browsers (the term HTML5 isn't specifically relevant here though).
Example of how to rotate a element 45 degrees using CSS:
.example {
-webkit-transform: rotate(45deg); /* Chrome & Safari */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9+ */
-o-transform: rotate(45deg); /* Opera */
transform: rotate(45deg); /* CSS3 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}
Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.
I'm fairly sure Matrix transforms (at least in some capacity) are also supported In MSIE 6, but it's more pernickety about under what circumstances it supports them (and it's increasingly hard to care 8).
Yes, it is possible to rotate a div not using HTML5, but using CSS3.
You can experiment with CSS rotation on CSS3 Please (toggle the .box_rotate rule on).
For more info, Google for: css rotate
If you want a way to have rotated text that works on all browsers (including IE6) then try Raphaël.
I know I am late. For posterity's sake, I wanted to post this: This website is pretty good and it even performs the matrix transformations for its corresponding css3 counterparts
You can do it using Matrix in IE. Here is a function that solves it in a crossbrowser way.
http://kaisarcode.com/javascript-rotate
If you are looking for a way to do it instantaneously, than you can use
element.style.transform = "rotateZ(90deg");
Make sure to use quotes around the CSS statement.
If you want it over the duration of, say, a second (I know you don't want this, I am just doing it anyways), you can put
element.style.transition = "1s";
element.style.transform = "rotateZ(90deg)";
Related
I want to add multiple css styles to a dom element and it should also work in different browsers.
So, performance wise which one of the below would be the better option?
Adding all different prefixed css together leaving the browser to work on which one to select
domElement.style.cssText = "-webkit-transform: scaleY(1.25); transform: scaleY(1.25)";
Adding css based on the browser or platform programmatically
if(platform == "Chrome"){ //assume platform is found initially using js
domElement.style.cssText = "-webkit-transform: scaleY(1.25);
} else {
domElement.style.cssText = "transform: scaleY(1.25);
}
You should not try to optimize what the browser already does on its own.
Just throw in as many invalid CSS properties as you want. An invalid CSS selector or property is not evaluated by the browser.
You are doing some mistakes/errors:
1.) Do not use inline stylesheets. There are already too many question on SO on how to overwrite such inline styles. The short answer is: you can't. The longer answer is: you can, but not without opening a door to the !important hell.
2.) You are doing client-detection in a case that clearly requires feature detection. There is no possibility for your code to recognize, that a newer Chrome version already uses the un-prefixed notation of that property.
It would be much simpler and gaining more performance if you can do that without any JS at all:
.my-element:hover {
-webkit-transform: scale(0, 1.25);
-ms-transform: scale(0, 1.25); // IE9 only
transform: scale(0, 1.25);
}
I am working on one project in which i want to draw a angle line and at the end of line i have to put one angle character . but i don't want to use canvas because requirement is user can select any of those line by clicking on it . this might not possible through canvas . Give me some suggestion .
Actually I want to draw following image and Also can select one or multiple lines available in it .
Try the css transform property: http://www.w3schools.com/cssref/css3_pr_transform.asp
This is very easily possible on canvas, but I would suggest SVG for this. You can find a very good SVG library here http://raphaeljs.com/, Or you could use a canvas library also, http://kineticjs.com/.
To accomplish this on your own using canvas, you simply have to track the mouse co-ordinates on the canvas in a mousemove event then on a click event work out the mouse position relative to your line, if the mouse click was inside your line you have a click on the line.
Without supplying any code or anything you have tried so far I cannot go into more detail as this is a very broad and generic question not really tied to any one thing.
I will suggest that you use jCanvas library. It will allow you to manipulate each line as separate layers and you can also attach mouse and touch events to those layers very easily. It is pretty easy to learn and understand as it is based on jQuery and the syntax is almost similar to jQuery.
Have a look at animate CSS3 feature: http://www.w3schools.com/css3/css3_animations.asp
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
/* Safari and Chrome */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}
#keyframes mymove
{
from {transform: rotate(0deg);}
to {transform: rotate(-90deg); }
}
#-webkit-keyframes mymove /* Safari and Chrome */
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-90deg); }
}
</style>
</head>
<body>
<p><strong>Note:</strong> The animation-name property is not supported in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p><b>Note:</b> Always specify the animation-duration property. Otherwise the duration is 0, and the animation will not be played.</p>
</body>
</html>
I'm finally getting round to creating a website for my print design portfolio. I know exactly what I'm trying to achieve but being fairly new to web design I have found some limitations with the knowledge I have....
I have used css3 transitions (currently they only work in Chrome and Safari) to make flip cards which are triggered on hover - these work perfectly and are exactly what I am looking for. All I am now trying to do is add an JavaScript function (using jQuery) that permanently flips the card on click. I don't want it to disable the on hover function which is pure css though.
I have found this extremely difficult to implement.
The site is here:
www.samueljamesdesign.com
Any help would be greatly appreciated.
Just modify your CSS so that the rotation is also triggered by adding a class. For example, change this rule:
#card-container:hover .front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
To this:
.card-container:hover .front,
.card-container.selected .front,{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
Note that you cannot use #card-container, as it is invalid to have multiple elements with the same ID in the document. Set card-container as the class instead.
To make things stay flipeed when clicked, with your new CSS, you do:
var tiles = $('#tiles .card-container');
tiles.click(function() {
tiles.removeClass('selected');
$(this).addClass('selected');
//To change the image in maincontent to match the
//one in the flipcard clicked on:
$('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});
I would like to know how zoom property can be controlled through javascript,
like div.style.top , how to specify for zoom ?
The Firefox & Chrome (Webkit) equivalents to the IE-specific zoom property are, respectively, -moz-transform and -webkit-transform.
A sample code would be:
.zoomed-element {
zoom: 1.5;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
}
You'd have to be a bit more careful with Javascript (test for existence first), but here's how you'd manipulate them:
el.style.zoom = 1.5;
el.style.MozTransform = 'scale(1.5)';
el.style.WebkitTransform = 'scale(1.5)';
It is a property of style, but it's not supported by all browsers. It's a non-standard Microsoft extension of CSS that Internet Explorer implements. It is accessed like this:
div.style.zoom
You might want to try a lightweight jQuery plugin called Zoomoz. It uses CSS3 transform properties (translate, rotate, scale). Check out the "Zooming the jQuery way section. Hope it helps.
$(document).ready(function() {
$("#element").zoomTarget();
});
I want to turn down the opacity on an element when a user performs an action.
The current code I have is:
document.getElementById('MyOpaqueElement').style.opacity = 0.3;
// There are checks in the real code for NULL, etc.
This works on Firefox, Safari, etc. IE8 has different ideas about opacity. I have read a couple of articles but have yet to find a definitive answer on the most portable method to do this in a cross-browser way.
There are various browsers-specific settings and notations you need to take into consideration.
See Quirksmode.org: CSS2 - Opacity
I suggest using a Framework like JQuery, Prototype, MooTools or Dojo. I know it seems ridiculous to add dozens of kilobytes of code just for some opacity at first, but it's really worth it. It just works in one way for all browsers.
EDIT- Poster is using jquery..
Easy way:
$(el).css('opacity', '0.3');
(I checked the jquery sources, and it handles opacity for cross-browser compatibility automatically, so that should work)
Or for a CSS solution:
Just give it a class, e.g. 'transparent', and add this to your CSS file:
.transparent {
filter: alpha(opacity=30); /* for IE */
-khtml-opacity: 0.3; /* khtml, old safari */
-moz-opacity: 0.3; /* old mozilla, netscape */
opacity: 0.3; /* good browsers: FF, safari, opera */
}
The equivalent should be document.getElementById('MyOpaqueElement').style.filter = 'alpha(opacity=30)';
By the way, even if you don't use a library like YUI or JQuery, you can download them and search their sources for the word
opacity
.