Checking OS and Browser with Javascript

I've ran into cases where different browsers and even the same browsers but on different OS's respond differently to CSS attributes. So in some cases it's best to check for the type of OS and browser and apply attributes accordingly. I recently had to deal with this issue for the Firefox browser on Mac.

It turns out that having an HTML element with a CSS opacity attribute interferes with Flash graphics on the web page if it lays over it. As far as I noticed this only happens currently when using Firefox on Mac. Since opacity wasn't a requirement and wasn't of importance I decided to take it out on that browser/OS combination. This is done by code like the following:


function checkOSBrowser() {
if(navigator.platform.indexOf("Mac") || navigator.userAgent.indexOf("Firefox"))
document.getElementById("myElem").style.opacity = "0.8";
}


To review, navigator.platform returns the current OS and navigator.userAgent returns the running browser name. It is generally better to use indexOf() or search() to look for the desired OS or browser than to use an exact match because if anything slightly changed with an exact match the match would fail. Take "Mac" for example. If you run navigator.platform on a Mac machine with Intel processors, the output would be "MacIntel" not "Mac." So if you don't care exactly what kind of Mac is running you should just use the indexOf() or search() functions provided by the Javascript String.

Google JavaScript Trick

Here is a cool browser JavaScript trick. Go to www.google.com then in the address bar of the browser paste the following and press Enter:

"javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5 ); void(0);"

without the quotes. The Google logo should start dancing. You can still use the Google search while the logo is bouncing around the page though. Like it?

Javascript Naming for CSS Float Property

Typically, you can access a CSS property of an element in Javascript using something similar to:

elem.style.propertyName = "value";

Where the propertyName is the property name in CSS with no dashes and written in camel format. For example text-align becomes textAlign. However, for the CSS float property this is a problem because float a keyword in Javascript. Therefore instead you have to use cssFloat.

State Management with ASP .NET 2.0 - 2

In the previous post about state management I talked about the ViewState collection. Today I will write about the Application collection.

2. Application State Collection

The Application collection is an object collection that maps strings to objects. The unique aspect of the Application collection is that it is a global variable such that it is shared throughout the entire ASP .NET application. The Application collection has the same life span as the ASP .NET process and dies or is cleared when the process is killed or restarted.

The use of the Application collection is to store variables that need to be retained across different pages and shared amongst different users and sessions. An example of something that might be stored in the Application collection would be a counter of some sort that is shared amongst pages and sessions.

The Application collection is used like any collection in .NET. To store something (in code behind):

int n = 0;
Application["keyID"] = n;

To retrieve a variable from the collection:

int x = (int)Application["keyID"];

Make Google Black and White

Have you ever dreamed about seeing how the Google logo looks in black and white (or grey scale). Well, there is a chance for you. Just go to google.com and type "make google black and white" then press "I am feeling lucky." And if today is your lucky day, the Google logo will switch to black and white :). Actually it should switch anyway.

So how does that work? It turns out that there is a web site that totally mimicks the Google web site look in a signed off state. But it has a logo in black and white. More importantly, this site happens to be the first result on Google search when you search for "make google black and white." Pressing the "I am feeling lucky" button has the same effect as going to the first link in the search results. So when you press the button you are actually going a new site but since everything looks the same except for the logo, it looks like as if Google understood what you wanted and changed its logo like magic. But sorry not this time. No magic there.