Home/ Questions/Q 8859623
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T15:06:44+00:00

i’ve been struggling for a while trying to have the rotate(xdeg) feature on IE

  • 0

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 console
SCRIPT5007: 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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0