Closed Thread Icon

Preserved Topic: Modifying a browser detect and handling script for Gecko (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=18119" title="Pages that link to Preserved Topic: Modifying a browser detect and handling script for Gecko (Page 1 of 1)" rel="nofollow" >Preserved Topic: Modifying a browser detect and handling script for Gecko <span class="small">(Page 1 of 1)</span>\
 
kretsminky
Maniac (V) Inmate

From: A little lower... lower... ahhhhhh, thats the spot
Insane since: Jun 2000

 posted posted 07-10-2001 05:37

OK you code guru's I have a problem. I am teaching a DHTML class here in a couple of weeks and the book is awesome about explaining the inner workings of the JS coding. However, they have ignored NN6 as far as cross-browser compatibilities go. Here is the script so far:

code:
/* ***************************************

   Browser detection and handling

*****************************************/



var isNav4 = false;

var isNav = false;

var isIE4 = false;

var isIE5 = false;

var isIE = false;

if(navigator.appName=="Netscape")

  {

  isNav=true;

  if(parseInt(navigator.appVersion) == 4) isNav4=true;

  }

else if(navigator.appName=="Microsoft Internet Explorer")

  {

  isIE = true;

  if(navigator.appVersion.indexOf("MSIE 4") != -1) isIE4=true;

  if(navigator.appVersion.indexOf("MSIE 5") != -1) isIE5=true;

  }



function ActiveElement (obj, parent)

{

	if (isNav4)

	{

	this.name = obj;

	this.css = (parent) ? eval("document." + parent + ".document.layers['" + obj + "']") : document.layers[obj];

	this.elem = this.css;

	this.x = this.css.left;

	this.y = this.css.top;

	this.h = this.css.clip.height;

	this.w = this.css.clip.width;

	}

	else if (isIE4)

	{

	this.name = obj;

	this.css = document.all[obj].style;

	this.elem = document.all[obj];

	this.x = this.css.pixelLeft;

	this.y = this.css.pixelTop;

	this.h = this.css.pixelHeight;

	this.w = this.css.pixelWidth;

	}

	else if (isIE5)

	{

	this.name = obj;

	this.css = document.all[obj].style;

	this.elem = document.all[obj];

	this.x = this.elem.offsetLeft;

	this.y = this.elem.offseTop;

	this.h = this.elem.offsetHeight;

	this.w = this.elem.offsetWidth;

	}

}



/* ***************************************

   End Browser Detection and Handling

*****************************************/



Then we create an ActiveElement from that which is used in the rest of the entire class. We use the ActiveElement and add methods to it using a prototype method assignment like this example:

code:
function moveItToNav(x, y)

  {

  this.css.left = x;

  this.css.top = y;

  this.x = x;

  this.y = y;

  }

function moveItToIE(x, y)

  {

  this.css.pixelLeft = x;

  this.css.pixelTop = y;

  this.x = x;

  this.y = y;

  }

ActiveElement.prototype.moveTo = (isNav) ? moveItToNav : moveItToIE;





function moveItByNav(dX, dY)

  {

  this.css.left += dX;

  this.css.top += dY;

  this.x += dX;

  this.y += dY;

  }

function moveItByIE(dX, dY)

  {

  this.css.pixelLeft += dX;

  this.css.pixelTop +=  dY;

  this.x += dX;

  this.y += dY;

  }

ActiveElement.prototype.moveBy = (isNav) ? moveItByNav : moveItByIE;



I have to stick with this style because of the format of the book but would there be anyway to add a Gecko handler to this without creating a huge mess? Keep in mind that these people have mostly never used JS except for in a beginning JS coding class. They aren't going to be whizzes and if the coding would be too difficult my supervisors have just told me to not worry about NN.

Any ideas?



[This message has been edited by kretsminky (edited 07-10-2001).]
kretsminky
Maniac (V) Inmate

From: A little lower... lower... ahhhhhh, thats the spot
Insane since: Jun 2000

 posted posted 07-10-2001 17:32

Anyone? Mr. Maximus? Bit?
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 07-10-2001 17:39

I'm working on it, give me a bit of time...
mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

 posted posted 07-10-2001 17:42

Patience Krets. I also have other things to do in life, heh...

code:
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

<!-- ;



// Fixed up real good by mr.maX, [url=http://www.max.co.yu/]http://www.max.co.yu/[/url] 



/****************************************

   Browser detection and handling

*****************************************/



var isGecko = false;

var isNav4  = false;

var isNav   = false;

var isIE4   = false;

var isIE5   = false;

var isIE    = false;



if (navigator.userAgent.indexOf("Gecko") != -1) {

	isNav = true;

	isGecko = true;

} else

if (navigator.appName == "Netscape") {

	isNav = true;

	if (parseInt(navigator.appVersion) == 4) isNav4 = true;

} else

if (navigator.appName == "Microsoft Internet Explorer") {

	isIE = true;

	if (navigator.appVersion.indexOf("MSIE 4") != -1) isIE4 = true;

	if (navigator.appVersion.indexOf("MSIE 5") != -1) isIE5 = true;

}



function ActiveElement (obj, parent) {

	if (isGecko) {

		this.name = obj;

		this.css = document.getElementById(obj).style;

		this.elem = document.getElementById(obj);

		this.x = parseInt(this.css.left);

		this.y = parseInt(this.css.top);

		this.h = (this.css.height) ? parseInt(this.css.height) : this.elem.clientHeight;			

		this.w = (this.css.width) ? parseInt(this.css.width) : this.elem.clientWidth;			

	} else

	if (isNav4) {

		this.name = obj;

		this.css = (parent) ? eval("document." + parent + ".document.layers['" + obj + "']") : document.layers[obj];

		this.elem = this.css;

		this.x = this.css.left;

		this.y = this.css.top;

		this.h = this.css.clip.height;

		this.w = this.css.clip.width;

	} else

	if (isIE4) {

		this.name = obj;

		this.css = document.all[obj].style;

		this.elem = document.all[obj];

		this.x = this.css.pixelLeft;

		this.y = this.css.pixelTop;

		this.h = this.css.pixelHeight;

		this.w = this.css.pixelWidth;

	} else

	if (isIE5) {

		this.name = obj;

		this.css = document.all[obj].style;

		this.elem = document.all[obj];

		this.x = this.elem.offsetLeft;

		this.y = this.elem.offsetTop;

		this.h = this.elem.offsetHeight;

		this.w = this.elem.offsetWidth;

	} 

}



/****************************************

   End Browser Detection and Handling

*****************************************/



function moveItToNav(x, y) {

	if (isGecko) {

		this.css.left = x + "px";

		this.css.top = y + "px";

	} else 

		this.elem.moveTo(x, y);

	this.x = x;

	this.y = y;

}

function moveItToIE(x, y) {

	this.css.pixelLeft = x;

	this.css.pixelTop = y;

	this.x = x;

	this.y = y;

}

ActiveElement.prototype.moveTo = (isNav) ? moveItToNav : moveItToIE;



function moveItByNav(dX, dY) {

	if (isGecko) {

		this.css.left = this.x + dX + "px";

		this.css.top = this.y + dY + "px";

	} else

		this.elem.moveBy(dX, dY); 

	this.x += dX;

	this.y += dY;

}

function moveItByIE(dX, dY) {

	this.css.pixelLeft += dX;

	this.css.pixelTop +=  dY;

	this.x += dX;

	this.y += dY;

}

ActiveElement.prototype.moveBy = (isNav) ? moveItByNav : moveItByIE;



// -->

</SCRIPT>



BTW NN4 has built-in functions moveTo() and moveBy()



[This message has been edited by mr.maX (edited 07-10-2001).]
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 07-10-2001 17:43

OK, no, cancel that, I can't help you 'till I get home, too many little things to look up... if no one else posts anything then i will when i have a chance to check some things.
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 07-10-2001 18:00

OK, max typed faster than me. =)

