Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PapaDeBeau

What to do when greensock and JavaScript not available on Browser

Recommended Posts

Using jQuery and greensock together.

 

Recently I designed a site and I worked VERY hard on the animation using greensock. I love it btw. However, I showed two friends that they had old browsers and when they clicked the links they did not even go to the right pages, they did nothing.

 

My heart hurts that they can't see the animation but hurts more knowing they can't see the content because the links don't work. On another browser, firefox old version. 3.0 I think. They buttons worked but the video box did not animate and stayed on top so it messed up content below.

 

My question:

Is there a way to detect if they have javascript or some other work around so at least the links can work and in this case the video box will go away, so they can at least see the content?

 

Here is the website I am talking about. See how the video box jumps off screen when you click a link, well its suppoed to, but not for all does it work.

 

If not perhaps I can redirect them to a page that says... sorry you can't view this content you need to update your browser.

 

http://www.BeauBird.com/hope.php

 

 

Thanks for your help or suggestions so my work can be seen by all.

-PapaDeBeau

Link to post
Share on other sites

If scripting is on but the browser is old, use jQuery to detect the user's browser and version, and if needed do something different in your script that is lighter / supports the ancient browsers - http://api.jquery.com/jQuery.browser/ There's a lot of information out there saying not to use browser sniffing, but it's not as terrible as the purists make it out to be. For 99% of cases it just works.

 

If they have javascript turned off you have no real way to either detect that or respond to it... Use a <noscript> tag if necessary to tell them your site is awesome and demand they turn javascript back on! :mrgreen: A <noscript> tag is a hidden element that is only revealed when javascript is disabled.

 

Rule of thumb if you want to support no javascript users - make sure all your important navigation uses <a> tags that have a href that points to something, whether that be a query string for your php, a fallback .html file or a page fragment identifier (#sectionid), and override that with your onclick javascript stuff.

 

Sorry I didn't really go over your page setup much so my advice is non-specific, but hopefully it's at least mildly helpful.

  • Like 2
Link to post
Share on other sites

Hi,

 

Sorry to hear you are having trouble. I know you put a lot of work into your project.

When doing any sort of web development it is important to test in all your target browsers often.

 

 

 

FireFox 3 came out in 2008 and as such it doesn't support many modern css features.

I don't have a copy of FireFox 3 installed to test your site, but there are a few things you should do in order to figure out the problem. From your description it appears that javascript,jquery and GSAP are working as you say that "your buttons work but the video just doesn't move." I'm a little confused as to where things are breaking.

 

1: User FireFox's developer tools or FireBug (free extension) to verify that there are no js errors on the page

 

2: Verify that that your buttons are calling the proper function when you click them. You can do this by adding a simple alert() like alert("story button clicked");

 

3: Verify that TweenLite works by doing a very simple tween on a single, widely supported css property like left or top

 

From looking at your code, my best guess is that the problem has to do with the fact that you are tweening the x property instead of left. In order to tween the x property the browser must support css3 transforms, particularly translate().

 

When you perform any 2D transformation, GSAP sets a matrix() on the element which is a combination of all the 2D transformations: scale, skew, rotation, translation etc.

 

You can read more about 2D transforms here: http://www.w3schools...dtransforms.asp

 

My suspicion is that since you are tweening the x position which is a 2D transform property, more specifically part of translate() you are running into trouble because FireFox 3 doesn't support 2D transforms as claimed by caniuse.com: http://caniuse.com/#feat=transforms2d

 

I created a basic fiddle for you to test in FireFox 3:

http://jsfiddle.net/...bassador/rr8ga/

 

You will see there are 2 simple tweens:

 

var red = $(".red"),
green = $(".green");

TweenLite.to(red, 5, {css:{x:300}});
TweenLite.to(green, 5, {css:{left:300}});

 

Do they both work in FireFox 3?

 

Note that red uses x, and green uses left.

 

Behind the scenes the following style is set on each DOM element:

 

<div class="box red" style="transform: matrix(1, 0, 0, 1, 300, 0);"></div>
<div class="box green" style="left: 300px;"></div>

 

Note the transform:matrix on red. Again, since FireFox 3 doesn't support transforms, I believe this is why your video isn't moving. If that is the case the solution is to use left and top as opposed to x and y.

 

----

 

As for detecting which browser your users have, you can just google "detect firefox 3".

 

[or use Jamie's excellent suggestion]

 

According to these stats: http://www.w3schools...ers_firefox.asp less than 1% of of the 31% of users that use FireFox are using version 3.

 

FireFox is now on version 18 and most folks would argue that it isn't worth the time to try to make a modern site fully functional all the way back to version 3.

 

Please let us know if the tweens on the left property work (green div in fiddle above).

Link to post
Share on other sites

GREAT! Actually the "Left" and "Top" properties worked on firefox 3. On the link you gave as an example for firefox 3 the red box did not even show up, but the green box did and animated.

 

Also, interesting note, and I asked this question on this form regarding a "youtube" frame that goes black in firefox when you animate it.. but now that I changed the property from y to top it actually does animate in version 18+ and before it would animate but simply be a black video screen and not play. Any ideas why this might be?

 

Thanks for the rocking awesome help. The support here is just amazing. :)

 

I have yet to try the javascript detection for older versions but I will soon and keep you posted.

Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×