Slide-Out Feedback Button for the Side of a Webpage

If you’d like to download the code and the images, click here.

Updated!

As you can see from the comments, there were are few errors that were found. Jack has decided to re-do the screencast. So the version you see now, is the updated, fixed version. Thank you!

New Demo

We apologise for any problems caused by our downloadable example – here you can see a working example online. If you view the page source you will be able to see all the code.

20 Comments on "Slide-Out Feedback Button for the Side of a Webpage"

  1. It is a nice idea, but it doesn’t work properly. When you click in the textarea it slides back to hidden, so you can’t type anything in it.

  2. Jack Franklin says:

    Oh dear sigh

    That never crossed my mind note to self: do more testing.

    What you could do, is do this:

    $(“textarea, input”).click(function() {
    $(“div”).css(“display”, “block”);
    });

    That would make sure when the textarea is clicked, the div always stays open.

  3. Jack Franklin says:

    Hi Jared, and The Web Squeeze.

    I’m very, very sorry for what was an incredibly stupid mistake. Below is the working code.

    JQUERY;

    $(document).ready(function() {
    var feed = $(‘#feedback’);
    feed.css(“display”, “block”).data(“showing”, false).children(“form, h3″).hide()
    feed.children(“img”).click(function() {
    var t = feed;
    if(t.data(“showing”) == false) {
    t.animate({
    marginLeft: “0″,
    height: “300px”
    }).data(“showing”, true).children(“img”).attr(“src”, “hide.png”).css(“top”, “100px”).siblings().show();
    } else {
    t.animate({
    marginLeft: “-300px”,
    height: “120px”
    }).data(“showing”, false).children(“img”).attr(“src”, “feedback.png”).css(“top”, “0″).siblings().hide();
    }

    })

    }); //end document ready

    CSS:
    #wrapper {
    width: 500px;
    margin: 0 auto;
    }

    #feedback {
    display: none;
    position: absolute;
    top: 150px;
    left: 0;
    background-color: #0066cc;
    height: 120px;
    width: 360px;
    margin: 0 0 0 -300px;
    padding-left: 25px;
    }

    #feedback img {
    position: absolute;
    right: 0;
    top: 0;

    }
    h3 {
    font-family: Verdana;
    color: white;
    }
    form input {
    display: block;
    }

    HTML:

    <div id=”feedback”>
    <h3>Please help us improve by giving us some feedback!
    <form>
    <textarea></textarea>
    <input type=”submit” value=”Send Feedback”>
    </form>
    <img src=”feedback.png” alt=”Give Us Feedback”>
    </div>
    <div id=”wrapper”>
    <div>
    <h2>Some Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eros ut orci faucibus hendrerit at sit amet dolor. Mauris sed magna augue, et tempor metus. Phasellus mollis laoreet metus, vel feugiat neque varius lobortis. Nunc vestibulum felis id ipsum commodo suscipit. Donec fringilla sagittis lorem ac tempor. Duis tincidunt pulvinar hendrerit. Ut hendrerit congue suscipit. Nullam eget justo dolor, nec vestibulum dolor. Donec libero neque, tincidunt ut blandit sit amet, fermentum vel nisi. Donec vitae lacus in orci dignissim consequat sed id metus. Duis pretium elit ac massa tempor dignissim. Fusce tincidunt augue id ipsum semper hendrerit eu et est. Vestibul</p>
    <h2>More Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eros ut orci faucibus hendrerit at sit amet dolor. Mauris sed magna augue, et tempor metus. Phasellus mollis laoreet metus, vel feugiat neque varius lobortis. Nunc vestibulum felis id ipsum commodo suscipit. Donec fringilla sagittis lorem ac tempor. Duis tincidunt pulvinar hendrerit. Ut hendrerit congue suscipit. Nullam eget justo dolor, nec vestibulum dolor. Donec libero neque, tincidunt ut blandit sit amet, fermentum vel nisi. Donec vitae lacus in orci dignissim consequat sed id metus. Duis pretium elit ac massa tempor dignissim. Fusce tincidunt augue id ipsum semper hendrerit eu et est. Vestibul</p>
    </div>
    </div>

    All I’ve done is add the img as an element rather than in the background. You then switch the click event to the image, and just have to change a couple of the selectors.

    Sorry once again.

    Jack

  4. sash says:

    the images are JPG but the code is png!
    SMART!
    and where is the java code

  5. Jay says:

    Wow – amazing video. You sure do know what you are talking about. I want a button similar to this, and you have greatly helped me to understand how to get this done.

    Keep up the great work. It is amazing that you are so young yet so talented.

    Best Regards,

    Jay

  6. Dragon says:

    Thanks for this very nice script.

    Can this feedback form be set to “absolute” so that it will not scroll with the page? What would that look like in the CSS? Or would it be in the JS?

    Thanks.

  7. John says:

    Nice work…

    BUT the link in “If you’d like to download the code and the images, click here” does NOT work…

    Can you fix it?

    Thanks…

  8. Gordon says:

    I have downloaded the zip file and extracted, but it does not appear to work at all.

    I get a blue panel with some words at the top but cannot click it.

    Any thoughts ?

  9. Gordon says:

    The index1.html file does not have the complete functions needed to open/hide the panel, nor can I see any reference as to the email to which the submission should be sent. Can you update the zip file ?

    Also can you provide a link to a demo page ?

  10. Example not working for me.

  11. Hi everyone,

    Sorry about that, not sure what has happened but I’ll upload a demo asap.

    Edit – demo is now online. Sorry once again

    Jack.

  12. Mike says:

    It did work but when using on a page with Milkbox it no longer shows…

  13. Thorsten says:

    Great, thanks a lot. I was looking for that a long time. Now our technics can integrate it in our website. your example doesnt work for us, but it gives me the right ideas :)

  14. Beben says:

    on session #feedback img, we can add cursor: pointer…hihihihi :D

  15. Gabriel says:

    Everything looks great but i still don’t know where i can read the comments? or maybe is it possible to put the email address so that i get the comments in my inbox?

    Thank you ;-)

  16. Michael says:

    Good work Jack!
    If for example I have more than three buttons like feedback. Can I automatically hide the buttons (when they are active) when i click on another button? (instead of clicking on hide)
    For example I have Feedback, email and Newsletter buttons. If feedback is clicked and is open and after I click on email, can feedback automatically close whilst email is opened?
    Thanks and great work once again
    Mike

  17. Smith says:

    Site Photoshop Killer can tell you whether the image was Photoshopped. Just submit the suspicious image and you can get the result. JPEG file’s exif tags are used to do such classifications.

Leave a Reply to Thorsten