Menu
I have been trying to create rotating object using jQuery and without any other plugin. I seen the perfect way to make it cross-browser without much calculations, in this link. But when use it simply like this ------
div#test {
behavior:url(resource/-ms-transform.htc);
-ms-transform:rotate(45deg);
background:#333;
color:#fff;
padding:5px 5px;
width:200px;
height:auto;
}
But with jQuery CSS like this --------
$(document).ready(function () {
$('div#test').css({
'-ms-transform':'rotate(45deg)'
});
});
It doesn't seem to be working in the jQuery CSS mode, but with the normal CSS mode it seems to be working quite fine! Can anyone explain why is this happening and also provide me a solution (NOTE: I don't want any jQuery Plugin for this solution, please!).
Here is my whole page ------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div#test').css({
'-ms-transform':'rotate(45deg)',
'-moz-transform':'rotate(45deg)',
'-o-transform':'rotate(45deg)',
'-webkit-transform':'rotate(45deg)',
'-khtml-transform':'rotate(45deg)'
});
});
</script>
<style type="text/css">
div#test {
behavior:url(resource/-ms-transform.htc);
background:#333;
color:#fff;
padding:5px 5px;
width:200px;
height:auto;
}
</style>
</head>
<body>
<div id="test">This is a test!</div>
</body>
</html>
542
I don't know the HTC file in question (a link to where you got it from would be a handy edit to the question), but I am familiar with other HTCs such as CSS3Pie.
My understanding of the way 'behavior' works is that the behavior itself only runs when an element triggers the stylesheet -- ie typically only on page load, or if you change the class of an element.
Using the example of CSS3Pie, one of the key things that makes it better than previous HTCs that did the same job is that it also sets up Javascript events which watch the element for any changes, and keeps the behavior features up-to-date. But this isn't a feature that most HTCs do.
I can't be sure if this is the problem without knowing more about this specific HTC, but my guess is that it simply doesn't have any code to keep track of the item after it's done its initial transformation work.
If that's the case, you may find that no amount of tweaking the -ms-transform style will have any effect. In that case, the only alternative I can suggest is to have a series of classes with the various rotations you want, and use JQuery to switch between those classes; that ought to trigger the behavior to be run.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
