How they dodat?

Colored text fields

[BoneHeadicus]

Project Fireworks [projectfireworks.com]

How did they do that text field?

[tedster]

In their css file, which is called from their js file, they have this:

INPUT {
border : 1px solid #585734;
font-family : "Courier New", Courier, monospace;
font-size: 12px;
color : #000000;
background-color : #A2986F;

By the way, that page crashes my NN4.7.

[BoneHeadicus]

Looks like they were using a redirect to css based on browser detection? Wonder why it crashed NN 4.7? Any ideas tedster? Thanks BTW...can always count on the ole tedster to get to the bottom of things ;)

[tedster]

Well, they've now added a pop-up saying something like "If you're seeing this window it's because you are using a version 4.x of Netscape, and we only support Netscape 6."

Problem is, the pop-up immediately gets covered by a Windows system message saying "Netscape has performed an illegal action and will be shut down" -- so I can't read the whole message, and I can't get to the Netscape code, because of the browser sniffer. I'd love to know what they're doing, so I can avoid doing it myself. Crashing a browser used by 10% of my visitors is not a good idea.

But I do really like those colored text form inputs. Classy.

[Marcia]

I didn't crash or get a popup, so I must be using the right browser - IE 5.0.

I just spent the night looking through PHP tutorials, and after wondering about the potential functionality of some little PHP "browser sniffing" routine, I run into this thread first thing.

What is fascinating is not only does PHP lend itself to structured/modular logic, but it can be inspersed right on the web pages, right in there with the HTML code, and still process server side. Fascinating!

This has got my bells ringing - but I have not ever seen PHP used this way, even though it can be done.

Anyone seen it in actual usage, or actually used it?

[BoneHeadicus]

Here a PHP from HotScripts Marcia
<?
/////////////////////////////////////////////////////////////////////
//
//Browser Detection
//by Sascha Blansjaar
//
//Feel free to modify this script in any way you want.
//
//No link back is required but much appreciated.
//Link back to [phtml.com...]
//
/////////////////////////////////////////////////////////////////////

echo "Your browser is: $HTTP_USER_AGENT<br><br>\n";

// browser detection
// MSIE 4 or 5?
if(eregi("msie.[4¦5]",$HTTP_USER_AGENT))
$browser = "msie";
// Netscape Navigator?
else if(eregi("nav",$HTTP_USER_AGENT))
$browser = "nav";
else
$browser = "other";

// select which stylesheet to use
if($browser == "msie")
// is it almost christmas?
if(date("z") > 350)
{
echo "It is almost Christmas<br><br>\n";
echo "phtml.com uses /css/msiexmas.css for your browser<br><br>\n";
}
else
{
echo "phtml.com uses /css/msie.css for your browser<br><br>\n";
}
else
{
// is it almost christmas?
if(date("z") > 350)
{
echo "It is almost Christmas<br><br>\n";
echo "phtml.com uses /css/otherxmas.css for your browser<br><br>\n";
}
else
{
echo "phtml.com uses /css/other.css for your browser<br><br>\n";
}
}

// select which bookmark code to display
echo "and uses this bookmark code:<br>\n";
if($browser == "msie")
{
echo "<span style='color:blue;cursor:hand;'
onclick='window.external.AddFavorite(\"http://phtml.com/\", \"phtml.com - Free PHP Scripts\");'>Click here to bookmark phtml.com</span>";
}
elseif($browser == "nav")
echo "Bookmark phtml.com (Press CTRL+D)";
else
echo "Don't forget to bookmark phtml.com";

?>

[BoneHeadicus]

I bet they (Project Fireworks)are using an asp browser detection. I can't seem to get at it no matter what I try.

[tedster]

BH, it's in their .js file called /js/common.js. Relatively standard sniffer, using navigator.appVersion and navigator.appName

[Brett_Tabke]

What I get in Opera 3.62:
-----
If you are reading this message it's because you are using a flavour of Netscape's 4th generation of browsers. Project Fireworks, is no longer friendly with this version. Given the fact that the audience of the site is developers that are up to date with technology and that Netscape is about to release the final version of Netscape 6, we decided not to support older versions. With the same logic, we don't support Internet Explorer 4.x

This site could be done in such way that it supports 3rd generation browsers and everything thereafter. However, the fact that it's meant for developers allows us to assume and expect that you are up to date. This fact, made the building of the site a more enjoyable experience instead of a "compatibility adventure" that a commercial site has to face.
--

Which looks identicle to what IE is putting out sans the popup.

[BoneHeadicus]

Ah yes. So it is. Guess I'm wired up wrong today.

Is that text box a result of the css? That is a particularly cool effect.

[theperlyking]

Interesting the paragraph on the front page:

"Don't try to impress your visitors with rollovers. Everyone can make them and they end up being a waste of bandwidth. If they still impress you, you were probably in a cave the last 2 year."

I agree that rollovers are pretty common and nothing to be proud of producing, but the simple fact is visitors still appreciate a bit of interactivity on the page.

A bit snobbish!

[tedster]

theperlyking, I agree with you. Better if they said, "don't use rollovers just to impress people. If you use them, make sure they enhance usability."

BH, yes the CSS determines the color of the text field. The line is: INPUT {...background-color : #A2986F;}

[ihelpyou]

Just toooooo cool.

I have implemented this and also have included the "textarea" field and the "option" field in my forms.

If you do not include them, they will stay "white".

Here is the full css I used:

input {background-color: #6699FF}
textarea {background-color: #6699FF}
option {background-color: #6699FF}

It works great! Of course, it does not work for Netscape... but does for IE.

Nice find BoneHeadicus!

[tedster]

I wonder about usability.

Most people are so accustomed to white input fields, there may be some confusion. I know that I almost missed what BH was talking about the first time I viewed this page.

[ihelpyou]

good point about usability.

Since I changed the background color for the front page newsletter signup form, the signups have just about doubled for the same time frame.

Maybe it could be out of being curious about the colored background??

[tedster]

ihelpyou, that's very good to know. There certainly could be a novelty value in seeing the unfamiliar color.

Is your site mostly tech types, or more general users?

Edited by: tedster

[ihelpyou]

tedster.... mostly all who have a web site or who work on one, is more than welcome.

Could be any kind of user...

I think you may have something by saying it could be a "novelty" type thing. They could be checking it out cause of the color and actually sign up.