1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How can I make ...

Discussion in 'JavaScript' started by Toon-c, Jul 30, 2011.

0
  1. #1
    Hi ..

    How can I make a Bar like this one (for facebook likes)


    http://www.airliners.net/
    Code (markup):
    any tutorials ?

    will be thankful!
     
    Toon-c, Jul 30, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It's a fixed positioned container, like this:
    
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<title>Footer Bar Demo</title>
	<style type="text/css">
		* { border: 0; margin: 0;	padding: 0; }
		
		.content p { height: 300px;	text-align: center; }
		
		.footer-bar {
	    background-color: #000;
	    bottom: 0;
			color: #fff;
	    height: 100px;
	    position: fixed;
	    text-align: center;
	    width: 100%;
	    z-index: 9999;
		}
	</style>
</head>
<body>
<div class="content">
	<p>MAIN CONTENT</p>
	<p>MAIN CONTENT</p>
	<p>MAIN CONTENT</p>
	<p>MAIN CONTENT</p>
	<p>MAIN CONTENT</p>
</div>
<div class="footer-bar">FOOTER BAR CONTENT</div>
</body>
</html>
    Code (markup):
     
    Cash Nebula, Jul 31, 2011 IP
    Toon-c likes this.
  3. Toon-c

    Toon-c Well-Known Member

    Messages:
    1,775
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    180
    #3
    Thanks 
    Rep+

    But that will not give the option to close that box like in the example right ?
     
    Toon-c, Aug 1, 2011 IP
  4. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #4
    It would be easy to add, something like:
    
<div class="footer-bar" onclick="this.style.visibility='hidden';">FOOTER BAR CONTENT</div>
    Code (markup):
    which should close when clicked....
     
    camjohnson95, Aug 1, 2011 IP