469,271 Members | 904 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

How to use multiple same ID?

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
11 18688
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
"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
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">
<!--
function changeMe( n, i ){
var ones=document.getElementsByName(n);
ones[i].style.backgroundColor="red";
}
//-->
</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
This code gives the error
style is null or not an object

I'm using IE6.

Brett

Jul 21 '05 #5
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
"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
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
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>
<!--style="filter:alpha(opacity=100)"
crossobj.style.MozOpacity-->
<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
*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
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
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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Rolf Wester | last post: by
66 posts views Thread by Darren Dale | last post: by
6 posts views Thread by Ben Hallert | last post: by
22 posts views Thread by Matthew Louden | last post: by
9 posts views Thread by Graham | last post: by
4 posts views Thread by Matt Kruse | last post: by
35 posts views Thread by keerthyragavendran | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.