How to use multiple same ID?

**Ali Babba** · Jul 21 '05, 01:01 AM

Re: How to use multiple same ID?

brett wrote:
[color=blue]
> Only the first <div> executes in the following code. I'd like the
> second to execute as well. This code is dynamically generated so I
> won't know exactly how many <div> tags will be needed. If they can all
> use the same ID/Name that shouldn't be a problem. Also, instead of
> using a button, I'll execute fadetext() on page load.
>
> Any suggestions?
>
> Thanks,
> Brett[/color]

you can use any ID tag as many times as you want. however, it wont work
until you get your javascript to iterate over all elements with the
specified ID. not a css problem !

[color=blue]
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
>
> <html>
> <head>
> <title>Untitled </title>
> </head>
>
> <body>
> <script type="text/javascript">
> /* grays
> RGB(184,184,184 ) #B8B8B8
> RGB(192,192,192 ) #C0C0C0
> RGB(200,200,200 ) #C8C8C8
> RGB(208,208,208 ) #D0D0D0
> RGB(216,216,216 ) #D8D8D8
> RGB(224,224,224 ) #E0E0E0
> RGB(232,232,232 ) #E8E8E8
> RGB(240,240,240 ) #F0F0F0
> RGB(248,248,248 ) #F8F8F8
> RGB(255,255,255 ) #FFFFFF
> */
> hex=224 // Initial color value.
>
> function fadetext(){
> if(hex>0) { //If color is not black yet
> hex-=11; // increase color darkness
> document.getEle mentById("sampl e").style.color =
> "rgb("+hex+","+ hex+","+hex+")" ;
> //setTimeout("fad etext()",20);
> }
> }
>
> </script>
>
> <div id="sample" style="width:10 0%"><h3>John slowly faded into
> view</h3></div>
> This area will not fade out.<br>
> <div id="sample" style="width:10 0%"><h3>Anoth er fade occurs
> here.</h3></div>
> <button onClick="fadete xt()">Fade Text</button>
>
>
> </body>
> </html>
>[/color]

**Steve Pugh** · Jul 21 '05, 01:01 AM

Re: How to use multiple same ID?

"brett" <account@cygen. com> wrote:

What's your stylesheet question? The following answers relate to the
HTML and JavaScript issues that your post raises.
[color=blue]
>Only the first <div> executes in the following code. I'd like the
>second to execute as well. This code is dynamically generated so I
>won't know exactly how many <div> tags will be needed. If they can all
>use the same ID/Name that shouldn't be a problem.[/color]

Well they can't.
IDs must be unique and NAME is not a valid attribute for DIVs.
[color=blue]
><script type="text/javascript">
>hex=224 // Initial color value.
>function fadetext(){
> if(hex>0) { //If color is not black yet
> hex-=11; // increase color darkness
> document.getEle mentById("sampl e").style.color =
> "rgb("+hex+","+ hex+","+hex+")" ;
> //setTimeout("fad etext()",20);
> }
>}
></script>
>
><div id="sample" style="width:10 0%"><h3>John slowly faded into
>view</h3></div>
>This area will not fade out.<br>
><div id="sample" style="width:10 0%"><h3>Anoth er fade occurs
>here.</h3></div>
><button onClick="fadete xt()">Fade Text</button>[/color]

Give them all the same CLASS. You can then use
getElementsByTa gName('DIV') to create an array of all the DIVs in the
page and then go through that array checking that the .className
property matches the class you want to apply the fade to. Further
questions on the DOM/JavaScript aspects would be better asked in
comp.lang.javas cript

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

**Jonathan N. Little** · Jul 21 '05, 01:02 AM

Re: How to use multiple same ID?

brett wrote:
[color=blue]
> Only the first <div> executes in the following code. I'd like the
> second to execute as well. This code is dynamically generated so I
> won't know exactly how many <div> tags will be needed. If they can all
> use the same ID/Name that shouldn't be a problem. Also, instead of
> using a button, I'll execute fadetext() on page load.
>
> Any suggestions?
>
> Thanks,
> Brett
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
>
> <html>
> <head>
> <title>Untitled </title>
> </head>
>
> <body>
> <script type="text/javascript">
> /* grays
> RGB(184,184,184 ) #B8B8B8
> RGB(192,192,192 ) #C0C0C0
> RGB(200,200,200 ) #C8C8C8
> RGB(208,208,208 ) #D0D0D0
> RGB(216,216,216 ) #D8D8D8
> RGB(224,224,224 ) #E0E0E0
> RGB(232,232,232 ) #E8E8E8
> RGB(240,240,240 ) #F0F0F0
> RGB(248,248,248 ) #F8F8F8
> RGB(255,255,255 ) #FFFFFF
> */
> hex=224 // Initial color value.
>
> function fadetext(){
> if(hex>0) { //If color is not black yet
> hex-=11; // increase color darkness
> document.getEle mentById("sampl e").style.color =
> "rgb("+hex+","+ hex+","+hex+")" ;
> //setTimeout("fad etext()",20);
> }
> }
>
> </script>
>
> <div id="sample" style="width:10 0%"><h3>John slowly faded into
> view</h3></div>
> This area will not fade out.<br>
> <div id="sample" style="width:10 0%"><h3>Anoth er fade occurs
> here.</h3></div>
> <button onClick="fadete xt()">Fade Text</button>
>
>
> </body>
> </html>
>[/color]
You cannot have elements with duplicate IDs but you can have duplicate
NAMEs more common with form fields... Use getElementsByNa me...

#### demo code:

<html>
<head>
<script language="JavaS cript" type="text/javascript">

</script>
</head>
<body>
<div name="one">This is 0</div>
<div name="one">This is 1</div>
<div name="one">This is 2</div>
<div name="one">This is 3</div>
<a href="#" onclick="change Me('one',0)">Ch ange 0</a><br>
<a href="#" onclick="change Me('one',1)">Ch ange 1</a><br>
<a href="#" onclick="change Me('one',2)">Ch ange 2</a><br>
<a href="#" onclick="change Me('one',3)">Ch ange 3</a><br>
</body>
</html>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**brett** · Jul 21 '05, 01:02 AM

Re: How to use multiple same ID?

This code gives the error
style is null or not an object

I'm using IE6.

Brett

**brett** · Jul 21 '05, 01:02 AM

Re: How to use multiple same ID?

Ok, I think this is back to a CSS issue. I almost have this working
now but need two things to happen.

- I'd like the image to gray out with the text.
- I'd like the "This area will not fade out." to not fade.

Also, if it could work in Firefox, Netscape 7 and IE6 that would be
great. How can I accomplish the above?

<script type="text/javascript">
/* grays
RGB(184,184,184 ) #B8B8B8
RGB(192,192,192 ) #C0C0C0
RGB(200,200,200 ) #C8C8C8
RGB(208,208,208 ) #D0D0D0
RGB(216,216,216 ) #D8D8D8
RGB(224,224,224 ) #E0E0E0
RGB(232,232,232 ) #E8E8E8
RGB(240,240,240 ) #F0F0F0
RGB(248,248,248 ) #F8F8F8
RGB(255,255,255 ) #FFFFFF
*/
hex=224 // Initial color value.

function fadetext(){
var divs;
if (document.getEl ementsByTagName &&
(divs = document.getEle mentsByTagName( 'em'))) {
for (var i = 0; i < divs.length; i++) {
divs = divs.item(i);
//document.getEle mentById('sampl e')
divs.style.colo r="rgb("+hex+", "+hex+","+hex+" )";
// access divs[i] here
}
}
}

/*
function fadetext(){
if(hex>0) { //If color is not black yet
hex-=11; // increase color darkness

document.getEle mentsByName("sa mple").style.co lor="rgb("+hex+ ","+hex+","+hex +")";
//setTimeout("fad etext()",20);
}
}
*/
</script>

<em id="sample" style="width:10 0%"><h3>John slowly faded into view</h3>
<div style="color: none;">This area will not fade out.</div><br>

<div style="filter: mask(color=BDBD BD);>
<img src="http://www.google.com/images/logo.gif" alt="" border="0">
</div>

<br>
<h3>Another fade occurs here.</h3></em>
<button onClick="fadete xt()">Fade Text</button>

Thanks,
Brett

**Steve Pugh** · Jul 21 '05, 01:02 AM

Re: How to use multiple same ID?

"brett" <account@cygen. com> wrote:

Please don't top post.
[color=blue]
>Ok, I think this is back to a CSS issue. I almost have this working
>now but need two things to happen.
>
>- I'd like the image to gray out with the text.[/color]

There's an opacity property in CSS3 that, IIRC, is supported as
-moz-opacity in Mozilla. Might be supported by some other browsers as
well.

Oh, there are the non-standard MSIE filters as well, but it looks like
you've already discovered them.
[color=blue]
>- I'd like the "This area will not fade out." to not fade.[/color]

