Forum Moderators: open
if I have a group of elements with <p class="a">, how to turn them into an array? the idea is to change style on these elements, but to do it progressively, using a setTimeout.
does this help at all...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title></title>
<style type="text/css">
.a {
font-size:1.0em;
color:#f00;
text-align:center;
}
.b {
font-size:1.2em;
font-style:oblique;
color:#000;
text-align:center;
}
.c {
color:#006;
text-align:center;
}
</style><script type="text/javascript">
var c=0;
var ps=document.getElementsByTagName('p');function swapClassName(){
if(c==ps.length){
return;
}if(ps[c].className=='a') {
setTimeout(
function() {
ps[c].className='b';
c++;
swapClassName();
},2000);
}else {
c++;
swapClassName();
}
}if(window.addEventListener) {
window.addEventListener('load',swapClassName,false);
}
else {
if(window.attachEvent) {
window.attachEvent('onload',swapClassName);
}
}
</script></head>
<body><div>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div></body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> v2 </title>
<style type="text/css">
p {text-align:center}
.a {color:#f00}
.b {color:#00f}
.c {color:#0f0}
</style>
Thanks very much. Next q ( :) ): there's a lot of this class swopping to be done: how to add two variables, the class to be swapped from, and the class to be swopped to ?
Let me know how you'd like to be credited. It's a race against dementia at this end...
Cheers
.
here is an example of multiple class swapping...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title></title>
<style type="text/css">
p {text-align:center}
.a {color:#f00;}
.b {color:#00f;}
.c {color:#0f0;}
.d{color:#909;}.aa {color:#600;font-weight:bold;}
.bb {color:#003;font-family:'times new roman',serif;}
.cc {color:#060;font-size:1.2em}
</style><script type="text/javascript">
var c=0;
var ps=document.getElementsByTagName('p');function swapClassName(){
if(c==ps.length){
return;
}cn=ps[c].className;
switch(cn) {
case 'a':
setTimeout(function() {ps[c].className='aa';c++;swapClassName();},2000);
break;case 'b':
setTimeout(function() {ps[c].className='bb';c++;swapClassName();},2000);
break;case 'c':
setTimeout(function() {ps[c].className='cc';c++;swapClassName();},2000);
break;default:
c++;
swapClassName();
break
}
}if(window.addEventListener) {
window.addEventListener('load',swapClassName,false);
}
else {
if(window.attachEvent) {
window.attachEvent('onload',swapClassName);
}
}
</script></head>
<body><div>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="d">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div></body>
</html>
I jus read my horrorscope for the year, you've started the new cycle a week early: "on January 17, Jupiter, the giver of gifts, happiness and luck will enter pisces for the first time since 1998..."
cheers
This function is a compilation of several possible class changes, and uses 'switch' to run these all at once.
So if we need to run different changes, eg change class 'a' to 'aa', we'd need to write a function specifying that change; and so also if we needed to change 'b' to 'cc'.
Am I right in thinking that there could also be a more generic approach, which would give us an overall function looking on the surface something like this:
function changeClass('fromClass', 'toClass')
where all the scripting has been done--except for the class to change, and the class to change it to ?
here is another little example for you to toy with. ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title></title>
<style type="text/css">
input {margin-top:10px;}
p {text-align:center;}.a {color:#f00;}
.b {color:#00f;}
.c {color:#0f0;}
.d{color:#909;}.aa {color:#600;font-weight:bold;}
.bb {color:#003;font-family:'times new roman',serif;}
.cc {color:#060;font-size:1.2em}
.dd {color:#330;font-family:'courier new',monospace;}
</style><script type="text/javascript">
function init() {
ps=document.getElementsByTagName('p');
df=document.forms[0];
c=0;df[2].onclick=function() {
if((df[0].value=='')[red]¦¦[/red](df[1].value=='')) { [red]/* change the broken pipe symbols to solid vertical lines */[/red]
alert('please select a class name.');
df.reset();
return;
}
else {
swapClassName(df[0].value,df[1].value);
}
}
}function swapClassName(f,t) {
if(c==ps.length){
c=0;
return;
}if(ps[c].className==f) {
setTimeout(function() {ps[c].className=t;c++;swapClassName(f,t);},2000);
}else {
c++;
swapClassName(f,t);
}
}if(window.addEventListener) {
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent) {
window.attachEvent('onload',init);
}
}
</script></head>
<body><form action="#">
<div>
<select>
<option value="">-- from class --</option>
<option value="a">class a </option>
<option value="b">class b </option>
<option value="c">class c </option>
<option value="d">class d </option>
<option value="aa">class aa </option>
<option value="bb">class bb </option>
<option value="cc">class cc </option>
<option value="dd">class dd </option>
</select><select>
<option value="">--- to class ---</option>
<option value="a">class a </option>
<option value="b">class b </option>
<option value="c">class c </option>
<option value="d">class d </option>
<option value="aa">class aa </option>
<option value="bb">class bb </option>
<option value="cc">class cc </option>
<option value="dd">class dd </option>
</select>
</div><div>
<input type="button" value="change class">
</div>
</form><div>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="d">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div></body>
</html>
BTW, when I first mentioned that your header was throwing error messages, that was on a mac. I've had no trouble on windows. I'll doublecheck the mac later.
cheers
