how to make a vertical button on a webpage

Question

Can someone explain how to code the feedback button seen on foursquare.com? It's a vertical button on the side of the webpage and it opens a new window and dims out the background. I've seen this on some other sites as well. Thanks in advance.

Answer 1

How they did it...

The button is provided through the http://getsatisfaction.com service. This service is similar to other services like http://sharethis.com which exist to minimize the programming required to create a fully-rounded website. Essentially you setup an account (I'm assuming...) and they provide you with a javascript code-block that you include in your projects, which causes the vertical-button to appear on your site.

Do it yourself...

This wouldn't be that difficult the do yourself. I quickly worked up a jQuery example. Suppose we have the following markup:

<div id="feedback">
  <p>Here is where you would have your form.</p>
  <div class="toggler">?</div>
</div>

.toggler will be our button in this case. We'll want to place it outside of the feedback box with some css, and also place the feedback box with some css too:

#feedback { position:absolute; left:0; width:200px; padding:10px; 
            background:red; color:white; }
.toggler  { width:25px; height:50%; color:white; background:blue; 
            text-align:center; position:absolute; top:25%; 
            right:-25px; cursor:pointer }

This could be cleaned up a bit. But now that we have our elements, we can add some toggle-logic with jQuery:

$(function(){
  // When the user clicks on .toggler
  $(".toggler").click(function(e){
    // Get a reference to our feedback box
    var feedback = $("#feedback");
    // If it's in the process of being opened (or is opened)
    if ( $(feedback).hasClass("opened") ) {
      // Close it
      $(feedback)
        .removeClass("opened")
        .animate({"left":0}, 1000);
    } else {
      // Else, Open it
      $(feedback)
        .addClass("opened")
        .animate({"left":-$(feedback).outerWidth()}, 1000);
    }
  });
});

Online demo: http://jsbin.com/iyenu4

Answer 2

Have a look at jquery and the jquery UI javascript library for implementing those kinds of interavtive features.

Here is an example: http://wpaoli.building58.com/2009/08/jquery-animated-feedback-tab-thingy/