Menu
i've been struggling for a while trying to have the rotate(xdeg) feature on IE 8 , 7 and 6 , for this i google for a while and found cssSandpaper but since i have to load 4 diferents scripts i want to do it only if its necessary for this im using modernizr im trying something like this:
<head>
<link rel="stylesheet" href="stilos/estilo.css" />
<script src="scripts/modernizr.custom.19387.js"></script>
<script src="scripts/jquery-1.8.1.js"></script>
<script src="scripts/misfallbacks.js"></script>
</head>
<body>
<div id="acerca"><a href="#">Acerca de mi</a></div>
</body>
my css file(estilo.css):
#acerca{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
-sand-transform:rotate(90deg);
position: relative;
top: -233px;
left: 462px;
width: 123px;
height: 23px;
z-index:100;
}
my js file(misfallbacks.js)
Modernizr.load({
test:Modernizr.csstransforms,
nope:['transformie/EventHelpers.js/','transformie/cssQuery-p.js','transformie/sylvester.js','transformie/cssSandpaper.js']
);//Fin de monernizr on load
It works great on safari, chrome, opera, Firefox and IE9 but when i try on IE8 or IE7 i get the following error on the consoleSCRIPT5007: Unable to get value of the property 'addEventListener': object is null or undefined EventHelpers.js, line 49 character 9
I added a console.log to try and find out what was going on and went to that line here it is(EvenHelpers.js):
me.addEvent = function(obj, evType, fn){
console.log(obj);//I've added this to try to figure out what is going on
if (obj.addEventListener) {........//here is the error
on the next run i checked the console again a saw this LOG: null , i'm no expert on javascript so im not sure what is going on but i try something diferrent and added the cssSandPaper using the script tag like this:
<head>
<link rel="stylesheet" href="stilos/estilo.css" />
<script src="scripts/modernizr.custom.19387.js"></script>
<script src="scripts/jquery-1.8.1.js"></script>
<!--<script src="scripts/misfallbacks.js"></script>-->
<script src="transformie/EventHelpers.js"></script>
<script src="transformie/cssQuery-p.js"></script>
<script src="transformie/sylvester.js"></script>
<script src="transformie/cssSandpaper.js"></script>
</head>
to my surprise worked like a charm, and like this i have the rotate feature even in IE7 and IE8 and the console say this now LOG: [object HTMLScriptElement] but im aware that using this way i will be always loading these 4 scripts even when they are not necessary and that is not mi goal but since im starting with modernizr and javacript to be hones i have no idea of what is going on D: and why when i load the scripts using nope:[''] from modernizr doesnt work. anyone knows a way to solve this? ...im sorry for my english not my first languague
edit: i did a little research on this object HTMLScriptElement and its suppose to refere to a script tag i suppose that when i load the js file with nope: from modernizr something change and this object become null since is no longer loaded inside a script tag...but im still in the same problem... how do i solve this? :/
jsFiddle Test Modernizr
jsFiddle Test without Modernizr
Answer: i ended up using if lt IE 9 to load the sand paper scripts it got the job done
408
I have tried to solve this with different and easier approach. It worked for me and I wish it works for you too.
I included IE9.JS (js that makes IE <9 browsers behave like IE9 + standards compliant). you can visit this link to know how to do that. http://code.google.com/p/ie7-js/
Then I slightly modified your CSS estilo.css as following.
I add following style to your #acerca style definition.
filter:'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
It worked. only problem is this kind of transformation is not as readable as -ms-transform or any other standard web transform.
188
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