Then don't put it inside an element that's affected by your script.
[color=blue]
>Also, if it could work in Firefox, Netscape 7 and IE6 that would be
>great. How can I accomplish the above?
>
><script type="text/javascript">
>hex=224 // Initial color value.
>function fadetext(){
> var divs;
> if (document.getEl ementsByTagName &&
> (divs = document.getEle mentsByTagName( 'em'))) {[/color]

The TagName in getElementsByTa gName() should always be uppercase, so
EM in this case. Even when your using XHTML where the actual tags must
be lowercase.
[color=blue]
> for (var i = 0; i < divs.length; i++) {
> divs = divs.item(i);[/color]

Redefining the variable 'divs' inside a loop that's being iterated
over the array 'divs' could cause problems but I'm not sure. Anyway,
as I said before ask JS questions in comp.lang.javas cript.
[color=blue]
> //document.getEle mentById('sampl e')
> divs.style.colo r="rgb("+hex+", "+hex+","+hex+" )";
> // access divs[i] here
> }
> }
>}
></script>
>
><em id="sample" style="width:10 0%"><h3>John slowly faded into view</h3>
><div style="color: none;">This area will not fade out.</div><br>[/color]

CSS issue: 'none' is not an accepted value for color in CSS.
[color=blue]
><div style="filter: mask(color=BDBD BD);>
><img src="http://www.google.com/images/logo.gif" alt="" border="0">
></div>
>
><br>
><h3>Another fade occurs here.</h3></em>
><button onClick="fadete xt()">Fade Text</button>[/color]

HTML issue: you can not nest block level elements like <h3> and <div>
inside inline elements like <em>.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

**Jonathan N. Little** · Jul 21 '05, 01:02 AM

Re: How to use multiple same ID?

brett wrote:
[color=blue]
> This code gives the error
> style is null or not an object
>
> I'm using IE6.
>
> Brett
>[/color]
Damn! seems MSIE cannot grab a the collection if they all have the same
name...if your check ones.length in Gecko your get 4 for MSIE 0.

If I get a moment I'll check this out...I know you can grab a collection
of form fields, I do it on my order forms...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**brett** · Jul 21 '05, 01:02 AM

Re: How to use multiple same ID?

I've got it working but have another issue related to formatting, which
is a different post in this group. Here's the working code:

<script type="text/javascript">
hex=224 // Initial color value.

function fadetext(){
var nodeObjectTag
var nodeObjectImg
for (var i = 1; i < 3; i++)
{
nodeObjectTag = "sample"+i;
document.getEle mentById(nodeOb jectTag).style. color=
"rgb("+hex+","+ hex+","+hex+")" ;
}
i=1
for (var i = 1; i < 2; i++)
{
nodeObjectImg = "imgsample" +i;
document.getEle mentById(nodeOb jectImg).style. MozOpacity=.20;
document.getEle mentById(nodeOb jectImg).filter s.alpha.opacity =15;

}
}
</script>

<div id="sample1" style="width:10 0%"><h3>John slowly faded into
view---</h3>
</div>

<a href="x">Here is a problem link</a><br>

<img src="http://www.google.com/images/logo.gif" alt=""
name="imgsample 1" id="imgsample1 " border="0"
style="filter:a lpha(opacity=10 0); -moz-opacity:1"><br>
<div id="sample2" style="width:10 0%"><h3>Anoth er fade occurs
here.</h3></div>
<br>
<a href="x">Here is another problem link</a>
<br><br>
<button onClick="fadete xt()">Fade Text</button>

Brett

**Christoph Paeper** · Jul 21 '05, 01:02 AM

Re: How to use multiple same ID?

*Jonathan N. Little* <lws4art@centra lva.net>:[color=blue]
>
> <div name="one">This is 0</div>
> <div name="one">This is 1</div>[/color]

Like Steve already said, there is no 'name' attribute for the 'div'
element type in HTML. This thread is off topic in ciwah.

--
"Right way turning, Listen we are learning.
Head's full of noise, Chicken's got no choice.
Heads are rollin', Chicken blood is stolen.
The rest of the chicken wants a picke-nicken" Guano Apes - We use the Pain

**Steve Pugh** · Jul 21 '05, 01:02 AM

Re: How to use multiple same ID?

Christoph Paeper <christoph.paep er@nurfuerspam. de> wrote:
[color=blue]
> This thread is off topic in ciwah.[/color]

Pssst, this is ciwas...

It's okay, I won't tell anyone, oh...

Steve

--
"Reality must take precedence over public relations.
Nature cannot be fooled." - Richard Feynman

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

**Jonathan N. Little** · Jul 21 '05, 01:02 AM

Re: How to use multiple same ID?

Christoph Paeper wrote:
[color=blue]
> *Jonathan N. Little* <lws4art@centra lva.net>:
>[color=green]
>>
>> <div name="one">This is 0</div>
>> <div name="one">This is 1</div>[/color]
>
>
> Like Steve already said, there is no 'name' attribute for the 'div'
> element type in HTML. This thread is off topic in ciwah.
>[/color]

DOH! Right, thinking too fast on the problem and forgetting the syntax! ;-)

He could make a container DIV for all the child DIVs, and grab
collection of DIVs from the parent's ID and index through it....

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

How to use multiple same ID?

How to use multiple same ID?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment