Skip to content

Instantly share code, notes, and snippets.

@lucianosb

lucianosb/jsbin.osUrUBi.css

Created October 21, 2013 05:44
Show Gist options
  • Save lucianosb/7079187 to your computer and use it in GitHub Desktop.
Save lucianosb/7079187 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.osUrUBi.css
body {
background: url('http://sbvirtual.com.br/imagens/hixs_pattern_evolution.png');
}
#wrapper {
background: #ffffff;
margin: 0 auto;
width: 960px;
height: 600px;
}
/***************************
/* Change the cursor to something more appropriate
/* Start http://www.cursors-4u.com
***************************/
/*body, label:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use72.cur), progress !important;}*/
body, label:hover, a:hover, input[type=submit] {cursor: url(http://cur.cursors-4u.net/games/gam-11/gam1088.cur), progress !important;}
/***************************
/* Logo styling
***************************/
#logo img {
margin: 0 auto;
}
#logo div {
width: 100%;
height:10px;
background: #006ec0;
margin-top: -10px;
}
#logo {
margin-bottom: 30px;
}
/***************************
/* Make radio into big buttons
***************************/
input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
/*-webkit-appearance: push-button;
-moz-appearance: button;*/
display: inline-block;
margin: 60px 0 10px 0;
/*padding: 10px;*/
cursor: pointer;
/*background: orange;*/
width: 200px;
text-align: center;
/*background: #f5f5f5;*/
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 20px;
background: #3498db;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
input[type=radio]:hover + label{
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
/* Toggled State */
input[type=radio]:checked + label {
background: orange;
}
/***************************
/* Styling Pages
***************************/
input.form-submit{background:#f36b06!important; color:white; padding: 10px; width:300px; margin: 15px 0 0 336px;}
a.next{background:#f36b06; display:block; width:300px; float:left; margin: 10px 0 0 164px; text-align:center; clear:left; padding:7px 13px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color:white; text-decoration: none}
#page{float:left; margin: 10px 0 0 0}
#page li{float:left; margin:0 5px 0 0; padding:5px 15px; background:#f36b06; text-align:center; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color:white; }
#page li a{ color:white; text-decoration: none}
#radar .next { margin: 15px 0 0 336px; }
/* Page 1 */
#apage_1 #howto { float: left; margin-left: 40px; }
#apage_1 #tuto { float:right; margin-right: 40px; }
#apage_1 br { clear: both; }
/* Questions */
.question { margin-left: 30px; margin-right: 30px; }
/***************************
/* Footer
***************************/
#footer {
margin: 0 auto;
width: 960px;
}
Raw
jsbin.osUrUBi.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<div id="logo">
<img src="http://sbvirtual.com.br/imagens/banner-alisc.jpg" />
<div></div>
</div>
<form id="radar">
<article id="apage_1">
<div id="howto">
<h1>Use a mão direita para controlar o cursor</h1>
<h1>Levante a mão esquerda para selecionar</h1>
</div>
<div id="tuto">
<img src="http://sbvirtual.com.br/imagens/como-clicar.gif" />
</div>
<br />
</article>
<article class="question" id="apage_2">
<h2>Você lançou novo produto no mercado nos últimos 3 anos?</h2>
<input type="radio" id="novosProdutos-1" name="novosProdutos" value="5" checked>
<label for="novosProdutos-1">Sim, mais de um</label>
<input type="radio" id="novosProdutos-2" name="novosProdutos" value="3">
<label for="novosProdutos-2">Apenas um</label>
<input type="radio" id="novosProdutos-3" name="novosProdutos" value="1">
<label for="novosProdutos-3">Não, nenhum</label>
</article>
<article class="question" id="apage_3">
<h2>Nos últimos 3 anos, a empresa lançou algum produto que não deu certo?</h2>
<input type="radio" id="ousadia-1" name="ousadia" value="5" checked>
<label for="ousadia-1">Sim, mais de um</label>
<input type="radio" id="ousadia-2" name="ousadia" value="3">
<label for="ousadia-2">Apenas um</label>
<input type="radio" id="ousadia-3" name="ousadia" value="1">
<label for="ousadia-3">Não, nenhum</label>
</article>
<article>
<input class="form-submit" id="edit-submit" name="op" type="submit" value="Concluir" />
</article>
</form>
</div>
<div id="footer">
<img src="http://sbvirtual.com.br/imagens/footer.jpg" />
</div>
</body>
</html>
Raw
jsbin.osUrUBi.js
// add next button to all screens but last
$("article:not(:last)").append('<a class="next" href="#">Próximo</a>');
//hide every form section except first
$("article:nth-child(1n+2)").hide();
//add class of visible to first screen
$("article:first").addClass("visible");
//add an empty unordered list to be populated below
$("#slider").append("<ul id='page'></ul>");
//start the index at 1
var pageNum = 1;
var currentPage=1;
//go through each section (article) and add a list item to the empty unorderd list with the page number
$("article").each(function(){
$(this).parent().find("ul").append('<li class ="pagetab" id="pagetab_'+pageNum+'"><a href="#">Page: '+pageNum+'</a></li>');
$(this).addClass("page" + pageNum);
pageNum++;
});
$('#page > li').hide();
//each time the user clicks the next button, remove the visible class, hide that section, fade in the next with a new class of visible
$("a.next").on("click", function(e){
e.preventDefault();
$(this).closest("article").removeClass("visible").hide().next().addClass("visible").fadeIn();
currentPage++;
showCurrentTab();
});
function showCurrentTab(){
$('.pagetab').hide();
$('#pagetab_'+currentPage).show();
}
showCurrentTab(); //Show the first tab
//
// Serialize in JSON
//
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.novosProdutos]) {
if (!o[this.novosProdutos].push) {
o[this.novosProdutos] = [o[this.novosProdutos]];
}
o[this.novosProdutos].push(this.value || '');
} else {
o[this.novosProdutos] = this.value || '';
}
});
return o;
};
//
// Get the values
//
window.onload=function() {
document.getElementById('radar').onsubmit=function() {
var values = $(this).serialize();
//alert(values);
var oferta = (ousadia + novosProdutos) / 2;
document.Write(oferta);
return false;
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment