Closed Thread Icon

Topic awaiting preservation: Stupid IE and its stupidness Pages that link to <a href="https://ozoneasylum.com/backlink?for=8263" title="Pages that link to Topic awaiting preservation: Stupid IE and its stupidness" rel="nofollow" >Topic awaiting preservation: Stupid IE and its stupidness\
 
Author Thread
genis
Paranoid (IV) Inmate

From: Dallas, TX
Insane since: Aug 2002

 posted posted 08-16-2002 00:18

Hi all.
Upon deciding current browsers CSS implementation didn't allow select boxes to look as spiffy as i wanted... i wrote this little script which acts like a select box (sort of) but isn't.
Anywho it works Grreeaat in Mozilla.
IE always gives me heaps of trouble, because it hates me and tries to kill me daily.

If ya'll can figure out why this is giving me problems I'd appreciate any help. Thanks.
Here's a link to it to see it live --> sweetastic.com/blah.html

and here's dee code, the part that counts anyway :

code:
<script type="text/javascript">

function altSelect(nAme,iD,num) {

	var meType = "type" + num;

	var select = "select" + num;

	var defBg = "#FFF";

	var selectBg = "#0A246A";

	if(nAme == meType)

		return;

	optionArr = document.getElementsByName(meType);

	if(optionArr.length != 0) {

		option = optionArr.item(0);

		option.name = select;

	}

	optionArr = document.getElementsByName(nAme);

	for(var i=0;i<optionArr.length;i++) {

		option = optionArr.item(i);

		option.style.backgroundColor = defBg;

		option.style.color = "#000";

	}

	option = document.getElementById(iD);

	option.name = meType;

	option.style.backgroundColor = selectBg;

	option.style.color = "#FFF";

}

	</script>

</head>

<body>

		<form action="vardump.php" method="get">

		<div id="select">

			<input name="select1" id="gold1" type="text" readonly="readonly"

value="Gold" onfocus="altSelect(this.name,this.id,1);" />

			<input name="select1" id="silv1" type="text" readonly="readonly" 

value="Silver" onfocus="altSelect(this.name,this.id,1);" />

			<input name="select1" id="plat1" type="text" readonly="readonly" 

value="Platinum" onfocus="altSelect(this.name,this.id,1);" />

			<input name="select1" id="pall1" type="text" readonly="readonly" 

value="Palladium" onfocus="altSelect(this.name,this.id,1);" />

		</div>

		<input type="submit" value="submit" />

		</form>



man i hope that worked.... i don't remember much ubb code.

edit: took up too much width, plus got rid of a superfluous function.

[This message has been edited by genis (edited 08-16-2002).]
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 posted posted 08-16-2002 14:43

nifty script but it is really working about the same in Mozilla as it is in IE for me. What exactly is the problem?

The only thing that I can see is that the "green" background has a space after each entry in IE. Is that what the problem is, or is it a game?

Where are my manners? hehe. . . Welcome to the Asylum. Glad to have you here. Take a look around the FAQ if you have a chance.

Later,
C:\


~Binary is best~

[This message has been edited by CPrompt (edited 08-16-2002).]
genis
Paranoid (IV) Inmate

From: Dallas, TX
Insane since: Aug 2002

 posted posted 08-16-2002 16:45

Thank you for the welcome! This and all doc's sites are outrageously cool.

I've only tested it in IE6, but it won't let me select an item again (make its background change) after it has once been selected. Namely because I control which ones should have a color background and which not by changing their names once a selection is clicked.

As you can see from the resulting GET info in the location bar when you click the submit button is that for some reason IE is not changing the name property back. Only the last selected property should have the name "type1" while all the rest have "select1".

And it works this way in Mozilla as you can also see from the GET... but IE6 anyway, just won't change the name back to "select1".

SO I've never been stumped this long by javascript. Probably should've just stuck with the way select boxes looked i guess. BUT IT WORKS IN MOZILLA!!! ARRRGGGHH!!!!
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 posted posted 08-16-2002 18:12

AAAHHHH! I got it now. Hmmm. . . not real profeciant in JavaScript but I am guessing that someone else will be along shortly to help out more. I will see if I can find something going on.

Later,
C:\


~Binary is best~
genis
Paranoid (IV) Inmate

From: Dallas, TX
Insane since: Aug 2002

 posted posted 08-16-2002 18:46

Thanks for trying, i sure hope so.

Also please note that I put the green background for those input elements to show that IE could indeed change a property (in this case the background property) of all the elements gotten by the same name with getElementsByName.

But it just won't change the names. . . hmmm...
genis
Paranoid (IV) Inmate

From: Dallas, TX
Insane since: Aug 2002

 posted posted 08-16-2002 19:04

Buh-Booyah!

Okay, i figured it out.... but now I'm at a loss for explaining why this makes it work.

I put...
option.name = select;
... in the for loop.

This makes the whole of the if statement above that obsolete (for IE).... however upon deleting that Mozilla keeps the blue background on everything that has been clicked.
Oh well it works, but I'll keep trying to figure it out.
Must be the order in which operations are performed on objects.

If anyone has any ideas, feel free to post.

Here is the new url sweetastic.com/blah2.html

And here is the code

code:
<script type="text/javascript">

