I could use some help modifying a slide affect on a few div's. I hope I describe this adequately.
I have 3 images that I would like to display horizontally. I need a default text to appear first when the page loads. When an image is clicked on, the new text should slide down covering the default text. When another image is clicked on that text should slide down and cover the previous image's text.
Right now the script only allows a vertical display of the images and I can't put the sliding text in a specific place.
Your help is much appreciated.
Here is the CSS
Code:
<head>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
margin:0px;
}
.dhtmlgoodies_question{ /* Styling question */
/* Start layout CSS */
color:;
font-size:0.9em;
background-color:#;
width:84px;
margin-bottom:0px;
margin-top:0px;
padding-left:0px;
background-image:;
background-repeat:no-repeat;
background-position:;
height:84px;
/* End layout CSS */
overflow:hidden;
cursor:pointer;
}
.dhtmlgoodies_answer{ /* Parent box of slide down content */
/* Start layout CSS */
border:0px solid #;
background-color:#;
width:500px;
/* End layout CSS */
visibility:hidden;
height:0px;
overflow:hidden;
position:relative;
}
.dhtmlgoodies_answer_content{ /* Content that is slided down */
padding:0px;
font-size:0.9em;
height:0px;
position:relative;
}
</style>
Here is the Script
Code:
<script type="text/javascript">
var dhtmlgoodies_slideSpeed = 10; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_expandMultiple = false; // true if you want to be able to have multiple items expanded at the same time.
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId && !dhtmlgoodies_expandMultiple){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
</head>
Here is what I have placed in the HTML
Code:
<body>
<div class="dhtmlgoodies_question"><img height="84" hspace="0" src="http://www.800lawncare.com/images/fb/watericon.jpg" width="84" border="0"></div>
<div class="dhtmlgoodies_answer"><div><p align="left"><font face="Verdana" size="1">A vital component to the health of your...
</font></p>
</div></div>
<div class="dhtmlgoodies_question"><img height="84" hspace="0" src="http://www.800lawncare.com/images/fb/ferticon.jpg" width="84" border="0"></div><div class="dhtmlgoodies_answer"><div><font size="1"><font face="Verdana">800 Lawn Care gives you a customized, 6
</div></div>
<div class="dhtmlgoodies_question"><img height="84" hspace="0" src="http://www.800lawncare.com/images/fb/mowicon.jpg" width="84" border="0"></div><div class="dhtmlgoodies_answer"><div>Keeping your lawn looking its best takes hard work, time and good
</div></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
margin:0px;
}
#questions {
position:relative;width:400px;border:solid red 1px;
}
.answers {
position:relative;left:100px;top:300px;width:400px;border:solid red 0px;
}
.question{ /* Styling question */
/* Start layout CSS */
color:;
font-size:0.9em;
background-color:#;
width:84px;
margin-bottom:0px;
margin-top:0px;
padding-left:0px;
background-image:;
background-repeat:no-repeat;
background-position:;
height:84px;
/* End layout CSS */
float:left;
margin-Left:20px;
overflow:hidden;
cursor:pointer;
}
.answer{ /* Parent box of slide down content */
/* Start layout CSS */
border:0px solid 1px;
background-color:#FFFFCC;
/* End layout CSS */
width:100%;
visibility:visible;
position:relative;
}
.answer_content{ /* Content that is slided down */
padding:0px;
font-size:0.9em;
height:0px;
position:relative;
}
/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/AnimateII/AnimateII.js" type="text/javascript">
// featured on http://www.vicsjavascripts.org.uk/AnimateII/AnimateII.htm
</script>
</head>
<body>
<body>
<div id="questions" >
<div class="question"><img height="84" hspace="0" src="http://www.800lawncare.com/images/fb/watericon.jpg" width="84" border="0"></div>
<div class="question"><img height="84" hspace="0" src="http://www.800lawncare.com/images/fb/ferticon.jpg" width="84" border="0"></div>
<div class="question"><img height="84" hspace="0" src="http://www.800lawncare.com/images/fb/mowicon.jpg" width="84" border="0"></div>
</div>
<div class="answers" >
<div class="answer">
<p align="left">
<font face="Verdana" size="1">
A vital component to the health of your...1<br />
A vital component to the health of your...1<br />
A vital component to the health of your...1<br />
A vital component to the health of your...1<br />
</font>
</p>
</div>
<div class="answer">
<p align="left">
<font face="Verdana" size="1">
A vital component to the health of your...2<br />
A vital component to the health of your...2<br />
A vital component to the health of your...2<br />
</font>
</p>
</div>
<div class="answer">
<p align="left">
<font face="Verdana" size="1">
A vital component to the health of your...3<br />
A vital component to the health of your...3<br />
A vital component to the health of your...3<br />
</font>
</p>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function SlideMenu(o){
var obj=document.getElementById(o.QuestionsID),questions=this.bycls(o.Questions,obj),answers=this.bycls(o.Answers,document.body),z0=0,h,w,nu=typeof(o.Display)=='number'?o.Display:-1;
this.oops=[];
for (var z0=0;z0<questions.length;z0++){
if (answers[z0]){
answers[z0].style.position='absolute';
answers[z0].style.top='0px';
w=answers[z0].offsetWidth+2;
h=answers[z0].offsetHeight+2
this.oops[z0]=[new zxcAnimateII('clip',answers[z0]),[0,w,h,0],[0,w,0,0],true];
this.oops[z0][0].animate(this.oops[z0][1],this.oops[z0][2],20);
this.addevt(questions[z0],'mouseup','open',z0);
}
}
this.lst=this.oops[0];
this.ms=50;
if (this.oops[nu]){
this.open(nu);
}
this.ms=typeof(o.AnimationSpeed)=='number'?o.AnimationSpeed:1000;
}
SlideMenu.prototype={
open:function(nu){
var oop=this.oops[nu];
if (this.lst!=oop){
this.lst[0].obj.style.zIndex='0';
this.lst[0].animate(this.lst[0].data[0],this.lst[2],this.ms/2);
this.lst[3]=true;
}
this.lst=oop;
this.lst[0].obj.style.zIndex='1';
this.lst[0].animate(this.lst[0].data[0],this.lst[this.lst[3]?1:2],this.ms);
this.lst[3]=!this.lst[3];
},
bycls:function(nme,el,tag){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
}
new SlideMenu({
QuestionsID:'questions',
Questions:'question',
Answers:'answer',
AnimationSpeed:500,
Display:1
});
/*]]>*/
</script>
</body>
</html>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
margin:0px;
}
#questions {
position:relative;width:400px;border:solid red 1px;
}
.answers {
position:relative;left:100px;top:300px;width:400px;border:solid red 0px;
}
.question{ /* Styling question */
/* Start layout CSS */
color:;
font-size:0.9em;
background-color:#;
width:84px;
margin-bottom:0px;
margin-top:0px;
padding-left:0px;
background-image:;
background-repeat:no-repeat;
background-position:;
height:84px;
/* End layout CSS */
float:left;
margin-Left:20px;
overflow:hidden;
cursor:pointer;
}
.answer{ /* Parent box of slide down content */
/* Start layout CSS */
border:0px solid 1px;
background-color:#FFFFCC;
/* End layout CSS */
width:100%;
visibility:visible;
position:relative;
}
.answer_content{ /* Content that is slided down */
padding:0px;
font-size:0.9em;
height:0px;
position:relative;
}
/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/AnimateII/AnimateII.js" type="text/javascript">
// featured on http://www.vicsjavascripts.org.uk/AnimateII/AnimateII.htm
</script>
</head>
<body>
<body>
<div id="questions" >
<div class="question"><img height="84" hspace="0" src="http://www.800lawncare.com/images/fb/watericon.jpg" width="84" border="0"></div>
<div class="question"><img height="84" hspace="0" src="http://www.800lawncare.com/images/fb/ferticon.jpg" width="84" border="0"></div>
<div class="question"><img height="84" hspace="0" src="http://www.800lawncare.com/images/fb/mowicon.jpg" width="84" border="0"></div>
</div>
<div class="answers" >
<div class="answer">
<p align="left">
<font face="Verdana" size="1">
A vital component to the health of your...1<br />
A vital component to the health of your...1<br />
A vital component to the health of your...1<br />
A vital component to the health of your...1<br />
</font>
</p>
</div>
<div class="answer">
<p align="left">
<font face="Verdana" size="1">
A vital component to the health of your...2<br />
A vital component to the health of your...2<br />
A vital component to the health of your...2<br />
</font>
</p>
</div>
<div class="answer">
<p align="left">
<font face="Verdana" size="1">
A vital component to the health of your...3<br />
A vital component to the health of your...3<br />
A vital component to the health of your...3<br />
</font>
</p>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function SlideMenu(o){
var obj=document.getElementById(o.QuestionsID),questions=this.bycls(o.Questions,obj),answers=this.bycls(o.Answers,document.body),z0=0,h,w,nu=typeof(o.Display)=='number'?o.Display:-1;
this.oops=[];
for (var z0=0;z0<questions.length;z0++){
if (answers[z0]){
answers[z0].style.visibility='hidden';
answers[z0].style.overflow='hidden';
w=answers[z0].offsetWidth+2;
h=answers[z0].offsetHeight+2
this.oops[z0]=[new zxcAnimateII('height',answers[z0]),h,0,true];
this.oops[z0][0].Complete=function(){
if (this.data[0]==0){
this.obj.style.visibility='hidden';
}
}
this.oops[z0][0].animate(this.oops[z0][1],this.oops[z0][2],20);
this.addevt(questions[z0],'mouseup','open',z0);
}
}
this.lst=this.oops[0];
this.ms=50;
if (this.oops[nu]){
this.open(nu);
}
this.ms=typeof(o.AnimationSpeed)=='number'?o.AnimationSpeed:1000;
}
SlideMenu.prototype={
open:function(nu){
var oop=this.oops[nu];
if (this.lst!=oop){
this.lst[0].obj.style.zIndex='0';
this.lst[0].animate(this.lst[0].data[0],this.lst[2],this.ms/2);
this.lst[3]=true;
}
this.lst=oop;
this.lst[0].obj.style.zIndex='1';
this.lst[0].obj.style.visibility='visible';
this.lst[0].animate(this.lst[0].data[0],this.lst[this.lst[3]?1:2],this.ms);
this.lst[3]=!this.lst[3];
},
bycls:function(nme,el,tag){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
}
new SlideMenu({
QuestionsID:'questions',
Questions:'question',
Answers:'answer',
AnimationSpeed:500,
Display:1
});
/*]]>*/
</script>
</body>
</html>
</body>
</html>
VWPhillips,
Thanks for your reply. The changes you posted appear to be correct for positioning. However, I can't get it to work. Do the DIV's need individual ID's? Do I need to identify those actions in the script? If so where?
At the moment all 3 answer divs are visible at the same time and there isn't any toggling between them.
Reply With Quote
Bookmarks