Tag: javascript

Browser Redirection – Yahoo Answers

I am having problems getting mozilla firefox to display my website correctly. It works fine on Internet Explorer. So I was thinking of making a mirror of the website that is made specifically for firefox browsers. Is it possible to code a website so that it detects what browser a visitor is using and them sends them to the correct mirror ?(i.e. index_firefox.html or index_ie.html)

Background Information
At the root of this question, there lies a huge problem that really never would have occured if browser creators followed the w3c recommendations. Microsoft and Netscape fought the original browser wars in the 1990s and throughout this time both created proprietary nonstandard tags and didn’t always follow the w3c recommendations. Eventually, Microsoft’s Internet Explorer won the war and Netscape disappeared into the oblivion to eventually become the Mozilla Project.

Mozilla Firefox, Opera, Safari and Chrome basically render almost exactly (99% of the time) the current w3c recommendations for css,html, and javscript and most of the draft recommendations are followed in the current builds of these browsers. Internet Explorer on the other hand, barely follows any of the w3c recommendations from even the year 2000. IE’s terrible rendering results in us having to perform significant testing and spend significant amounts of time doing IE6, IE7, and probably now IE8 hacks.

Problems With Potential Solution
I believe that redirecting based on a browser is a terrible idea, and should be avoided at all costs because of the potential doubling or trippling of work with regards to content.

Also, what happens if the browser doesn’t have javascript support of a user has turned it off? Chrome, Firefox,Opera, and Safari users would continue to be dished out a crap website that only works on some version of IE.

My Solution
Avoid the use of redirections for different browsers and instead developing a website that is 100% standards compliant and than start to add IE hacks as necessary.

Mouse Overs For ASP.NET

Have you ever wanted to have the ability for the colour of a row to change when your user moves the mouse over top of a particular row, and then change the colour back whenever the cursor is moved back off?

Well, this process isn’t very difficult in fact using some knowledge of JavaScript & the Document Object Model (DOM) we can dynamically change the background colour.

We need to override the Render class and then add some attributes to each GridViewRow before the page is finally output to the browser.

In this example, I have called the gridview we are adding the mouseovers and mouseouts “gvClients” because it displays a list of my fictional company’s clients. Wherever you see gvClients you need to make sure that you change this to your respective gridview’s name.

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
   /*Using a simple foreach we iterate through the Rows and use the row.Attributes.Add() and pass in the javascript property we want to output as    html, along with the function we will use and then because asp.net usually dynmically creates the names for each item we need to use    the row.ClientID as this will exist only on the client side.
*/
foreach (GridViewRow row in gvClients.Rows)
{
  row.Attributes.Add(“onmouseout”, “ColorGridForMouseOut(‘” + row.ClientID + “‘);”);
  row.Attributes.Add(“onmouseover”, “ColorGridForMouseOver(‘” + row.ClientID + “‘);”);
}

//We finally just pass in the html that’s now been created.
base.Render(writer);
}

— Sample javascript

//Change Color of Gridview on MouseOut
function ColorGridForMouseOver(id) {
var el = document.getElementById(id);

if(el.currentStyle) // for msie
{
if (el.style.backgroundColor !=’orange’)
{
el.style.backgroundColor=’lightblue’;
el.style.cursor=’hand’;
}
}
else // for real browsers 😉
{
if (el.style.backgroundColor != ‘Orange’)
{
el.style.backgroundColor = ‘lightblue’;
el.style.cursor = ‘pointer’;
}
}
}

function ColorGridForMouseOut(id)
{
var el = document.getElementById(id);

if(el.currentStyle) // for msie
{
if (el.style.backgroundColor !=’orange’)
{
el.style.backgroundColor=’White’;
el.style.textDecoration=’none’;
}
}
else // for real browsers 😉
{
if (el.style.backgroundColor != ‘Orange’)
{
el.style.backgroundColor = ‘White’;
el.style.textDecoration=’none’;
}
}
}

Thank you for taking the time to visit.