CODEWITHSUNDEEP
javascriptmodernizrcss-transformspolyfills
Luis Palacios
Luis Palacios

Reputation: 754

Modernizr with cssSandpaper?

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

Upvotes: 13

Views: 1696

Answers (3)

Carlos Martinez T
Carlos Martinez T

Reputation: 6528

It seems like one script needs to load after the other.

Try with this script:

if (!Modernizr.csstransforms){
    Modernizr.load({
        load: 'transformie/EventHelpers.js',
        complete: function () {
            console.log("loaded EventHelpers");

            Modernizr.load({
                load: 'transformie/cssQuery-p.js',
                complete: function () {
                    console.log("loaded cssQuery");
                    Modernizr.load({
                        load: 'transformie/sylvester.js',
                        complete: function () {
                            console.log("loaded sylvester");

                            Modernizr.load({
                                load: 'transformie/cssSandpaper.js',
                                complete: function () {
                                    console.log("loaded cssSandpaper");
                                }
                            });

                        }
                    });
                }
            });

        }
    });

};

Upvotes: 0

Sandeep Khandewale
Sandeep Khandewale

Reputation: 56

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.

Upvotes: 4

ygaradon
ygaradon

Reputation: 2298

ok, you buy me i siting on this like an half an hour there is a bug in the EventHelpers.js in the init function line 445 it have there a cc_on statement so only ie will read it.

now it create a script tag at runtime an the tag was not created so it equal to null. and the code is break!

i modified the the EventHelpers.js and fixed the problem. the original code write the script tag with document.write i change it to document.createElement and it seem to work no bugs at the consloe

jsfiddle: http://jsfiddle.net/5xdDG/3/

now it really should rotate the div even in ie7 or 6 because in the jsfiddle i don't see it rotated ?

and i am sorry to, English is not my first language to ;)

Upvotes: 0

Related Questions