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> 11 18802
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>
"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/>
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
This code gives the error
style is null or not an object
I'm using IE6.
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
"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/>
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
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
*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
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/>
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 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
|
11 posts
views
Thread by Ohaya |
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 Abhishek Srivastava |
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
| | | | | | | | | | | |