All geek questions in one place

How to make a vertical button on a web page

Can someone explain how to encode the feedback button seen on foursquare.com? This is a vertical button on the side of the web page, and it opens a new window and reduces the background. I have seen this on other sites. Thanks in advance.

+4
source share
4 answers

How did they do it ...

The button is provided through the http://getsatisfaction.com service. This service is similar to other services, such as http://sharethis.com , that exist to minimize the programming required to create a fully rounded website. Essentially, you are setting up an account (I assume ...), and they provide you with a javascript code block that you include in your projects, which leads to the appearance of a vertical button on your site.

Do it yourself...

This is not so difficult to do yourself. I quickly processed the 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 will want to place it outside the feedback field with some css, and also put the feedback field 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 }

It can be cleaned a little. 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 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

+6
source

Take a look at jquery and jQuery javascript library for implementing these kinds of interactive functions.

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

+2
source

It looks like they are using the Raise Modal Dialog for a popup and background.

+1
source

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

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

The gray background, I would suggest, was created with a large fixed <div> position with width:100% and height:100% , and some opacity .

Try the following:

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 <form> consumes the entire screen due to the width and height in the form.dialog rule. Since this rule also indicates a fixed position, the user cannot scroll from the contents of this <form> . Then we can center the <div class="dialog"> with margin:auto , so it floats, centers on the page. <div id="popupbackground"></div> provides a faded gray background.

0
source

Source: https://habr.com/ru/post/1304307/

More articles:


All Articles