<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Sun, 12 Feb 2017 03:36:45 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
form {
max-width: 500px;
margin: 10px auto;
padding: 10px 10px;
background: #fff;
color: #071b51;
border: 1px #071b51;
border-radius: 8px;
}
.loginpopup:hover {
background-color: #071b51;
color: #fff;
}
/*hover on span*/
.popuptext:hover {
pointer-events: auto;
}
.show {
visibility: visible;
}
.loginpopup {
position: relative;
display: inline-block;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 19px 39px 18px 39px;
background-color: #071b51;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 10px;
border: 1px solid #072583;
border-width: 1px 1px 3px;
border-color: #fff;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
color:#fff;
}
.popuptext {
visibility:hidden;
width: 400px;
background-color: #fff;
color: #071b51;
text-align: center;
border-radius: 6px;
padding: 10px 10px;
position: absolute;
z-index: 1;
bottom: -1000%;
left: 0%;
margin-left: -500px;
}
</style>
</head>
<body>
<div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>
<span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">
<form>
<h1>Login</h1>
<fieldset>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">
<label for="password">Password:</label>
<input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
</fieldset>
<button type="submit">Login</button>
</form>
</span>
<!--JS for all actions on main page-->
<script>
//open myPopup
function openPopup() {
var popup1 = document.getElementById("myPopup");
popup1.classList.toggle("show");
}
</script>
</body>
</html>
Can someone help me figure out the problem with this? Initially, "myPopup"'s visibility attribute is set to "hidden". Later, when "loginbutton" is clicked (onclick() ), the function "openPopup()" is called which sets "myPopup"'s visibility attribute is set to "visible" via the class "show". However, "myPopup" remains hidden. Is there something I've overlooked? Thanks
Your javascript correctly adds show class to #myPopup. However, that doesn't change anything in how it is displayed because:
.popuptext is defined later in CSS than .show and, having the same specificity (1 class) effectively overrides it.
.popuptext has a bottom:-1000% (that's a lot) and also a margin-left of -500px, which makes it render outside the screen.
I removed the offending rules and also placed .show below .popuptext in CSS.
function openPopup() {
var popup1 = document.getElementById("myPopup");
popup1.classList.toggle("show");
}
form {
max-width: 500px;
margin: 10px auto;
padding: 10px 10px;
background: #fff;
color: #071b51;
border: 1px #071b51;
border-radius: 8px;
}
.loginpopup:hover {
background-color: #071b51;
color: #fff;
}
/*hover on span*/
.popuptext:hover {
pointer-events: auto;
}
.loginpopup {
position: relative;
display: inline-block;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 19px 39px 18px 39px;
background-color: #071b51;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 10px;
border: 1px solid #072583;
border-width: 1px 1px 3px;
border-color: #fff;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
color:#fff;
}
.popuptext {
visibility:hidden;
width: 400px;
background-color: #fff;
color: #071b51;
text-align: center;
border-radius: 6px;
padding: 10px 10px;
position: absolute;
z-index: 1;
left: 0%;
}
.show {
visibility: visible;
}
<div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>
<span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">
<form>
<h1>Login</h1>
<fieldset>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">
<label for="password">Password:</label>
<input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
</fieldset>
<button type="submit">Login</button>
</form>
</span>
Your element is positioned way off the page.
Remove bottom:1000% and margin-left:-500px from .popuptext and it'll work fine.
The problem is your positioning. Your code is actually working as expected, but the popup is being pushed off of the page. Try this css:
.popuptext {
visibility:hidden;
width: 400px;
background-color: #fff;
color: #071b51;
text-align: center;
border-radius: 6px;
padding: 10px 10px;
position: absolute;
z-index: 1;
/*bottom: -1000%;*/
/*margin-left: -500px;*/
left: 0%;
}
A quick inspection in Chrome Dev Tools inspector shows this after you click on the 'Login':
The class is correctly added, but the "visibility" property in 'show' class gets overridden by "visibility" property in 'popuptext' class. This is because 'popuptext' is defined AFTER 'show' class inside your style tag and both the classes have same weightage (or Specificity in CSS terms).
Correction 1 : Place the 'popuptext' class BEFORE 'show' class.
This will override the "visibility" property as you would have wanted.
The pop-up still won't be visible on UI. This is because of huge negative margin set for margin-left property in "popuptext" class. Also, the bottom property has a very high value. This will place your popup far below at the bottom of page.
Correction 2 : Adjust your margin-left and bottom property as well.
Related
I am trying to do this button
Do you have any advice on how to make that design of the button with the color split? I included the code I have done so far. Still need to change the font and a few other things.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
--antd-wave-shadow-color: #1890ff;
--scroll-bar: 0;
font-feature-settings: "tnum","tnum";
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
margin: 0;
overflow: visible;
text-transform: none;
font: 16px/1.4 Sen,sans-serif;
line-height: 1.5715;
display: inline-block;
white-space: nowrap;
text-align: center;
cursor: pointer;
transition: all .3s cubic-bezier(.645,.045,.355,1);
user-select: none;
touch-action: manipulation;
border: 1px solid #d9d9d9;
outline: 0;
border-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 0 rgba(0,0,0,.045);
-webkit-appearance: button;
padding: 6.4px 20px;
border-radius: 40px;
width: 230px;
height: 68px;
font-size: 18px;
color: #fff;
font-weight: 700;
background: #5675ff;
font-family: RobotoBold3;
position: relative;
margin-right: 20px;
}
</style>
</head>
<body>
<button class="button">BUY X </button>
</body>
</html>
You should leverage border radius instead of making complex calculations.
Here is a codepen sample that could give you a direction:
https://codepen.io/aSH-uncover/pen/VwXJgaj
the main trick here is
.button {
border-radius: 15%;
overflow: hidden;
}
and the usage of inner elements for your button
<button class="button">
<div class='content top'>
BUY $EVZ
</div>
<div class='content bottom'>
POWERED BY DEPAY.CASH
</div>
</button>
output
Here is a basic snippet. Play with the style of the button as much as you want.
button .top{
background: #5675ff;
color:white;
font-size: 20px;
padding: 5px 20px
}
button .bottom{
background:#ccc;
padding: 5px 20px
}
button{
padding:0;
border:0;
border-radius:15px;
overflow:hidden;
}
<button class="button">
<div class="top">BUY X</div>
<div class="bottom">I'm expensive!</div>
</button>
I want to create a notification saying "text was copied to clipboard" whenever my copy button is pressed similar to what happens when you copy something using the copy button with google translate. I dont want to use an alert() though. I don't know how too do this. Thank you for taking the time to read this, my code is below.
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function maFunction() {
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
elt.style.background = "blue;";
}
body {
margin-top: 20px;
margin-left: 20px;
display: flex;
}
.txt {
margin-right: 20px;
background: #ffffff;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
/*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
margin-top: 0px;
}
.text {
border: none;
margin-top: 15px;
margin-left: 18px;
height: 660px;
width: 630px;
outline: none;
font-size: 24px;
resize: none;
}
.asci {
background: #ffffff;
border-style: solid;
border-color: #4CAF50;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
/*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
.alpha {
margin-top: 15px;
margin-left: 10px;
height: 660px;
width: 564px;
outline: none;
font-size: 24px;
resize: none;
vertical-align: top;
border: none;
}
.button {
background: #4CAF50;
border: none;
outline: none;
color: #ffffff;
padding: 14px;
width: 100px;
border-radius: 0 10px;
margin-top: 0px;
margin-left: 0px;
font-size: 22px;
cursor: pointer;
}
::selection {
color: black;
background: lightblue;
}
<html>
<head>
<title>alphabetical order machine</title>
<link rel="stylesheet" href="alphabetical.css">
</head>
<body>
<form class="txt">
<textarea class="text" id="input" type="text" placeholder="type your text here" onkeyup="myFunction()"></textarea>
</form>
<form class="asci">
<textarea class="alpha" id="output" readonly="readonly" type="output" placeholder="your alphabetized text will appear here"></textarea>
<input class="button" type='button' value="copy" onclick="maFunction()">
</form>
<script src="alphabetical.js"></script>
</body>
</html>
if you want pure css code, you can use this example code, without alert() javascript function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal-window {
position: fixed;
background-color: rgba(200, 200, 200, 0.75);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 2rem;
background: #fff;
color: #444;
}
.modal-window header {
font-weight: bold;
}
.modal-window h1 {
font-size: 150%;
margin: 0 0 15px;
}
</style>
</head>
<body>
<input type="button" class="open-button" value="Open Modal" onclick="fadeOut()" />
<div id="open-modal" class="modal-window">
<div>
<h1>CSS Modal</h1>
<div>Copy ClipBoard</div>
</div>
</div>
<script>
function fadeOut(){
location.href='index.html#open-modal';
setTimeout(function () {
location.href='index.html#modal-close';
}, 1000);
}
</script>
</body>
</html>
or you can search: pure css popup box in google,
and there are many css framework like bootstrap or materialize css which contains various types of modal box.
Im trying to make a form with a button to add info from multiple people and delete them but I have 2 issues that I believe can be fixed together. I just don't have any idea how to do it or what would be the best way to achieve my goal.
When a person clicks on adding info it replicates the same html. So when I make the phpmailer it would have the same name 3 times (name="radio1")
I need to make it when the person presses the button it will count up the number (name="radio1",name="radio2",name="radio3")
The second problem is that the male/female buttons wont work independent of each other click the button 3 times and click on one of the male buttons and only the top one would select. Now im assuming I can use the same type of script to fix both problems by counting up the id or class of the div as they are pure css (section class="plan cf1",section class="plan cf2",section class="plan cf3") and then making css for up to 10 sets of divs and make 10 sets of php.
However im not sure this is the best method to achieve my goal or even possible. Any insight would be appreciated on how to best go about fixing my problem?
Code is not cleaned up so please forgive the mess
#KenoClayton yes when Someone clicks the add info button it increases the number inside of name IE name="radio1" and id or class IE so this way I can make them post separately and the male/female buttons to operate independently. The male/female I did for you so u can see what I mean just click around on any of the last 2 male/female things. I need to make it to where no matter how many times they add and remove the formwrap div by clicking on the add/remove buttons it keeps counting up the numbers so they will display and post properly. and by adding a number is the only way I can think of to make it work.. Is there a better way? https://jsfiddle.net/8frqx97h/26/
$radio1 = $_POST['radio1'] ;
$radio2 = $_POST['radio2'] ;
$radio3 = $_POST['radio3'] ;
/* CSS Document */
html,body{
font-family: 'Montserrat', sans-serif;
padding:0px;
margin:0px;
height:100%;
width:100%;
background-color:#F5F5F5;
}
/****adding a driver****/
#addingdriver{
margin-top:10px;
margin-bottom:50px;
border: 1px solid blue;
width:100%;
display:table;
}
#driverinfo{
border: 1px solid red;
width:60%;
margin-bottom:20px;
margin-left:10px;
}
#test1{
height:50px;
width:150px;
border: 1px solid green;
float:left;
margin :0 auto;
cursor: pointer;
background-color:#3E9DC5;
}
#test2{
float:right;
height:25px;
border: px solid red;
margin :0 auto;
cursor: pointer;
background-color:#3E9DC5;
width:100px;
font-size: 10px;
}
#submit{
font-weight:bold;
margin :0 auto;
width:90%;
height:40px;
line-height:40px;
cursor: pointer;
background-color:#3E9DC5;
}
/*form styles*/
#msform {
border:none; display: table;
width: 780px;
position: relative;
margin :0 auto;
}
fieldset{border:none;}
#lefttxt{
width: 100%;
margin-bottom:15px;
}
#ftx1{
background-color:#FFFFFF;
border-color: #CECBCB;
border-style: solid;
border-width: 2px 2px 0px 2px;
width: 98%;
text-align: center;
line-height: 30px;
height: 30px;
}
#ftx2{
border: px solid black;
border-radius: 2px 2px 0px 0px;
width: 40%;
text-align: center;
line-height: 30px;
height: 30px;
}
#formwrap{
vertical-align:top;
padding:5px;
width: 45%;
border: 1px solid green;
display: inline-block;
}
#formwrap2{
padding:5px;
width: 45%;
border: px solid red;
float:right;
}
date,input,textarea{
width: 97.5%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
box-sizing:initial;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
input[type=date]{
line-height: 46px;
height: 30px;
text-align: center;
text-align-last: center;
}
input,textarea{
width: 97.5%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
select{ border: 1px solid green;
width: 98%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
option {
text-align: left;
/* reset to left*/
}
#media screen and (-webkit-min-device-pixel-ratio:0){
#ftx1{
background-color:#FFFFFF;
border-color: #CECBCB;
border-style: solid;
border-width: 2px 2px 0px 2px;
width: 97.5%;
text-align: center;
line-height: 30px;
height: 30px;
}
select{ border: 1px solid green;
width: 97.5%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
input[type=date]{
line-height: 46px;
height: 30px;
width:97.1%;
text-align: center;
text-align-last: center;
}
}
/* ------------------------mozilla ----------------*/
#-moz-document url-prefix() {
#ftx1{
background-color:#FFFFFF;
border-color: #CECBCB;
border-style: solid;
border-width: 2px 2px 0px 2px;
width: 98.1%;
text-align: center;
line-height: 30px;
height: 30px;
}
input[type=date]{
line-height: 30px;
height: 30px;
width:97.3%;
text-align: center;
text-align-last: center;
}
}
/* ------------------------radio buttons ----------------*/
/* CONTAINERS */
.container {max-width: 850px; width: 100%; margin: 0 auto;border: 1px solid black;}
.four { width: 49%; max-width: 49%;border: 1px solid red;}
/* COLUMNS */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-of-type { margin-left: 0; }
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* FORM */
#msform .plan input, #msform .payment-plan input, #msform .payment-type input{
display: none;
}
#msform label{
position: relative;
color: #fff;
background-color: #aaa;
font-size: 26px;
text-align: center;
height: ;
line-height: ;
display: block;
cursor: pointer;
border: 2px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#msform .plan input:checked + label, #msform .payment-plan input:checked + label, #msform .payment-type input:checked + label{
border: 2px solid #333;
background-color: #2fcc71;
}
#msform .plan input:checked + label:after, msform .payment-plan input:checked + label:after, #msform .payment-type input:checked + label:after{
content: "\2713";
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 100%;
border: 2px solid #333;
background-color: #2fcc71;
z-index: 999;
position: absolute;
top: -10px;
right: -10px;
}
#submit{
font-weight:bold;
margin :0 auto;
width:90%;
height:40px;
line-height:40px;
cursor: pointer;
background-color:#3E9DC5;
}
.submit:hover{
cursor: pointer;
transform: rotateX(360deg);
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<html lang="en" class="no-js">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="SHORTCUT ICON" href="images/favicon.ico"/>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="canonical" href="" />
<title>title</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta property="og:url" content="" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/quick.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<form id="msform" method="post" action="inc/test.php"/>
<h2 class="fs-title">Personal Info</h2>
<div id="formwrap">
<div id="ftx1">GENDER:</div>
<section class="plan cf">
<input type="radio" name="radio1" id="Male" value="Male"><label class="free-label four col" for="Male">Male</label>
<input type="radio" name="radio1" id="Female" value="Female" checked><label class="basic-label four col" for="Female">Female</label>
</section>
</div>
<div id="addingdriver">
<table class="table table-bordered" id="item_table">
<tr>
<th><button type="button" name="add" id="test1" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus">Click to Add info</span></button></th>
</tr>
</table>
</div>
<input id="submit" class="button_text" type="submit" name="submit" value="SUBMIT" />
</form>
<script>
$(document).ready(function(){
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><br><div id="ddd"><div id="driverinfo">Info<button type="button" name="remove" id="test2" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">Remove info</span></button></div><div id="formwrap"><div id="ftx1">FIRST NAME</div><input type="text" name="fname" class="box" maxlength="40" min="9" max="40"placeholder=""/></div><div id="formwrap"><div id="ftx1">LAST NAME</div><input type="text" name="lastn" class="box" maxlength="40" min="9" max="40"placeholder=""/></div><div id="formwrap"><div id="ftx1">DATE OF BIRTH</div><input type="date" name="dob" class="element text" size="" maxlength="15" value="" type="text" placeholder="" required></div><div id="formwrap"><div id="ftx1">input#:</div><input id="element_1" name="ddn" class="element text medium" type="text" maxlength="40" value="" placeholder=""></div><div id="formwrap"><div id="ftx1">MARITAL STATUS:</div><select id="status" name="drop" onChange="showDiv(this)"><option value="">Select One</option><option value="Single">Single</option><option value="married">Married</option></select></div><div id="formwrap"><div id="ftx1">GENDER:</div><section class="plan cf"><input type="radio" name="radio1" id="Male" value="Male"><label class="free-label four col" for="Male">Male</label><input type="radio" name="radio1" id="Female" value="Female" checked><label class="basic-label four col" for="Female">Female</label></section></div></div><br><br><br></td>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
<script>
$(document).ready(function(){
var count = 0;
$(document).on('click', '.add', function(){
var html = '<div id="formwrap2" class="test'+count+'" name="test'+count+'">content goes here</div>';
count++;
$('#item_table').append(html);
$(document).on('click', '.remove', function(){
$(this).closest('#formwrap2').remove();
});
});
});
</script>
I am trying to make a login box modal dialog window with CSS, HTML and jQuery but the login box is appearing without me clicking the Login / Sign In link. My HTML code is fairly straightforward:
Login / Sign In
<div id="login-box" class="login-popup">
<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />
<form method="post" class="signin" action="#">
<fieldset class="textbox">
<label class="username">
<span>Username or email</span>
<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password" placeholder="Password">
</label>
<button class="submit button" type="button">Sign in</button>
<p>
<a class="forgot" href="#">Forgot your password?</a>
</p>
</fieldset>
</form>
</div>
<link rel="stylesheet" type="text/css" href="login.css" />
The CSS is more complex:
#mask {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
opacity: 0.8;
z-index: 999;
}
#login-popup {
display: none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999;
/* CSS3 */
-moz-box-shadow: 0px 0px 20px #999;
/* Firefox */
-webkit-box-shadow: 0px 0px 20px #999;
/* Safari, Chrome */
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
/* Firefox */
-webkit-border-radius: 3px;
/* Safari, Chrome */;
}
img#btn_close {
Position the close button
float: right;
margin: -28px -28px 0 0;
}
fieldset {
border: none;
}
form#signin #textbox label {
display: block;
padding-bottom: 7px;
}
form#signin #textbox span {
display: block;
}
form#signin p, form#signin span {
color: #999;
font-size: 11px;
line-height: 18px;
}
form#signin #textbox input {
background: #666666;
border-bottom: 1px solid #333;
border-left: 1px solid #000;
border-right: 1px solid #333;
border-top: 1px solid #000;
color: #fff;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font: 13px Arial, Helvetica, sans-serif;
padding: 6px 6px 4px;
width: 200px;
}
form#signin input:-moz-placeholder {
color: #bbb;
text-shadow: 0 0 2px #000;
}
form#signin input::-webkit-input-placeholder {
color: #bbb;
text-shadow: 0 0 2px #000;
}
#button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background: -o-linear-gradient(top, #f3f3f3, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color: #000;
border-width: 1px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: #333;
cursor: pointer;
display: inline-block;
padding: 6px 6px 4px;
margin-top: 10px;
font: 12px;
width: 214px;
}
#button:hover {
background: #ddd;
}
The jQuery is new to me and there is most likely a few errors in there.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
$(document).ready(function() {
$('a.login-window').click(function() {
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
Does anyone see some errors in that code that could be causing the problem? If so please tell me.
The problem is with HTML
<div id="login-box" class="login-popup">
and CSS
#login-popup {
display: none;
You use the # in the css selector which is for ids but the element has a class..
So the CSS rule should use .
.login-popup {
display: none;
Same error seems to exist for all your rules.. you use classes in the HTML but try to target them with id selectors in CSS
I've created a single html page that will be used within a .aspx template. The html code I used is pretty basic and includes an email subscribe form. The form and it's code is taken directly from Mailchimp as they are the email client I'm using. The problem is that the page loads fine in all browsers apart from Internet Explorer, which pushes my whole html code down underneath the page. I have a jquery file included in the form (jquery-1.8.2.min.js) and I'm not sure if that is interfering with my html code or if it's a problem within the code itself that I havent specified correctly for Internet Explorer. I'm not sure also if it has something to do with the Mailchimp form. I've tried everything possible to fix this but nothing seems to work. If anyone could help with this or has any ideas I would really appreciate it. Please see my code and screenshots below. Thanks, Gary
Heres my code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link
href="page1.css" rel="stylesheet" type="text/css" /> </form>
<script type="text/javascript" src="js/jquery-1.8.2.min.js">
</script>
</head>
<body> <div id="_wrapper">
<div id="_formsection">
<h1>Welcome</h1>
<p>Subscribe for a monthly discount code</p>
<!-- Begin MailChimp Signup Form-->
<div id="mc_embed_signup">
<form action="form_name_goes_here"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate />
<div class="mc-field-group">
<label for="mce-EMAIL">
<span class="asterisk"></span></label>
input type="email" value="Enter
your email address" name="EMAIL" class="required email"
id="mce-EMAIL" /> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response"
style="display:none"></div> <div class="response"
id="mce-success-response" style="display:none"></div> </div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe"
id="mailsubmit" class="button"></div>
</form>
</div> <!--End mc_embed_signup-->
</div><!--end form section-->
<div id="grid_section">
<div class="section1">
<a href="">
<img src="images/section1_hydrogel.jpg"
alt="PowerBar HydroGel Image" />
<h4>PowerBar HydroGel Coming Soon</h4>
<p>Click here to register for updates</p></a>
</div>
<div class="section2">
<a href="">
<img src="images/section2_action_camera.jpg"
alt="Rollei Bullet HD Action Camera Image" />
<h4>Rollei Bullet HD Action Camera</h4>
<p>Get 20% off the Rollei Bullet HD and start recording your adventures</p></a>
</div>
<div class="section3">
<a href="">
<img src="images/section3_gp4000.jpg"
alt="GP4000S Tyre Sale Image" />
<h4>GP4000S Tyre Sale</h4>
<p>Was €51.99 but you can get it now for €39.99 with free delivery</p></a>
</div>
<div class="section4">
<a href="">
<img src="images/section4_streetracer.jpg"
alt="BMC Streetracer Image" />
<h4>BMC Streetracer for only €999.99</h4>
<p>Great new year offer for you to buy this quality manufactured Swiss frame for only
€999.99</p></a>
</div>
<div class="section5">
<a href="" target="_blank">
<img src="images/section5_facebook.jpg"
alt="Facebook Image" />
<h4>Discounts on Facebook</h4>
<p>We give out regular discounts on social media so follow us there to get the
updates</p></a>
</div>
<div class="section6">
<a href="">
<img src="images/section6_isoactive.jpg"
alt="Facebook Image" />
<h4>IsoActive Sports Drink</h4>
<p>This Isotonic Sports Drink for Maximum Hydration was €26.99 and you can get it now
for only €24.99</p></a>
</div>
</div><!--end grid section-->
</div><!--end wrapper--> </body>
</html>
Heres my CSS
#charset "UTF-8"; /* CSS Document */
body { font-family:"Helvetica Neue",Arial,Sans-serif; }
#_wrapper{ width: 620px;
overflow: hidden;
margin: 0 auto; }
/* ------------Form Section-------------- */
#_formsection{ width: 620px;
height: 350px;
margin: 0 auto;
background-image: url(images/background1.jpg);
background-repeat:no-repeat;}
#_formsection img{ margin: 10px 0 0 0;
float: left;
padding-left: 20px; }
#_formsection h1{ margin: 30px 0 0 0;
float: right;
font-size: 20px;
padding-right: 280px;
color: #FFF;
text-shadow: #666 2px 2px 1px; }
#_formsection p{ clear: both;
margin: 100px 0 10px 0;
float: left;
padding-left: 55px;
color: #FFF;
text-shadow: #666 2px 2px 1px;
display: inline; }
#mc_embed_signup{ clear: both;
float: left;
margin-right: 0px;
padding-left: 50px;
width: 290px; }
.mc-field-group{ width: 200px;
float: left;
overflow: hidden; }
input#mce-EMAIL{ width: 185px;
height: 25px;
font-size: 10px;
padding-left: 10px;
color: #999;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #CCC;
outline:none;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px; }
input#mce-EMAIL:focus {
box-shadow: 0 0 3px (255, 140, 0, 1);
-webkit-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
-moz-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
border:1px solid rgba(255,140,0, 0.8); }
#mailsubmit { color: #999;
border: 1px solid #CCC;
font-size: 10px;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
outline: none;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 90px;
float: right;
height: 29px;
cursor: pointer; }
/* ------------End Form Section-------------- */
/* ------------Grid Section-------------- */
#grid_section{ clear: both;
width: 620px;
margin: 0 auto;
margin-top: 20px; }
.section1 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section1 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section1 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section1 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section1 a{ text-decoration: none;
color: #666; }
.section1 a:hover{ text-decoration: none; }
.section2 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section2 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section2 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section2 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section2 a{ text-decoration: none;
color: #666; }
.section2 a:hover{ text-decoration: none; }
.section3 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
display:inline; }
.section3 img{
margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section3 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section3 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section3 a{ text-decoration: none;
color: #666; }
.section3 a:hover{ text-decoration: none; }
.section4 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section4 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section4 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section4 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section4 a{ text-decoration: none;
color: #666; }
.section4 a:hover{ text-decoration: none; }
.section5 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section5 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section5 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section5 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section5 a{ text-decoration: none;
color: #666; }
.section5 a:hover{ text-decoration: none; }
.section6 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
margin: 7px 0 0 0;
display:inline;
overflow: hidden; }
.section6 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section6 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section6 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section6 a{ text-decoration: none;
color: #666; }
.section6 a:hover{ text-decoration: none; }
Not sure if it is how you pasted into stackoverflow or not, but you need to indent your content.
The days are mainly gone where you need to save that extra overhead for the filesize.
Using notepad++ would have helped you find this error pretty quickly, what file editor do you use?
Some elements are missiong from this code:
<div id="mc_embed_signup">
<form action="form_name_goes_here"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate />
<div class="mc-field-group">
<label for="mce-EMAIL">
<span class="asterisk"></span></label>
CLOSE THIS DIV ABOVE mc-field-group. ALSO FORM IS NOT CLOSED, BEST TO DOUBLE CHECK SIGN-UP FORM CODE
</div><!--end form section-->