Hey guys i get the error
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=loginApp&p1=Error%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381)
I dont know why but here is my files all in the same folder i think it has something to do with ngRoute not getting implemented correctly in login.html but not sure. You guys dont need to read the css as im preety sure they arent the spot of problem.Thanks for your help!
login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<!-- load Bootstrap and custom style.css -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="login.css">
<!--Google Font - Work Sans-->
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,300,700' rel='stylesheet' type='text/css'>
<!--Login-->
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="main.js"></script>
</head>
<body ng-app="loginApp" ng-controller = "loginController">
<div id="container_demo" >
<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 -->
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>
<div id="wrapper">
<div id="login" class="animate form">
<form autocomplete="on">
<h1>Log in</h1>
<p>
<label for="username" class="uname" data-icon="u" > Your email or username </label>
<input id="username" name="username" required="required" type="text" placeholder="myusername or mymail#mail.com"/>
</p>
<p>
<label for="password" class="youpasswd" data-icon="p"> Your password </label>
<input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />
</p>
<p class="keeplogin">
<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
<label for="loginkeeping">Keep me logged in</label>
</p>
<p class="login button">
<input type="submit" value="Login" />
</p>
<p class="change_link">
Not a member yet ?
Join us
</p>
</form>
</div>
<div id="register" class="animate form">
<form autocomplete="on">
<h1> Sign up </h1>
<p>
<label for="usernamesignup" class="uname" data-icon="u">Your username</label>
<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
</p>
<p>
<label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail#mail.com"/>
</p>
<p>
<label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
</p>
<p>
<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
</p>
<p class="signin button">
<input type="submit" value="Sign up"/>
</p>
<p class="change_link">
Already a member ?
Go and log in
</p>
</form>
</div>
</div>
</div>
</body>
</html>
login.css:
#subscribe,
#login{
position: absolute;
top: 0px;
width: 88%;
padding: 18px 6% 60px 6%;
margin: 0 0 35px 0;
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189,0.8);
box-shadow:
0pt 2px 5px rgba(105, 108, 109, 0.7),
0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
border-radius: 5px;
}
#login{
z-index: 22;
}
/**** general text styling ****/
#wrapper h1{
font-size: 48px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
font-weight: bold;
text-align: center;
padding-bottom: 30px;
}
/** For the moment only webkit supports the background-clip:text; */
#wrapper h1{
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;
}
#wrapper h1:after{
content:' ';
display:block;
width:100%;
height:2px;
margin-top:10px;
background:
linear-gradient(left,
rgba(147,184,189,0) 0%,
rgba(147,184,189,0.8) 20%,
rgba(147,184,189,1) 53%,
rgba(147,184,189,0.8) 79%,
rgba(147,184,189,0) 100%);
}
/**** 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: none;
}
/* all the input except submit and checkbox */
#wrapper input:not([type="checkbox"]){
width: 92%;
margin-top: 4px;
padding: 10px 5px 10px 32px;
border: 1px solid rgb(178, 178, 178);
box-sizing : content-box;
border-radius: 3px;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
border: 1px solid rgba(91, 90, 90, 0.7);
background: rgba(238, 236, 240, 0.2);
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
#font-face {
font-family: 'FontomasCustomRegular';
src: url('fonts/fontomas-webfont.eot');
src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/fontomas-webfont.woff') format('woff'),
url('fonts/fontomas-webfont.ttf') format('truetype'),
url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/** the magic icon trick ! **/
[data-icon]:after {
content: attr(data-icon);
font-family: 'FontomasCustomRegular';
color: rgb(106, 159, 171);
position: absolute;
left: 10px;
top: 35px;
width: 30px;
}
/*styling both submit buttons */
#wrapper p.button input{
width: 30%;
cursor: pointer;
background: rgb(61, 157, 179);
padding: 8px 5px;
font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
color: #fff;
font-size: 24px;
border: 1px solid rgb(28, 108, 122);
margin-bottom: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
box-shadow:
0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
transition: all 0.2s linear;
}
#wrapper p.button input:hover{
background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
background: rgb(40, 137, 154);
position: relative;
top: 1px;
border: 1px solid rgb(12, 76, 87);
box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
text-align: right;
margin: 5px 0;
}
/* styling the checkbox "keep me logged in"*/
.keeplogin{
margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
display: inline-block;
font-size: 12px;
font-style: italic;
}
.keeplogin input#loginkeeping{
margin-right: 5px;
}
.keeplogin label{
width: 80%;
}
p.change_link{
position: absolute;
color: rgb(127, 124, 124);
left: 0px;
height: 20px;
width: 440px;
padding: 17px 30px 20px 30px;
font-size: 16px ;
text-align: right;
border-top: 1px solid rgb(219, 229, 232);
border-radius: 0 0 5px 5px;
background: rgb(225, 234, 235);
background: repeating-linear-gradient(-45deg,
rgb(247, 247, 247) ,
rgb(247, 247, 247) 15px,
rgb(225, 234, 235) 15px,
rgb(225, 234, 235) 30px,
rgb(247, 247, 247) 30px
);
}
#wrapper 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;
border-radius: 4px;
border: 1px solid rgb(203, 213, 214);
transition: all 0.4s linear;
}
#wrapper p.change_link a:hover {
color: rgb(57, 191, 215);
background: rgb(247, 247, 247);
border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{
position: relative;
top: 1px;
}
#register{
z-index: 21;
opacity: 0;
}#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
z-index: 22;
animation-name: fadeInLeft;
animation-delay: .1s;
}.animate{
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
animation-name: fadeOutLeftBig;
}
#keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<!-- load Bootstrap and custom style.css -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" type="text/css" href="main.css">
<!--Login-->
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="main.js"></script>
</head>
<body ng-app="app" ng-controller = "ToDoController">
<h1 style = "text-align:center;" id = "ToDoHeader">Todo List</h1>
<input type="text" class="form-control" id="text" placeholder= "What Needs To Be Done?" ng-model = "textValue">
<a class="button-0" ng-click = "submit()">Submit</a>
<ul id = "tasks">
<li ng-repeat = "messages in toDo">{{messages.textValue}}</div>
</li>
</ul>
</body>
</html>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css"> -->
main.css:
#ToDoHeader{
font-family : Impact;
text-shadow: 2px 2px 5px blue;
text-shadow: -1px -1px 1px #000, 1px 1px 1px #ccc;
text-shadow: 0 1px 0 #999999, 0 2px 0 #888888,
0 3px 0 #777777, 0 4px 0 #666666,
0 5px 0 #555555, 0 6px 0 #444444,
0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4),
0 9px 10px rgba(0, 0, 0, 0.2);
/* 16 * 0.0625 = 1px */
letter-spacing: 0.0625em;
font-size:100px;
}
#text{
width:500px;
position:relative;
left:430px;
top:40px;
height:60px;
}
:placeholder-shown {
font-family: "Times New Roman", Georgia, Serif;
color:white;
font-size:25px;
opacity: 0.4;
font-style: italic;
font-weight:bold;
}
.button-0 {
position: relative;
bottom:20px;
left:920px;
height:60px;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Helvetica', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
/* Animation */
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.button-0:hover,
.button-0:focus {
text-decoration: none;
color: #fff;
}
.button-0:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
#tasks{
position: relative;
top:100px;
text-align: left;
right:50px;
list-style-type: none;
font-family : Impact;
font-size:40px;
text-align: center;
}
main.js:
var app = angular.module('app', ["firebase"])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.js',
controller: 'loginController',
})
.when('/ToDo', {
template: 'Loged In!'
})
.otherwise({
redirectTo: '/login'
});
}]);
app.controller("ToDoController", ["$scope", "$firebaseArray",
function($scope, $firebaseArray) {
var ref = new Firebase("https://todolistt.firebaseio.com/");
$scope.toDo = $firebaseArray(ref);
$scope.submit = function(){
if(!($scope.textvalue == ""))
ref.push({
'textValue' :$scope.textValue
})
}
}
]);
/*
app.config(function($routeProvider){
$routeProvider.
when('/About', {
templateUrl: 'About.html'
})
.otherwise({d
redirectTo:'/'
})
})*/
EDIT Problem
Here is my Plunk. The problem here is two things, first for some reason i cant start the plunk with login.html and second i cant use app.config for some reason. When ever i take away app.config the todo page becomes good for some reason. Thankyou
Your app name in js and view are different, change
from
<body ng-app="loginApp" ng-controller = "loginController">
to
<body ng-app="app" ng-controller = "loginController">
Well not only do you have to do what was previously mentioned by Goldenowner and Sajeetharan. You actually need to include the ngroute module to your project.
<script src="https://code.angularjs.org/1.3.15/angular-route.min.js"></script>
https://plnkr.co/edit/e4PsZ0WUpwjY4HH4FFzO
The link in your error message tells you this.
I changed the AngularJS reference, added JQuery (because Bootstraps needs JQuery), added Angular-route and added ngRoute as I said earlier.
Working Plunker.
These are the tags I added (in an important order else it doesn't work):
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
And this in your main.js:
var app = angular.module('app', ["firebase", "ngRoute"]);
Related
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);
}
I am building a Netflix Clone just as a personal project.
On the Netflix Profiles section on hover, the border around the image and the user's name both get highlighted.
When I attempt with my code, on hover, the border and text change separately. I tried multiple ways for a little over hour without success. I know I'm missing something simplistic, and probably overthinking but I'm not sure how to approach this whether I create a JavaScript function perhaps, or within the CSS. (I am struggling with adding JS to my projects which is why I am building this clone!)?
Tips or hints would be awesome as I am still trying to problem solve it
body, html {
height: 100%;
margin: 0px;
margin-top: -11px;
margin-left: 22.5px;
padding: 0px;
color: white;
font-family: 'Roboto', sans-serif;
background-color: rgb(17, 17, 17);
}
.container {
text-align: center;
position: relative;
top: 10%;
}
/*
----------------
PROFILES SECTION
----------------
*/
.profiles {
margin: 20px;
padding: 20px;
display: flex;
justify-content: center;
}
.prfImg {
margin: -6px;
padding: 12px;
}
.prfImg > img {
margin: 2px;
padding: 2px;
border: 0.5px solid rgba(255, 255, 255, 0.061);
border-radius: 3px;
}
.prfImg > img:hover {
color: rgba(255, 255, 255, 0.787);
border: 3px solid rgba(255, 255, 255, 0.787);
border-radius: 3px;
}
#user {
font-size: 25px;
color: grey;
}
/*
----------------
BUTTON
----------------
*/
.btn {
margin: 30px;
padding: 30px;
text-align: center;
}
button {
margin-top: 30px;
font-size: 22px;
color: grey;
padding: 10px;
background-color: transparent;
border: 1.5px solid grey;
}
button:hover {
color: rgba(255, 255, 255, 0.863);
border: 1.5px solid rgba(255, 255, 255, 0.863);
}
<!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">
<link rel="stylesheet" href="profiles.css">
<!-- google font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<title>NETFLIX - Profiles</title>
</head>
<body>
<header>
<img src="Img_d.profiles/netflix_logo.png" alt="netflix logo TM" width="99.2px">
</header>
<div class="container">
<div class="header-text">
<h1 style="font-size: 50px;">Who's watching?</h1>
</div>
<div class="profiles">
<div class="prfImg">
<img src="Img_d.profiles/profile_one.png" alt="Profile One" width="75%" label="hello">
<p class="prfImg" id="user">A name</p>
</div>
<div class="prfImg">
<img src="Img_d.profiles/profile_two.png" alt="Profile Two" width="75%">
<p class="prfImg" id="user">A name</p>
</div>
<div class="prfImg">
<img src="Img_d.profiles/profile_three.png" alt="Profile Three" width="75%">
<p class="prfImg" id="user">A name</p>
</div>
<div class="prfImg">
<img src="Img_d.profiles/profile_four.png" alt="Profile Foud" width="75%">
<p class="prfImg" id="user">A name</p>
</div>
</div>
<!-- button class -->
</div>
<div class="btn">
<button>Manage Profiles</button>
</div>
</body>
</html>
on my own!*
You can put the hover event on the parent div.
Change this:
.prfImg > img:hover {
color: rgba(255, 255, 255, 0.787);
border: 3px solid rgba(255, 255, 255, 0.787);
border-radius: 3px;
}
to this
.prfImg:hover {
color: rgba(255, 255, 255, 0.787);
border: 3px solid rgba(255, 255, 255, 0.787);
border-radius: 3px;
}
I am building a hybrid app using ionic frame work. I have a Json array and it is appears as a list view when its called in a html page. I want the to display different gui forms for each item in the list. but my problem is when I add the form to the html I get the same form for each item in the list.
This is my array code...
var chats = [{
id: 0,
name: 'jjhyyyt',
lastText: 'http://www.bovingtonprimary.dorset.sch.uk/wp-content/uploads/2015/03/Diary-Icon.png',
face: 'http://www.chhattisgarh.bsnl.co.in/assets/img/cc.png'
}, {
id: 1,
name: 'Evesdfsdfnts',
lastText: 'asde ',
face: 'http://gandf.us/images/events-icon.png'
}]
This is my html file..
<ion-view view-title="{{chat.name}}">
<ion-content class="padding">
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px"/>
{{chat.id}}
<p>
<!--<head>
<script type="text/javascript" src="http://form.jotform.me/jsform/52312831743450"></script>
</head>-->
<head>
<meta charset="UTF-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/pepper-grinder/jquery-ui.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/jquery.ui.core.js"></script>
<script type="text/javascript" src="lib/jquery.ui.widget.js"></script>
<script type="text/javascript">
$(function()
{
$("form").form();
});
</script>
<style>
{
font-size:12px;
font-family:verdana;
}
h1
{
font-size:20px;
padding:0px 20px 20px;
margin:0px;
text-align:center;
}
body { background-color:#F9F9F9; }
input,textarea { padding:7px; font-size:14px !important; width:250px; }
p > label:first-child
{
display: inline-block;
font-weight: 700;
margin-bottom: 5px;
padding-right: 35px;
text-align: right;
width: 135px;
}
ul li { padding:5px; }
span#labeltext { margin: 3px 0px 0px 3px; }
.ui-icon-triangle-1-s { background-position: -64px -13px; }
#submitbutton { width:auto; }
label.ui-state-default { display:inline-block !important; }
ul { left: 44.5%; top: 49.5%; }
#container
{
margin:0px auto;
width:500px;
background-color:#eee;
padding:20px;
border-radius: 5px;
clear: both;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>
</head>
<body>
<div id="container">
<form action="" method="post" id="customtheme">
<p>
<label for="RequestType">Request Type</label>
<select name="Request" id="request">
<option value="">--select--</option>
<option value="carPass">Car Pass Ticket</option>
<option value="seminarPass">Seminar Pass</option>
<option value="identyCard">Identy Card</option>
</select>
</p>
<p>
<label for="description" style="vertical-align: top;">Description</label>
<textarea name="description" id="description" cols="10" rows="5"></textarea>
</p>
<p>
<input type="button" name="submit" style="align:center" value="Submit" id="submitbutton" onClick="alert('Submitted.');"/>
</p>
</form>
</div>
</body>
</p>
</ion-content>
</ion-view>
I able to get the id of each value item in the list. if can put an if statement for the ID i will be able to do it but i am unable to put an if statement in this... please help me....
I've tried a lot of jQuery to create an image slideshow with previous/next buttons and auto slide function. However, there is a constant error. In my webpage, the slideshow is just black screen with no pictures loaded. The example i'm following is this website: http://designmodo.com/image-slider-jquery-css3/
this is my codes:
<html lang="es">
<head> <title>ACE ARCHERY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="Stylesheet.css">
<link rel="stylesheet" href="nivo-slider.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.nivo.slider.pack.js"></script>
<script>
$(window).load(function() {
$('#slider').nivoSlider({
directionNavHide: false,
captionOpacity: 1,
prevText: '<',
nextText: '>'
});
});
</script>
<!-- <script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type ="text/javascript">
$(document).ready(function slider() {
$("#1").show("fade", 500);
$("#1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function () {
$(".slider #" + count).show("slide", {direction: "right"}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction: 'left'}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
}
);
</script>-->
</head>
<!-- <body onload="Slider();" >-->
<body>
<div class="wrapper">
<div class="slider">
<div class="slider-wrapper futurico-theme">
<div id="slider" class="nivoSlider">
<img src="Slide_image/one.jpg" alt="">
<img src="Slide_image/two.jpg" alt="">
<img src="Slide_image/three.jpg" alt="">
<img src="Slide_image/four.jpg" alt="">
<img src="Slide_image/five.jpg" alt="">
<img src="Slide_image/six.jpg" alt="">
</div>
</div>
<!-- <div class = "slider">
<img id="1" src="Slide_image/one.jpg" border = "0" alt = "One"/>
<img id="2" src="Slide_image/two.jpg" border = "0" alt = "Two"/>
<img id="3" src="Slide_image/three.jpg" border = "0" alt = "Three"/>
<img id="4" src="Slide_image/four.jpg" border = "0" alt = "Four"/>
<img id="5" src="Slide_image/five.jpg" border = "0" alt = "Five"/>
<img id="2" src="Slide_image/six.jpg" border = "0" alt = "Six"/>
</div>-->
</div>
And the CSS:
.futurico-theme.slider-wrapper {
position: relative;
width: 500px;
height: 250px;
margin: 0;
padding: 5px;
background: #141517;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.futurico-theme .nivoSlider {
position: relative;
width: 500px;
height: 250px;
}
.futurico-theme .nivoSlider img {
display: none;
position: absolute;
width: 500px;
height: 250px;
top: 0;
left: 0;
}
.futurico-theme .nivo-controlNav {
position: absolute;
bottom: -30px;
left: 105px;
}
.futurico-theme .nivo-controlNav a {
display: block;
float: left;
width: 16px;
height: 16px;
margin-right: 5px;
text-indent: -9999px;
background: #141517;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
}
.futurico-theme .nivo-controlNav a.active,
.futurico-theme .nivo-caption span {
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
-webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}
.futurico-theme .nivo-directionNav a {
display: block;
top: 60px;
font-family: 'Consolas', sans-serif;
font-size: 40px;
color: #141517;
text-shadow: 0px 1px 1px rgba(255,255,255, .05);
}
.futurico-theme a.nivo-prevNav { left: -40px; }
.futurico-theme a.nivo-nextNav { right: -40px; }
.slider-wrapper {
width: 80%;
margin: 100px auto;
}
Please cross check your nivo javascript and css path
<link rel="stylesheet" href="nivo-slider.css" media="screen">
<script src="jquery.nivo.slider.pack.js"></script>
You will get a black screen if the nivo javascript is not loaded.
The following is the working sample jsfiddle: http://jsfiddle.net/zeskysee/jjucqame/3/
To simulate the error you having, you may try to remove the external resources "jquery.nivo.slider.js" then you will see a black without the slideshow
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>