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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Div Animation JS Effect

    Hi all, I am new here and I am working on project for school. I want to create a button and when you press it, it will run this JS such that a div will appear. I am using this so that when you press on a button in my navigation bar, a div will appear below, similar to the iOS folder effect. This is so that the info in the div will not be visible when you first load the page, without pressing the button. However, my project does not really include javascript and I understand learning javascript is very difficult, which I simply do not have time for. Thus I have found a tutorial online which creates this effect, exactly what I want.

    The code works flawlessly, and I enjoy the effect very much. However, the button which I press only acts as one function, so that when it opens, I must click a button and when I close it, I must click another button which I do not want. Since I am trash in javascript I cannot figure out how to do so.

    Here is the javascript code which allows the effect:
    Code:
    <script>
    	jQuery(document).ready(function() {
    		$('.open-button').click(function() {
    			$('.page-split-wrap').css({'display': 'block'})
    			$('.page-split-wrap').animate({height: '250px'}, 500);
    	});
    
    		$('.close-button').click(function() {
    			$('.page-split-wrap').animate({height: '0px'}, 500, function() {
    			$('.page-split-wrap').css({'display': 'none'});
    		});
    		});
    	})
    	</script>
    and here is part of the HTML code

    Code:
    div class="button open-button"><a href="#"><p>Open</p></a></div>
    			</p>
    	</div>
    		<div class="page-split-wrap">
    			<div class="page-split-head"> </div>
    	<div class="page-split-content">
    					<p class="inside">Content in here</p>
    					<div class="button close-button"><a href="#"><p>Close</p></a></div>
    				</div>
    I've been looking at this code for a long time and I can't figure it out. I tried thinking about the if and else tags, however I don't know how to correctly place and code it for it to work.

    If you need any other codes please reply, I desperately need help.

    Thanks in advance.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,475
    Thanks
    6
    Thanked 980 Times in 953 Posts
    You’re on the right track with conditionals (if/else statements (not “tags”)) already. Here is a thought-provoking impulse:

    Assign a specific class to the div when it’s open and check for its presence on click of the button. If it is present, you know that the div is open and you have to close it.

    Something like:
    Code:
    open-button -> click:
      if(div has class) {
        execute functions to close div and remove the class
      }
      else {
        execute functions to open div and add class
      }
    And by the way: in jQuery you can chain functions; and also, a simpler way to write css('display','block'); is just show(). If you wanna get more fancy you can use fadeIn() (and fadeOut(), of course).
    Code:
    $('.page-split-wrap').show().animate({height: '250px'}, 500);

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    no JQUERY solution?

    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[*/
    
    #page-split-wrap {
      position:relative;display:none;overflow:hidden;width:100px;height:0px;border:solid red 1px;
    }
    
    /*]]>*/
    </style>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function Toggle(id,close,open,ms){
     var obj=document.getElementById(id),o=Toggle['zxc'+id],to;
     if (!o&&obj){
      Toggle['zxc'+id]=o={
       obj:obj,
       now:0,
       ms:500,
       ud:true
      }
     }
     if (o){
      ms=typeof(ms)=='number'?ms:o.ms;
      obj.style.display='block';
      to=o.ud?open:close;
      clearTimeout(o.dly);
      animate(o,o.now,to,new Date(),ms*Math.abs((to-o.now)/open));
      o.ud=!o.ud;
     }
    }
    
    function animate(o,f,t,srt,mS){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      o.now=Math.max(now,0);
      o.obj.style.height=o.now+'px';
     }
     if (ms<mS){
      o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
     }
     else {
      o.now=t;
      o.obj.style.height=o.now+'px';
      if (t==0){
       o.obj.style.display='none';
      }
     }
    }
    
    
    /*]]>*/
    </script>
    </head>
    
    <body>
     <div class="button open-button" onmouseup="Toggle('page-split-wrap',0,250,500);" ><p>Toggle</p></div>
    
     <div id="page-split-wrap">
      <div class="page-split-head"> </div>
      <div class="page-split-content">
       <p class="inside">Content in here</p>
       <p class="inside">Content in here</p>
      </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/

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi guys, thanks for the help.

    I tried to go with vwphillips suggestion, thus I copied the code and made a few adjustments and created a new document.

    It worked flawlessly, the way I wanted it. Once again, thanks for your help.

    However, after loading it on my webpage, I realized that when the button is pressed and executed, it appears over my website.

    Is there a way to make it push the rest of the website(i.e. the part of the website which is below the navigation)?

    Sorry for all the hassle, but I forgot to include that part in my original post.


  •  

    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
    •