Develop Reference

How to create vertical tab using in css/javascript?

im creating Vertical tab element by using css and jquery, but i need to show first tab content on page load. i use following line to show first element but its not working.
$('#v-nav>div.tab-content:first-child').show();
im get Vertical tab code from below link, please refer
http://jsfiddle.net/frabiacca/7pM7h/5/
please correct this code to show first tab-content to be default/ onload.
thanks in advance.

Added a default active class to the div and styling display:block; to the .active class.
$(function() {
var items = $('#v-nav>ul>li').each(function() {
$(this).click(function() {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
//hide all content divs and show current one
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show('fast');
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").click();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function() {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});
body
{
background-color: #f7f7f7;
}
.wrapper
{
width: 960px;
margin: 0px auto;
padding-top: 20px;
min-height: 600px;
}
.wrapper h1, .wrapper h4, .wrapper p, .wrapper pre, .wrapper ul, .wrapper li
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
.wrapper h1 {
vertical-align:middle;
padding-bottom:20px;
}
.wrapper li
{
outline: 0;
text-decoration: none;
-webkit-transition-property: background color;
-moz-transition-property: background color;
-o-transition-property: background color;
-ms-transition-property: background color;
transition-property: background color;
-webkit-transition-duration: 0.12s;
-moz-transition-duration: 0.12s;
-o-transition-duration: 0.12s;
-ms-transition-duration: 0.12s;
transition-duration: 0.12s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#v-nav
{
height: 100%;
margin: auto;
color: #333;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
#v-nav >ul
{
float: left;
width: 210px;
display: block;
position: relative;
top: 0;
border: 1px solid #DDD;
border-right-width: 0;
margin: auto 0 !important;
padding:0;
}
#v-nav >ul >li
{
width: 180px;
list-style-type: none;
display: block;
text-shadow: 0px 1px 1px #F2F1F0;
font-size: 1.11em;
position: relative;
border-right-width: 0;
border-bottom: 1px solid #DDD;
margin: auto;
padding: 10px 15px !important;
background: whiteSmoke; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* W3C */
}
#v-nav >ul >li.current
{
color: black;
border-right: none;
z-index: 10;
background: white !important;
position: relative;
moz-box-shadow: inset 0 0 35px 5px #fafbfd;
-webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
box-shadow: inset 0 0 35px 5px #fafbfd;
}
#v-nav >ul >li.first.current
{
border-bottom: 1px solid #DDD;
}
#v-nav >ul >li.last
{
border-bottom: none;
}
#v-nav >div.tab-content
{
margin-left: 210px;
border: 1px solid #ddd;
background-color: #FFF;
min-height: 400px;
position: relative;
z-index: 9;
padding: 12px;
moz-box-shadow: inset 0 0 35px 5px #fafbfd;
-webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
box-shadow: inset 0 0 35px 5px #fafbfd;
display: none;
padding: 25px;
}
#v-nav >div.tab-content.active {
display: block;
}
#v-nav >div.tab-content >h4
{
font-size: 1.2em;
color: Black;
text-shadow: 0px 1px 1px #F2F1F0;
border-bottom: 1px dotted #EEEDED;
padding-top: 5px;
padding-bottom: 5px;
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<section id="wrapper" class="wrapper">
<h1 class="title">I servizi offerti da Evermind</h1>
<div id="v-nav">
<ul>
<li tab="tab1" class="first current">Fatti il sito</li>
<li tab="tab2">Rifatti il look</li>
<li tab="tab3">Organizzati</li>
<li tab="tab4" class="last">Parla di te</li>
</ul>
<div class="tab-content active">
<h4>Fatti il sito</h4>
</div>
<div class="tab-content">
<h4>Rifatti il look</h4>
</div>
<div class="tab-content">
<h4>Organizzati</h4>
</div>
<div class="tab-content">
<h4>Parla di te</h4>
</div>
</div>
</section>

JQuery Datepicker - vertically center date

I'm currently styling the jquery datepicker but im struggeling with vertically centering the dates positions.
This is what I got so far:
https://jsfiddle.net/L4vrkpmc/1/
Since the datepicker is using a table I tried
.ui-datepicker-calendar td{
vertical-align:center;
}
but it won't work. Anyone know how to vertical center the days?
html,
body {
height: 100%;
}
/* DatePicker Container */
#calendar {
height: 100%;
}
.ui-datepicker {
width: 100%;
height: 100%;
margin: 5px auto 0;
font: 9pt Arial, sans-serif;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.ui-datepicker a {
text-decoration: none;
}
/* DatePicker Table */
.ui-datepicker table {
width: 100%;
height: 100%;
text-align: center;
}
.ui-datepicker-header {
background: url('../img/dark_leather.png') repeat 0 0 #000;
color: #e0e0e0;
font-weight: bold;
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
text-shadow: 1px -1px 0px #000;
filter: dropshadow(color=#000, offx=1, offy=-1);
line-height: 30px;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #111;
}
.ui-datepicker-title {
text-align: center;
}
.ui-datepicker-prev,
.ui-datepicker-next {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
cursor: pointer;
line-height: 600%;
overflow: hidden;
}
.ui-datepicker-prev {
float: left;
background-position: center -30px;
}
.ui-datepicker-next {
float: right;
background-position: center 0px;
}
.ui-datepicker thead {
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #f1f1f1));
background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -o-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -ms-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1', GradientType=0);
border-bottom: 1px solid #bbb;
}
.ui-datepicker th {
text-transform: uppercase;
font-size: 6pt;
padding: 5px 0;
color: #666666;
text-shadow: 1px 0px 0px #fff;
filter: dropshadow(color=#fff, offx=1, offy=0);
}
.ui-datepicker tbody td {
padding: 0;
border-right: 1px solid #bbb;
}
.ui-datepicker tbody td:last-child {
border-right: 0px;
}
.ui-datepicker tbody tr {
border-bottom: 1px solid #bbb;
}
.ui-datepicker tbody tr:last-child {
border-bottom: 0px;
}
.ui-datepicker td span,
.ui-datepicker td a {
display: inline-block;
font-weight: bold;
text-align: center;
width: 100%;
height: 100%;
color: #666666;
text-shadow: 1px 1px 0px #fff;
filter: dropshadow(color=#fff, offx=1, offy=1);
}
.ui-datepicker-calendar .ui-state-default {
background: #ededed;
background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #dedede));
background: -webkit-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -o-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -ms-linear-gradient(top, #ededed 0%, #dedede 100%);
background: linear-gradient(top, #ededed 0%, #dedede 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede', GradientType=0);
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}
.ui-datepicker-calendar .ui-state-hover {
background: #f7f7f7;
}
.ui-datepicker-calendar .ui-state-active {
background: #6eafbf;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
color: #e0e0e0;
text-shadow: 0px 1px 0px #4d7a85;
filter: dropshadow(color=#4d7a85, offx=0, offy=1);
border: 1px solid #55838f;
position: relative;
margin: -1px;
}
.ui-datepicker-unselectable .ui-state-default {
background: #f4f4f4;
color: #b4b3b3;
}
.ui-datepicker-calendar td:first-child .ui-state-active {
margin-left: 0;
}
.ui-datepicker-calendar td:last-child .ui-state-active {
margin-right: 0;
}
.ui-datepicker-calendar tr:last-child .ui-state-active {
margin-bottom: 0;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#calendar').datepicker({
inline: true,
showOtherMonths: true,
firstDay: 1,
dayNamesMin: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
});
});
</script>
<div id="calendar"></div>
Thanks for your help :)

You Can't vertical align text in "a" tag if its not containing any child tag. I wrapped the text with <span> under 'a' tag using jQuery. here is the code:
$(".ui-datepicker td").each(function(){
var dateText = $(this).find("a").text();
$(this).find("a").html("<span>"+dateText+"</span>");
});
and some simple CSS changes :
.ui-datepicker td a{
display: table;
position: relative;
height: 100%;
width: 100%;
}
.ui-datepicker td a span{
display: table-cell;
text-align:center;
vertical-align: middle;
}

You can achieve this using only CSS by simply setting the line-height of the number to the same height of the square:
.ui-state-default {
height: 45px;
line-height: 45px;
padding: 0;
}

Need Help building a login system for my website

Im building a login system in html with form. Heres The HTML and css.
Would php work?
HTML
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Paper Stack</title>
<link rel="stylesheet" type="text/css" href="loginstyle.css" />
</head>
<body>
<div class="container">
<section id="content">
<form action="">
<h1>Login Form</h1>
<div>
<input type="text" placeholder="Username" required="" id="username" />
</div>
<div>
<input type="password" placeholder="Password" required="" id="password" />
</div>
<div>
<input type="submit" value="Log in" />
Lost your password?
Register
</div>
</form><!-- form -->
<div class="button">
Download source file
</div><!-- button -->
</section><!-- content -->
</div><!-- container -->
</body>
</html>
CSS
/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
background: #DCDDDF url(http://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
color: #000;
font: 14px Arial;
margin: 0 auto;
padding: 0;
position: relative;
}
h1{ font-size:28px;}
h2{ font-size:26px;}
h3{ font-size:18px;}
h4{ font-size:16px;}
h5{ font-size:14px;}
h6{ font-size:12px;}
h1,h2,h3,h4,h5,h6{ color:#563D64;}
small{ font-size:10px;}
b, strong{ font-weight:bold;}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.left { float:left; }
.right { float:right; }
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
.clearfix:after,
form:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container { margin: 25px auto; position: relative; width: 900px; }
#content {
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
-webkit-box-shadow: 0 1px 0 #fff inset;
-moz-box-shadow: 0 1px 0 #fff inset;
-ms-box-shadow: 0 1px 0 #fff inset;
-o-box-shadow: 0 1px 0 #fff inset;
box-shadow: 0 1px 0 #fff inset;
border: 1px solid #c4c6ca;
margin: 0 auto;
padding: 25px 0 0;
position: relative;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 400px;
}
#content h1 {
color: #7E7E7E;
font: bold 25px Helvetica, Arial, sans-serif;
letter-spacing: -0.05em;
line-height: 20px;
margin: 10px 0 30px;
}
#content h1:before,
#content h1:after {
content: "";
height: 1px;
position: absolute;
top: 10px;
width: 27%;
}
#content h1:after {
background: rgb(126,126,126);
background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
right: 0;
}
#content h1:before {
background: rgb(126,126,126);
background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
left: 0;
}
#content:after,
#content:before {
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
border: 1px solid #c4c6ca;
content: "";
display: block;
height: 100%;
left: -1px;
position: absolute;
width: 100%;
}
#content:after {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
top: 0;
z-index: -1;
}
#content:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
top: 0;
z-index: -2;
}
#content form { margin: 0 20px; position: relative }
#content form input[type="text"],
#content form input[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
border: 1px solid #c8c8c8;
color: #777;
font: 13px Helvetica, Arial, sans-serif;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 80%;
}
#content form input[type="text"]:focus,
#content form input[type="password"]:focus {
-webkit-box-shadow: 0 0 2px #ed1c24 inset;
-moz-box-shadow: 0 0 2px #ed1c24 inset;
-ms-box-shadow: 0 0 2px #ed1c24 inset;
-o-box-shadow: 0 0 2px #ed1c24 inset;
box-shadow: 0 0 2px #ed1c24 inset;
background-color: #fff;
border: 1px solid #ed1c24;
outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#content form input[type="submit"] {
background: rgb(254,231,154);
background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
border: 1px solid #D69E31;
color: #85592e;
cursor: pointer;
float: left;
font: bold 15px Helvetica, Arial, sans-serif;
height: 35px;
margin: 20px 0 35px 15px;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
width: 120px;
}
#content form input[type="submit"]:hover {
background: rgb(254,193,81);
background: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#content form div a {
color: #004a80;
float: right;
font-size: 12px;
margin: 30px 15px 0 0;
text-decoration: underline;
}
.button {
background: rgb(247,249,250);
background: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
background: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: -o-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: -ms-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border-top: 1px solid #CFD5D9;
padding: 15px 0;
}
.button a {
background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
color: #7E7E7E;
font-size: 17px;
padding: 2px 0 2px 40px;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.button a:hover {
background-position: 0 -135px;
color: #00aeef;
}
When the user enter submit i would like it to check a txt file with usernames and passwords. The text file is formatted like this:
username1:password1
username2:password2
username3:password3
I want to grab the first line, split it to "username1" and "password1", and then post to this:
br.form['login'] = 'username1'
br.form['passwd'] = 'password1'
EDIT
I know this php code will write the username and password to a txt file. I just need help doing the opposite.
PHP (Register)
<?php
//If Submit Button Is Clicked Do the Following
if ($_POST['Login']){
$myFile = "log.txt";
$fh = fopen($myFile, 'a') or die("can't open file");
$stringData = $_POST['username'] . ":";
fwrite($fh, $stringData);
$stringData = $_POST['password'] . "\n";
fwrite($fh, $stringData);
fclose($fh);
} ?>
After that, I want it to repeat and move onto username2:password2.
I saw this exact post for python but i would like to do this in html, Php ,Or JavaScrypt any help

PHP would be a good option. First familiarise yourself with the language then look in to the functions related to files e.g. fwrite() and fread().
Edit:
Look in to fgets(). That way you can put the username and password posted from the form and compare it against the file line by line.

You can use PHP.
Also it is never a good idea to store passwords in plain text. You should do some hashing of passwords and then store them. You can use PHP's password hashing API. You can read more about PHP's password hashing API
Also, I am not sure why you are storing password in plain text, you probably can use database (like MySQL) to store the details.
However, if you want only a layer of password protection before the users can access your site then you can use .htaccess and .htpasswd to add a layer of authentication on your site. When you add this, the users will have to enter a password before they can access the site. You can read more about about Authentication using .htaccess file
If you don't need database and don't want to use the .htaccess method and want to use file, then you might want to read on fgets() and fread(). Also, if you are using the file to store passwords, then don't have it accessible from the website (i.e. using some URL in browser). Store the file is some location which cannot be reached by some URL on your site. This will prevent others to download your password file.

How to prevent a javascript popup from riding on scroll..?

Im having trouble with this Javascript popup. It works fine expect for one important thing, when I scroll down the page on my Home Screen if i click the sign in button this pop-up seems to hide up at the top. It does't cater for the scroll.
I have added screenshots to show it what I mean. the first one shows it looking fine, and the other one shows the when I scroll down a little bit and press the button.
It also seems to hide the menu bar at the top.. which is fixed
I have no idea how to fix these things. Any one have an idea?
<script src="js/jquery.avgrund.js"></script>
<script>
$(function() {
$('#show').avgrund({
height: 700,
holderClass: 'custom',
showClose: true,
showCloseText: 'close',
onBlurContainer: '.containerrr',
template: '<section id="conntent">' +
'<form form name="login" action="loginprocess.php" method="post" accept-charset="utf-8">' +
'<img src="images/logopop.png">' +
'<h1></h1>' + '<div>' + '<input type="text" name="email" placeholder="example#example.com" required id="username" />' + '</div>' + '<div>' + '<input type="password" name="password" placeholder="Password" required id="password" />' + '</div>' + '<div>' + '<input type="submit" id="submit" name="submit" value="Log In">' + '</div>' + '</form>' + '</section>'
});
});
</script>
My CSS
.containerrr {
position: fixed;
width: 900px;
opacity: 0.95;
filter: alpha(opacity=95);
margin-bottom: 12%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
}
#conntent {
background-color: rgba(250,250,250,1.0);
padding: 25px 0 0;
position: fixed;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 350px;
margin-bottom: 0;
margin-left: 3%;
margin-right: 0;
margin-top: 1px;
}
#conntent h1 {
color: #7E7E7E;
font: bold 25px Helvetica, Arial, sans-serif;
letter-spacing: -0.05em;
line-height: 20px;
margin: 10px 0 30px;
}
#conntent h1:before,
#conntent h1:after {
content: "";
height: 1px;
position: absolute;
top: 10px;
width: 27%;
}
#conntent h1:after {
background: rgb(126,126,126);
background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
right: 0;
}
#conntent h1:before {
background: rgb(126,126,126);
background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
left: 0;
}
#conntent form { margin: 0 20px; position: relative }
#conntent form input[type="text"],
#conntent form input[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
border: 1px solid #c8c8c8;
color: #777;
font-family:'Source Sans Pro', sans-serif;
font-size:15px;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 80%;
}
#conntent form input[type="text"]:focus,
#conntent form input[type="password"]:focus {
-webkit-box-shadow: 0 0 2px #00bbe0 inset;
-moz-box-shadow: 0 0 2px #00bbe0 inset;
-ms-box-shadow: 0 0 2px #00bbe0 inset;
-o-box-shadow: 0 0 2px #00bbe0 inset;
box-shadow: 0 0 2px #00bbe0 inset;
background-color: #fff;
border: 1px solid #00bbe0;
outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#conntent form input[type="submit"] {
border: 1px solid #00a2e2;
background: -webkit-linear-gradient(top, #00a2e2 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a2e2 0%,#00a2e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a2e2 0%,#00a2e2 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a2e2 0%,#00a2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */
color: #fff;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
height: 35px;
position: fixed;
width: 120px;
margin-bottom: 35px;
margin-left: 15px;
margin-top: 25px;
margin-right: 0px;
}
#conntent form input[type="submit"]:hover {
cursor:pointer;
border-color:rgba(71, 186, 255, 1);
background: rgba(71, 186, 255, 1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#conntent form div a {
color: #004a80;
float: right;
font-size: 12px;
text-decoration: underline;
margin-bottom: 0;
margin-left: 0;
margin-right: 15px;
margin-top: 25px;
}

