jQuery animated feedback tab thingy

August 22, 2009

View Demo

Update: I have now made this into a jQuery plugin, check it out. minus the ajax form part. Which I plan on including into the plugin in the future.

I saw this little widget being used on a couple of sites lately, and decided to try building one myself. Turned out to be pretty simple using jQuery and some css foo.

Check out the demo of the effect or you can skip the bs and go right to the js.

Basic concept

The basic concept is to have a div hidden off the side of the page using position:absolute and a negative left value,

.feedback-panel {
    position:absolute;
    top:200px;
    left:-291px;
}

and then ‘animate’ the css left value back to zero using jQuery.

$('.feedback-panel').animate({left:'0'},  300)

That is the basic idea, now I will walk through how it all works…

Step one, add this html above your closing body tag:

<div class="feedback-panel">
    <a class="feedback-tab" href="http://www.static-formpage.com">Feedback</a>
 
    <h3>Send Us Feedback</h3>
    <div id="form-wrap">
 
    <form method="post" action="sendmail.php">
      Email: <input id="email" name="email" type="text" /><br />
      Message:<br />
      <textarea id="message" name="message" rows="10" col="30"></textarea><br />
      <input type="submit" class="button" />
    </form>
 
    </div>    
</div>

Step two, style the box:

This is pretty straight forward. Style a box, position it way to the left off the screen. The a.feedback-tab uses a small graphic to use as the ‘tab’ so that I could have the vertical text. This link is positioned to the outside of the box using position:relative and float:right.

.feedback-panel {
    padding:20px;
    width: 250px;
    background: #bab6d8;
    border: #29216d 1px solid;
    position:absolute;
    top:200px;
    left:-291px;
}
 
.feedback-panel a.feedback-tab {
    background:transparent url(feedbacktab.gif) no-repeat scroll 0 0;
    border-width: 1px 1px 1px 0;
    display:block;
    height:99px;
    left:51px;
    bottom:21px;
    position:relative;
    float:right;
    text-indent:-9999px;
    width:30px;
    outline:none;
}
 
textarea {
    width:90%;
    padding:5px;
}
 
#response-message {
    background: #ccc;
    border: 1px solid #999;
    padding:50px;
}

Step Three, the jQuery Javascript.

Here is the script that performs the basic animation:

var feedbackTab = {
 
    speed:300,
    containerWidth:$('.feedback-panel').outerWidth(),
    containerHeight:$('.feedback-panel').outerHeight(),
    tabWidth:$('.feedback-tab').outerWidth(),
 
 
    init:function(){
        $('.feedback-panel').css('height',feedbackTab.containerHeight + 'px');
 
        $('a.feedback-tab').click(function(event){
            if ($('.feedback-panel').hasClass('open')) {
                $('.feedback-panel')
                .animate({left:'-' + feedbackTab.containerWidth}, feedbackTab.speed)
                .removeClass('open');
            } else {
                $('.feedback-panel')
                .animate({left:'0'},  feedbackTab.speed)
                .addClass('open');
            }
            event.preventDefault();
        });
    }
};
 
feedbackTab.init();

All this does is unhide and hide the box when you click the tab. I am getting the widths of the element using jQuery so that you can change the size of the box using css without having to worry about changing values in the js. I set the height of the box so that the box doesn’t jump to get smaller after you submit the form.

After the email is submitted the box will automatically close, and the tab will disappear off the screen as well. (since you have already submitted your feedback that option is removed)

A feedback form like this needs to be ajax so that you don’t have a page refresh, so I ended up combining this idea with a tutorial I found at NetTuts:submit a form without page refresh
I did not include any of the form validation stuff in this post because my main focus is on the animation idea, not the form itself
Also, to be nice to people not using javascript (all .2% of you), The link will take you to another page that can have a static feedback form if javascript is not present.
Here is the whole script, including the ajax form stuff I stole from the NetTut article.

    var feedbackTab = {
 
        speed:300,
        containerWidth:$('.feedback-panel').outerWidth(),
        containerHeight:$('.feedback-panel').outerHeight(),
        tabWidth:$('.feedback-tab').outerWidth(),
 
        init:function(){
            $('.feedback-panel').css('height',feedbackTab.containerHeight + 'px');
 
            $('a.feedback-tab').click(function(event){
 
                if ($('.feedback-panel').hasClass('open')) {
                    $('.feedback-panel').animate({left:'-' + feedbackTab.containerWidth}, feedbackTab.speed)
                    .removeClass('open');
                } else {
                    $('.feedback-panel').animate({left:'0'},  feedbackTab.speed)
                    .addClass('open');
                }
                event.preventDefault();
            });
        }
    };
 
    feedbackTab.init();
 
    $(".button").click(function() {  
        var email = $("input#email").val();
        var message = $("textarea#message").val();
        var response_message = "Thank you for your comment, see ya!"
 
        var dataString = 'email=' + email + '&message=' + message;
 
        $.ajax({
          type: "POST",
          url: "sendmail.php",
          data: dataString,
          success: function() {
            $('#form-wrap').html("<div id='response-message'></div>");
            $('#response-message').html("<p>" + response_message +"</p>")
            .hide()
            .fadeIn(500)
            .animate({opacity: 1.0}, 1000)
            .fadeIn(0, function(){
                $('.feedback-panel')
                .animate({left:'-' + (feedbackTab.containerWidth + feedbackTab.tabWidth)}, 
                (feedbackTab.speed))
                .removeClass('open');
            })
          }
        });
        return false;
    });

I hope someone has fun with this. Enjoy.

Comments (14)

  1. jQuery ‘Tab Slide Out’ PluginSeptember 4, 2009

    [...] couple weeks ago, I made this pull out slider thing using jQuery. (people use them as ‘feedback’ tabs) I decided to try making it into a [...]

  2. zetia 10mgSeptember 14, 2009

    Can you recommend a good disco?

  3. SeanNovember 13, 2009

    Thank you very much taking the time to share your thoughts on jQuery feedback tabs. It’s a source of inspiration for further experiments.

  4. tullJanuary 12, 2010

    i dont play with jquery much, it took me forever to figure out that the only thing missing in order for the script to work, was the link .

    Might want to add that for the folks like myself who wouldn’t know to do that.

  5. bvlletsMarch 2, 2010

    Why didn’t you include the sendmail.php file? I’m having trouble making it actually send. Can you elaborate on that?

    Thanks

  6. WillyPMarch 2, 2010

    The reason I did not include the sendmail.php file is mostly because I didn’t want to promote an insecure web form to the masses. I was mostly experimenting with what could be done using jquery and sharing that. Its a very simple script though. Here is what is in it:

    < ?php
    $email = $_REQUEST['email'] ;
    $message = $_REQUEST['message'] ;

    mail( "wpaoli@gmail.com", "Feedback Form Results",
    $message, "From: $email" );

    // If this is an AJAX call, echo out a JSON object for Javascript
    if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
    $json = array(
    'success' => $success,
    ‘message’ => $message,
    ’server’ => $_SERVER
    );

    echo json_encode($json);

    // Else, just display the message on a new page
    } else {
    echo ‘Page was submitted…’;
    echo $message;
    }

    ?>

  7. bvlletsMarch 3, 2010

    I have my own mail() script that i’m gonna use but I just wanted to see exactly what was going on.

    Thanks for the update!

  8. genusMarch 10, 2010

    Hi. I want to thank you for putting this helpful explanation online. I was just wondering if there is a way to make it work on a page width:100% and coming out from the right side… and so that no horizontal scroll bar appears below? Thanks in advance.

  9. WillyPMarch 10, 2010

    yes you can do that.
    Use the plugin version.
    http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/

    It has an option for right side placement.

  10. NocturnalknightApril 3, 2010

    Man..You saved my Saturday evening..
    I was going over this thing from the morning and couldn’t figure how to make it right…as i was also using “prototype” in the same page..
    Now U opened my eye..
    Thanks for your effort in putting up this page…

  11. grinding millSeptember 9, 2010

    mabe you can use colobox,that will better.

  12. eCarlosDecember 28, 2010

    Thanx! – Great plugin

  13. designer85February 2, 2011

    I’m trying to use this in the web building program “wysiwyg web builder”. The problem is that any code added to the body goes inside of a “container” div. This is ok if the page is not centered, otherwise, the feedback plugin is visible on the page and when clicked slides out further down the page. Is there a way to tell it to start, say -300px to the left so it will show up off screen? Or will this just work on my monitor, but someone with a smaller monitor wouldn’t see it at all? If there is some kind of code to tell a certain div to start outside of the “container” div, or is this a useless attempt? Thanks.

  14. Mike SewellFebruary 28, 2011

    This tutorial was really helpful, I included a survey form instead of a contact form. Works and looks great.
    Thanks!

Add a Comment