Reputation: 41

how to make a vertical button on a webpage

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.

Upvotes: 4

Answers (4)

Sampson

Reputation: 268502

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

Upvotes: 6

Richard JP Le Guen

Reputation: 28753

The button is probably positioned using CSS fixed positioning. Fixed positioning means that it remains in the same place on the screen, not on the page. This allows it to 'float" over the text even when you scroll.

The popup dialogue is the same. Clicking on the button toggles the display CSS property between none and something other than none, probably block.

The gray background, I'd guess is created with a big fixed position <div> with width:100% and height:100% and some opacity.

Try this:

HTML

Save this as example.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
    <title>Example</title>
    <link rel="stylesheet" href="example.css" type="text/css" />
    <script type="text/javascript" src="example.js"></script>
</head>
<body>
    <h1>Example</h1>
    <a id="clickhere">Click here for the popup!</a>
    <div id="main">

        <p>
            Lorem ipsum dolor sit amet
        </p>
    </div>

    <form id="popup" class="dialog" action="#">
        <div id="popupbackground"></div>
        <div class="dialog">
            <h2>Popup!</h2>
            <a id="closepopup">Click here to close this dialog</a>
        </div>
    </form>
</body>
</html>

CSS

Save this as example.css:

html {
    height:100%;
}

body {
    height:100%;
}
form.dialog {
    height:100%;
    width:100%;
    position:fixed;
    top:0px;
    left:0px;
    text-align:center;
    padding-top:10%;
    display:none;
}
form.dialog div.dialog {
    width:400px;
    background-color:gray;
    margin:auto;
    text-align:left;
    border:2px solid black;
    padding:10px;
    position:relative;
    z-index:10;
}
form.dialog label {
    display:block;
}
form.dialog input {
    width:99%;
}
form.dialog textarea {
    width:99%;
    height:200px;
}
a {
    cursor:pointer;
    text-decoration:underline;
    font-weight:bold;
}
#popup #popupbackground {
    background:gray;
    opacity:0.4;
    filter:alpha(opacity=40);
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
}

JavaScript

Save this as example.js:

window.onload = function() {
    document.getElementById("clickhere").onclick = function() {
        document.getElementById("popup").style.display = "block";
    };

    document.getElementById("closepopup").onclick = function() {
        document.getElementById("popup").style.display = "none";
    };

};

The idea is that the <form> consumes the whole screen, because of the width and height properties in the form.dialog rule. Since that rule also specifies a fixed position, the user can never scroll away from the contents of this <form>. We can then center the <div class="dialog"> using a margin:auto, so it floats, centered on the page. The <div id="popupbackground"></div> provides a faded gray backdrop.

Upvotes: 0