Use position: fixed both in the header of the page and the container of the popup. Then you'll be able to scroll everything else and those elements will remain fixed respect to the browser window.

Scrolling not working in the mobile version

I'm working on a Javascript project. I created a div with an overflow and I would scroll that div using the mouse only (without the bar). I followed this working example both on the browser and both on the mobile versions. Here is my HTML code:
<div id="wrapper">
<div id="scroller">
... divs, boxes generated by jQuery ...
</div>
</div>
And here's the CSS:
#wrapper {
margin-left: 45px;
position: absolute;
width: 900px;
overflow: hidden;
}
#scroller {
width: 100%;
height: 100px;
margin: 0px auto;
overflow: auto;
}
Now the problem is that this works on the browser but does not in the mobile (no scrolling).
EDIT:
#scroller div.line {
position: absolute;
margin-left: 2.5px;
margin-top: 39px;
border-bottom: 3px solid;
border-color: #dd4b39;
}
#scroller div.ranges {
position: absolute;
width: 90%;
text-align:left;
margin-left: 5px;
margin-top: 70px;
}
#scroller box.range {
position:absolute;
display: inline-block;
width: 30px;
height: 15px;
border-radius: 15%;
-moz-box-shadow:0px 0px 10px 1px #777777;
-webkit-box-shadow:0px 0px 10px 1px #777777;
-ms-box-shadow:0px 0px 10px 1px #777777;
-o-box-shadow:0px 0px 10px 1px #777777;
box-shadow:0px 0px 10px 1px #777777;
background-image: -ms-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -moz-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -o-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #A8A8A8), color-stop(1, #BFBFBF));
background-image: -webkit-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: linear-gradient(to bottom right, #A8A8A8 0%, #BFBFBF 100%);
z-index: 2;
}
#scroller div.lrange {
position:absolute;
display: inline-block;
width: 15px;
height: 100px;
margin-top: -70px;
border-right: 1px dotted;
border-color: #dd4b39;
}
#scroller div.circle_small {
position: absolute;
cursor: pointer;
display: inline-block;
margin: 0 3px;
margin-top: 32.5px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #CC3524;
background: -webkit-linear-gradient(top, #d14836, #dd4b39);
background: -moz-linear-gradient(top, #d14836, #dd4b39);
background: -ms-linear-gradient(top, #d14836, #dd4b39);
background: -o-linear-gradient(top, #d14836, #dd4b39);
background: -linear-gradient(top, #d14836, #dd4b39);
}
#scroller div.circle_big {
position: absolute;
cursor: pointer;
display: inline-block;
margin: 0px 3px;
width: 40px;
height: 40px;
margin-top: 20px;
border-radius: 50%;
background: #CC3524;
background: -webkit-linear-gradient(top, #d14836, #dd4b39);
background: -moz-linear-gradient(top, #d14836, #dd4b39);
background: -ms-linear-gradient(top, #d14836, #dd4b39);
background: -o-linear-gradient(top, #d14836, #dd4b39);
background: -linear-gradient(top, #d14836, #dd4b39);
}
#scroller div.circle_label {
cursor: pointer;
text-align: center;
font-size: 20px;
padding: 8px;
}

Might be late but still useful - i faced the same problem with scroll in mobile version of a website and found out that it's the position: absolute; that breaks it.
BUT! There is a solution - http://iscrolljs.com/
I found this very very helpful.
Basicly you just initialize the plugin on wrapper element without any changes to DOM and everything works.

by adding this style into your div tag it will solve your problem.
<div style="-webkit-overflow-scrolling: touch;overflow-y: scroll;">