But I don't think pixelLeft and pixelTop work in NN6... so I don't think those functions really *will* work... I think...

[edit]The above statement is no longer true, since Max changed his code after I said it.[/edit]

[This message has been edited by Slime (edited 07-10-2001).]
mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

 posted posted 07-10-2001 18:40

Ahhhh, I meant to say that they are very similar as those for NN4. Anyway, I've fixed and tested my code from above and it works OK.

Krets, enjoy!



[This message has been edited by mr.maX (edited 07-10-2001).]
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 07-10-2001 18:58

Another annoying thing that NN6 does, although it is correct to do this, is when you ask it for something's left position (layer.css.left), it won't just give you "63", it'll give you "63px". So you need to use parseInt() to read the number.
mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

 posted posted 07-10-2001 19:22

That's according to DOM specification...
kretsminky
Maniac (V) Inmate

From: A little lower... lower... ahhhhhh, thats the spot
Insane since: Jun 2000

 posted posted 07-10-2001 19:35

Thanks fellas! I appreciate the help.
kretsminky
Maniac (V) Inmate

From: A little lower... lower... ahhhhhh, thats the spot
Insane since: Jun 2000

 posted posted 07-10-2001 22:26

I'm trying to figure this whole Gecko syntax thing out so lets say now that I want to add compatibility to a write() method I've created using this:

code:
function dynoWriteNav(html)

  {

  this.css.document.open();

  this.css.document.write(html);

  this.css.document.close();

  }

function dynoWriteIE(html)

  {

  this.elem.innerHTML = html;

  }

ActiveElement.prototype.write = (isNav) ? dynoWriteNav : dynoWriteIE;



What would have to be changed on that to get it to write to divs within NN6?

Don't worry, I'm not going to just sit here and ask how to convert every little part of the class, I am just trying to get a feel now for how Gecko's DOM works and how to fix all these functions we have created in a core library.

Thanks for the help again guys!
mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

 posted posted 07-10-2001 22:41

After many complaints from web developers, Mozilla people implemented the innerHTML property (originally, you had to use text ranges, but that's another story)...

code:
function dynoWriteNav(html) {

	if (isGecko) {

		this.elem.innerHTML = html;

	} else {

		this.css.document.open();

		this.css.document.write(html);

		this.css.document.close();

	}

}

function dynoWriteIE(html) {

	this.elem.innerHTML = html;

}

ActiveElement.prototype.write = (isNav) ? dynoWriteNav : dynoWriteIE;



BTW1 It would be nice if you could mention my name to students when you start to teach this.

BTW2 Your core library contains a lot of unnecessary code and doesn't support all major browsers.
kretsminky
Maniac (V) Inmate

From: A little lower... lower... ahhhhhh, thats the spot
Insane since: Jun 2000

 posted posted 07-11-2001 00:00

Yeah, I know. I didn't write the core library, its one the book has them write. I don't want to get too far away from the book but I will definitely let them know that that code we're using is limited and further research/practice would definitely be needed.

Should be interesting.

« Backwards — Onwards »

Show Forum Drop Down Menu
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail