daemonkin
06-18-2007, 03:59 PM
Hi guys been trying to do this for a client and it works in FF (both Win/Mac) and Safari but having problems in IE6/7.
Client wants her pages to have paragraphs appearing 1 at a time with user clicking back and forward to see next/previous paragraphs.
Fine, I thought, I will use DOM with Script.aculo.us to hide hide/show divs so I built the following:
function showParagraph(paraID){
var aParas = browseDOM();
if(aParas.length > 0){
var i = 0;
for (i = 0; i<aParas.length; i++){
// update paragraph displays
if (i!= paraID-1){
hideParagraph(i+1);
}
}
new Effect.BlindDown('para'+paraID);
// update paragraph navigation
if (paraID==1){
document.getElementById('back').style.display = 'none';
document.getElementById('forward').style.display = 'inline';
var next = paraID+1;
document.getElementById('fwd').setAttribute('onclick','showParagraph('+next+')');
} else if (paraID==aParas.length){
document.getElementById('forward').style.display = 'none';
document.getElementById('back').style.display = 'inline';
var prev = paraID-1;
document.getElementById('bk').setAttribute('onclick','showParagraph('+prev+')');
} else {
document.getElementById('back').style.display = 'inline';
document.getElementById('forward').style.display = 'inline';
document.getElementById('fwd').removeAttribute('onclick');
document.getElementById('bk').removeAttribute('onclick');
var next = paraID+1;
document.getElementById('fwd').setAttribute('onclick','showParagraph('+next+')');
var prev = paraID-1;
document.getElementById('bk').setAttribute('onclick','showParagraph('+prev+')');
}
}
}
function hideParagraph(paraID){
new Effect.BlindUp('para'+paraID);
}
function browseDOM() {
mynode = document.getElementById('col1');
thingylist = mynode.childNodes;
var aParas = new Array();
var counter = 0;
for(var i=0;i<thingylist.length;i++){
if (thingylist[i].nodeType == 1 && thingylist[i].id.substring(0,1)== 'p'){
aParas[counter] = thingylist[i].id.substring(4);
counter++;
}
}
return aParas;
}
Each Paragraph is wrapped around a div with ID 'para1','para2' etc.
Dev site is at aegean.newcreation.com if you would like to check.
Any help appreciated.
D.
Client wants her pages to have paragraphs appearing 1 at a time with user clicking back and forward to see next/previous paragraphs.
Fine, I thought, I will use DOM with Script.aculo.us to hide hide/show divs so I built the following:
function showParagraph(paraID){
var aParas = browseDOM();
if(aParas.length > 0){
var i = 0;
for (i = 0; i<aParas.length; i++){
// update paragraph displays
if (i!= paraID-1){
hideParagraph(i+1);
}
}
new Effect.BlindDown('para'+paraID);
// update paragraph navigation
if (paraID==1){
document.getElementById('back').style.display = 'none';
document.getElementById('forward').style.display = 'inline';
var next = paraID+1;
document.getElementById('fwd').setAttribute('onclick','showParagraph('+next+')');
} else if (paraID==aParas.length){
document.getElementById('forward').style.display = 'none';
document.getElementById('back').style.display = 'inline';
var prev = paraID-1;
document.getElementById('bk').setAttribute('onclick','showParagraph('+prev+')');
} else {
document.getElementById('back').style.display = 'inline';
document.getElementById('forward').style.display = 'inline';
document.getElementById('fwd').removeAttribute('onclick');
document.getElementById('bk').removeAttribute('onclick');
var next = paraID+1;
document.getElementById('fwd').setAttribute('onclick','showParagraph('+next+')');
var prev = paraID-1;
document.getElementById('bk').setAttribute('onclick','showParagraph('+prev+')');
}
}
}
function hideParagraph(paraID){
new Effect.BlindUp('para'+paraID);
}
function browseDOM() {
mynode = document.getElementById('col1');
thingylist = mynode.childNodes;
var aParas = new Array();
var counter = 0;
for(var i=0;i<thingylist.length;i++){
if (thingylist[i].nodeType == 1 && thingylist[i].id.substring(0,1)== 'p'){
aParas[counter] = thingylist[i].id.substring(4);
counter++;
}
}
return aParas;
}
Each Paragraph is wrapped around a div with ID 'para1','para2' etc.
Dev site is at aegean.newcreation.com if you would like to check.
Any help appreciated.
D.