function altSelect(nAme,iD,num) {

	var meType = "type" + num;

	var select = "select" + num;

	var defBg = "#FFF";

	var selectBg = "#0A246A";

	if(nAme == meType)

		return;

	optionArr = document.getElementsByName(meType);

	if(optionArr.length != 0) {

		option = optionArr[0];

		option.name = select;

	}

	optionArr = document.getElementsByName(nAme);

	for(var i=0;i<optionArr.length;i++) {

		option = optionArr[i];

		option.style.backgroundColor = defBg;

		option.style.color = "#000";

		option.name = select;

	}

	option = document.getElementById(iD);

	option.name = meType;

	option.style.backgroundColor = selectBg;

	option.style.color = "#FFF";

}

	</script>

</head>

<body>

		<form action="vardump.php" method="get">

		<div id="select">

			<input name="select1" id="gold1" type="text" readonly="readonly" 

				value="Gold" onfocus="altSelect(this.name,this.id,1);" />

			<input name="select1" id="silv1" type="text" readonly="readonly" 

				value="Silver" onfocus="altSelect(this.name,this.id,1);" />

			<input name="select1" id="plat1" type="text" readonly="readonly" 

				value="Platinum" onfocus="altSelect(this.name,this.id,1);" />

			<input name="select1" id="pall1" type="text" readonly="readonly" 

				value="Palladium" onfocus="altSelect(this.name,this.id,1);" />

		</div>

		<input type="submit" value="submit" />

		</form>

</body>

</html>



Thanks for listening to all my crazy ranting.




[This message has been edited by genis (edited 08-16-2002).]
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 posted posted 08-16-2002 19:22

Sorry I couldn't have been any help. Glad you fixed it though.

You said:

quote:
however upon deleting that Mozilla keeps the blue background on everything that has been clicked.



I am using Moz. 1.0 and it worked fine. Same in IE as in Moz.

Again, glad that you got it working right. Hope you enjoy your stay here and don't be a stranger to the forums!

Later,
C:\


~Binary is best~
genis
Paranoid (IV) Inmate

From: Dallas, TX
Insane since: Aug 2002

 posted posted 08-16-2002 19:37

Okay...

it seems getElementsByName() is the problem.
IE seems to return the the name that is hardcoded into the page always.
Even if a javascript function has changed "select1" to "test1" IE will return "select1"... because that's what it sees is hardcoded into the page.

Thus in the first if statement where I'm searching for elements by the name of "type1" using
getElementsByName()
none are found because that's not what is hardcoded.

BUT, it still retains that name in the javascript realm... so upon clicking again (this.name) == "type1" so the function returns.

Mozilla does everything correctly.

Did I mention i hate IE and it keeps trying to kill me?
well i do....
and it does.

Hope you all enjoyed this lesson with me... i know i didn't.
genis
Paranoid (IV) Inmate

From: Dallas, TX
Insane since: Aug 2002

 posted posted 08-16-2002 19:39

yeah, in blah2.html ... i didn't delete that if statement....

I was just showcasing that it worked now.

sorry. should've made that more clear.
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 posted posted 08-16-2002 21:25

OK this is just off the top of my head but. . .

Could you set up a variable that would increment the number of "type" etc?

hmmm. . . like I said I am not that good a JavaScript yet but it was just a thought.

glad you are figuring this out and keeping us informed over the progress. Too many times people ask a question and then just reply "Nevermind I figured it out" and leave us hanging I have done this myself so I know


OH, and you are right: "Mozilla does everything correct!" The Gecko engine will allow you to do some really neat CSS stuff that no other browser will.

Later,
C:\


~Binary is best~

[This message has been edited by CPrompt (edited 08-16-2002).]
genis
Paranoid (IV) Inmate

From: Dallas, TX
Insane since: Aug 2002

 posted posted 08-16-2002 22:47

hmm, i'm not sure what you want me to accomplish with that.

The num argument i put in was just because I'll be using this in a php created page where i'll be creating alot of select boxes, and need to differentiate between them by incrementing their number for each one made.

If anyone wants to use this...
I suggest you use it to find whatever posted variable you need to find (in my case "type1"). I'll be adding a function that just gets rid of the "select1" names or disables those elements for my purposes, just in case I use the GET method or something.

Anyways, here's a cleaned up script for anyone who might want it.
Take a look here to see how I've used it in a page --> sweetastic.com/selectBox.html
I've included a regular select box for comparison.

code:
<script type="text/javascript">

function altSelect(id,num) {

	var type = "type" + num;

	var select = "select" + num;

	var defBg = "#FFF";

	var selectBg = "#0A246A";

	optNew = document.getElementById(id);

	if(optNew.name == type)

		return;

	optionArr = document.getElementsByName(type);

	if(optionArr.length != 0) {

		option = optionArr[0];

		option.name = select;

	}

	optionArr = document.getElementsByName(select);

	for(var i=0;i<optionArr.length;i++) {

		option = optionArr[i];

		option.name = select;

		option.style.backgroundColor = defBg;

		option.style.color = "#000";

	}

	optNew.name = type;

	optNew.style.backgroundColor = selectBg;

	optNew.style.color = "#FFF";

}

	</script>
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 posted posted 08-17-2002 04:19
quote:
hmm, i'm not sure what you want me to accomplish with that.



Well like I said, I'm really just learning JS.



Later,
C:\


~Binary is best~
genis
Paranoid (IV) Inmate

From: Dallas, TX
Insane since: Aug 2002

 posted posted 08-19-2002 21:45

feh.. all better now.
--> finished SelectBox <--


Glad I learned about that problem with getElementsByName but I just decided not to use it.

« Backwards — Onwards »

Show Forum Drop Down Menu