Jump to content

Is This Cross Browser Compatible?

RenegadeFX

By RenegadeFX
in JavaScript

Recommended Posts

RenegadeFX Newbie

RenegadeFX

Posted
Posted

This is just a script I made and all I have access to is a MacBook so it would be great if people could help me check to see if this script works on all browsers (IE, Chrome, Netscape, etc) i've already tested it on (Opera, Safari, Firefox, Camino, OmniWeb, BumperCar, Mozilla, Shiira, Netscape, Flock, iCab, IE 5.2 Mac and SeaMonkey) so far it only Doesn't work on Camino and it sorta works In EI 5.2 Mac. (Any advise to make it work on Camino)Please Help :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Javascript Objects</title><script type="text/javascript" language="javascript">var Elems 		= document.getElementsByTagName("input");var Class		= "Buttons";var HoverClass	= "HoverButtons";var DownClass	= "DownButtons";function GetElems() {	for(i = 0; i < Elems.length; i++) {		if(Elems.item(i).className == Class) {			StyleElem(Elems.item(i), i);		}	}}function StyleElem(Elem, i) {	Elem.onmouseover = function() {		Elem.className = HoverClass;	}		Elem.onmouseout = function() {		Elem.className = Class;	}		Elem.onmousedown = function() {		Elem.className = DownClass;	}		Elem.onmouseup = function() {		Elem.className = HoverClass;	}}window.onload = GetElems;</script><style type="text/css">.Buttons {	background: #039 url(Images/ButtonBG.png) repeat-x top scroll;	border: #FFF 0px solid;}.HoverButtons {	background: #06C url(Images/ButtonBG.png) repeat-x top scroll;	border: #000 0px solid;}.DownButtons {	background: #06C url(Images/ButtonBGUp.png) repeat-x top scroll;	border: #000 0px solid;}</style></head><body><form name="TheForm"><input type="button" class="Buttons" id="Button1" value="Button 1" /><input type="button" class="Buttons" id="Button2" value="Button 2" /><br /><br /><input type="button" class="Buttons" id="Button3" value="Button 3" /><input type="button" class="Buttons" id="Button4" value="Button 4" /><br /><br /><input type="button" class="Buttons" id="Button5" value="Button 5" /><input type="button" class="Buttons" id="Button6" value="Button 6" /><br /><br /><input type="button" class="Buttons" id="Button7" value="Button 7" /><input type="button" class="Buttons" id="Button8" value="Button 8" /></form></body></html>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

I had a look at Camino, FF3(Mac), and IE7.Don't worry about Camino. (I never do.) It's a blip in the Mac browser world, incomplete, and I doubt what you want can be done. I'm curious, though, so I'll play a little more.Likewise, forget ALL about IE(Mac). It's old and no one seriously uses it.IE7 works fine, though not as pretty as FF3 on my Mac. I think that's a matter of default settings, which you haven't changed very much. But the rollover and click effects work as written.But why on earth are you doing this in JavaScript when pure CSS is so much easier? School assignment? Proof of concept? The ability to change a className dynamically is something a good programmer should have. I just wonder about this application of the technique.FWIW, your doc is so close to validating as strict, you might as well go for it.

Link to comment
Share on other sites
RenegadeFX Newbie

RenegadeFX

Posted
  • Author
Posted
But why on earth are you doing this in JavaScript when pure CSS is so much easier? School assignment? Proof of concept? The ability to change a className dynamically is something a good programmer should have. I just wonder about this application of the technique.FWIW, your doc is so close to validating as strict, you might as well go for it.
First of all thanks for checking that and helping :)but I'm still kinda new to javascript so what exactly is validating strict.and by "pure CSS" what do you mean?
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

You are using a transitional doctype. (The stuff at the top of your page.) Validation is a process set up by the W3C (the people who define the (X)HTML standards) to check your code for errors. You can do that here: http://validator.w3.org/You still have 1-2 errors in your code to validate as transitional, but you're just as close to validating as strict. So you could fix your code with a few changes and use a strict doctype: http://www.w3.org/QA/2002/04/valid-dtd-list.htmlIf your code has a strict doctype and validates, your markup will be rendered more consistently in all browsers. (The real trick is IE6-7; this helps a lot.)As for CSS. Most browsers support the :hover and :active pseudoclasses for page elements other than links. So you can use that to handle rollover effects without any JavaScript at all. But you need to use a strict doctype for it to work in IE7.So your CSS could look like this:

.Buttons {	background: #039 url(Images/ButtonBG.png) repeat-x top scroll;	border: #FFF 0px solid;}.Buttons:hover {	background: #06C url(Images/ButtonBG.png) repeat-x top scroll;	border: #000 0px solid;}.Buttons:active {	background: #06C url(Images/ButtonBGUp.png) repeat-x top scroll;	border: #000 0px solid;}

And the JavaScript can disappear. Try it out on a test page in Firefox.

Link to comment
Share on other sites
RenegadeFX Newbie

RenegadeFX

Posted
  • Author
Posted

Heres the new version (That also works in camino) :)

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Javascript Objects</title><script type="text/javascript">var Elems 		= document.getElementsByTagName("input");var Class		= "Buttons";var IsCamino	= navigator.userAgent.indexOf("Camino");function GetElems() {	for(i=0;i<Elems.length;i++) {		if(Elems.item(i).className == Class) {			StyleElem(Elems.item(i), i);		}	}}function StyleElem(Elem, i) {	if(IsCamino != -1) {		if(Elem.type == "submit") {			Elem.type = "image";		}			else {			Elem.type = "image";						Elem.onclick = function() {				return false;			}		}				Elem.style.padding = 5 + "px";	}}window.onload = GetElems;</script><style type="text/css">.Buttons {	background: #039 url(Images/ButtonBG.png) repeat-x top scroll;	border: #FFF 0px solid;	height: 21px;	width: 64px;}.Buttons:hover {	background: #03C url(Images/ButtonBG.png) repeat-x top scroll;	border: #000 0px solid;	height: 21px;	width: 64px;}.Buttons:active {	background: #03C url(Images/ButtonBGUp.png) repeat-x bottom scroll;	border: #000 0px solid;	height: 21px;	width: 64px;}</style></head><body><form name="TheForm" action="#"><input type="button" class="Buttons" id="Button1" value="Button 1" /><input type="button" class="Buttons" id="Button2" value="Button 2" /><br /><br /><input type="button" class="Buttons" id="Button3" value="Button 3" /><input type="button" class="Buttons" id="Button4" value="Button 4" /></form></body></html></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...