How to create vertical tab using in css/javascript? - 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>

Related

Select 2 Multi Select remove option from the dropdown after selected the option

I am using Jquery Select2 to have Multiselect with Checkbox. I want to remove the selected Item from the dropdown. I am using the below code. It is removing the item. But I am getting the gap between the Input and drop down after selecting the Item.
My codes are,
Javascript,
$('.js-select2'): {
closeOnSelect: false,
placeholder: "Placeholder",
allowHtml: true,
tags: true,
allowClear: true,
minimumResultsForSearch: -1,
}
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
CSS,
.select2-container {
min-width: 100%;
}
.select2-results__option {
padding-right: 20px;
vertical-align: middle;
}
.select2-results__option:before {
content: "";
display: inline-block;
position: relative;
height: 20px;
width: 20px;
border: 2px solid #e9e9e9;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
}
.select2-container--default .select2-selection--multiple {
background-color: #FFFFFF;
border: 1px solid #CBD5DD;
border-radius: 2px;
cursor: text;
height: auto !important;
margin: 0;
min-height: 30px;
overflow: hidden;
padding: 2px;
position: relative;
width: 100%;
}
.select2-results__option[aria-selected=true] {
display: none;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
color: #fff;
}
.select2-container--default .select2-selection--multiple {
margin-bottom: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-radius: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.select2-container--default .select2-selection--multiple {
border-width: 1px;
}
.select2-container--open .select2-dropdown--below {
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.select2-selection .select2-selection--multiple:after {
content: 'hhghgh';
}
/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
display: none;
}
.select-icon .placeholder {
display: none;
}
.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
display: none !important;
/* content: "" !important; */
}
.select-icon .select2-search--dropdown {
display: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
position: relative;
margin: 3px 0 3px 5px;
padding: 3px 3px 3px 5px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #e4e4e4;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-clip: padding-box;
box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
color: #333;
line-height: 13px;
cursor: default;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: none;
width: auto !important;
}
.select2-remove-right {
float: right;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
float: right;
margin-left: 5px;
}
ul.select2-choices {
padding-right: 30px !important;
}
ul.select2-choices:after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.select2-container--default .select2-search--inline .select2-search__field{
width:initial!important;
}
.select2-dropdown {
border-radius: 0px;
background-color: white;
border: 1px solid #DDD;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051;
}
/* line 43, ../scss/_dropdown.scss */
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--open .select2-dropdown {
left: 0;
}
.select2-search--dropdown {
display: block;
padding: 7px;
}
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
display: none;
}

Try this
https://stackoverflow.com/a/56195248/4208247
OR THIS
https://select2.org/selections#clearable-selections
Clearable selections
When set to true, causes a clear button ("x" icon) to appear on the select box when a value is selected. Clicking the clear button will clear the selected value, effectively resetting the select box back to its placeholder value.
$('select').select2({
placeholder: 'This is my placeholder',
allowClear: true
});

Can't perform rotate on click

this is my very first post so please tell me if I'd commit any mistake. Started learning html and css just a week ago for a personal project web and been having difficulties trying to apply javascript functions to my menus. The point: I'm making a contact footer with a slide on click. It has an up arrow next to the word 'contacto' (contact). Did solve the slide but cant make that arrow rotate down on click.
HTML:
$('.contacto_menu').click(function(){
$('.icon-up-open').animate({
transform: 'rotate(180deg)'
});
});
$(document).ready(main);
var contador = 1;
function main () {
$('.contacto_menu').click(function(){
if (contador == 1) {
$('.icon-up-open').animate({
transform: 'rotate(180deg)'
});
$('footer').animate({
bottom: '0'
});
contador = 0;
} else {
contador = 1;
$('footer').animate({
bottom: '-50px'
});
$('.icon-up-open').animate({
transform: 'rotate(0deg)'
});
}
});
}
footer {
position: fixed;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width:70%;
max-width: 800px;
background: rgba(247,151,16,1);
background: -moz-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(247,151,16,1)), color-stop(100%, rgba(247,54,1,1)));
background: -webkit-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
background: -o-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
background: linear-gradient(135deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79710', endColorstr='#f73601', GradientType=1 );
-webkit-box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
border-radius: 200px 200px 20px 20px;
-moz-border-radius: 200px 200px 20px 20px;
-webkit-border-radius: 200px 200px 20px 20px;
border: 0px solid #000000;
z-index: 900;
}
.contacto_menu {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #FFF;
font-size: large;
top:-25px;
}
.icon-up-open{
display: inline-block;
}
.footer ul li {
display: inline-block;
list-style: none;
text-align: center;
width: 32%;
padding: 15px;
font-family: 'Open Sans', sans-serif;
text-decoration: none;
color: #FFF;
}
.footer ul li a{
text-decoration: none;
color: #FFF;
}
<!DOCTYPE html>
<link rel="stylesheet" href="css/footer.css">
<script src="java/footer1.js"></script>
<footer>
Contacto<i class="icon-up-open"></i>
<div class="footer">
<ul>
<li>Correo:</li>
<li>Telefono:</li>
<li>Whatsapp:</li>
</ul>
</div>
</footer>
</html>

