how to get parameter orignal value by receiving it in function


Tags: jquery,html,css,jquery-animate,position

Problem :

I am new to jQuery and am trying to write a function for sliding a div on click of another link.

My problem is that the function works when I give direction static but not when I try to give direction dynamic.

Here is my code :

HTML :

<div id="popshbtn" onclick="uiSlide(this, '#popwrap', 'right')">
    <p>Feedback</p>
</div>

<div id="popwrap" class="popdnone">
    <h3 class="h3">Support</h3> 
</div>   

CSS :

#popshbtn{
    background-color: #3385D6;
    color: #FFFFFF;
    font-size:16px;
    width:38px; height:188px;
    border:1px solid #2d7dcb;
    text-align:center;
    cursor:pointer;
    position:absolute;
    bottom:2%;
    right:0;
    z-index:999999;
}
#popshbtn:hover{
    background:#2d7dcb;
}
#popwrap{
    width:478px; 
    border:1px solid #ccc; 
    padding:10px; 
    background:#f5f5f5;
    position:absolute;
    top:20%;
    right:-500px;
    margin-left:-500px;
    display:none;
    height:400px;
}

jQuery :

function uiSlide(ths, target, direction){
console.log(direction);

if( $(target).is(':visible')){

    $(target).hide().animate({
        'direction': '-500px'
    },'fast', function(){
        //call back function
    })

}
else{
    $(target).show().css({
        direction: 0
    },'fast', function(){
        //call back function
    })
}

   }

This code doesn't work, unless I give static position instead of direction.

I just want to know, is possible? How do I determine direction of the animation?

Please let me know if you have any questions.

Here is js fiddle link http://jsfiddle.net/sarfarazdesigner/u25Ne/ .

i have upload a image it will help you better to understand enter image description here



Solution :

You can pass object as parameter in animate() jquery API methods, for example:

http://jsfiddle.net/u25Ne/3/

$(document).ready(function (e) {
  $('#popshbtn').click(function () {
    uiSlide(this, '#popwrap', 'right');
  })

  $('#popshbtn').html($('#popshbtn').text().replace(/(.)/g, "$1<br />"));
});

function uiSlide(that, target, direction) {
  var optionObj1 = {},optionObj2 = {};
  optionObj1[direction] = "-500px";
  optionObj2[direction] = 0;

  if ($(target).is(':visible')) {
    $(target).animate(optionObj1, 'fast', function () {
         $(this).hide();
    })

  } else {
    $(target).show().animate(optionObj2, 'fast', function () {

    })
  }

}

    CSS Howto..

    How to put container div under menu using CSS

    With Watin, how do I wait until an element gets a certain CSS class?

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    How can I prevent a flex container from overflowing/underflowing?

    Smarty / How to include PHP function to compress CSS file

    How to put a div at left or right in pure CSS?

    how to manage layers in position:absolute css block

    How to make this css code (counters and ;before) cross browser compatible using jquery?

    How do i get css3pie to work on all Joomla 2.5 pages not just default page

    How to get an image's height and set its parent height to auto?

    How to move items to left inside a div?

    How to align div objects in rows

    how to set a specific pixel or character width limit for a text in css

    How to make navigation bar scroll with the page?

    How to show the first N elements of a block and hide the others in css?

    How to get the sticky footer to work?

    How to add container without destroying table

    Dropdown not showing elements Bootstrap 3

    jquery style sheet switcher - how to effect only theme css?

    How to move a div up and down infinitely in CSS3?

    How to create a DIV style switcher in JavaScript?

    How to make highlighted table with rowspan

    How to correctly override inaccessible HTML content with CSS?

    How to toggle display: inline and display toggle?

    How to design resolution independent CSS elements?

    How to apply font anti-alias effects in CSS? [duplicate]

    HTML CSS - How to render SQL nicely [closed]

    How to utilize css of this style in LESS?

    How to fast-blur in css/js?

    How to convert css margin value to pixels with just plain javascript?