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
Related
I have these icons that open a menu on hover. They work exactly as expected, no issues there. On mobile, you obviously cannot use a pointerenter and pointerleave function so my first thought was to convert the function to a click listener instead and add a close button on the media query view (.fa-chevron-down). However, this is throwing an error:
Uncaught TypeError: Cannot read properties of null (reading 'classList') at the event.target.querySelector('.logoBox').classList.add('active'); portion of the script.
My guess is that it has something to do with the way the pointerenter event triggers on the .logoContainer instead of the .logoBox objects themselves which is causing the hangup.
The other issue is that the close button isn't removing the .active classes from the logos, but rather adding it(?) to the close button itself.
Swapping between the functions sort of works. It fires on load so it knows which function to apply using an if statement based on the media size defined early on in the script. The problem there is though, I need the function to reevaluate the media size if it changes and swap out the logo functions appropriately. I tried using the resize listener as well as the change listener because the console log shows an onchange occurring with the media query so logically that made sense, but it doesn't seem to do anything either way.
So, when using the hover function, I end up with this result in my HTML:
But when using the click function, I end up with:
And the previously mentioned error as well, even though the .active class still gets added to the .logoBox, just not the other elements like it would on the pointerenter function.
I've tried rewriting the click function in various ways using toggle, add, remove, as basic as I could make it, but somehow I can't get past the classList.add error, likely due to the way I'm collecting the elements at the start of the script.
Any suggestions? It doesn't need to follow the same methodology that the hover function does, I just thought that would be the easiest approach.
// -------- begin logo scripts -------- //
// -------- collect elements -------- //
const logos = (sel, par) => (par || document).querySelectorAll(sel);
const locations = (sel, par) => (par || document).querySelectorAll(sel);
const mobileCloseIcon = (sel, par) => (par || document).querySelectorAll('.fa-chevron-down');
// -------- -------- //
// -------- media query -------- //
let mediaSize = window.matchMedia('(max-width: 80em)');
// -------- -------- //
// -------- logo hover function -------- //
const logoHoverFn = logoHover => {
logoHover.addEventListener('pointerenter', event => {
event.target.classList.add('active');
event.target.querySelector('.logoBox').classList.add('active');
locations('.storeList', event.target).forEach(location => {
location.classList.add('active');
});
});
logoHover.addEventListener('pointerleave', event => {
event.target.classList.remove('active');
event.target.querySelector('.logoBox').classList.remove('active');
locations('.storeList', event.target).forEach(location => {
location.classList.remove('active');
});
});
};
// -------- -------- //
// -------- logo click function -------- //
const logoTapFn = logoTap => {
logoTap.addEventListener('click', event => {
event.target.classList.add('active');
event.target.querySelector('.logoBox').classList.add('active');
locations('.storeList', event.target).forEach(location => {
location.classList.add('active');
console.log(logoTap, 'active');
});
});
};
const closeMenuMobileFn = closeMobileMenu => {
closeMobileMenu.addEventListener('click', event => {
event.target.classList.remove('active');
event.target.querySelector('.logoBox').classList.remove('active');
locations('.storeList', event.target).forEach(location => {
location.classList.remove('active');
console.log(closeMobileMenu, 'inactive');
});
});
};
// -------- -------- //
// -------- apply functions -------- //
function handleMediaSize() {
if (mediaSize.matches) {
logos('.logoContainer').forEach(logoTapFn);
mobileCloseIcon('.fa-chevron-down').forEach(closeMenuMobileFn);
console.log('click function');
} else {
logos('.logoContainer').forEach(logoHoverFn);
console.log('pointerenter function');
}
}
mediaSize.addListener(handleMediaSize);
mediaSize.addEventListener('change', handleMediaSize(event));
// -------- -------- //
// -------- end logo scripts -------- //
:root {
/* -------- colors -------- */
--lightGrey: rgb(40, 40, 40, 1.6);
--darkGrey: #0a0a0a;
--burtonRed: #ff0800;
--black: #141414;
--white: #fafafa;
/* -------- desktop positioning -------- */
--bottomInactive: 5vw;
--bottomActive: 7.5vw;
--chryslerLeft: 12.3vw;
--dodgeLeft: 19.3vw;
--menuTransition: opacity 0.2s linear, bottom 0.2s linear, visibility 0.2s linear;
/* -------- mobile positioning -------- */
--mobileInactive: -5vw;
--mobileActive: 0vw;
--mobileMenuTransition: opacity 0.2s linear, bottom 0.2s linear, visibility 0.2s linear;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.landingPageContainer {
display: flex;
flex-direction: column;
position: relative;
width: 100vw;
height: 15vw;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 80%);
background-repeat: no-repeat;
background-size: cover;
background-position: center 65%;
margin: 0 auto;
}
.oemLogosContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1vw;
justify-content: center;
padding: 0 0.5vw 1vw 0.5vw;
width: 100%;
height: auto;
margin: auto auto 0 auto;
}
.logoContainer {
display: flex;
}
.logoBox {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
width: 6vw;
height: 6vw;
border: 1px solid;
border-color: var(--lightGrey);
padding: 0vw;
border-radius: 5px;
background-color: var(--darkGrey);
box-shadow: -2px -1px 4px rgba(0, 0, 0, .7);
transform: perspective(600px);
transition: all 0.3s linear;
}
#chryslerContainer .logoBox {
padding: 0.4vw;
}
#dodgeContainer .logoBox {
padding: 0.5vw;
}
.logoBox:hover {
cursor: pointer;
}
.logoBox::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
opacity: 0;
transition: opacity 0.3s linear;
}
.logoBox.active::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
opacity: 1;
transition: opacity 0.3s linear;
}
.logoBox.active {
transform: perspective(600px) rotateY(35deg);
box-shadow: -3px -1px 6px rgba(0, 0, 0, .7);
transition: all 0.3s linear;
}
.logoBox img {
object-fit: scale-down;
height: 100%;
width: 100%;
user-select: none;
}
.storeList {
display: flex;
position: absolute;
visibility: hidden;
opacity: 0;
margin: 0;
height: auto;
width: auto;
border: 1px solid;
border-color: var(--lightGrey);
padding: 0.4vw;
border-radius: 5px;
background-color: var(--darkGrey);
box-shadow: -2px -1px 4px rgba(0, 0, 0, .7);
transition: all 0.3s linear;
}
.storeList::after {
content: '';
display: block;
opacity: 0;
background-color: var(--darkGrey);
position: absolute;
left: 0;
bottom: -0.5vw;
width: 26vw;
height: 1vw;
}
.storeList ul {
display: flex;
width: 18.9vw;
gap: 0.4vw;
flex-direction: column;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
text-decoration: none;
list-style: none;
}
.storeList .fa-chevron-down {
display: none;
}
.storeList a {
display: flex;
width: 100%;
height: 6vw;
border-radius: 2px;
align-items: center;
justify-content: center;
padding: 0.4vw;
text-decoration: none !important;
background-color: var(--lightGrey);
}
.storeList.active {
position: absolute;
visibility: visible;
opacity: 1;
}
.location {
display: flex;
width: 100%;
height: fit-content;
font-family: "DDC Font Face", "Open Sans", Arial, Helvetica, sans-serif;
border-radius: 2px;
transition: all 0.15s linear;
color: var(--burtonRed);
}
.storeName-storeInfo {
flex-direction: column;
display: flex;
flex-grow: 1;
}
.storeName {
font-size: 0.7vw;
letter-spacing: 0.03vw;
font-weight: bold;
color: var(--burtonRed);
}
.storeInfo {
font-size: 0.5vw;
letter-spacing: 0.1vw;
color: var(--white);
}
.storeList a:hover {
background-color: rgb(255, 8, 0, 0.7);
transition: all 0.2s linear;
}
.location:hover .storeName {
color: var(--white);
transition: all 0.2s linear;
}
.logo {
flex: 0 0 25%;
object-fit: scale-down;
width: 5vw;
height: auto;
margin: 0 2% 0 0;
user-select: none;
}
.flexBreak {
flex-basis: 100%;
width: 0;
}
.chryslerLocations {
bottom: var(--bottomInactive);
left: var(--chryslerLeft);
transition: var(--menuTransition);
}
.chryslerLocations.active {
bottom: var(--bottomActive);
left: var(--chryslerLeft);
transition: var(--menuTransition);
}
.dodgeLocations {
bottom: var(--bottomInactive);
left: var(--dodgeLeft);
transition: var(--menuTransition);
}
.dodgeLocations.active {
bottom: var(--bottomActive);
left: var(--dodgeLeft);
transition: var(--menuTransition);
}
#media only screen and (max-width: 80em) {
.landingPageContainer {
height: 30vw;
background-repeat: no-repeat;
background-size: cover;
background-position: center 100%;
}
.oemLogosContainer {
gap: 3vw 3vw;
justify-content: center;
padding: 0 15vw 2vw 15vw;
}
.logoBox {
width: 9vw;
height: 9vw;
}
.storeList {
display: flex;
position: absolute;
visibility: hidden;
opacity: 0;
margin: 0;
width: 100%;
border: 1px solid;
border-color: var(--lightGrey);
padding: 1vw;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 0px;
background-color: var(--darkGrey);
box-shadow: -2px -2px 4px rgba(0, 0, 0, .7);
transition: all 0.3s linear;
}
.storeList::after {
content: '';
display: none;
opacity: 0;
background-color: unset;
position: unset;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
.storeList ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
height: 100%;
gap: 1vw;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
text-decoration: none;
list-style: none;
}
.storeList li {
width: 48.5vw;
}
.storeList .fa-chevron-down {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
user-select: none;
color: var(--burtonRed);
font-weight: 900;
font-size: 4vw;
font-family: "Font Awesome 6 Free";
text-rendering: auto;
cursor: pointer;
margin: 0 auto;
width: 100%;
height: fit-content;
}
.storeList a {
display: flex;
width: 100%;
height: 15vw;
border-radius: 2px;
align-items: center;
justify-content: center;
padding: 1vw;
text-decoration: none !important;
background-color: var(--lightGrey);
}
.chryslerLocations,
.dodgeLocations,
{
bottom: var(--mobileInactive);
left: 0;
transition: var(--mobileMenuTransition);
z-index: 1;
}
.chryslerLocations.active,
.dodgeLocations.active,
{
bottom: var(--mobileActive);
left: 0;
transition: var(--mobileMenuTransition);
z-index: 1;
}
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Welcome</title>
<meta name="description" content="Locations">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer">
</head>
<body>
<div class="landingPageContainer">
<nav class="oemLogosContainer">
<!-------- chrysler -------->
<div id="chryslerContainer" class="logoContainer">
<div id="chryslerLogoBox" class="logoBox">
<img alt="Chrysler Logo" src="https://i.imgur.com/m33KwSY.png">
</div>
<div id="chryslerLocations" class="storeList chryslerLocations">
<ul>
<li class="fa-solid fa-chevron-down"></li>
<li>
<div class="location">
<a href="#">
<img class="logo" alt="Chrysler Logo" src="https://i.imgur.com/m33KwSY.png">
<div class="storeName-storeInfo">
<div class="storeName">Name</div>
<div class="storeInfo">Address
<div class="flexBreak"></div>Phone 1
<div class="flexBreak"></div>
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
<!-------- dodge -------->
<div id="dodgeContainer" class="logoContainer">
<div id="dodgeLogoBox" class="logoBox">
<img alt="Dodge Logo" src="https://i.imgur.com/ZFAs0ed.png">
</div>
<div id="dodgeLocations" class="storeList dodgeLocations">
<ul>
<li class="fa-solid fa-chevron-down"></li>
<li>
<div class="location">
<a href="#">
<img class="logo" alt="Chrysler Logo" src="https://i.imgur.com/ZFAs0ed.png">
<div class="storeName-storeInfo">
<div class="storeName">Name</div>
<div class="storeInfo">Address
<div class="flexBreak"></div>Phone 1
<div class="flexBreak"></div>
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
Hi Here I'm trying to add a speech bubble at the bottom left I used clip-path but the problem is I unable to adjust the pixels properly to look clear and exactly what I want. Can anyone suggest to me how to achieve it and any other alternate way to do it?
My code
body {
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.tolltip {
width: 147px!important;
height: auto;
background: transparent;
border: 4px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
border-bottom-color: transparent;
}
.tolltip:after {
content: "";
position: absolute;
left: -4px;
bottom: -38px;
width: 13px;
height: 72px;
clip-path: polygon(0 0, 4px 0, 4px 37px, 53px 0, 40px 0, 0px 49px);
background: white;
}
.tolltip:before {
content: "";
position: absolute;
left: 8px;
right: 0px;
bottom: 0;
border-bottom: 4px solid white;
}
<div class="tolltip">
<h3>content</h3>
</div>
Trying to achieve this
Here is a different idea:
.tolltip {
width: 147px;
margin: auto;
position: relative;
padding: 10px;
}
.tolltip:before,
.tolltip:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border: 5px solid #fff;
}
.tolltip:before {
top: 0;
right: 0;
border-radius: 15px 15px 15px 0;
clip-path: polygon(0 0, 100% 0, 100% 100%,
25px 100%, /* 25px = after width + border width */
25px calc(100% - 10px), /* 10px is simply a bigger value than border width */
0 calc(100% - 10px),
0 100%);
}
.tolltip:after {
top: 50%;
width: 20px; /* adjust this */
border-top: 0;
border-right: 0;
transform-origin: right;
transform: skewY(-40deg); /* add this */
}
body {
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
<div class="tolltip">
<h3>content</h3>
</div>
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>
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.
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.