How can i solve this overflow at the top when I scroll down? This is an application in a facebook page. This is a google chrome snapshot.
HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo TITLE ?></title>
<link href="<?php echo CSS; ?>style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>-->
<script type="text/javascript" src="js/UnityObject2.js"></script>
<script type="text/javascript">
var config = {
width: 760,
height: 827,
params: {enableDebugging: "0"},
};
var u = new UnityObject2(config);
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();
u.observeProgress(function(progress) {
switch (progress.pluginStatus) {
case "broken":
$brokenScreen.find("a").click(function(e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$brokenScreen.show();
break;
case "missing":
$missingScreen.find("a").click(function(e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "GermsBuster.unity3d");
});
</script>
<style type="text/css">
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
}
a:link, a:visited {
color: #000;
}
a:active, a:hover {
color: #666;
}
p.header {
font-size: small;
}
p.header span {
font-weight: bold;
}
p.footer {
font-size: x-small;
}
div.content {
margin: auto;
width: 760px;
}
.back{
z-index:10 !important;
}
div.broken,
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.broken a,
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.broken img,
div.missing img {
border-width: 0px;
}
div.broken {
display: none;
}
div#unityPlayer {
cursor: default;
height: 827px;
width: 760px;
}
</style>
</head>
<body style="margin:0px; padding:0px;">
<div id="fb-root" class="_56b8"></div>
<div class="video-ar" style="display:none">
<a class="fancybox fancybox.iframe" href="Products_ar.php">video ar</a>
</div>
<div class="video-en" style="display:none">
<a class="fancybox fancybox.iframe" href="Products_en.php">video en</a>
</div>
<div class="fb-app-requests-container" style="display:none">request</div>
<div class="fb-user-info-container" style="display:none">user info</div>
<p class="header" style="display:none"><span><!--Unity Web Player | --></span><?php echo TITLE ?></p>
<div class="content" style="z-index:-1000 !important;">
<div id="unityPlayer" style="display:block; z-index:-1000 !important">
<div class="missing">
<a href="https://unity3d.com/webplayer/" target="_blank" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="images/getunity.png" width="193" height="63" />
</a>
</div>
<div class="broken">
<a href="https://unity3d.com/webplayer/" target="_blank" title="Unity Web Player. Install now! Restart your browser after install.">
<img alt="Unity Web Player. Install now! Restart your browser after install." src="images/getunityrestart.png" width="193" height="63" />
</a>
</div>
</div>
</div>
<!-- LIGHTBOX -->
<script type="text/javascript" src="js/lightbox.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css?v=2.1.4" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
<!-- LIGHTBOX -->
</body>
</html>
The fan page "Canvas URL" is not designed by facbook to handle unity applications, use the app page "Canvas Page" instead. You will not face this issue there.
Add style in HTML tag-
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden">
Hope it helps
Related
I can't get the scroll-bar to actually scroll on either axis
I've tried added the "overflow-y" property but that just makes the scroll bar appear, it doesn't actually let me scroll. I added the html file but removed all the content except what has to do with styling.
html
<html lang="en">
<head>
<title>Experience</title>
<script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1">
<link rel = "stylesheet" href = "exp.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#visible").click(function() {
$('#invisible').toggleClass("show");
});
});
$(function() {
$("#visible1").click(function() {
$('#invisible2').toggleClass("show");
});
});
$(function() {
$("#visible2").click(function() {
$('#invisible3').toggleClass("show");
});
});
$(function() {
$("#visible3").click(function() {
$('#invisible4').toggleClass("show");
});
});
$(function() {
$("#visible4").click(function() {
$('#invisible5').toggleClass("show");
});
});
$(function() {
$("#visible6").click(function() {
$('#invisible6').toggleClass("show");
});
});
$(function() {
$("#visible7").click(function() {
$('#invisible7').toggleClass("show");
});
});
$(function() {
$("#visible8").click(function() {
$('#invisible8').toggleClass("show");
});
});
</script>
<style>
.hide{display:none;}
.show{display:block; color:#769EA8;}
.push{top:350%;}
</style>
</head>
<body class="body">
<div class="background">
</div>
<div class="fr">
fr
</div>
<div class="NavBar">
<h1 id="experience">.</a>
</div>
<div id="mySidenav" class="sidenav">
</div>
<div>...
</div>
<span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">☰</span>
<script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function openNav(){
document.getElementById("mySidenav").style.width = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
.hide{display:none;}
.show{display:block;}
</style>
</body>
</html>
css:
body{
position: relative;
font-family: sans-sherif;
background-color: #242424;
overflow-y: scroll;
}
.NavBar{
position: fixed;
top: 8%;
left: 26.5%;
width: 100%
}
#experience{
position: absolute;
color: #EBEDFA;
padding-right: 2%;
padding-left: 2%;
font-size: 35px;
left: 14.5%;
}
I want to be able to scroll if for example I make the browser small or if the browser is not big enough to show all of the content.
You need some content which is wider than the viewport in order to be able to scroll. I have added some in the code snippet below, without making any other changes to your code.
body{
position: relative;
font-family: sans-sherif;
background-color: #242424;
overflow-y: scroll;
}
.NavBar{
position: fixed;
top: 8%;
left: 26.5%;
}
#experience{
position: absolute;
color: #EBEDFA;
padding-right: 2%;
padding-left: 2%;
font-size: 35px;
left: 14.5%;
}
<html lang="en">
<head>
<title>Experience</title>
<script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1">
<link rel = "stylesheet" href = "exp.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#visible").click(function() {
$('#invisible').toggleClass("show");
});
});
$(function() {
$("#visible1").click(function() {
$('#invisible2').toggleClass("show");
});
});
$(function() {
$("#visible2").click(function() {
$('#invisible3').toggleClass("show");
});
});
$(function() {
$("#visible3").click(function() {
$('#invisible4').toggleClass("show");
});
});
$(function() {
$("#visible4").click(function() {
$('#invisible5').toggleClass("show");
});
});
$(function() {
$("#visible6").click(function() {
$('#invisible6').toggleClass("show");
});
});
$(function() {
$("#visible7").click(function() {
$('#invisible7').toggleClass("show");
});
});
$(function() {
$("#visible8").click(function() {
$('#invisible8').toggleClass("show");
});
});
</script>
<style>
.hide{display:none;}
.show{display:block; color:#769EA8;}
.push{top:350%;}
</style>
</head>
<body class="body">
<div class="background">
</div>
<div class="fr">
fr
</div>
<div class="NavBar">
<h1 id="experience">.</a>
</div>
<div id="mySidenav" class="sidenav">
</div>
<div style="white-space: nowrap; color:white">This_is_a_reall_long_piece_of_text_which_will_be_wider_than_the_viewportttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
<span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">☰</span>
<script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function openNav(){
document.getElementById("mySidenav").style.width = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
.hide{display:none;}
.show{display:block;}
</style>
</body>
</html>
Basically, overflow will allow the page to scroll if the content larger than the screen.
Try this CSS: overflow: auto;.
Another way around if you still can't scroll is using this JavaScript:
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
and call the function from the <body> tag or from a <button> tag, whatever the event you want to use.
I am new to HTML and I face a problem with my code regarding the form onSubmit.
When I do not use the form and have the onSubmit="Move()" in input as onClick="Move", then the function Move works perfectly fine.
However, when I include the form and put onSubmit="Move()" then the function does not work at all.
May someone point out my mistake and provide a solution to this? This really drives me mad.
<!doctype html>
<html lang="en">
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
<head>
<meta charset="utf-8">
<title>Hello</title>
<link rel=stylesheet type=text/css href='{{ url_for('static',filename='style.css')}}'>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--<link rel=stylesheet type=text/css href='/static/style.css'>-->
</head>
<body>
<div id="content">
<h1>Hello</h1>
<div class=metanav>
<h4>Please enter a stock ticker eg. GOOG, and check desired features.</h4>
<form onsubmit="Move()">
<input type="submit" value="Submit"/>
</form>
<div id="myProgress">
<div id="myBar">10%</div>
</div>
<script>
function Move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
<hr>
{% block content %}{% endblock %}
</div>
</div>
</body>
I have converted my .swf to HTML5 using Google Swiffy. But recently one Media Agency says the banners had a problem opening 2 new tabs instead of just one.
This is the code I always used and its having the double tab, the agency says it redirects to a route on the device ex: file:///Users/folder/folder/UNDEFINED and the other one to the DCM server.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
<title>GOOGLE DCM</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>
<script>
swiffyobject = { blablabla swiffy code};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<a href="javascript:window.open(window.clickTag)" style="width:300px; height:250px; display: block; position: absolute; z-index:999;">
<div id="swiffycontainer" style="width: 300px; height: 250px; border:1px solid black; box-sizing: border-box; ">
</div>
</a>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
</body>
</html>
so, I found a solution to this problem in this question
And I'm also not sure if this is correct for a DCM file since I don't know if an exit URL can be defined without a clicktag
[EDIT] The agency now tells me that they don't have the problem of two windows opening, but they got the error that no clicktag was found... and of course. So I don't know what to do here.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>
<style>
#bg-exit {
background-color: rgba(255,255,255,0);
cursor: pointer;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
</style>
<title>GOOGLE DCM</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>
<script>
swiffyobject = { blablabla swiffy code};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="bg-exit">
<div id="swiffycontainer" style="width: 120px; height: 600px; border:1px solid black; box-sizing: border-box; ">
</div>
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
<script>
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
}
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
</script>
</body>
</html>
I really need to fix this as soon as possible, otherwise I'll have to redo 35 banners in GWD in just a few hours so any help will be greatly appreciated. Thanks in advance.
looks like you have a bgExit event but no clicktag ?
var clickTag = "http://www.google.com";
GOOGLE DCM
I'm trying to add the textAngular toolbar at bottom of the texteditor-div. Right now it renders at the top.
I've been trying playin around with the css alot but with no sucess.
JS:
var app = angular.module('myApp', ['textAngular']);
app.controller('AppCtrl', function($scope, $http) {
$scope.htmlcontent = "<h2>New Note...</h2>";
$scope.save =function() {
console.log( $scope.htmlcontent );
$http.post("/Home/SaveWNote", { jsonData: $scope.htmlcontent });
}
});
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular.min.js'></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body ng-app="myApp">
<div ng-controller="AppCtrl">
<div text-angular ng-model="htmlcontent "></div>
<button ng-click="save()">Save</button>
<br/>
Your htmlcontent <pre>{{htmlcontent}}</pre>
</div>
</body>
</html>
PREVIEW:
http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
You can use the attribute ta-target-toolbars on the text-angular directive to have it register with an alternate toolbar:
<div text-angular ta-target-toolbars="toolbar" ng-model="htmlcontent"></div>
<div text-angular-toolbar class="toolbar" name="toolbar"></div>
Here is an example: http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview
The relevant lines of code involcing ta-target-toolbars from textAngular are available here: https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656
you can play a bit with css to move toolbar under text area
please see here http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
.ta-editor {
height: 400px;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin: 20px 0;
position: absolute;
top: 0;
width: 100%;
}
.editor-wrapper {
position: relative;
height: 470px;
}
.ta-toolbar {
position: absolute;
bottom: 0;
width: 100%;
}
I made a button that displays text when hovered over but I would like for the text to be displayed once the user clicks the button and disappears once the user clicks the button again. The code is basically a button and text that displays "HELLO" in a black box set at .80 opacity. Any advice?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0016)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}body {
margin-left: 0px;
margin-top: 0px;
}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:visited {color:#0000FF;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
body {
font: 16px/1.4 arial;
background-color: #7D8859;
}
body {
font: 16px/1.4 arial;
background-color: #7D8859;
}
.imgWrap {
position: absolute;
height: 76px;
width: 50px;
top: 556px;
}
.imgDescription {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.80);
color: #fff;
margin: -500px -340px 85px 50px;
padding: 10px;
z-index:10;
visibility: hidden;
opacity: 0;
/*remove comment if you want a gradual transition between states
-webkit-transition: visibility opacity 0.2s;
*/
}
.imgWrap:hover .imgDescription {
visibility: visible;
opacity: 1;
}
</style>
<script src="../javascript/swfobject_modified.js" type="text/javascript"></script><script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
//-->
</script>
<script language="javascript" src="../javascript/configure.js" type="text/javascript"></script>
<script language="javascript" src="../javascript/scorm.js" type="text/javascript"></script>
<script language="javascript" src="../javascript/lms.js" type="text/javascript"></script>
<script language="Javascript" src="../javascript/common.js" type="text/javascript"></script>
<script language="Javascript" src="../javascript/common2.js" type="text/javascript"></script>
<script type="text/javascript">
function popup(){
cuteLittleWindow = window.open("hey", "littleWindow", "location=no,width=320,height=200");
}
</script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('images/2-3_A.jpg','images/Module 3/3-0_A.jpg','images/Module 3/3-0_B.jpg','images/Module 3/3-0_E.jpg','images/Module 3/3-0_F.jpg','images/Module 3/3-2-1-7.jpg','images/Module 3/3-6-1a-5.jpg','images/Module 3/3-6-1a-2.jpg','images/Module 3/3-6-1a-1.jpg','images/module 4/4-2_A.jpg','interface/text_2.jpg')">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="800" height="600">
<tr>
<td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="800">
<tr> </tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="800">
<tr>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','interface/text_2.jpg',1)">
<div class="imgWrap"><img src="interface/text_1.jpg" name="Image10" width="76" height="50" border="0" id="Image10" />
<p class="imgDescription">
HELLO!
</p>
</div></a></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
When i understand your question correct, you want a button which hover is different when the user has clicked on it?
You can do that by adding a class to the button, which handles the clicked CSS.
$('button').on('click', function () {
$(this).addClass('clicked');
});
And the the css
button { background: red; }
button:hover { background: green; }
button.clicked { background: orange; }
button.clicked:hover { background: black; }
Use innerText and innerHTML
Upon examining the code, you seem to have used some WISIWYG tool.
The tags on your question showed only javascript and html, css (your real work environment) and so I am assuming this in javascript and html, css.
Here is some code snippet you can copy and test
<!doctype html>
<head>
<script>
function changeButtonText(el){
if (el.value == "HELLO")
el.value = "GOOD BYE";
else el.value="HELLO";
el = document.getElementById("concerned_ptag");
if (el.innerText == "HELLO")
el.innerText = "GOOD BYE";
else el.innerText="HELLO";
}
</script>
</head>
<body>
<p id="concerned_ptag">
HELLO
</p>
<input type="button" value ="HELLO" id="concerned_button" onclick="changeButtonText(this);">
</body>
</html>
And styling the p tag is easier for you. otherwise, ping again.
When user clicks button, the text should appear, and when click again, disappear right?
$(document).ready(function(){
$('.bt').click(function(){
$(this).find('span').fadeToggle();
});
});
<a class="bt"><span>Button Text</span></a>
Check Fiddle for full CSS/HTML/jQuery:
http://jsfiddle.net/y45nY/1/