how to make a vertical button on a webpage

css, html

Solution

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

Problem

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.

Original source