i wanna add next and previous button to my page jsp , I have actually multiple form which i can reach with a menu but i would like to pass from a form to another by clicking both on next or previous and with the menu
thank you for you attention and help I've seen a lot of topic but none of them could help me
$(function() {
/*
number of fieldsets
*/
var fieldsetCount = $('#formElem').children().length;
/*
current position of fieldset / navigation link
*/
var current = 1;
/*
sum and save the widths of each one of the fieldsets
set the final sum as the total width of the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function(i){
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();
/*
show the navigation bar
*/
$('#navigation').show();
/*
when clicking on a navigation link
the form slides to the corresponding fieldset
*/
$('#navigation a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
we store the position of the link
in the current variable
*/
current = $this.parent().index() + 1;
/*
animate / slide to the next or to the corresponding
fieldset. The order of the links in the navigation
is the order of the fieldsets.
Also, after sliding, we trigger the focus on the first
input element of the new fieldset
If we clicked on the last link (confirmation), then we validate
all the fieldsets, otherwise we validate the previous one
before the form slided
*/
$('#steps').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
},500,function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on the tab (on the last input of each fieldset), makes the form
slide to the next step
*/
$('#formElem > fieldset').each(function(){
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e){
if (e.which == 9){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all the fieldsets
records if the Form has errors in $('#formElem').data()
*/
function validateSteps(){
var FormErrors = false;
for(var i = 1; i < fieldsetCount; ++i){
var error = validateStep(i);
if(error == -1)
FormErrors = true;
}
$('#formElem').data('errors',FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step){
if(step == fieldsetCount) return;
var error = 1;
var hasError = false;
$('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
var $this = $(this);
var valueLength = jQuery.trim($this.val()).length;
if(valueLength == ''){
hasError = true;
$this.css('background-color','#FFEDEF');
}
else
$this.css('background-color','#FFFFFF');
});
var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if(hasError){
error = -1;
valclass = 'error';
}
$('<span class="'+valclass+'"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow the user to submit
*/
$('#registerButton').bind('click',function(){
if($('#formElem').data('errors')){
alert('Please correct the errors in the Form');
return false;
}
});
});
*{
margin:0px;
padding:0px;
}
body{
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:"Century Gothic", Helvetica, sans-serif;
}
#content{
margin:15px auto;
text-align:center;
width:600px;
position:relative;
height:100%;
}
#wrapper{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:2px solid #fff;
background-color:#f9f9f9;
width:600px;
overflow:hidden;
}
#steps{
width:600px;
/*height:320px;*/
overflow:hidden;
}
.step{
float:left;
width:600px;
/*height:320px;*/
}
#navigation{
height:45px;
background-color:#e9e9e9;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:22px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
#navigation ul li a{
display:block;
height:45px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:45px;
padding:0px 20px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#f0f0f0;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
#navigation ul li a:hover,
#navigation ul li.
ted a{
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}
span.checked{
background:transparent url(../img/checked.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
span.error{
background:transparent url(img/error.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
#steps form fieldset{
border:none;
padding-bottom:20px;
}
#steps form legend{
text-align:left;
background-color:#f0f0f0;
color:#666;
font-size:24px;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
float:left;
width:590px;
padding:5px 0px 5px 10px;
margin:10px 0px;
border-bottom:1px solid #fff;
border-top:1px solid #d9d9d9;
}
#steps form p{
float:left;
clear:both;
margin:5px 0px;
background-color:#f4f4f4;
border:1px solid #fff;
width:400px;
padding:10px;
margin-left:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
width:160px;
float:left;
text-align:right;
margin-right:15px;
line-height:26px;
color:#666;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float:left;
}
#steps form input:focus{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background-color:#FFFEEF;
}
#steps form p.submit{
background:none;
border:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
#steps form button {
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor:pointer;
margin: 0px auto;
clear:both;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:22px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#4797ED;
}
#steps form button:hover {
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
ul{ border:0; margin:0; padding:0; }
#pagination-clean li
{
border:0;
margin:0;
padding:0;
font-size:11px;
list-style:none;
}
#pagination-clean li, #pagination-clean a
{
border:solid 1px #DEDEDE
margin-right:2px;
}
#pagination-clean .previous-off, #pagination-clean .next-off
{
color:#888888
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-clean .next a, #pagination-clean .previous a
{
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-clean .active
{
color:#00000
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-clean a:link, #pagination-clean a:visited
{
color:#0033CC
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-clean a:hover
{
text-decoration:none;
}
p.prev::before {
content:"";
position:absolute;left:-25px;top:0;
/* taille */
height:0;width:0;
/* les bordures */
border-right:36px solid #AAAAAA;
border-bottom:18px solid transparent;
border-top:18px solid transparent;
}
p.prev::after {
content:"";
position:absolute;left:-25px;top:0;
/* taille */
height:0;width:0;
/* les bordures */
border-right:36px solid #AAAAAA;
border-bottom:18px solid transparent;
border-top:18px solid transparent;
}
span.reference {
position: fixed;
left: 5px;
top: 5px;
font-size: 10px;
text-shadow: 1px 1px 1px #fff;
}
span.reference a {
color: #555;
text-decoration: none;
text-transform: uppercase;
}
span.reference a:hover {
color: #000;
}
h1 {
color: #ccc;
font-size: 40px;
text-shadow: 5px 1px 1px #fff;
padding: 30px;
}
#slider ul, #slider li
{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li
{
width:500px;
height:200px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HPS REGISTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="HPS REGISTER " />
<meta name="keywords"
content="jquery, form, sliding, usability, css3, validation, javascript" />
<link rel="stylesheet" href="inc/style.css" type="text/css"
media="screen" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script type="text/javascript" >
</script>
</head>
<body>
<img class="left" src="img/hps.png" width="150" height="100" alt=""
title="" style="float: left; margin: 0 180px 0 30px;" />
</body>
<div id="content">
<h1>HPS REGISTER</h1>
<div id="wrapper">
<div id="steps">
<form method="post" action="createbank">
<fieldset class="step">
<legend>Account</legend>
<p>
<label for="clientname">Client name<span class="requis">*</span></label>
<input id="clientname" name="clientname" />
</p>
<p>
<label for="email">Email</label> <input id="email" name="email"
placeholder="info#hps.net" type="email" AUTOCOMPLETE=off />
</p>
<p>
<label for="password">Password<span class="requis">*</span></label>
<input id="password" name="password" type="password"
AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Personal Details</legend>
<p>
<label for="name">Full Name</label> <input id="name" name="name"
type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="country">Country</label> <input id="country"
name="country" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="phone">Phone</label> <input id="phone" name="phone"
placeholder="e.g. +212622222222" type="tel" AUTOCOMPLETE=off />
</p>
<p>
<label for="website">Website</label> <input id="website"
name="website"
placeholder="e.g. http://www.hps.com
type="
AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>client bank information</legend>
<p>
<label for="banktag">Bank tag <span class="requis">*</span></label>
<input id="banktag" name="banktag" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="currency">Currency<span class="requis">*</span></label>
<input id="currency" name="currency" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="datesystem">Date system <span class="requis">*</span></label>
<input id="datesystem" name="datesystem" type="text"
AUTOCOMPLETE=off />
</p>
<p>
<label for="bankname">Bank name<span class="requis">*</span></label>
<input id="bankname" name="bankname" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="schemaname">Schema name <span class="requis">*</span>
</label> <input id="schemaname" name="schemaname" type="text"
AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>IF Everything in the form is correctly filled your
registration will be made . Otherwise an error message will be
generate .In this last step the user can confirm the submission of
the form.</p>
<p class="submit">
<button id="registerButton" type="submit">generate</button>
</p>
</fieldset>
</form>
</div>
<div id="result">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
<div id="navigation" style="display: none;">
<ul>
<li class="selected">Account</li>
<li>Personal Details</li>
<li>Bank information</li>
<li>Confirm</li>
</ul>
</div>
</div>
</body></html>
You could try to do something like this.
$("#next").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).next("li").length;
if (n == 1){
v.removeClass("selected").next("li").find("a").trigger("click")
}
});
$("#prev").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).prev("li").length;
if (n == 1){
v.removeClass("selected").prev("li").find("a").trigger("click")
}
});
This will check if there is a next/prev li when you click on a `button.
$(function() {
/*
number of fieldsets
*/
var fieldsetCount = $('#formElem').children().length;
/*
current position of fieldset / navigation link
*/
var current = 1;
/*
sum and save the widths of each one of the fieldsets
set the final sum as the total width of the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function(i) {
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();
/*
show the navigation bar
*/
$('#navigation').show();
/*
when clicking on a navigation link
the form slides to the corresponding fieldset
*/
$('#navigation a').bind('click', function(e) {
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
we store the position of the link
in the current variable
*/
current = $this.parent().index() + 1;
/*
animate / slide to the next or to the corresponding
fieldset. The order of the links in the navigation
is the order of the fieldsets.
Also, after sliding, we trigger the focus on the first
input element of the new fieldset
If we clicked on the last link (confirmation), then we validate
all the fieldsets, otherwise we validate the previous one
before the form slided
*/
$('#steps').stop().animate({
marginLeft: '-' + widths[current - 1] + 'px'
}, 500, function() {
if (current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child(' + parseInt(current) + ')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on the tab (on the last input of each fieldset), makes the form
slide to the next step
*/
$('#formElem > fieldset').each(function() {
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e) {
if (e.which == 9) {
$('#navigation li:nth-child(' + (parseInt(current) + 1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all the fieldsets
records if the Form has errors in $('#formElem').data()
*/
function validateSteps() {
var FormErrors = false;
for (var i = 1; i < fieldsetCount; ++i) {
var error = validateStep(i);
if (error == -1)
FormErrors = true;
}
$('#formElem').data('errors', FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step) {
if (step == fieldsetCount) return;
var error = 1;
var hasError = false;
$('#formElem').children(':nth-child(' + parseInt(step) + ')').find(':input:not(button)').each(function() {
var $this = $(this);
var valueLength = jQuery.trim($this.val()).length;
if (valueLength == '') {
hasError = true;
$this.css('background-color', '#FFEDEF');
} else
$this.css('background-color', '#FFFFFF');
});
var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if (hasError) {
error = -1;
valclass = 'error';
}
$('<span class="' + valclass + '"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow the user to submit
*/
$('#registerButton').bind('click', function() {
if ($('#formElem').data('errors')) {
alert('Please correct the errors in the Form');
return false;
}
});
$("#next").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).next("li").length;
if (n == 1){
v.removeClass("selected").next("li").find("a").trigger("click")
}
});
$("#prev").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).prev("li").length;
if (n == 1){
v.removeClass("selected").prev("li").find("a").trigger("click")
}
});
});
* {
margin: 0px;
padding: 0px;
}
body {
color: #444444;
font-size: 13px;
background: #f2f2f2;
font-family: "Century Gothic", Helvetica, sans-serif;
}
#content {
margin: 15px auto;
text-align: center;
width: 600px;
position: relative;
height: 100%;
}
#wrapper {
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #fff;
background-color: #f9f9f9;
width: 600px;
overflow: hidden;
}
#steps {
width: 600px;
/*height:320px;*/
overflow: hidden;
}
.step {
float: left;
width: 600px;
/*height:320px;*/
}
#navigation {
height: 45px;
background-color: #e9e9e9;
border-top: 1px solid #fff;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#navigation ul {
list-style: none;
float: left;
margin-left: 22px;
}
#navigation ul li {
float: left;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
position: relative;
margin: 0px 2px;
}
#navigation ul li a {
display: block;
height: 45px;
background-color: #444;
color: #777;
outline: none;
font-weight: bold;
text-decoration: none;
line-height: 45px;
padding: 0px 20px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
background: #f0f0f0;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(240, 240, 240)), color-stop(0.55, rgb(227, 227, 227)), color-stop(0.78, rgb(240, 240, 240)));
background: -moz-linear-gradient( center bottom, rgb(240, 240, 240) 9%, rgb(227, 227, 227) 55%, rgb(240, 240, 240) 78%)
}
#navigation ul li a:hover,
#navigation ul li. ted a {
background: #d8d8d8;
color: #666;
text-shadow: 1px 1px 1px #fff;
}
span.checked {
background: transparent url(../img/checked.png) no-repeat top left;
position: absolute;
top: 0px;
left: 1px;
width: 20px;
height: 20px;
}
span.error {
background: transparent url(img/error.png) no-repeat top left;
position: absolute;
top: 0px;
left: 1px;
width: 20px;
height: 20px;
}
#steps form fieldset {
border: none;
padding-bottom: 20px;
}
#steps form legend {
text-align: left;
background-color: #f0f0f0;
color: #666;
font-size: 24px;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
float: left;
width: 590px;
padding: 5px 0px 5px 10px;
margin: 10px 0px;
border-bottom: 1px solid #fff;
border-top: 1px solid #d9d9d9;
}
#steps form p {
float: left;
clear: both;
margin: 5px 0px;
background-color: #f4f4f4;
border: 1px solid #fff;
width: 400px;
padding: 10px;
margin-left: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
}
#steps form p label {
width: 160px;
float: left;
text-align: right;
margin-right: 15px;
line-height: 26px;
color: #666;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select {
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float: left;
}
#steps form input:focus {
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background-color: #FFFEEF;
}
#steps form p.submit {
background: none;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#steps form button {
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor: pointer;
margin: 0px auto;
clear: both;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 22px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background: #4797ED;
}
#steps form button:hover {
background: #d8d8d8;
color: #666;
text-shadow: 1px 1px 1px #fff;
ul {
border: 0;
margin: 0;
padding: 0;
}
#pagination-clean li {
border: 0;
margin: 0;
padding: 0;
font-size: 11px;
list-style: none;
}
#pagination-clean li,
#pagination-clean a {
border: solid 1px #DEDEDE margin-right:2px;
}
#pagination-clean .previous-off,
#pagination-clean .next-off {
color: #888888 display:block;
float: left;
font-weight: bold;
padding: 3px 4px;
}
#pagination-clean .next a,
#pagination-clean .previous a {
font-weight: bold;
border: solid 1px #FFFFFF;
}
#pagination-clean .active {
color: #00000 font-weight:bold;
display: block;
float: left;
padding: 4px 6px;
}
#pagination-clean a:link,
#pagination-clean a:visited {
color: #0033CC display:block;
float: left;
padding: 3px 6px;
text-decoration: none;
}
#pagination-clean a:hover {
text-decoration: none;
}
p.prev::before {
content: "";
position: absolute;
left: -25px;
top: 0;
/* taille */
height: 0;
width: 0;
/* les bordures */
border-right: 36px solid #AAAAAA;
border-bottom: 18px solid transparent;
border-top: 18px solid transparent;
}
p.prev::after {
content: "";
position: absolute;
left: -25px;
top: 0;
/* taille */
height: 0;
width: 0;
/* les bordures */
border-right: 36px solid #AAAAAA;
border-bottom: 18px solid transparent;
border-top: 18px solid transparent;
}
span.reference {
position: fixed;
left: 5px;
top: 5px;
font-size: 10px;
text-shadow: 1px 1px 1px #fff;
}
span.reference a {
color: #555;
text-decoration: none;
text-transform: uppercase;
}
span.reference a:hover {
color: #000;
}
h1 {
color: #ccc;
font-size: 40px;
text-shadow: 5px 1px 1px #fff;
padding: 30px;
}
#slider ul,
#slider li {
margin: 0;
padding: 0;
list-style: none;
}
#slider,
#slider li {
width: 500px;
height: 200px;
overflow: hidden;
}
span#prevBtn {}
span#nextBtn {}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HPS REGISTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="HPS REGISTER " />
<meta name="keywords" content="jquery, form, sliding, usability, css3, validation, javascript" />
<link rel="stylesheet" href="inc/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<img class="left" src="img/hps.png" width="150" height="100" alt="" title="" style="float: left; margin: 0 180px 0 30px;" />
</body>
<div id="content">
<h1>HPS REGISTER</h1>
<div id="wrapper">
<div id="steps">
<form method="post" action="createbank">
<fieldset class="step">
<legend>Account</legend>
<p>
<label for="clientname">Client name<span class="requis">*</span></label>
<input id="clientname" name="clientname" />
</p>
<p>
<label for="email">Email</label> <input id="email" name="email" placeholder="info#hps.net" type="email" AUTOCOMPLETE=off />
</p>
<p>
<label for="password">Password<span class="requis">*</span></label>
<input id="password" name="password" type="password" AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Personal Details</legend>
<p>
<label for="name">Full Name</label> <input id="name" name="name" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="country">Country</label> <input id="country" name="country" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="phone">Phone</label> <input id="phone" name="phone" placeholder="e.g. +212622222222" type="tel" AUTOCOMPLETE=off />
</p>
<p>
<label for="website">Website</label> <input id="website" name="website" placeholder="e.g. http://www.hps.com
type=" AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>client bank information</legend>
<p>
<label for="banktag">Bank tag <span class="requis">*</span></label>
<input id="banktag" name="banktag" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="currency">Currency<span class="requis">*</span></label>
<input id="currency" name="currency" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="datesystem">Date system <span class="requis">*</span></label>
<input id="datesystem" name="datesystem" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="bankname">Bank name<span class="requis">*</span></label>
<input id="bankname" name="bankname" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="schemaname">Schema name <span class="requis">*</span>
</label> <input id="schemaname" name="schemaname" type="text" AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>IF Everything in the form is correctly filled your registration will be made . Otherwise an error message will be generate .In this last step the user can confirm the submission of the form.</p>
<p class="submit">
<button id="registerButton" type="submit">generate</button>
</p>
</fieldset>
</form>
</div>
<div id="result">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
<div id="navigation" style="display: none;">
<ul>
<li class="selected">Account</li>
<li>Personal Details</li>
<li>Bank information</li>
<li>Confirm</li>
</ul>
</div>
</div>
</body>
</html>
Related
I use a pure CSS Accordion to present my content. The Accordion works with normal checkboxes. Now I want to implement, that by sending a simple link, a single checkbox entry will be checked and with the help of an anchor the browser should jump to that entry and show the specific content to the reader.
The whole thing should be done preferably without a scripting or programming language, but after a lot of research I think that at least JavaScript will be required (it must run on the client side, so no PHP or similar).
I have searched and tested a lot but unfortunately I have not found any suitable solution that would work.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
</style>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
</body>
</html>
```
You're correct that JavaScript is required. I have provided a solution, but I haven't tested it, because it's not possible to test in the snippet. It should select the relevant checkbox when a hash tag is detected in the URL that corresponds with a checkbox ID.
So you would use some time https://www.website.com/#title1
// Check if URL of browwser window has hash tag
if (location.hash) {
// Get URL hash tag
const hash = window.location.hash;
// Select checkbox with ID of hashtag
const checkbox = document.querySelector(hash);
// Check if checkbox exists
if(checkbox) {
// Set selected checkbox as checked
checkbox.checked = true;
}
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
I have an input box that I'd like to slide up/down so that it looks like it is coming from behind the element above.
My input HTML looks like this:
<input type="text" placeholder="Add New Todo">
The CSS for the input looks like this:
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
And my JS looks like this:
$("#dropdown").click(function(){
$("input[type='text']").slideToggle(2000);
})
Currently, the slide gets stuck at the start/finish, as it seems the height cannot be reduced to 0.
Here is a full example of what happens.
How can I make my input box animate smoothly?
I'd wrap the input in a containing element with hidden overflow and animate that one.
$("#dropdown").click(function(){
$(".input_container").toggleClass('hide');
})
#container {
background-color: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
margin: 100px auto;
width: 360px;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #2BC0E4;
background: -webkit-linear-gradient(to left, #EAECC6, #2BC0E4);
background: linear-gradient(to left, #EAECC6, #2BC0E4);
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 0px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
input:focus {
background-color: #fff;
border: 3px solid #2980b9;
outline: none;
}
::placeholder {
color: #9e9e9e;
opacity: 1;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
#dropdown {
float: right;
}
.input_container{
height:30px;
transition: height 2s;
overflow:hidden;
}
.input_container.hide{
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
</head>
<body>
<div id="container">
<h1>TO-DO LIST <button id = "dropdown">X</button> </h1>
<div class='input_container'>
<input type="text" placeholder="Add New Todo">
</div>
</div>
</body>
</html>
You can add condition
http://jsfiddle.net/pr2szjhu/1/
<input type="text" placeholder="Add New Todo" id="test">
JS
$("#dropdown").click(function(){
if ($('#test').is(':visible')){
$("#test").removeAttr('placeholder');
$("input[type='text']").slideToggle(1800);
}else{
$("input[type='text']").slideToggle(1800,function() {
$("#test").attr('placeholder','Add New Todo');
});
}
})
This question already has answers here:
Adding two numbers concatenates them instead of calculating the sum
(24 answers)
Closed 5 years ago.
I'm trying to do quantity system and my code is :
<div class="sp-quantity">
<div class="sp-minus fff"> <a class="ddd" href="#">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="1">
</div>
<div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></div>
</div>
<script>
$('.ddd-plus').click(function(){
var $old = $('.quntity-input').val();
var $plus =($old +1);
// var $minus = $old - 1;
$('input').val($plus);
console.log($plus,$old);
});
</script>
<style>.sp-quantity {
width:124px;
height:42px;
font-family:"ProximaNova Bold", Helvetica, Arial;
}
.sp-minus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid black;
float:left;
}
.sp-plus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input input {
width:30px;
height:34px;
text-align:center;
font-family:"ProximaNova Bold", Helvetica, Arial;
border: none;
}
.sp-input input:focus {
border:1px solid #e1e1e1;
border: none;
}
.sp-minus a, .sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
</style>
(by the way this code works only when I put the jquery to console,else it does not work.
So when I click plus, it should add 1 to input's value (example: if value of input it 1, it should 2 but it makes it 11)
How can I fix that? Thanks
You have to force the result to number, using unary operator.
var $plus = +$old + 1;
Another solution is to use parseInt method.
var $plus =parseInt($old,10) + 1;
Solution
$('.ddd-plus').click(function(){
var $old = $('.quntity-input').val();
var $plus =+$old +1;
$('input').val($plus);
});
$('.ddd-minus').click(function(){
var $old = $('.quntity-input').val();
var $plus =$old -1;
if($plus<0){
return;
}
$('input').val($plus);
});
.sp-quantity {
width:124px;
height:42px;
font-family:"ProximaNova Bold", Helvetica, Arial;
}
.sp-minus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid black;
float:left;
}
.sp-plus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input input {
width:30px;
height:34px;
text-align:center;
font-family:"ProximaNova Bold", Helvetica, Arial;
border: none;
}
.sp-input input:focus {
border:1px solid #e1e1e1;
border: none;
}
.sp-minus a, .sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-quantity">
<div class="sp-minus fff"> <a class="ddd-minus" href="#">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="1">
</div>
<div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></div>
</div>
You can use the Unary plus (+) operator .
The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already.
Unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number.
Code:
var $input = $('input'),
val = +$input.val();
$('.ddd-plus').click(function() {
$input.val(++val);
});
$('.ddd-minus').click(function() {
val && $input.val(--val);
});
.sp-quantity {width:124px;height:42px;font-family:"ProximaNova Bold", Helvetica, Arial;}
.sp-minus {width:40px;height:40px;border:1px solid #e1e1e1;float:left;text-align:center;}
.sp-input {width:40px;height:40px;border:1px solid #e1e1e1;border-left:0px solid black;float:left;}
.sp-plus {width:40px;height:40px;border:1px solid #e1e1e1;border-left:0px solid #e1e1e1;float:left;text-align:center;}
.sp-input input {width:30px;height:34px;text-align:center;font-family:"ProximaNova Bold", Helvetica, Arial;border: none;}
.sp-input input:focus {border:1px solid #e1e1e1;border: none;}
.sp-minus a, .sp-plus a {display: block;width: 100%;height: 100%;padding-top: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-quantity">
<div class="sp-minus fff">
<a class="ddd-minus" href="#">-</a>
</div>
<div class="sp-input">
<input type="text" class="quntity-input" value="1">
</div>
<div class="sp-plus fff">
<a class="ddd-plus" href="#">+</a>
</div>
</div>
$('.quntity-input').val() return string and you need to convert input values to number,
var $old = Number($('.quntity-input').val());
So your code should be,
$('.ddd-plus').click(function(){
var $old = Number($('.quntity-input').val());
var $plus =($old +1);
// var $minus = $old - 1;
$('input').val($plus);
console.log($plus,$old);
});
Make sure you check for isNaN because Number or parseInt will return NaN for invalid numbers
Or use parseInt:
var $old = parseInt($('.quntity-input').val(), 10);
Becuse you are using val() function of jquery, normally val() returns array containing value but if this not find anything it return null;
source:
http://api.jquery.com/val/
you can check your program from this link :
$('.ddd-plus').click(function() {
var old = $('.quntity-input').val();
var plus =(parseInt(old) +1);
$('.quntity-input').val(plus);
});
$('.ddd-minus').click(function() {
var old = $('.quntity-input').val();
var plus =(parseInt(old) -1);
$('.quntity-input').val(plus);
});
.sp-quantity {
width: 124px;
height: 42px;
font-family: "ProximaNova Bold", Helvetica, Arial;
}
.sp-minus {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
float: left;
text-align: center;
}
.sp-input {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
border-left: 0px solid black;
float: left;
}
.sp-plus {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
border-left: 0px solid #e1e1e1;
float: left;
text-align: center;
}
.sp-minus {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
border-left: 0px solid #e1e1e1;
float: left;
text-align: center;
}
.sp-input input {
width: 30px;
height: 34px;
text-align: center;
font-family: "ProximaNova Bold", Helvetica, Arial;
border: none;
}
.sp-input input:focus {
border: 1px solid #e1e1e1;
border: none;
}
.sp-minus a,
.sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-quantity">
<div class="sp-minus fff"> <a class="ddd-minus" href="#">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="1">
</div>
<div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></div>
</div>
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();
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
.ds-drop-down {
background: url('../../images/light-grey-disclosure-arrow-down.png')no-repeat scroll center center transparent;
padding: 10px 5px;
height: 0px;
width: 8px;
position: absolute;
top: 63px;
border: 1px solid blue;
}
div#span-advanced-search {
border: 1px solid grey;
display: none;
left: 20px;
width: 600px;
padding: 10px;
}
div#span-advanced-search label{
width: 100px;
}
input[type=checkbox]:checked ~ div#span-advanced-search {
background: white;
display: block;
position: relative;
width: 564px;
padding: 10px;
visibility: visible;
left: -573px;
top: 11px;
}
<input class="ds-text-field " type="text">
<xsl:attribute name="name">
<xsl:value-of
select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[#element='search'][#qualifier='queryField']"/>
</xsl:attribute>
</input>
<label for="toggle-1" class="ds-drop-down" role="button" data-tooltip="Show search options"/>
<input type="checkbox" id="toggle-1">
<div id="span-advanced-search">
<label>Education Level:</label> <input id="text_edulvl" type="text"/><br></br>
<label>Type of Learning Material:</label> <input id="text_lm" type="text"/><br></br>
<label>Difficulty Level:</label> <input id="text_difflvl" type="text"/><br></br>
<label>Author:</label> <input id="text_author" type="text"/><br></br>
</div>
This is my code snippet. When I click on the checkbox "toggle-1", the div "span-advanced-search" will open,it's right. But after open the div,when i am clicking anywhere inside the div,it's getting closed. So,i can't give any input to those inputs(i.e. Education Level,Author etc.). I want the div will be closed only when the checkbox will be unchecked.
Solution must be as I thought. I hope you are looking for this: http://jsfiddle.net/vhoeamcq/
function srchMoreActive(t){
if(t){
document.getElementById('srchMoreOpt').classList.remove('hid');
document.getElementById('srchMore').classList.add('hid');
}else{
document.getElementById('srchMoreOpt').classList.add('hid');
document.getElementById('srchMore').classList.remove('hid');
}
}
function form1Sub(){
}
function srch(){
}
#form1 #s00{padding: 5px 25px 5px 5px; width:300px; border:1px solid rgba(0,0,0,0.2);}
#form1 #srchMore{margin-left:-27px; cursor:pointer; color:#ccc;}
#form1 #srchMore:hover{color:#0ac;}
#form1 .srchMoreAct{color:#333;}
#form1 #srchMoreOpt{width:320px; height:350px; padding:5px; box-shadow:0 2px 4px rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.2);}
#form1 .hid{display:none;}
#form1 #srchMoreOpt .exi{float:right; padding:5px 10px 5px 10px; font-family:'Arial'; cursor:pointer; background:#ccc; color:#666;}
#form1 #srchMoreOpt .exi:hover{background:#0ac; color:#fff;}
<form id="form1" action="" method="post" onSubmit="form1Sub()">
<input id="s00" name="s" type="text" value="" placeholder="Type to serach" onChange="srch()" />
<span id="srchMore" onClick="srchMoreActive(true)">▼</span>
<div id="srchMoreOpt" class="hid">
<span class="exi" onClick="srchMoreActive(false)">x</span>
<p>Form Details</p>
<p><input type="text" /></p>
</div>
</form>
try this Jquery:
$('#toggle-1').click(function(){
var a = $(this).is(":checked");
if(a){
$('#span-advanced-search').css("display","block")
}
else{
$('#span-advanced-search').css("display","none")
}
});