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.
+5
A:
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
Jonathan Sampson
2010-03-16 20:10:55
I don't agree with his answer, but also do not understand the -1... vindictive +1 to the rescue!
LeguRi
2010-03-16 21:06:56
@Richard The initial answer was correct, in that it explained how the example site achieved this. I do agree with you that it wasn't much from a technical perspective, so I've updated my answer to include how it can be quickly achieved. Thanks!
Jonathan Sampson
2010-03-16 21:25:18
@Jonathan - nice! And ya, like most developers I sometimes confuse "don't agree" with "didn't understand" ;) "nonetechnical answer? can't make sense..."
LeguRi
2010-03-17 03:09:44
Hoping I can ask a follow up. How can the button on the right stay in the same place when you scroll down the page? I think it needs to use the fixed attribute. Can you help me with the code for that?I don't need the toggle part that comes out, I figured out what I wanted to do with lightbox / jquery. I appreciate seeing that however. Thanks!
sam bell
2010-03-18 21:01:41
@sambell `#feedback { position:fixed }` will lock it in place.
Jonathan Sampson
2010-03-18 21:11:11
Sweet. That did it. Thanks for all your help.
sam bell
2010-03-19 00:38:56
@down voter - _Why?_ I'm thoroughly curious as to what's wrong with this (and mine, above) answer!
LeguRi
2010-03-20 14:46:25
+1
A:
Looks like they're using the Lift modal dialog for the popup and background dimming.
kekekela
2010-03-16 20:13:46
+1
A:
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/
Mark Redman
2010-03-16 20:18:33
A:
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.
LeguRi
2010-03-16 20:57:00