How to use multiple same ID?

brett

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.getElementById("sample").style.color=
"rgb("+hex+","+hex+","+hex+")";
//setTimeout("fadetext()",20);
}
}

</script>

<div id="sample" style="width:100%"><h3>John slowly faded into
view</h3></div>
This area will not fade out.<br>
<div id="sample" style="width:100%"><h3>Another fade occurs
here.</h3></div>
<button onClick="fadetext()">Fade Text</button>
</body>
</html>

Jul 21 '05 #1

Follow Post Reply

18802

Ali Babba

brett wrote:

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
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 !

<!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.getElementById("sample").style.color=
"rgb("+hex+","+hex+","+hex+")";
//setTimeout("fadetext()",20);
}
}

</script>

<div id="sample" style="width:100%"><h3>John slowly faded into
view</h3></div>
This area will not fade out.<br>
<div id="sample" style="width:100%"><h3>Another fade occurs
here.</h3></div>
<button onClick="fadetext()">Fade Text</button>
</body>
</html>

Jul 21 '05 #2

Steve Pugh

"brett" <ac*****@cygen.com> wrote:

What's your stylesheet question? The following answers relate to the
HTML and JavaScript issues that your post raises.

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.
Well they can't.
IDs must be unique and NAME is not a valid attribute for DIVs.
<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.getElementById("sample").style.color=
"rgb("+hex+","+hex+","+hex+")";
//setTimeout("fadetext()",20);
}
}
</script>

<div id="sample" style="width:100%"><h3>John slowly faded into
view</h3></div>
This area will not fade out.<br>
<div id="sample" style="width:100%"><h3>Another fade occurs
here.</h3></div>
<button onClick="fadetext()">Fade Text</button>

Give them all the same CLASS. You can then use
getElementsByTagName('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.javascript

Steve

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

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

Jul 21 '05 #3

Jonathan N. Little

brett wrote:

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.getElementById("sample").style.color=
"rgb("+hex+","+hex+","+hex+")";
//setTimeout("fadetext()",20);
}
}

</script>

<div id="sample" style="width:100%"><h3>John slowly faded into
view</h3></div>
This area will not fade out.<br>
<div id="sample" style="width:100%"><h3>Another fade occurs
here.</h3></div>
<button onClick="fadetext()">Fade Text</button>
</body>
</html>

You cannot have elements with duplicate IDs but you can have duplicate
NAMEs more common with form fields... Use getElementsByName...

#### demo code:

<html>
<head>
<script language="JavaScript" 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="changeMe('one',0)">Change 0</a><br>
<a href="#" onclick="changeMe('one',1)">Change 1</a><br>
<a href="#" onclick="changeMe('one',2)">Change 2</a><br>
<a href="#" onclick="changeMe('one',3)">Change 3</a><br>
</body>
</html>
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jul 21 '05 #4

brett

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

I'm using IE6.

Brett

Jul 21 '05 #5

brett

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.getElementsByTagName &&
(divs = document.getElementsByTagName('em'))) {
for (var i = 0; i < divs.length; i++) {
divs = divs.item(i);
//document.getElementById('sample')
divs.style.color="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.getElementsByName("sample").style.color=" rgb("+hex+","+hex+","+hex+")";
//setTimeout("fadetext()",20);
}
}
*/
</script>

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

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

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

Thanks,
Brett

Jul 21 '05 #6

Steve Pugh

"brett" <ac*****@cygen.com> wrote:

Please don't top post.

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.
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.
- I'd like the "This area will not fade out." to not fade.
Then don't put it inside an element that's affected by your script.
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.getElementsByTagName &&
(divs = document.getElementsByTagName('em'))) {
The TagName in getElementsByTagName() should always be uppercase, so
EM in this case. Even when your using XHTML where the actual tags must
be lowercase.
for (var i = 0; i < divs.length; i++) {
divs = divs.item(i);
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.javascript.
//document.getElementById('sample')
divs.style.color="rgb("+hex+","+hex+","+hex+")";
// access divs[i] here
}
}
}
</script>

<em id="sample" style="width:100%"><h3>John slowly faded into view</h3>
<div style="color: none;">This area will not fade out.</div><br>
CSS issue: 'none' is not an accepted value for color in CSS.
<div style="filter: mask(color=BDBDBD);>
<img src="http://www.google.com/images/logo.gif" alt="" border="0">
</div>

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

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 <st***@pugh.net> <http://steve.pugh.net/>

Jul 21 '05 #7

Jonathan N. Little

brett wrote:

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

I'm using IE6.

Brett

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
http://www.LittleWorksStudio.com

Jul 21 '05 #8

brett

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.getElementById(nodeObjectTag).style.color =
"rgb("+hex+","+hex+","+hex+")";
}
i=1
for (var i = 1; i < 2; i++)
{
nodeObjectImg = "imgsample"+i;
document.getElementById(nodeObjectImg).style.MozOp acity=.20;
document.getElementById(nodeObjectImg).filters.alp ha.opacity=15;

}
}
</script>

<div id="sample1" style="width:100%"><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="imgsample1" id="imgsample1" border="0"
style="filter:alpha(opacity=100); -moz-opacity:1"><br>
<div id="sample2" style="width:100%"><h3>Another fade occurs
here.</h3></div>
<br>
<a href="x">Here is another problem link</a>
<br><br>
<button onClick="fadetext()">Fade Text</button>
Brett

Jul 21 '05 #9

Christoph Paeper

*Jonathan N. Little* <lw*****@centralva.net>:

<div name="one">This is 0</div>
<div name="one">This is 1</div>

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

Jul 21 '05 #10

Steve Pugh

Christoph Paeper <ch**************@nurfuerspam.de> wrote:

This thread is off topic in ciwah.

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 <st***@pugh.net> <http://steve.pugh.net/>

Jul 21 '05 #11

Jonathan N. Little

Christoph Paeper wrote:

*Jonathan N. Little* <lw*****@centralva.net>:

<div name="one">This is 0</div>
<div name="one">This is 1</div>

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

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
http://www.LittleWorksStudio.com

Jul 21 '05 #12

How to use multiple same ID?

This discussion thread is closed

Similar topics