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 want to run two different functions on click of an element. If I click a button first time clickfunction1 should run and when I click the button second time clickfunction2 should run. My problem is when I click an element on alternate basis two different functions should run one by one, like on first click first function will run and on clicking second time the same element second function will run.
<!DOCTYPE html>
<html>
<head>
<title>Navigation Focus/Blur</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
.imageclick {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
margin-top: 10px;
text-align: center;
background-color: #f0f0f0;
padding: 20px 0;
}
a {
float: left;
padding: 15px 33px 15px 33px;
font-size: 10px;
margin: 1px 1px 1px 3px;
}
a:hover {
text-decoration: none;
color: #fff;
}
a {
background-color: #23527c;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.clickbox {
margin: 20px 0;
position: absolute;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
background-color: #9ecbf3;
display: none;
}
.icon-bar {
display: block;
width: 25px;
height: 2px;
background-color: #fff;
margin: 6px 0;
}
button {
background-color: black;
border: none;
padding: 5px 12px;
border-radius: 5px;
}
</style>
<script type="text/javascript">
function clickFunction1() {
document.getElementById("navigate").style.display = "block";
}
function clickFunction2() {
document.getElementById("navigate").style.display = "none";
}
</script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Navigation Focus/Blur</h2>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4 imageclick">
<button onclick="clickFunction1()" onclick="clickFunction2()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="clickbox" id="navigate">
Home
About
Serve
Webst
Graph
SeoD
CPhp
Wpres
PlC++
Pjava
Angjs
JavaS
PPyth
Photo
ILLust
CoraL
PHtml
Lcss3
Lbstrp
Jquery
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</section>
</body>
</html>
In this solution I create a new function clickFunction() with no number, to manage your two existing functions and I also declare a boolean flag which I toggle...
var Toggle=false;
function clickFunction(Toggle2){
if(Toggle2){clickFunction1();} else {clickFunction2();}
Toggle=!Toggle;
}
The basic HTML...
<button onclick="clickFunction(Toggle);"></button>
For what you want to achieve, there is no need of 2 functions. You can just read the current display and toggle the value.
function clickFunction() {
const element = document.getElementById("navigate");
const display = element.style.display || 'block' /* default style if inline display doesnt exist on load */;
element.style.display = display === 'block' ? 'none' : 'block';
}
You can programmatically register click event on element you want, and then unregister it to control what function will be call when user clicking it.
For your specific case, you should first register the clickFunction1 first, and inside it, you unregister itself and then register the clickFunction2
<script type="text/javascript">
var btn = document.querySelector('button') // Replace `button` with your selector
btn.addEventListener('click', clickFunction1)
function clickFunction1() {
document.getElementById('navigate').style.display = 'block'
// make clicking the button call other function
btn.removeEventListener('click', clickFunction1)
btn.addEventListener('click', clickFunction2)
}
function clickFunction2() {
document.getElementById('navigate').style.display = 'none'
}
</script>
You can have a function with a counter. When the click is odd(first click) the first function will be called else the second will be called
var count=0;
function decide()
{
count++;
if(count%2==1)
clickFunction1();
else
clickFunction2();
}
function clickFunction1() {
document.getElementById("navigate").style.display = "block";
}
function clickFunction2() {
document.getElementById("navigate").style.display = "none";
}
.imageclick {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-top: 10px;
text-align: center;
background-color: #f0f0f0;
padding: 20px 0;
}
a {
float: left;
padding: 15px 33px 15px 33px;
font-size: 10px;
margin: 1px 1px 1px 3px;
}
a:hover {
text-decoration: none;
color: #fff;
}
a {
background-color: #23527c;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.clickbox {
margin: 20px 0;
position: absolute;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #9ecbf3;
display: none;
}
.icon-bar {
display: block;
width: 25px;
height: 2px;
background-color: #fff;
margin: 6px 0;
}
button {
background-color: black;
border: none;
padding: 5px 12px;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Navigation Focus/Blur</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Navigation Focus/Blur</h2>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4 imageclick">
<button onclick="decide()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="clickbox" id="navigate">
Home
About
Serve
Webst
Graph
SeoD
CPhp
Wpres
PlC++
Pjava
Angjs
JavaS
PPyth
Photo
ILLust
CoraL
PHtml
Lcss3
Lbstrp
Jquery
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</section>
</body>
</html>
I am trying to write a plugin for to register a widget form for some special purpose in order to pay the due payments in CiviCRM but I can't get to work the cookies in the plugin code.As I can see that my cookies are placed before the plugin form html code but still I am getting header already sent error so I am wondering how to fix it?
So I will be grateful if anyone can please help me out with this issue.
Here is my full Plugin Code :
<?php
/*
Plugin Name: CiviCRM Contribution Later Payment
Plugin URI: http://www.stackoverflow.com/cv/nicefellow1234
Description: This plugin helps in paying due contribution payments through a web form by entering Contribution ID.
Author: Umair Shah Yousafzai
Version: 1.0
Author URI: http://www.huntedhunter.com/mycv/
*/
function my_plugin_activate()
{
// DO your activation task.
/* $post_id = wp_insert_post( array(
'post_status' => 'publish',
'post_type' => 'page',
'post_title' => 'Contribution Later Payment Page',
'post_content' => 'Pay Your Contribution Payment Now.'
) );
if ($post_id)
{
error_log("New Page Added.");
} */
}
register_activation_hook(__FILE__,"my_plugin_activate");
function cl_pay() {
if ($_POST) {
if ($_POST['cl_check_email']) {
$contact_email = $_POST["contact_email"];
global $wpdb;
$sql = $wpdb->prepare("SELECT * FROM civicrm_contact WHERE sort_name = %s", $contact_email);
$results = $wpdb->get_results($sql);
$count = count($results);
$contact_id = $results[0]->id;
if (!$count > 0 ) {
$sql = $wpdb->prepare("SELECT * FROM civicrm_email WHERE email = %s", $contact_email);
$results = $wpdb->get_results($sql);
$count = count($results);
$contact_id = $results[0]->contact_id;
}
}
if ($_POST['cl_check_phone']) {
$contact_phone = $_POST["contact_phone"];
global $wpdb;
$sql = $wpdb->prepare("SELECT * FROM civicrm_phone WHERE phone = %s", $contact_phone);
$results = $wpdb->get_results($sql);
$count = count($results);
$contact_id = $results[0]->contact_id;
}
if ($_POST['cl_check_full_name']) {
$first_name = $_POST["first_name"];
$last_name = $_POST["last_name"];
$full_name = $first_name." ".$last_name;
global $wpdb;
$sql = $wpdb->prepare("SELECT * FROM civicrm_contact WHERE display_name = %s", $full_name);
$results = $wpdb->get_results($sql);
$count = count($results);
$contact_id = $results[0]->id;
//echo "<pre>";
//print_r($results);
//echo "</pre>";
}
$sql = $wpdb->prepare("SELECT * FROM civicrm_contribution WHERE contact_id = %s", $contact_id);
$results = $wpdb->get_results($sql);
$count = count($results);
$amount = $results[0]->total_amount;
if ($count > 0) {
setcookie("display_check", "none", time()+5);
}
if (isset($amount)) { setcookie("display_amount", "block", time()+5); }
}
?>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600' 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://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#choice').change(function () {
if ( this.value === 'option_1' ) {
$("#option_1").show("slow");
$("#option_2").hide("slow");
$("#option_3").hide("slow");
}
else if ( this.value === 'option_2' ) {
$("#option_2").show("slow");
$("#option_1").hide("slow");
$("#option_3").hide("slow");
}
else if ( this.value === 'option_3' ) {
$("#option_3").show("slow");
$("#option_1").hide("slow");
$("#option_2").hide("slow");
} else if ( this.value === 'not_specified' ) {
$("#option_1").hide("slow");
$("#option_2").hide("slow");
$("#option_3").hide("slow");
}
});
});
</script>
<style>
html {
height: 100%;
/*Image only BG fallback*/
background: url('http://thecodeplayer.com/uploads/media/gs.png');
/*background = gradient + image pattern combo*/
background:
linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)),
url('http://thecodeplayer.com/uploads/media/gs.png');
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding:0;
margin:0;}
fieldset, img {border:0}
ol, ul, li {list-style:none}
:focus {outline:none}
body,
input,
textarea,
select {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #4c4c4c;
}
p {
font-size: 12px;
width: 150px;
display: inline-block;
margin-left: 18px;
}
h1.testboxh1 {
font-size: 32px;
font-weight: 300;
color: #4c4c4c;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
html{
background-color: #ffffff;
}
.testbox {
margin: 20px auto;
width: 455px;
-webkit-border-radius: 8px/7px;
-moz-border-radius: 8px/7px;
border-radius: 8px/7px;
background-color: #ebebeb;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
box-shadow: 1px 2px 5px rgba(0,0,0,.31);
border: solid 1px #cbc9c9;
}
input[type=radio] {
visibility: hidden;
}
form{
margin: 0 30px;
text-align:center;
}
label.radio {
cursor: pointer;
text-indent: 35px;
overflow: visible;
display: inline-block;
position: relative;
margin-bottom: 15px;
}
label.radio:before {
background: #3a57af;
content:'';
position: absolute;
top:2px;
left: 0;
width: 20px;
height: 20px;
border-radius: 100%;
}
label.radio:after {
opacity: 0;
content: '';
position: absolute;
width: 0.5em;
height: 0.30em;
background: transparent;
top: 7.5px;
left: 4.5px;
border: 3px solid #ffffff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type=radio]:checked + label:after {
opacity: 1;
}
hr{
color: #a9a9a9;
}
input[type=text],input[type=password],select {
text-align:center;
width: 200px;
height: 39px;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
margin-left: -5px;
margin-top: 13px;
padding-left: 10px;
}
input[type=password]{
margin-bottom: 25px;
}
#icon {
width: 30px;
height:20px;
background-color: #3a57af;
padding: 8px 0px 8px 15px;
margin-left: 15px;
margin-top: -10px;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
color: white;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 0px #cbc9c9;
}
.gender {
margin-left: 30px;
margin-bottom: 30px;
}
.accounttype{
margin-left: 8px;
margin-top: 20px;
}
input.button {
text-align:center;
font-size: 14px;
font-weight: 600;
color: white;
padding : 8px 30px 8px 30px;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3a57af;
-webkit-box-shadow: 0 3px rgba(58,87,175,.75);
-moz-box-shadow: 0 3px rgba(58,87,175,.75);
box-shadow: 0 3px rgba(58,87,175,.75);
transition: all 0.1s linear 0s;
}
input.button:hover {
top: 3px;
background-color:#2e458b;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
</style>
</br></br></br></br>
<div class="testbox">
<h1 class="testboxh1">Pay Due Contribution Pay</h1>
<div class="pay_check" style="display:<?php if (!isset($_COOKIE['display_check'])) {echo "block";} else {echo $_COOKIE['display_check']; }?>;">
<form action="" method="post" >
<hr>
<!---<div class="accounttype">
<input type="radio" value="None" id="radioOne" name="account" checked/>
<label for="radioOne" class="radio" chec>Personal</label>
<input type="radio" value="None" id="radioTwo" name="account" />
<label for="radioTwo" class="radio">Company</label>
</div> --->
<center><h3>::Search By::</h3></center>
<select name="choice" id="choice">
</br>
<option value="not_specified">Not Specified</option>
<option value="option_1">Contact Email</option>
<option value="option_2">Contact Phone</option>
<option value="option_3">Full Name</option>
</select>
<div id="option_1" style="display:none;">
<hr>
<center><h3 style="padding-top: 10px;">::Enter Contact Email::</h3></center>
<form action="" method="post" >
<input type="text" name="contact_email" placeholder="Contact Email" style="width:250px;"></br>
</br> <input type="submit" name="cl_check_email" class="button" value="Check">
</form>
</br><hr>
</div>
<div id="option_2" style="display:none;">
<hr>
<center><h3 style="padding-top: 10px;">::Enter Contact Phone No::</h3></center>
<form action="" method="post" >
<input type="text" name="contact_phone" placeholder="Contact Phone No" style="width:250px;"> </br>
</br> <input type="submit" name="cl_check_phone" class="button" value="Check">
</form>
</br><hr>
</div>
<div id="option_3" style="display:none;">
<hr>
<form action="" method="post" >
<center><h3 style="padding-top: 10px;">::Enter Full Name::</h3></center>
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="Last Name"></br>
</br> <input type="submit" name="cl_check_full_name" class="button" value="Check">
</form>
</br><hr>
</div>
</br>
<!-- <label id="icon" for="cl_id"><i class="fa fa-tag " style="padding-right: 13px;"></i></label>
<input type="text" name="cl_id" id="cl_id" placeholder="Contribution ID" required/></br> -->
</br></br>
</div>
<div class="cl_pay" style="display:<?php if (!isset($_COOKIE['display_amount'])) {echo "none";} else {echo $_COOKIE['display_amount']; }?>;">
<form action="" method="post" >
<hr>
<label id="icon" for="cl_pay" style="border-radius:4px;padding-right: 100px;padding-left: 100px;background-color:#422252;"><i class="fa fa-usd " style="">
<strong><?php echo $amount; ?></strong></i></label>
</br>
<hr> <input type="submit" name="cl_pay" class="button" value="Pay">
</br></br>
</form>
</div>
</div>
<?php
}
add_shortcode("cl-pay", "cl_pay");
function my_plugin_deactivate()
{
// DO your activation task.
error_log("My Plugin Got Deactivated.");
}
register_deactivation_hook(__FILE__,"my_plugin_deactivate");
?>
The Error which I am getting is :
Warning: Cannot modify header information - headers already sent by (output started at D:\xampp\htdocs\civicrm_development\wp-includes\class.wp-scripts.php:180) in D:\xampp\htdocs\civicrm_development\wp-content\plugins\civicrm_later_contribution_pay.php on line 97
Warning: Cannot modify header information - headers already sent by (output started at D:\xampp\htdocs\civicrm_development\wp-includes\class.wp-scripts.php:180) in D:\xampp\htdocs\civicrm_development\wp-content\plugins\civicrm_later_contribution_pay.php on line 100
Besides on Line 97 & 100 I have following code :
97 :
if ($count > 0) {
setcookie("display_check", "none", time()+5);
}
100 :
if (isset($amount)) { setcookie("display_amount", "block", time()+5); }
}
I faced the same thing when I was working with my new PHP Server. You need to do two things to tackle this issue.
Never ever allow any HTML to escape before the headers are sent. (Very Tough)
Turn on Output Buffering. (Best and Easy way)
To turn on Output Buffering, you need to set in your php.ini:
output_buffering On
Or in your program:
ini_set("output_buffering", 1); // OR
ob_start();
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"]);
I want to set the alignment of an element which is rendered into a Div tag of HTML.I have written my code using jquery to make a multi gauge highchart in which i have divided my div tag into 6 parts and m rendering my each gauge highchart into one of the part of div tag but the alignment of the gauge inside a div tag is not proper not coming in center.Visit the URL to see my working code.
Visit http://jsfiddle.net/8c7w84ac/3/
here's my html and css part code..
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
#main{width:324px; height:205px; border:1px solid #ccc;}
#main div{ float:left; width:105px; height:100px; border:1px solid #ccc;.centered-axis-xy ;}
.actions, .chart {
margin: 15px auto;
width: 820px;
}
button {
background: none repeat scroll 0 0 #E3E3E3;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px 1px #F6F6F6 inset;
color: #333333;
font: bold 12px;
margin: 0 5px;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: 150px;
}
button:hover {
background: none repeat scroll 0 0 #D9D9D9;
box-shadow: 0 0 1px 1px #EAEAEA inset;
color: #222222;
cursor: pointer;
}
button:active {
background: none repeat scroll 0 0 #D0D0D0;
box-shadow: 0 0 1px 1px #E3E3E3 inset;
color: #000000;
}
</style>
<script type="text/javascript" src="../../js/jquery-1.6.4.min.js"></script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<!-- Chart type switchers -->
<!--<div class="actions">
<button class="switcher" id="column">column</button>
<button class="switcher" id="area">area</button>
<button class="switcher" id="line">line</button>
<button class="switcher" id="spline">Spine</button>
<button class="switcher" id="areaspline">areaspline</button>
<button class="switcher" id="pie">pie</button>
</div>-->
<div class="actions">
<select id='media' name='media'>
<option value="line">line</option>
<option value="bar">bar</option>
<option value="pie">pie</option>
<option value="sparkLine">sparkLine</option>
<option value="gauge">gauge</option>
<option value="area">area</option>
</select>
</div>
<!-- two different charts -->
<!--<div id="chart_1" class="chart" style="height:100px;width:200px;"></div>
<div id="chart_2" class="chart" style="height:100px;width:200px;"></div>-->
<div id="main">
<div id="chart_1" align="center">1</div>
<div id="chart_2" align="center">2</div>
<div id="chart_3" align="center">3</div>
<div id="chart_4" align="center">4</div>
<div id="chart_5" align="center">5</div>
<div id="chart_6" align="center">6</div>
</div>
</body>
</html>
please check the alignment of each n every gauge.it should be placed in center.help me out please.All the 6 gauges should be equally aligned.