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 does the jquery resultview on Airbnb Search Page work?

    In html, how is a child element's percentage-based size calculated when its parent has padding?

    How to change a lot of img when hover

    How do I set background-image height using jQuery?

    Two buttons vertically misaligning, how to align them properly?

    How to add all li of existing ul to the bottom of another ul base on their css classes

    how to place div next to centered div css

    How do I have a div go around another div?

    How can I get a div just inside an input at 0% and 100%?

    How can i override this css behavior with jquery?

    How to share images between subdomains?

    How to override default “text” cursor on mousedown, mousemove?

    How to prevent fixed positioned element overlapping others elements in css?

    How to vertically align two
    tags perfectly for each resolution?

    How to have equal padding on both side of a div. CSS

    How to put all of the images from folder into CSS box

    Something in my CSS is causing a random white bar to appear, how do I fix it?

    How to force parent div to expand by child div width/padding/margin/box?

    Force jQuery show/hide to respect display: table?

    How to make a box expand a distance from the sides

    How to bottom center a span inside a list item

    How to separate a table cell into two equal parts with different background via css?

    hide show div using nav html5 query javascript

    How to change css from javascripts

    how to make triangle in css [closed]

    How to fix every element on the same position, when browser is resized?

    How to set shadow on top of a CSS border?

    How can I use external HTML form in Joomla site?

    In css how to joining two div classes without space? [closed]

    How to add style to android app