Jump to content
Search Community

Disable script if browser is IE10?

c0d3n4m3 test

By c0d3n4m3
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

c0d3n4m3 test

c0d3n4m3

Posted
Posted

Hi guys,

 

everything is going great with the plugin, really really fantastic stuff! 

 

I do have one question, as IE is just a bugger.. 

 

What I have, is an external script loading from my server, that contains the JS for my GSAP animation. That works fine, and looks great. 

 

What I have no idea about, is how to make it so if the browser that the site is viewed in is Internet Explorer 10, how can I stop my animation script from loading, or is there some JS I can put within my rotation animation script to stop it from running if the browser is IE10?

 

Hopefully you guys can help as I've been stumped on this one for a while now. :)

 

you all rock!

 

 

Thank you!

Link to comment
Share on other sites
Jonathan test

Jonathan

Posted
Posted

Hello c0d3n4m3, and Welcome to the GreenSock Forums!

You can check out my anwser on StackOverflow:

http://stackoverflow.com/questions/7690676/javascript-the-best-way-to-detect-ie/20201467#20201467

Checks if browser is IE - IE8, IE9, IE10, IE11. You can check for document.documentMode

var hasDocumentMode = (document.documentMode !== undefined),     
    isIE10 = (document.documentMode === 10);

// browser is IE
if(hasDocumentMode) {     
    if(isIE10){         
       // browser is IE10    
    } 
}

You can basically use this to check if the browser is IE10, than if so.. then dont run your code.

If possible you can also setup a codepen example so we can see your code in action.

Here is a video tut by GreenSock on How to create a demo codepen example.

Hope this helps! :)

  • Like 2
Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Yeah since he mentioned rotation I'm assuming that the issue could be that.

 

Completely off topic but... who the heck is the dude in your avatar??!!. The guy's eyes are freaking me out a little  :?

 

if my memory doesn't fails is an actor from a really old movie, right?

Link to comment
Share on other sites
c0d3n4m3 test

c0d3n4m3

Posted
  • Author
Posted

Brilliant, thanks guys for your help! 

 

The reason I'm after the recognising of IE10, is because I'm trying to make my "rotator.js" GSAP script, not load if the browser is IE10, funnily enough, because of lack of support for the preserve-3d rule.

 

I've managed to sort the preserve-3d issue out using the IE10 preserve 3D workaround, not the best, but it works for now.

 

I'm coming up with an issue with your script snippet, it's saying this:

 

"Uncaught ReferenceError: isDocumentMode is not defined"

 

Any thoughts guys? :)

 

I've put the snippet with the <head> tags within a <script> tag, and that had the same error, and I also put the snippet within my rotator script. Both above and below the Tweenmax code, and that gave the error also.

 

Where can I place this snippet?

   	var hasDocumentMode = (document.documentMode !== undefined),
   	    isIE10 = (isDocumentMode === 10);

   	// browser is IE
   	if(hasDocumentMode) {
   	     if(isIE10){
   	         // browser is IE10
   	     }
   	}

This is my rotator.js:

 

window.onload = function(){

    var logo = document.getElementById("main_flip");

    var myTimeline = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:6});
    myTimeline.append( new TweenMax.to(logo, 30, {ease:Elastic.easeInOut, css:{rotationY:1260}}) );
   	myTimeline.append( new TweenMax.to(logo, 30, {delay: 6, ease:Elastic.easeInOut, css:{rotationY:0}}) );

}
Link to comment
Share on other sites
Jonathan test

Jonathan

Posted
Posted

I'm SORRY c0d3n4m3.. when I pasted the code above I had a variable typo.. my bad.. it is hasDocumentMode not isDocumentMode ..

var hasDocumentMode = (document.documentMode !== undefined),     
    isIE10 = (hasDocumentMode === 10);

// browser is IE
if(hasDocumentMode) {     
    if(isIE10){         
       // browser is IE10    
    } 
}

sorry about that :)

Link to comment
Share on other sites
c0d3n4m3 test

c0d3n4m3

Posted
  • Author
Posted

Hehe, that's OK, it's working now, but I cannot seem to get the animation to kill(); when viewing in IE10. Here is my snippet now:

window.onload = function(){

    var hasDocumentMode = (document.documentMode !== undefined),
	    isIE10 = (hasDocumentMode === 10);
    var logo = document.getElementById("main_flip");

    var myTimeline = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:6});
    myTimeline.append( new TweenMax.to(logo, 30, {ease:Elastic.easeInOut, css:{rotationY:1260}}) );
   	myTimeline.append( new TweenMax.to(logo, 30, {delay: 6, ease:Elastic.easeInOut, css:{rotationY:0}}) );

   	if(hasDocumentMode) {
   	    if(isIE10){
   	      myTimeline.kill();
   	    }
   	}

}

I would also like to say a massive thank you as you've been a great help with all this! :D

Link to comment
Share on other sites
Jonathan test

Jonathan

Posted
Posted

Also if you dont want to have your animation run in IE10.. why not just wrap the IE10 check conditional around your code inside your window.load event? And check if not IE10:

window.onload = function(){
    
    // checks if browser is not IE10
    var docMode = document.documentMode,
        hasDocumentMode = (docMode !== undefined);
    
    if(!hasDocumentMode) {
        if(docMode !== 10){
                  
            var logo = document.getElementById("main_flip");
            var myTimeline = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:6});
            myTimeline.append( new TweenMax.to(logo, 30, {ease:Elastic.easeInOut, css:{rotationY:1260}}) );
   	    myTimeline.append( new TweenMax.to(logo, 30, {delay: 6, ease:Elastic.easeInOut, css:{rotationY:0}}) );
        }
    }

}

Does that help?

 

If not, here is a video tut by GreenSock on how to create a codepen demo example.

 

.. :)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...