www.webdeveloper.com
Results 1 to 5 of 5

Thread: improve on hide/show div with slide affect

  1. #1
    Join Date
    Feb 2011
    Posts
    2

    improve on hide/show div with slide affect

    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,&nbsp;time and good 
    </div></div>
    
    </body>
    </html>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    Code:
    <!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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    Code:
    <!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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Feb 2011
    Posts
    2
    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.

    Thanks in advance

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    post a ;ink to your page
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles