I'm trying to make the background (only the search bar) to be a backdrop blur background without blurring the whole background image behind it.
I've tried webkit filter: blur & filter: blur, but they both blur the whole body and not just make the transparent background of the search bar blurred.
Note: I'm not using a background image in the code below because I'll embed this code in an iframe, which the background before it will be an image.
EDIT: I have removed the domain name in the ORIGINAL code so it doesn't conflict in search results for that domain name. Thanks everyone for helping me fix this issue! You're amazing!
<html>
<head>
<base target="_blank" />
<base target="_blank" />
<script type="text/javascript">
function submitSearch() {
var siteSearchUrl = "https://*DOMAIN_NAME*/_/search?query="; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query;
if (typeof IE_fix != "undefined") {
// IE8 and lower fix to pass the http referer
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
} else {
window.open(url, "_blank");
} // All other browsers
}
function searchKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById("search-icon").click();
return false;
}
return true;
}
</script>
<link
rel="stylesheet"
type="text/css"
href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 14px 6px 0 6px;
background-color: transparent;
font-family: "Roboto", sans-serif;
overflow: hidden;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding: 8px;
height: 24px;
vertical-align: middle;
cursor: pointer;
}
#search-icon:hover {
background: rgba(155, 153, 176, 0.2);
border-radius: 100px;
}
#search-query {
background: inherit;
}
body:before {
background: inherit;
}
#search-query:before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
filter: blur(10px);
}
#search-query {
width: max-content;
margin: 0 auto;
overflow: hidden;
border: 0;
border-radius: 14px;
color: #212121;
font-size: 16px;
line-height: 24px;
transition: 0.4s;
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
font-size: 16px;
line-height: 24px;
}
#search-query-input {
width: 60vw;
height: 24px;
font-size: 16px;
font-stretch: normal;
letter-spacing: normal;
line-height: 24px;
border: 0;
color: #000;
background-color: transparent;
cursor: text;
margin-left: -5px;
text-align: start;
vertical-align: middle;
}
#media (max-width: 500px) {
#search-query-input {
width: 80vw;
}
}
#media (min-width: 900px) {
#search-query-input {
width: 60vw;
}
}
</style>
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img
id="search-icon"
alt="Search"
onclick="submitSearch();"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII="
/>
<input
type="text"
id="search-query-input"
placeholder="Search"
enterkeyhint="go"
onkeypress="return searchKeyPress(event);"
style="box-shadow: none"
;=""
/>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.sections {
background-image: url(https://images.pexels.com/photos/3293148/pexels-photo-3293148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
height: 100vh;
padding-top: 15vh;
}
.search-bar {
border: 1px solid transparent;
width: 300px;
align-items: center;
display: flex;
margin: 0 auto;
padding-left: 2vh;
border-radius: 10px;
transition: 0.5s;
}
.search-bar:hover {
border: 1px solid rgb(142, 141, 141);
backdrop-filter: blur(5px);
}
.search-text {
padding: 4vh 8vh;
background: transparent;
border: none;
height: 100%;
width: 100%;
border-radius: 50px;
font-size: 18px;
color: #424242;
font-weight: 500;
}
.search-text:focus {
outline: none;
}
.fa-search {
color: #fff;
}
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/2dba9f6187.js" crossorigin="anonymous"></script>
<title>Blur Background Project</title>
</head>
<body>
<header>
<div class="center">
<div class="sections">
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search" class="search-text" />
</div>
</div>
</div>
</header>
</body>
function submitSearch(){
var siteSearchUrl = 'https://support.yssf.ml/_/search?query='; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
{
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
}
else { window.open(url,'_blank'); } // All other browsers
}
function searchKeyPress(e){
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('search-icon').click();
return false;
}
return true;
}
body {
margin:0;
padding:14px 6px 0 6px;
background-color:transparent;
font-family: 'Roboto', sans-serif;
overflow:hidden;
background: url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
}
#search-query{
background: transparent;
width:max-content;
margin:0 auto;
overflow:hidden;
border:0;
border-radius:14px;
color: #212121;
font-size:16px;
line-height:24px;
transition:0.4s;
}
#search-query::before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px -2px rgba(0,0,0,0.12),
0 1px 5px 0 rgba(0,0,0,0.2);
font-size:16px;
line-height:24px;
backdrop-filter:blur(3px);
}
#search-query-input {
width:60vw;
height:24px;
font-size:16px;
font-stretch: normal;
letter-spacing: normal;
line-height:24px;
border:0;
color:#000;
background-color:transparent;
cursor:text;
margin-left:-5px;
text-align:start;
vertical-align:middle;
}
#search-query-input:hover{
color:white;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding:8px;
height:24px;
vertical-align:middle;
cursor:pointer;
}
#search-icon:hover {
background: rgba(155,153,176, 0.2);
border-radius: 100px;
}
#search-query-input:hover::placeholder{
color:white;
}
#media (max-width:500px) {
#search-query-input {
width:80vw;
}
}
#media (min-width:900px) {
#search-query-input {
width:60vw;
}
}
<html>
<head>
<base target="_blank">
<base target="_blank">
<link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img id="search-icon" alt="Search" onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
<input type="text" id="search-query-input" placeholder="Search" enterkeyhint="go" onkeypress="return searchKeyPress(event);" style="box-shadow:none" ;="">
</div>
</body>
Use CSS filter on any page element. This may require you to duplicate the existing background into the #search-query Div (so that there is an image present to be blurred, it then appears like a blur of the original image behind it) but also try it with no background as a test. It's been a while since I used it but you may find that the blur applies to everything behind it regardless.
#search-query{
filter: blur(10px);
}
Related
I'm trying to make a simple light switch. My code turns off lights on first click but doesn't turn it back on on second click.
The problem is that my check variable is always false and I don't know why that is.
I was able to make a light switch with classList.toggle. But I still want to know why my code doesn't work.
Can someone please explain why variable "check" is always false in my code?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<button class="btn">LIGHTS ON</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn {
padding: 30px 100px;
font-size: 30px;
font-family: monospace;
text-shadow: 1px 1px 1px #eee, -1px -1px 3px #333;
background-color: orange;
border: none;
box-shadow: 0 0 3px 2px orange, 0 0 20px orange;
cursor: pointer;
transition: all 0.1s;
}
.btn:active {
transform: scale(0.97);
box-shadow: 0 0 3px 2px orange, 0 0 10px orange;
}
.clickedClass {
background-color: rgb(30, 30, 30) !important;
color: #eee !important;
text-shadow: 0 0 6px #eee !important;
box-shadow: none !important;
}
JS
'use strict';
const btn = document.querySelector('.btn');
const clickedClass = document.querySelector('.clickedClass');
const check = btn.classList.contains('clikedClass');
function clicked() {
if (!check) {
btn.classList.add('clickedClass');
btn.textContent = `LIGHTS OFF`;
console.log(`${check}`);
} else {
btn.classList.remove('clickedClass');
btn.textContent = `LIGHTS ON`;
console.log(`${check}`);
}
}
btn.addEventListener('click', clicked);
The problem is that you access the class list initially and never check it after
const check = btn.classList.contains('clikedClass');
You should do this inside your event handler
function clicked() {
const check = btn.classList.contains('clikedClass');
if (!check) {
...
}
EDIT
I provide a working codepen of your code here : https://codepen.io/aSH-uncover/pen/yLKReWp
You will never believe what the problem was... :D
Carefully read the two lines of code below and you will find it :D (and this is the perfect opportunity to learn about the usage of constant rather than free strings)
const check = btn.classList.contains('clikedClass');
btn.classList.add('clickedClass');
From the above comment ...
"Why does the OP want to script a button element when the expected behavior can be achieved without JS by an adequately styled checkbox control ... <input type="checkbox"/>?"
body {
margin: 0;
padding: 5px;
background: #333;
}
[data-lightswitch] {
position: relative;
display: inline-block;
margin: 0 10px 10px 10px;
}
[data-lightswitch] > [type="checkbox"] {
position: absolute;
left: 10px;
top: 10px;
z-index: -1;
}
[data-lightswitch] > [data-light-on],
[data-lightswitch] > [data-light-off] {
/* OP's styling rules */
padding: 30px 100px;
font-size: 30px;
font-family: monospace;
text-shadow: 1px 1px 1px #eee, -1px -1px 3px #333;
background-color: orange;
border: none;
box-shadow: 0 0 3px 2px orange, 0 0 20px orange;
cursor: pointer;
transition: all 0.1s;
}
[data-lightswitch] > [type="checkbox"] ~ [data-light-off],
[data-lightswitch] > [type="checkbox"]:checked ~ [data-light-on] {
display: none;
}
[data-lightswitch] > [type="checkbox"] ~ [data-light-on],
[data-lightswitch] > [type="checkbox"]:checked ~ [data-light-off] {
display: inline-block;
}
[data-lightswitch] > [type="checkbox"]:focus ~ [data-light-on],
[data-lightswitch] > [type="checkbox"]:focus ~ [data-light-off] {
outline: 3px dotted black;
}
[data-lightswitch] > [type="checkbox"]:checked ~ [data-light-off] {
/* OP's styling rules */
background-color: rgb(30, 30, 30) !important;
color: #eee !important;
text-shadow: 0 0 6px #eee !important;
box-shadow: none !important;
transform: scale(0.97);
box-shadow: 0 0 3px 2px orange, 0 0 10px orange;
}
<label data-lightswitch>
<input type="checkbox" checked />
<span data-light-off>Light on</span>
<span data-light-on>Light off</span>
</label>
<label data-lightswitch>
<input type="checkbox" />
<span data-light-off>On</span>
<span data-light-on>Off</span>
</label>
I make a simple login page using html and css and javascripts.
But when i submit and in case of some javascript lines execution after few seconds the page refresh automatically.when i submit form it shows desiered output but is few seconds webpage refresh.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>intern.local</title>
<link rel="stylesheet"><link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
</head>
<body>
<div class="outer">
<div class="inner one"
id="box_one">
<h1 class="main">
Welcome to intern.local
</h1>
<h3 id='login_1'>
Enter details and login to continue.
</h3>
</div>
<div class="inner two"
id="box_two">
<div class="head">
<h1> Welcome</h1>
<h2>Please Login</h2>
<div class="error">
Please Enter valid Password.
</div>
<div id="login"
class="login">
<form class="login_form" onsubmit="validate()">
<input type="text"
pattern="^\w+([\.-]?\w+)*#docquity.com"
id="uname"
class="inp uname"
name="uname"
placeholder="Username" required><br>
<input type="password"
minlength="6"
id="pass"
class="inp pwd"
name="pass"
placeholder="Password" required>
<small id="pass_error"></small>
<input type="submit"
id="smt"
value="Submit"
class="btn sbmt">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
css code
body {
margin:0px;
height:100%;
border: none;
padding:0px;
}
.inner{
float:left;
width: 50%;
height: 100vh;
}
.one {
background-color:cornsilk;
}
.two{
/*background: rgb(63,94,251);*/
background: radial-gradient(circle, rgb(103, 126, 238) 0%, rgb(185, 74, 97) 150%);
padding: 0%;
border: 0%;
margin: 0%;
color: cornsilk;
}
.head{
height: auto;
padding-top: 15%;
}
.head h1 {
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 40px;
}
.head h2{
text-align: center;
}
form {
margin: 0 auto;
}
.login {
text-align: center;
}
.inp {
border: none;
background: none;
box-shadow: 0px 2px 0px 0px white;
width: 50%;
color:blanchedalmond;
font-size: 25px;
outline: none;
margin-left: 20%;
margin-right: 20%;
margin-top: 5%;
padding-left: 2%;
}
.inp:focus:invalid{
box-shadow: 0px 2px 0px 0px red;
}
small {
color: red;
font-weight: bold;
}
.pwd {
margin-bottom: 10%;
}
.uname::placeholder, .pwd::placeholder{
color: blanchedalmond;
}
.btn {
align-items: center;
background-color: #fff;
border-radius: 24px;
border-style: none;
box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
box-sizing: border-box;
color: #000102;
display: inline-flex;
height: 48px;
justify-content: center;
padding: 2px 24px;
width: 30%;
font-size: 25px;
}
.sbmt:hover{
background-color: darkslategray;
color: floralwhite;
}
.main {
margin-top: 20%;
text-align: center;
font-size: 60px;
background: -webkit-linear-gradient(rgb(171, 10, 185), rgb(209, 8, 42));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.one h3 {
text-align: center;
color:darkslategray;
}
.error_message{
background-color: red;
margin-left: 25%;
margin-right: 25%;
text-align: center;
}
.error {
display: none;
}
javascript code
function mail_velidate(mail){
var mail_pattern = /^\w+([\.-]?\w+)*#docquity.com/;
if(mail.match(mail_pattern))
{
return true;
}
else{
return false;
}
}
function password_check(pass){
var pass_regex = /^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{7,15}$/;
if (pass.match(pass_regex)){
return true;
}
else{
return false;
}
}
const mail = document.getElementById("uname");
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByClassName("uname");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Give valid docquity mail id");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
function validate(){
var user = document.getElementById("uname").value;
var pass = document.getElementById("pass").value;
if(password_check(pass)){
document.getElementById('login').innerHTML = "<h1>Logged In</h1>";
document.getElementById('login_1').innerHTML = '<h3>Logged In successfully</h3>';
document.getElementById('box_two').style.display = 'none';
document.getElementById('box_one').style.width = '100%';
}
else{
document.getElementsByClassName("error")[0].className = "error_message";
}
}
the line of code document.getElementsByClassName("error")[0].className = "error_message"; giving me problem.
On your HTML, you need to place event.preventDefault(); like this:
<form class="login_form" onsubmit="event.preventDefault(); validate();">
event.preventDefault() will stop any default behavior when submitting. In the case of submit, it is the page reload.
https://codepen.io/tunk/pen/tjGdp
I'm made a Palindrome app that takes a word input and flips to say if it's a palindrome or not. However, after inputting a word it's not flipping the card to reveal if it's a palindrome or not. I was using following the Multi-faced Flip Card with a Click by Maria del Carmen Santiago, particularly the CSS and JavaScript sections as a guide. Could someone please help me figure out what it is I'm doing wrong?
I'm also attaching a CodePen link for the app.
{
const form = document.querySelector("form");
const input = document.querySelector(".word__input");
const cardContent = document.querySelector(".card__content");
const cardBack = document.querySelectorAll(".card__back");
const resultBack = document.querySelector(".back__result");
const backButton = document.querySelector(".back__button");
function clean(input) {
input.toLowercase().replace(/[\W]/g, "");
}
function isPalindrome(event) {
event.preventDefault();
const cleanInput = clean(input);
// const cleanInput = input.toLowerCase().replace(/[\W_]/g, "");
// const reverseInput = cleanInput.split("");
const reverseInput = cleanInput.split("").reverse().join("");
// for (let i = 0; i < reverseInput.length; i++) {
// // const element = array[index];
// if
// }
if (reverseInput === cleanInput) {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add(
"display",
(resultBack.innerHTML = `Yes ${CleanInput} is a Palindrome!`)
);
// resultBack.innerHTML = `Yes ${CleanInput} is a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `Yes ${CleanInput} is a Palindrome!`;
} else {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add(
"display",
(resultBack.innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`)
);
// resultBack.innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
}
cardFlip();
form.reset();
}
function cardFlip() {
cardContent.classList.toggle("is-flipped");
}
// function cardFlipBack() {
// // Remove back of the card 2 seconds after flipping.
// setTimeout(function () {
// cardBack.classList.remove("display");
// }, 2000);
// cardFlip();
// }
form.addEventListener("submit", isPalindrome);
backButton.addEventListener("click", cardFlip);
// backButton.forEach(function (button) {
// Button.addEventListener("click", cardFlip);
// });
}
:root {
--first-color: #fe9813;
--second-color: #e77b0e;
--third-color: #a22000;
--fourth-color: #281200;
--fith-color: #281200db;
--sixth-color: #e4dede80;
--seventh-color: #e4dedec5;
--font: "Orbitron";
--first-shadow: 6px 6px 12px #220f00, -6px -6px 12px #2e1500;
--second-shadow: 6px 6px 12px #931d00, -6px -6px 12px #b12300;
--first-shadow-inset: inset 8px 8px 16px #c76a0c, inset -8px -8px 16px #ff8c10;
--second-shadow-inset: inset 6px 6px 12px #931d00,
inset -6px -6px 12px #b12300;
--first-shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.6), -1px -1px 3px #fff;
--second-shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.3), -1px -1px 1.5px #fff;
}
*,
*:before,
*:after {
box-sizing: inherit;
text-align: center;
font-family: var(--font), sans-serif, monospace;
font-size: 30px;
font-weight: normal;
color: var(--first-color);
-webkit-text-stroke: 2px var(--third-color);
}
body {
background-color: var(--fourth-color);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
min-height: 100vh;
}
main {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0 auto;
}
img {
align-items: center;
width: 90vw;
height: 60vh;
margin: -20px 0px;
margin-top: -150px;
}
.card {
width: 450px;
height: 450px;
perspective: 450px;
text-align: center;
border-radius: 5px;
margin-top: -100px;
}
.card__content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 2s;
}
.card__content.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
border-radius: 10px;
}
.card__front {
padding: 20px 5px;
box-shadow: var(--first-shadow);
}
h2 {
font-size: 45px;
font-weight: normal;
}
.enter__word {
margin-top: 25px;
}
.word__input {
padding: 10px;
align-items: center;
border: 1px solid var(--third-color);
outline: none;
width: 300px;
height: 50px;
-webkit-text-stroke: 1px var(--third-color);
background: var(--fourth-color);
border-radius: 10px;
}
.card__back {
transform: rotateY(180deg);
display: none;
padding: 20px 5px;
}
.card__back.display {
display: block;
}
p {
font-size: 2em;
font-weight: 700;
text-align: center;
margin-top: -50px;
}
button {
margin: 5px;
padding: 10px;
width: 90px;
height: 45px;
outline: 0;
border: 1px solid var(--third-color);
background: transparent;
cursor: pointer;
font-size: 25px;
-webkit-text-stroke: 1.2px var(--third-color);
border-radius: 5px 10px;
position: absolute;
bottom: 0px;
right: 0px;
}
.start__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.start__button:active {
box-shadow: var(--first-shadow-inset);
}
.back__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.back__button:active {
box-shadow: var(--first-shadow-inset);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ROTATOR</title>
<link
href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<main>
<div class="title">
<h1 class="logo">
<img src="https://raw.githubusercontent.com/Avixph/Palindrome/fbca45350e2be55f7db82f2b64a0dad94dfe7d16/images/rotator_logo.svg" />
</h1>
</div>
<div>
<div class="card">
<div class="card__content">
<div id="front" class="card__face card__front">
<h2>Is</h2>
<form class="enter__word">
<input id="form__input" class="word__input" type="text" placeholder="Enter Word" required="required" />
<h2>a Palindrome?</h2>
<button id="form__button" class="button start__button" type="submit">
Check
</button>
</form>
</div>
<div id="back" class="card__face card__back">
<p class="back__result">Yes, _____ is a Palindrome.</p>
<button id="back__button" class="button back__button">
Reset
</button>
</div>
</div>
</div>
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>
You very very close to getting it right, you just had some issues that should be catched by an IDE.
Typo: toLowerCase instead of toLowercase.
You were not using return inside the function clean. If you don't do that, the value will never be passed to the outer environment.
Typo: cleanInput instead of CleanInput.
querySelectorAll is used when you want to grab many items. You just wanted one.
You were adding changing the innerHTML in a wrong place, as a second parameter of the classList.add method.
But don't fret over these issues, you did a good job!
{
const form = document.querySelector("form");
const input = document.querySelector(".word__input");
const cardContent = document.querySelector(".card__content");
const cardBack = document.querySelector(".card__back");
const resultBack = document.querySelector(".back__result");
const backButton = document.querySelector(".back__button");
function clean(input) {
return input.toLowerCase().replace(/[\W]/g, "");
}
function isPalindrome(event) {
event.preventDefault();
const cleanInput = clean(input.value);
// const cleanInput = input.toLowerCase().replace(/[\W_]/g, "");
// const reverseInput = cleanInput.split("");
const reverseInput = cleanInput.split("").reverse().join("");
// for (let i = 0; i < reverseInput.length; i++) {
// // const element = array[index];
// if
// }
if (reverseInput === cleanInput) {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add("display");
resultBack.innerHTML = `Yes ${cleanInput} is a Palindrome!`;
// resultBack.innerHTML = `Yes ${CleanInput} is a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `Yes ${CleanInput} is a Palindrome!`;
} else {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add("display");
resultBack.innerHTML = `No sorry, ${cleanInput} is not a Palindrome!`;
// resultBack.innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
}
cardFlip();
form.reset();
}
function cardFlip() {
cardContent.classList.toggle("is-flipped");
}
// function cardFlipBack() {
// // Remove back of the card 2 seconds after flipping.
// setTimeout(function () {
// cardBack.classList.remove("display");
// }, 2000);
// cardFlip();
// }
form.addEventListener("submit", isPalindrome);
backButton.addEventListener("click", cardFlip);
// backButton.forEach(function (button) {
// Button.addEventListener("click", cardFlip);
// });
}
:root {
--first-color: #fe9813;
--second-color: #e77b0e;
--third-color: #a22000;
--fourth-color: #281200;
--fith-color: #281200db;
--sixth-color: #e4dede80;
--seventh-color: #e4dedec5;
--font: "Orbitron";
--first-shadow: 6px 6px 12px #220f00, -6px -6px 12px #2e1500;
--second-shadow: 6px 6px 12px #931d00, -6px -6px 12px #b12300;
--first-shadow-inset: inset 8px 8px 16px #c76a0c, inset -8px -8px 16px #ff8c10;
--second-shadow-inset: inset 6px 6px 12px #931d00,
inset -6px -6px 12px #b12300;
--first-shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.6), -1px -1px 3px #fff;
--second-shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.3), -1px -1px 1.5px #fff;
}
*,
*:before,
*:after {
box-sizing: inherit;
text-align: center;
font-family: var(--font), sans-serif, monospace;
font-size: 30px;
font-weight: normal;
color: var(--first-color);
-webkit-text-stroke: 2px var(--third-color);
}
body {
background-color: var(--fourth-color);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
min-height: 100vh;
}
main {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0 auto;
}
img {
align-items: center;
width: 90vw;
height: 60vh;
margin: -20px 0px;
margin-top: -150px;
}
.card {
width: 450px;
height: 450px;
perspective: 450px;
text-align: center;
border-radius: 5px;
margin-top: -100px;
}
.card__content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 2s;
}
.card__content.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
border-radius: 10px;
}
.card__front {
padding: 20px 5px;
box-shadow: var(--first-shadow);
}
h2 {
font-size: 45px;
font-weight: normal;
}
.enter__word {
margin-top: 25px;
}
.word__input {
padding: 10px;
align-items: center;
border: 1px solid var(--third-color);
outline: none;
width: 300px;
height: 50px;
-webkit-text-stroke: 1px var(--third-color);
background: var(--fourth-color);
border-radius: 10px;
}
.card__back {
transform: rotateY(180deg);
display: none;
padding: 20px 5px;
}
.card__back.display {
display: block;
}
p {
font-size: 2em;
font-weight: 700;
text-align: center;
margin-top: -50px;
}
button {
margin: 5px;
padding: 10px;
width: 90px;
height: 45px;
outline: 0;
border: 1px solid var(--third-color);
background: transparent;
cursor: pointer;
font-size: 25px;
-webkit-text-stroke: 1.2px var(--third-color);
border-radius: 5px 10px;
position: absolute;
bottom: 0px;
right: 0px;
}
.start__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.start__button:active {
box-shadow: var(--first-shadow-inset);
}
.back__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.back__button:active {
box-shadow: var(--first-shadow-inset);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ROTATOR</title>
<link
href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<main>
<div class="title">
<h1 class="logo">
<img src="https://raw.githubusercontent.com/Avixph/Palindrome/fbca45350e2be55f7db82f2b64a0dad94dfe7d16/images/rotator_logo.svg" />
</h1>
</div>
<div>
<div class="card">
<div class="card__content">
<div id="front" class="card__face card__front">
<h2>Is</h2>
<form class="enter__word">
<input id="form__input" class="word__input" type="text" placeholder="Enter Word" required="required" />
<h2>a Palindrome?</h2>
<button id="form__button" class="button start__button" type="submit">
Check
</button>
</form>
</div>
<div id="back" class="card__face card__back">
<p class="back__result">Yes, _____ is a Palindrome.</p>
<button id="back__button" class="button back__button">
Reset
</button>
</div>
</div>
</div>
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>
I am creating the array clickedBoxesArray and passing class names to it on each click. I am then comparing those class names. When the class name of the element I've just clicked matches the class name of the Item I have clicked previously, I then want to add classes to those elements.
When the values of the object at clickedBoxesArray[clickedBoxesCounter] is the same as clickedBoxesArray[prevClickedBoxCounter], the if statement does not trigger. But if the value at those two positions is Undefined, the if statement evaluates the two values as equal and changes classes as desired. Why will the statement work if the values are `undefined but not if the values are identical lists of classes?
JS/JQuery:
$(document).ready(function(){
"use strict";
//this function populates the game body with a user selected # of cards
$(".submit").on("click", function(){
var boxAmt = 2 * Math.round(parseInt($(".boxNum").val())/2);
for (var b = 1; b <= boxAmt; b++){
$(".game-body").append("<span class='card'><i class='fa fa-heart fa-4x'></i></span>");
// $(".game-body").append("<span class='card'><i class='fa " + iconChoices[Math.floor(Math.random()*(200-0+1))+0] + " fa-4x'></i></span>");
};
if(boxAmt%5 === 0){
$(".game-body").css({marginLeft : "20%", marginRight : "20%"});
}//closes %5 if/else
else if(boxAmt%4 === 0){
$(".game-body").css({marginLeft : "28%", marginRight : "20%"});
}
});
//this function flips cards
$(".game-body").on("click", ".card", function(){
$(this).addClass("fliparoo");
$(this.children).addClass("game-icon");
});
//this function counts clicks and matches cards
var count = 0;
var clickedBoxesArray = []
$(".game-body").click(function(){
count+=1;
function logClicksCurrent(input){
clickedBoxesArray.push(input);
}
logClicksCurrent($(".game-body").find(".fliparoo").children()[count -1]);
var clickedBoxesCounter = clickedBoxesArray.length-1;
var prevClickedBoxCounter = clickedBoxesArray.length-2
console.log(clickedBoxesArray[clickedBoxesCounter]);
console.log(clickedBoxesArray[prevClickedBoxCounter]);
console.log(clickedBoxesArray)
if(count%2 === 0 && clickedBoxesArray[clickedBoxesCounter] === clickedBoxesArray[prevClickedBoxCounter]){
$(".game-body").find(".fliparoo").addClass("match-card");
$(".game-body").find(".fliparoo").addClass("match-icon");
}
});
HTML:
<!DOCTYPE html>
<html>
<head>
<title>MEMORY | easy mode</title>
<link href="./assets/css/reset.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">
<link href="./assets/css/animations.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<audio src="./assets/audio/got-theme.mp3"></audio>
<div id="entrance-animation" class="fadeIn">
<header>
<div class="header">
<div class="memory-name">
<span>Mem</span><i class="fa fa-lightbulb-o"></i> <span>ry</p>
</div>
</div>
<!-- class="heart-row">
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-heart-o"></i>
</ul> -->
<span class="timer"></span>
</header>
<div class="enter-boxes">HOW MANY BOXES DO YOU WANT?</div>
<input type="text" value="" class="boxNum">
<input class="submit" type="submit" value="gimme boxes">
<section class="game-body group">
</section>
</main>
<footer>
<nav>
<div class="return-to-menu">Back to menu</div>
</nav>
</footer>
</div>
<script src="./assets/js/scripts.js"></script>
</body>
</html>
CSS:
/*********************************************************
element and cross-page styling
**********************************************************/
*{
box-sizing: border-box;
}
body {
background: blue;
font-family: 'Orbitron', sans-serif;
color: white
}
a {
text-decoration: none;
color: white;
}
.memory-name {
text-align: justify;
font-family: 'Orbitron', sans-serif;
color: white;
font-size: 4em;
}
/*********************************************************
new-game page styling
**********************************************************/
.choice-menu {
display: inline-block;
margin: 10% 0 0 40%;
}
.new-game-text {
display: inline-block;
margin: 0 0 0 40px;
padding: 40px 0 0 0;
text-align: center;
font-size: 2em;
}
.easy-mode-box {
text-align: center;
font-size: 2em;
border: 2px solid white;
margin: 50px 0 0 20px;
padding: 10px 0;
background: blue;
transform: perspective(200px) rotateY(-15deg)
}
.hard-mode-box {
text-align: center;
font-size: 2em;
border: 2px solid white;
margin: 20px 0 0 20px;
padding: 10px 0;
background: blue;
transform: perspective(200px) rotateY(15deg)
/*add transform here*/
}
.easy-mode-box:hover {
-webkit-transition-property: background;
background: paleturquoise;
}
.hard-mode-box:hover {
-webkit-transition-property: background;
background: turquoise;
}
/*********************************************************
easy mode page styling (index.html)
**********************************************************/
/****header****/
.easy-mode-header {
display: block;
margin: 0 0 0 40%;
}
.heart-row {
display: inline-block;
margin: 0 0 0 16%;
}
.timer {
float: right;
margin: 0 16% 0 0;
}
/****game body****/
.game-body {
margin: 5% 15%;
position: relative;
/*margin: auto;*/
}
.game-body span {
position: relative;
float: left;
overflow: hidden;
}
.card {
width: 10em;
height: 10em;
background: steelblue;
display: block;
transition: background 1s, -webkit-transform 1s;
border-radius: .4em;
border: 1px solid darkblue;
margin: 3px;
color: rgba(255,255,255,0);
text-align: center;
padding-top: 5%;
}
.card:hover {
box-shadow: 2px 2px 2px 2px darkblue;
}
/****click transitions****/
.fliparoo {
background: powderblue;
-webkit-transform: rotateY(180deg);
}
.game-icon {
color:rgba(255,255,255,1);
transition-delay: .5s;
}
.match-card{
background: limegreen;
}
.match-icon{
color:rgba(200,200,200,1);
}
/*********************************************************
footer
**********************************************************/
.return-to-menu {
display: inline-block;
text-align: center;
font-size: 2em;
/*border: 2px solid white;*/
margin: 50px 0 20px 42%;
padding: 10px 10px 5px 10px;
background: blue;
border-radius: .3em;
}
.enter-boxes {
display: block;
font-size: 1em;
/*border: 2px solid white;*/
background: blue;
border-radius: .3em;
}
.return-to-menu:hover {
-webkit-transition-property: background;
background: cornflowerblue;
box-shadow: 2px 2px 2px 2px steelblue;
}
/*********************************************************
clearfix (experimental-prolly not relevant)
**********************************************************/
.group:after {
content: "";
display: table;
clear: both;
}
/*********************************************************
media queries
**********************************************************/
#media (max-width: 1420px) {
.game-body{
width: 2000px;
}
}
#media (min-width: 1620px) {
.margin-fix {
margin: 2% 0 0 15%;
}
}
#media (min-width: 1620px) {
.margin-fix-2 {
margin: 2% 0 0 23%;
}
}
I am using the dhtmlmodal window of dynamic drive
(http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/)
please help me out.. i spent around three days in a row just to get this done. I even tried colorbox plugin and it also kept messing up.
thanks in advance
i am trying to load my form into it which have a specified set of styling.
actually when i load it using "iframe" or "ajax" the form loads into modal but it is not as per the desired width and height. and even the form content looks messy.
here is the html for form
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<title>Login and Registration Form with HTML5 and CSS3</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body bgcolor="red">
<div class="wrapper">
<div class="login">
<table>
<tr>
<td>
<form action="mysuperscript.php" autocomplete="on">
<h1>Log in</h1>
<p>
<label>Username</label>
<br>
<input id="username" name="username" required="required" type="text" Username"
/>
</p>
<p>
<label>Your password</label>
<br>
<input id="password" name="password" required="required" type="password"
/>
</p>
<p class="signin button">
<input type="submit" value="Login" />
</p>
<p class="change_link">
Not a member yet? Join us
</p>
</form>
</td>
<td>
<section class="logformside-container">
<h1>Log in with</h1>
<div>
<span class="button">
<a href="#">
<img src="images/facebook.png" alt="">Login with facebook</a>
</span>
<br>
<span class="button">
<a href="#">
<img src="images/twitter_standing.png" alt="">Login with twitter</a>
</span>
<br>
<span class="button">
<a href="#">
<img src="images/mail.png" alt="">Login with gmail</a>
</span>
</div>
</section>
</td>
</tr></table>
</div></div></body></html>
here is its styling...
.wrapper {
width:680px;
}
/**** Styling the form elements **/
/**** general text styling ****/
.wrapper a {
color: rgb(95, 155, 198);
text-decoration: none;}
.wrapper h1 {
font-size: 24px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
font-weight: bold;
text-align: center;
}
.wrapper h4 {
font-size: 20px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
font-weight: bold;
text-align: center;}
/** For the moment only webkit supports the background-clip:text; */
.wrapper h1,
.wrapper h4 {
background: -webkit-repeating-linear-gradient(-45deg,
rgb(18, 83, 93) ,
rgb(18, 83, 93) 20px,
rgb(64, 111, 118) 20px,
rgb(64, 111, 118) 40px,
rgb(18, 83, 93) 40px);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder {
color: rgb(190, 188, 188);
font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: rgb(190, 188, 188);
font-style: italic;
}
input {
outline: focus;
}
/* all the input except submit and checkbox */
.wrapper input:not([type="checkbox"]) {
width: 80%;
margin-top: 4px;
padding: 10px 5px 10px;
border: 1px solid #c7d0d2;
border-radius: 2px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
outline: none;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
.wrapper input:not([type="checkbox"]):active,
.wrapper input:not([type="checkbox"]):focus {
border: 1px solid #a8c9e4;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
/*styling both submit buttons */
.wrapper p.button input {
width: 80px;
cursor: pointer;
padding: 8px 5px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef;
margin-left: 45px;
}
.wrapper p.button input:hover
.wrapper p.button input:active,
.wrapper p.button input:focus {
position: relative;
top: 1px;
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}
p.signin.button {
text-align: right;
margin: 5px 0;
}
.login p.change_link a {
display: inline-block;
font-weight: bold;
background: rgb(247, 248, 241);
padding: 2px 6px;
color: rgb(29, 162, 193);
margin-left: 10px;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid rgb(203, 213, 214);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.login p.change_link a:hover {
color: rgb(57, 191, 215);
background: rgb(247, 247, 247);
border: 1px solid rgb(74, 179, 198);
}
.login p.change_link a:active {
position: relative;
}
/** Styling both forms **/
.login {
position: absolute;
top: 0;
padding: 0 10px 60px 10px;
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189,0.8);
-webkit-box-shadow: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.login table,.register table {
width: 100%;
}
.login td,.register td {
width: 50%;
}
section.logformside-container {
margin-left: 20px;
margin-top: 27px;
border-left: 2px solid rgb(219, 229, 232);
height: 280px;
}
section.logformside-container div {
margin-left:50px;
}
section.regformside-container {
margin-top: -106px;
border-left: 2px solid rgb(219, 229, 232);
height: 560px;
}
section.regformside-container div {
margin-left: 80px;
}
.reg-benefits {
margin-top: 100px;
}
.button a {
font-family: arial, sans-serif;
font-size: 13px;
text-shadow: 1px 1px 0 white;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
padding: 6px 12px;
text-decoration: none;
color: #333333;
}
.button a:hover {
background: #ffffff;
-moz-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
}
.button a:active {
background: #dfdfdf;}
.button a > img {
padding-right: 8px;
position: relative;
}
this is the js for modal window i downloaded,
var dhtmlmodal={
veilstack: 0,
open:function(t, contenttype, contentsource, title, attr, recalonload){
var d=dhtmlwindow //reference dhtmlwindow object
this.interVeil=document.getElementById("interVeil") //Reference "veil" div
this.veilstack++ //var to keep track of how many modal windows are open right now
this.loadveil()
if (recalonload=="recal" && d.scroll_top==0)
d.addEvent(window, function(){dhtmlmodal.adjustveil()}, "load")
var t=d.open(t, contenttype, contentsource, title, attr, recalonload)
t.controls.firstChild.style.display="none" //Disable "minimize" button
t.controls.onclick=function(){dhtmlmodal.close(this._parent, true)}
t.show=function(){dhtmlmodal.show(this)}
t.hide=function(){dhtmlmodal.close(this)}
return t
},
loadveil:function(){
var d=dhtmlwindow
d.getviewpoint()
this.docheightcomplete=
(d.standardbody.offsetHeight>d.standardbody.scrollHeight)?
d.standardbody.offsetHeight : d.standardbody.scrollHeight
this.interVeil.style.width=d.docwidth+"px" //set up veil over page
this.interVeil.style.height=this.docheightcomplete+"px" //set up veil over page
this.interVeil.style.left=0 //Position veil over page
this.interVeil.style.top=0 //Position veil over page
this.interVeil.style.visibility="visible" //Show veil over page
this.interVeil.style.display="block" //Show veil over page
},
adjustveil:function(){ //function to adjust veil when window is resized
if (this.interVeil && this.interVeil.style.display=="block")
this.loadveil() //readjust veil},
closeveil:function(){
this.veilstack--
if (this.veilstack==0)
this.interVeil.style.display="none"
},
close:function(t, forceclose){ //DHTML modal close function
t.contentDoc=
(t.contentarea.datatype=="iframe")? window.frames["_iframe-"+t.id].document:
t.contentarea
if (typeof forceclose!="undefined")
t.onclose=function(){return true}
if (dhtmlwindow.close(t)) //if close() returns true
this.closeveil()
},
show:function(t){
dhtmlmodal.veilstack++
dhtmlmodal.loadveil()
dhtmlwindow.show(t)
}
} //END object declaration
document.write('<div id="interVeil"></div>')
dhtmlwindow.addEvent(window, function(){if (typeof dhtmlmodal!="undefined")
dhtmlmodal.adjustveil()}, "resize")
and here is its styling
.drag-handle{ /*Overwrite default drag handle bar background color with below*/
background-color: #03277C;
}
#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: black url(blackdot.gif);
width: 10px;
left: 0;
top: 0;
z-index: 5;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
opacity: 0.8;
}
the main page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="windowfiles/dhtmlwindow.js">
</script>
<body>
<!-- 3) DHTML Window Example 3: -->
<p>Play around with Window 3 (Ajax content)</p>
<script type="text/javascript">
function openmypage(){
ajaxwin=dhtmlwindow.open("ajaxbox", "ajax", "a.html","TITLE",
"width=680px,height=380px,center=1,left=300px,top=100px,resize=1,scrolling=0")
ajaxwin.onclose=function(){return window.confirm("Close window 3?")}
}
</script>
<ul>
<li><b>Create/ Open Window
</b> </li>
</ul>