I changed your animation logic to work through toggling a class on the <body /> -element, and then defining the animations in your CSS.
The resulting code looks something like this:
$(document).ready(main);
// Clicking the .contacto_menu only toggles a CSS class now. Way better performance this way.
function main() {
$('.contacto_menu').click(function() {
$(document.body).toggleClass('contacto-expanded');
});
}
footer {
position: fixed;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 70%;
max-width: 800px;
background: rgba(247, 151, 16, 1);
background: -moz-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(247, 151, 16, 1)), color-stop(100%, rgba(247, 54, 1, 1)));
background: -webkit-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%);
background: -o-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%);
background: -ms-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%);
background: linear-gradient(135deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79710', endColorstr='#f73601', GradientType=1);
-webkit-box-shadow: 0px 11px 40px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 11px 40px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 11px 40px 1px rgba(0, 0, 0, 0.75);
border-radius: 200px 200px 20px 20px;
-moz-border-radius: 200px 200px 20px 20px;
-webkit-border-radius: 200px 200px 20px 20px;
border: 0px solid #000000;
z-index: 900;
transition: bottom .4s; /* Added, to make transitions work */
}
.contacto_menu {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #FFF;
font-size: large;
top: -25px;
}
.icon-up-open {
display: inline-block;
transition: transform .4s; /* Added, to make transitions work */
}
/* Added, to make transitions work */
.contacto-expanded .icon-up-open {
transform: rotate(180deg);
}
/* Added, to make transitions work */
.contacto-expanded footer {
bottom: 0;
}
.footer ul li {
display: inline-block;
list-style: none;
text-align: center;
width: 32%;
padding: 15px;
font-family: 'Open Sans', sans-serif;
text-decoration: none;
color: #FFF;
}
.footer ul li a {
text-decoration: none;
color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
Contacto<i class="icon-up-open">R</i>
<div class="footer">
<ul>
<li>Correo:
</li>
<li>Telefono:
</li>
<li>Whatsapp:
</li>
</ul>
</div>
</footer>

Can you change animate to css like this
$('.icon-up-open').css({
transform: 'rotate(180deg)'
});
$('.icon-up-open').css({
transform: 'rotate(0deg)'
});
You can see here CodePen

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 can I have a position:fixed after a scroll event?

help me out here. I want to have my navigation menu go to a fixed position at the top after i scroll down 500 pixels. If anyone can give me the java-script I need, I will be very grateful. Thanks in advance :)
Here is the code if it would help
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="img/favicon.png" />
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
body {
margin: 0;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
padding: 0;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
}
h1 {
}
h2 {
}
hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
/* ==============================Header================= */
.cover {
background: url(http://oi62.tinypic.com/a2ac8n.jpg) top center no-repeat;
background-size: cover;
width: 100%;
height: 500px;
margin-bottom: -400px;
position:fixed;
}
.menu,
.menu ul,
.menu li,
.menu a {
padding: 0;
border: none;
outline: none;
}
.menu {
text-shadow:0px 0px 10px #fff;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
margin: 400px 0px 0px 0px;
position: absolute;
width: 100%;
height: 100px;
-webkit-box-shadow: 0px 0px 20px 1px #666;
-moz-box-shadow: 0px 0px 20px 1px #666;
box-shadow: 0px 0px 20px 1px #666;
background: #FFF;
}
.menuWrap {
width: 1000px;
margin: auto;
}
.menu li {
list-style:none;
float: left;
width: 25%;
text-align: center;
}
.menu li a {
display: block;
font-weight: bold;
color: #000;
font-size: 20px;
line-height: 100px;
}
.menu li:hover > a,
.menu .active {
background-color:#09D5D5;
color: #FFF;
-webkit-transition: ease-in .2s;
-moz-transition: ease-in .2s;
-o-transition: ease-in .2s;
-ms-transition: ease-in .2s;
transition: ease-in .2s;
}
/* ========================Content======================== */
.mainContent{
background: #F8F8F8;
width: 100%;
position: absolute;
margin-top:500px;
}
.contentWrapper {
margin: auto;
width: 1000px;
padding-top: 50px;
}
.content {
margin-bottom: 50px;
padding: 40px;
border: #999 1px solid;
line-height: 25px;
color: #4D4D4D;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #FFF;
box-shadow: 0px 0px 1px 1px #e1e1e1 inset, 0px 23px 30px -33px #4D4D4D;
}
</style>
<body class="body">
<div class="cover"></div>
<header class="mainHeader">
<nav>
<ul class="menu"><div class="menuWrap">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
</div></ul>
</nav>
</header>
<div class="mainContent">
<div class="contentWrapper">
<article class="content">
</article>
<article class="content">
</article>
<article class="content">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
<div>
</html>

Use an additional class:
.menu.fixed {
position:fixed;
top: 0;
margin: 0;
z-index: 3;
}
and the following jQuery code to detect the scroll:
$(document).scroll(function()
{
if($(document).scrollTop()>=500)
$('.menu').addClass('fixed');
else
$('.menu').removeClass('fixed');
});
See working JSFiddle Demo

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.

Categories

Resources