Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    text on flip box

    Hi
    Does anyone know how to make the flip box code below so it reverts back to the original text when you click it again. I have 5 flip boxes with a message on each side but currently once you click it you can't click again to see the original text.


    Code:
    <script language="javascript">
    	trueCount = 0;
    	falseCount = 0;
    	
    	for(i=1;i<=15;i++) {
    		$("#flipbox" + i).click(function(){
    			var $this = $(this);
    			$(this).flip({
    				direction:'tb',
    				color: '#EFEFEF',
    				content: $this.attr("title"),
    				onBefore: function(){$(".revert").show()}
    				
    					})
    					return false;
    				});
    		
    						$("#revert").bind("click",function(){
    					$("#flipbox").revertFlip();
    					return false;
    				});
    	}
    	
    	function addAnswer(div, answer){
    		
    		if($("#"+div).hasClass("correct")) {
    			trueCount--;
    			$("#"+div).removeClass("correct");
    		}
    		else {
    			$("#"+div).addClass("correct");
    			answersArray[trueCount] = $("#"+div).parent().html().substr(0, $("#"+div).parent().html().indexOf('<'));
    			trueCount++;
    			if(trueCount == 2) {
    				$(".test").fadeOut(1000, function(){
    					$(this).html("<h3>Correct - </h3>" 
    				    ).fadeIn(1000);	
    				})
    			}
    		}
    	}
    	updateBookmark();
    </script>
    
    
    
    <h1>Communications Skills</h1>
    <div id="greenbg"><div id="greenbgcontent"><h4>Listening</h4>
    <p>How can you show that you are listening actively?</p>
    <p>Click on the boxes below until they show behaviours you feel demonstrate that someone is listening to you</p>
    <div class="content">
        <div class="flip" onClick="addAnswer('answer1','c')" id="flipbox1" title="Put down the book">Reading a book<div class="answers" id="answer1"></div></div>
        <div class="flip" onClick="addAnswer('answer2','t')" id="flipbox2" title="Position their body so that they are not facing you">Position their body so that they are facing you <div class="answers" id="answer2"></div></div>
        <div class="flip" onClick="addAnswer('answer3','c')" id="flipbox3" title="Be Quiet">Talk<div class="answers" id="answer3"></div></div>
        <div class="flip" onClick="addAnswer('answer4','t')" id="flipbox4" title="Watch the wall">Make eye contact<div class="answers" id="answer4"></div></div>
        <div class="flip" onClick="addAnswer('answer5','c')" id="flipbox5" title="Be Quiet">Ask questions<div class="answers" id="answer5"></div></div>
    </div>
    <div class="test"></div>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    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[*/
    
    .flip {
      position:absolute;visibility:hidden;z-Index:2;left:0px;top:0px;width:300px;height:200px;background-Color:#FFCC66;
    }
    
    #example2 {
      position:absolute;left:300px;top:350px;width:300px;height:200px;
    }
    
    .div {
      position:absolute;left:0px;top:0px;width:300px;height:200px;background-Color:#FFCC66;text-Align:center;font-Size:55px;border:solid red 1px;
    }
    
    
    /*]]>*/
    </style>
    
    <script src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript">
     // featured on http://www.vicsjavascripts.org.uk/Animate/Animate.htm
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Flip Slide Show (23-July-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // see http://www.vicsjavascripts.org.uk/FlipSlideShow/FlipSlideShow.htm
    
    // **** Functional Code - NO NEED to Change
    
    function zxcFlipSlideShow(o){
     var oop=this,obj=document.getElementById(o.ID),w=obj.offsetWidth,h=obj.offsetHeight,panels=this.bycls(o.PanelClass,obj),flip=this.bycls(o.FlipClass,obj)[0],flip=flip||panels[0].cloneNode(true),mde=o.Mode,mde=isFinite(mde)&&mde==1?1:0,exp=o.ExpandBy,exp=o.ExpandBy,exp=isFinite(exp)?exp:0,swap=o.SwapImage,z0=0,ms=o.AnimationSpeed,hold=o.HoldDuration,srt=o.AutoStart;
     flip.style.zIndex='101';
     flip.style.visibility='hidden';
     obj.appendChild(flip);
     this.oops=[new zxcAnimate('left',flip,0),new zxcAnimate('top',flip,0),new zxcAnimate('width',flip,w),new zxcAnimate('height',flip,h)];
     this.oops[0].Complete=function(){
       if (oop.ud=='s'){
        oop.swap();
        oop.flip('c');
       }
       else {
        this.obj.style.visibility='hidden';
        oop.panels[oop.cnt].style.visibility='visible';
       }
      }
     for (;z0<panels.length;z0++){
      panels[z0].style.position='absolute';
      panels[z0].style.visibility=z0>0?'hidden':'visible';
     }
     this.obj=flip;
     this.mde=mde;
     this.wrap=o.Wrap!=false;
     this.nxt=[0,0,w,h];
     this.fwd=[[w/2,-exp/2,0,h+exp],[-exp/2,h/2,w+exp,0]];
     this.ms=isFinite(ms)&&ms>0?ms/2:500;
     this.hold=(isFinite(hold)&&hold>0?hold:1000)+this.ms*2;
     this.panels=panels;
     this.ud='c';
     this.img=flip.nodeName.toUpperCase()=='IMG'&&(typeof(swap)!='boolean'||swap);
     this.to=null;
     this.aud=1;
     this.cnt=0;
     if (isFinite(hold)&&(typeof(srt)!='boolean'||srt)){
      this.to=setTimeout(function(){ oop.auto(); },this.hold-this.ms*2);
     }
    }
    
    zxcFlipSlideShow.prototype={
    
     Next:function(ud,mde){
      this.Pause();
      this.Mode(mde);
      var ud=isFinite(ud)&&ud<0?-1:1,lgth=this.panels.length-1;nu=this.cnt+ud;
      nu=this.wrap?nu<0?lgth:nu>lgth?0:nu:Math.max(Math.min(nu,lgth),0);
      this.aud=ud;
      this.GoTo(nu);
     },
    
     GoTo:function(nu,mde){
      this.Pause();
      this.Mode(mde);
      if (this.ud=='c'&&this.panels[nu]&&nu!=this.cnt){
       this.panels[this.cnt].style.visibility='hidden';
       this.swap();
       this.cnt=nu;
       this.flip('s');
      }
     },
    
     Mode:function(mde){
      if (this.ud=='c'){
       this.mde=mde==0?0:mde==1?1:mde==2?this.mde==1?0:1:this.mde;
      }
     },
    
     Auto:function(ud,mde){
      this.Pause();
      var oop=this;
      this.to=setTimeout(function(){ oop.auto(ud,mde); },200);
     },
    
     Pause:function(ud){
      clearTimeout(this.to);
     },
    
     flip:function(ud){
      var oops=this.oops,z0=0,data=ud=='s'?this.fwd[this.mde]:this.nxt;
      this.ud=ud;
      oops[0].obj.style.visibility='visible';
      for (;z0<oops.length;z0++){
       oops[z0].animate(oops[z0].data[0],data[z0],this.ms,null,ud);
      }
     },
    
     auto:function(ud,mde){
      var oop=this,ud=ud==0?-1:ud==1?1:ud==2?this.aud*=-1:this.aud;
      this.Mode(mde);
      this.Next(ud);
      this.to=setTimeout(function(){ oop.auto(ud); },this.hold);
     },
    
     swap:function(){
      var panel=this.panels[this.cnt];
      if (this.img&&panel.nodeName.toUpperCase()=='IMG'){
       this.obj.src=panel.src;
      }
     },
    
     bycls:function (nme,el){
      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;
     }
    
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var F1,F2;
    
    function Init(){
    
    
     F2=new zxcFlipSlideShow({
      ID:'example2',
      PanelClass:'div',
      FlipClass:'flip',
      ExpandBy:50
     });
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
     <div id="example2" onmouseup="F2.Next(1);" >
       <div class="flip"></div>
       <div class="div" >
        <br />
         DIV 0
       </div>
       <div class="div" >
        <br />
         DIV 1
       </div>
     </div>
    
    </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/


  •  

    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
    •