CODEWITHSUNDEEP
jqueryslide
rachids
rachids

Reputation: 360

JQuery horizontal slide not pushing my div properly

So i did a bit of searching but without finding answers to my issue.

I have a "feedback" menu on the left of my page and I want that "feedback" link to slide with the feedback div.

Instead of that, the link is just pushed away.

Here is a jsFiddle of what I do right now.

$(document).ready(function(){
$("#feedback-titre").click(function(){
    $("#feedback-commentaire").toggle("slide");
});
});

The CSS:

    #menu-leftfeedback{
    position: fixed;
    left: 0px;
    top: 250px;
}

#feedback-titre{
    float:left;
    background-color:#FFF;
    color:#000;
    font-weight:bold;
    border-radius: 5px 5px 0px 0px;
    border:solid 1px #9C8E69;
    border-bottom:0px;
    cursor:pointer;
    display:block;
    width:100px;
    height:30px;
    font-size:large;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: bottom left;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: bottom left;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: bottom left;
    -o-transform: rotate(90deg);
    -o-transform-origin: bottom left;
    transform: rotate(90deg);
    transform-origin: bottom left;
}

#feedback-commentaire{
    float:left;
    background-color:cyan;
    display:none;
    width:300px;
    height:330px;
}

#feedback-commentaire input, #feedback-commentaire textarea{
    width:290px;
    border: medium none;
    color: #7B7B7B;
    font-size: 18px;
    height: 38px;
    padding: 2px 10px 2px 7px;
}

#feedback-commentaire button{
    background-color:transparent;
    border:0;
    color:#D42E00;      
}

My guess: it's CSS, but I tried a bunch of things without any success. I'm turning into you to help me.

Upvotes: 1

Views: 678

Answers (1)

Ayman Safadi
Ayman Safadi

Reputation: 11552

Here's how I got it working:

CSS

#menu-leftfeedback{
    position: fixed;
    left: -300px;
    top: 250px;
}

#feedback-commentaire{
    float:left;
    background-color:cyan;
    /*XXXXXXX REMOVED XXXXXXX display:none;*/
    width:300px;
    height:330px;
}

JS

var feedbackButton = $("#feedback-titre"),
    feedbackContent = feedbackButton.parent();

feedbackButton.click(function(){
    feedbackContent.animate({
        left: parseInt(feedbackContent.css('left'),10) == 0 ? -feedbackContent.outerWidth() + feedbackButton.outerWidth() : 0
    }, 500);
});

DEMO

http://jsfiddle.net/66aa7/110/

Upvotes: 1

Related Questions