Browser Recognition

[mark27uk3]

Hi Guys,

 

I have added some j/s to my create account page that produces a password strength indicator. It works fine in IE but not in Firefox.

 

This is the part that deals with the browser support, does anyone know what needs adding to support firefox

 

<script language="javascript">
var ieDOM = false, nsDOM = false;
var stdDOM = document.getElementById; function initMethod()
{
//Determine the browser support for the DOM
if( !stdDOM )

{
ieDOM = document.all;
if( !ieDOM )

{
nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4));
}
}

passwordChanged();
}
function getObject(objectId)

{
if (stdDOM) return document.getElementById(objectId);
if (ieDOM) return document.all[objectId];
if (nsDOM) return document.layers[objectId];
}

 

Many Thanks

 

Mark

[muttsnuts]

Hi Guys,

 

I have added some j/s to my create account page that produces a password strength indicator. It works fine in IE but not in Firefox.

 

This is the part that deals with the browser support, does anyone know what needs adding to support firefox

 

<script language="javascript">
var ieDOM = false, nsDOM = false;
var stdDOM = document.getElementById; function initMethod()
{
//Determine the browser support for the DOM
if( !stdDOM )

{
ieDOM = document.all;
if( !ieDOM )

{
nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4));
}
}

passwordChanged();
}
function getObject(objectId)

{
if (stdDOM) return document.getElementById(objectId);
if (ieDOM) return document.all[objectId];
if (nsDOM) return document.layers[objectId];
}

 

Many Thanks

 

Mark

 

 

I'm affraid I can't help but to be cheeky i'd like to ask where you got the script and how to install it as I think this would be a great addition.

 

Thanks

[mark27uk3]

Hi Mutts,

 

Once the browser problems are sorted I will put it together into a contrib for all.

 

Anyone have any ideas?

 

Thanks

 

Mark

[scootd]

Anyone have any ideas?

 

Just an idea, I remember something like

 

document.getElementById(aID)

 

But I know little about js, For more information see: http://www-128.ibm.com/developerworks/web/...dom_differences

 

hope this helps?

 

scot

[mark27uk3]

Hi Scot,

 

Thanks for the link even though I struggled to understand what it all meant :blink:

 

I am still no further forward with this so if anyone else can lend a helping hand it would be appreciated.

 

Many Thanks

 

Mark

[spax]

I'm no JavaScript expert but looking at your code, you are testing for Netscape 4. I think Mozilla browsers, which are built with the Gecko engine, are Netscape 5+.

If the function works with Netscape 5+, you could try changing the line of code from:

 

(parseInt(navigator.appVersion) ==4));

 

to:

 

(parseInt(navigator.appVersion) >=4));

 

 

Of course you have checked JavaScript is enabled in Firefox?

[mark27uk3]

I'm no JavaScript expert but looking at your code, you are testing for Netscape 4. I think Mozilla browsers, which are built with the Gecko engine, are Netscape 5+.

If the function works with Netscape 5+, you could try changing the line of code from:

 

(parseInt(navigator.appVersion) ==4));

 

to:

 

(parseInt(navigator.appVersion) >=4));

Of course you have checked JavaScript is enabled in Firefox?

 

Hi,

 

Thanks for that suggestion unfortunately it made no difference.

 

I know that j/s is enabled in the browser because I have other functions that work ok.

 

Mark

[scootd]

I am still no further forward with this so if anyone else can lend a helping hand it would be appreciated.

 

Hi Mark,

I just showed your js to a friend and he said:

 

I don't see anything wrong with it, at first glance. Are there any messages in your Javascript console?

 

so can you explain what happens with firefox and any Javascript errors?

 

scot

[mark27uk3]

Hi Scot,

 

There are no error messages in the j/s console.

 

What is suppose to happen is that when a customer enters a password there is a html indicator box below the password field and if the password is evaluated as weak then the weak box background becomes red. If the password is medium the weak box and the medium box background becomes yellow. If the password is strong then all 3 boxes are green.

 

I just dont seem to know what the problem is whether it is the DOM thing or even something else.

 

This is the full function just in case there any other problems visible :blink:

 

<script language="javascript">
var ieDOM = false, nsDOM = false;
var stdDOM = document.getElementById; function initMethod()
{
//Determine the browser support for the DOM
if( !stdDOM )

{
ieDOM = document.all;
if( !ieDOM )

{
nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) >=4));
}
}

passwordChanged();
}
function getObject(objectId)

{
if (stdDOM) return document.getElementById(objectId);
if (ieDOM) return document.all[objectId];
if (nsDOM) return document.layers[objectId];
}
function getObjectStyle(objectId)

{
if (nsDOM) return getObject(objectId);
var obj = getObject(objectId);

return obj.style;
}
function showDefault(objectId)

{
showCell(objectId, "", "");
}
function showCell(objectId, foreColor, backColor)
{
getObjectStyle(objectId).color = foreColor;

getObjectStyle(objectId).backgroundColor = backColor;
}
function showWeak()

{
showCell("pwWeak", "Black", "#ff3333");
showDefault("pwMedium");

showDefault("pwStrong");
}
function showMedium()

{
showCell("pwWeak", "Black", "#FFFF33");
showCell("pwMedium", "Black", "#FFFF33");

showDefault("pwStrong");
}
function showStrong()

{
showCell("pwWeak", "Black", "#33ff00");
showCell("pwMedium", "Black", "#33FF00");
showCell("pwStrong", "Black", "#33FF00");
}
function showUndetermined()

{
showDefault("pwWeak");
showDefault("pwMedium");
showDefault("pwStrong");
}


function passwordChanged()
{
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");


var pwd = getObject("password").value;
if( false == enoughRegex.test(pwd) )
{
showUndetermined();
}
else if( strongRegex.test(pwd) )
{
showStrong();
}
else if( mediumRegex.test( pwd ) )
{
showMedium();
}
else
{
showWeak();
}
}
</script>

 

Thanks

 

Mark

[spax]

Don't suppose you have the NoScript extension installed do you?

 

How about posting a URL, I'll check if it is working in NS.

[scootd]

when a customer enters a password there is a html indicator box below the password field and if the password is evaluated as weak then the weak box background becomes red. If the password is medium the weak box and the medium box background becomes yellow. If the password is strong then all 3 boxes are green.

Mark,

I like this script, and if you make it a contr. I want to try it ...

Looks like everyone's saying "don't use browser sensing. Your code is set up for version 4 browsers and gets confudsed with some more recent browsers. Also since no one uses IE4 any more and almost no one uses Netscape 4 any more you could just dump all of that browser sensitive code and use the standard document.getElementById that all version 5+ browsers support."

 

For most JavaScripts, just detecting support for document.getElementById will suffice in ensuring the script will run in that browser. So I think you can delete var ieDOM, nsDOM and all references and use var stdDOM and .getElementById for all browsers. Hope it's that easy

 

scot

[mark27uk3]

Hi Scot,

 

I removed the ieDOM and nsDOM and all references to it but that caused it to stop working in explorer as well.

 

:'(

 

I am getting a bit dismayed with this all now :(

 

Mark

[scootd]

Mark

 

Can you post or pm a link, and the changes you made?

 

Scot