Thread: Side pop-out

    #1
  1. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,111
    Rep Power
    487

    Side pop-out


    AAARGH, it's official, I do not like Jquery!!!

    Okay I have spent a bit of time trying to get something which I think should be (and probably is) quite simple to actually work and I've not had any luck.
    It's the first time that I've tried anything like this so I might be doing it wrong from the ground up but am willing to, if necessary, scrap it and start over.

    So, the idea is that I want an anchored div that hangs onto the right hand side of the browser viewport which, when clicked, "pops-out" another div which holds more information about what it is the user is looking at (in my case, it's an expenses claim).

    I have the following code and CSS which sort-of work (I will explain why in a moment).

    CSS:
    Code:
    #audit_trail_popout_anchor {
    	position: fixed;
    	width: 160px;
    	top: 40px;
    	right: 0px; 
    	color: white;
    	padding: 15px;
    	overflow: hidden;
    	background-color: black;
    	z-index: 1000;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    	filter: alpha(opacity=80);
    	-moz-opacity: 0.80;
    	-khtml-opacity: 0.8;
    	opacity: 0.8;
    }
    #audit_trail_popout {
    	float: clear;
    	height: 100%;
    	position: fixed;
    	background-color: #CCC;
    	width: 600px;
    	display: none;
    	z-index: 1000;
    	right: -10px;
    }
    JQuery:
    Code:
    	$( document ).ready(function() {
    		$("#audit_trail_popout_anchor").click(function() {
    			$('#audit_trail_popout').toggle('slide', { direction: 'right' }, 300);
    			$("#audit_trail_popout_anchor").animate({left: "-=500px",}, 300 );
    
    		});
    		$("#audit_trail_popout").click(function() {
    			$('#audit_trail_popout').toggle('slide', { direction: 'right' }, 300);
    			$("#audit_trail_popout_anchor").animate({left: "+=500px",}, 300 );
    		});
    	});
    PHP:
    PHP Code:
        echo "<div id='audit_trail_popout_anchor'>";
            echo 
    "Show / hide audit trail";
        echo 
    "</div>";
        echo 
    "<div id='audit_trail_popout'>";
            echo 
    "Hello world";
        echo 
    "</div>"
    So, if the user clicks initially onto the "Show/Hide" div, both elements move nicely together into their "open" position.

    Now, here's the problem:

    If, the user then clicks the "Show/Hide" div again, the "Show/Hide" DIV does another animation off to the left, instead of back to the right.
    If the user clicks on the "audit_trail_popout" DIV, they both return back to their correct "closed" positions.


    Now, OBVIOUSLY, this is because the code I've written actually tells it to do that, what I need to know is how to toggle the animation instead of "hard-coding" it if you get my drift?

    I'm afraid as this is an internal system, I can't provide any example URLs and I've not used JS Fiddle enough to create one (sorry) but if you need any more info, please ask and I will answer the best I can!
    Last edited by badger_fruit; January 10th, 2014 at 09:45 AM. Reason: Missed some information out the first time, added now!
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    192
    Rep Power
    31
    Hi.
    That "anchor" might need somekind of "flag" I think, to help describe its current state.
    Let's see if we can use classname to store this flag, and name it as "toggled":
    PHP Code:
    $( document ).ready(function() {

        function 
    toggleAnchor(){
            if ($(
    '#audit_trail_popout_anchor').hasClass('toggled'))
                $(
    '#audit_trail_popout_anchor').animate({left'+=500px',}, 300, function(){
                    $(
    this).removeClass('toggled');
                });
            else
                $(
    '#audit_trail_popout_anchor').animate({left'-=500px',}, 300, function(){
                    $(
    this).addClass('toggled');
                });
        }
        
        $(
    '#audit_trail_popout_anchor').click(function() {
            $(
    '#audit_trail_popout').toggle('slide', { direction'right' }, 300);
            
    toggleAnchor();
        });
        
        $(
    '#audit_trail_popout').click(function() {
            $(
    '#audit_trail_popout').toggle('slide', { direction'right' }, 300);
            
    toggleAnchor();
        });
    }); 
    PS: there is also a CSS3's property called "transition" which probably is better for this kind of effect. But I don't know
    Last edited by hdewantara; January 11th, 2014 at 01:56 AM.
  4. #3
  5. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,111
    Rep Power
    487
    Ah yes, that sounds like a good idea actually, I never thought about setting a flag and doing ABC if it's set, or XYZ if not.

    I'll give this a shot on Monday and report back.
    Thanks, I appreciate the suggestion!!
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984

IMN logo majestic logo threadwatch logo seochat tools logo