click inside anywhere in the box,getting closed

click inside anywhere in the box,getting closed - javascript

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")
}
});

Related

How to check a specific checkbox in a pure CSS Accordion via URL?

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>

Jquery appendTo html to a javascript function

building a show your password with a caps lock warning on a form. But need to use appendTo so the HTML can be added to a pre-written shortcode.
Whenever the Html is added by appendTo the Javascript function can not find the added HTML.
code: https://codepen.io/edutize/pen/qBZXmOZ
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "#user_pass").addClass("fa fa-fw
fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
});
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});

You're generating elements inside document ready which usually is initiated later than when the JS is loaded. When the $(".toggle-password").click(function() event listener is attached to .toggle-password, #caps doesn't exists yet.
Either moving the event listener into the document ready after the #caps element is created or moving the #caps element creation outside the document ready will work.
// Jquery appendTo capslock message and eye icons html
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "user_pass").addClass("fa fa-fw fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
// toggle between classes and change attribute type
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
// capslock function change style from display none to block
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
document.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
});
.login-username input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-username input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=password] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=password]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
#caps {
display: none;
margin-left: auto;
margin-right: auto;
width: 50%;
color: red;
}
.field-icon {
margin-left: 72.5%;
margin-right: auto;
z-index: 2;
position: absolute;
margin-top: -40px;
color: #8A8A8A;
}
.login-submit input[type=submit] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #24af61;
border: #24af61;
border-radius: 5px !important;
border-width: 1.5px;
color: white;
cursor: pointer;
display: block;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
font-size: 18px;
transition: 0.3s;
font-weight: bold;
margin: 30px auto;
}
.login-submit input[type=submit]:hover {
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
-moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
transform: scale(1.05);
color: #24af61;
border-style: solid;
border: #24af61;
border-width: 1.5px;
border-radius: 15px;
}
#media screen and (max-width: 767px) {
.login-password input[type=password] , .login-username input[type=text] , .login-submit input[type=submit] {
width: 75%;
}
#media screen and (max-width: 767px) {
.field-icon {
margin-left: 82%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
<!-- html thats being added by jquery appendTo -->
<!-- <span toggle="#user_pass" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<p id="caps">WARNING! Caps lock is ON.</p> -->
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
</div>

add previous ans next button

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>

CSS classes conflicting with each other

I have an input field and a button. On clicking the button, it will be checked that whether input field has some data or not. If there is no data, then the input field will be highlighted. On focus of on the input field, error message will be shown. On keyup event, the input will no longer be highlighted, but the error message will remain.
Below is the code that I have tried:
$(document).ready(function(){
$('#btnclick').click(function(){
if($('[name="tName"]').val() == "")
{
$('[name="tName"]').addClass('validationInput');
$('[name="tName"]').closest('div').addClass('wrap');
}
else
alert('Success');
});
$('[name="tName"]').on('focus', function () {
if ($(this).hasClass('validationInput')) {
$(this).next("span.vspan").html("Please enter Name");
$(this).next("span.vspan").css("display", "inline-block");
}
});
$('[name="tName"]').on('keyup', function () {
$(this).removeClass("validationInput");
$(this).closest('div').removeClass("wrap");
});
});
.validationInput,
.validationInput:focus,
.validationInput:hover {
background-color: #FFFFE0!important;
border: 1px solid red!important;
height: 30px
}
.wrap>span {
display: inline-block;
position: relative;
overflow: hidden;
width: 100%
}
.wrap>span:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
input[type=text].vtooltips {
position: relative;
display: inline;
}
input[type=text].vtooltips + span.vspan {
position: absolute;
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3">
<span>
<input class="mandatoryText vtooltips form-control textbox" style="width: 100%;vertical-align:top;border-radius:4px;" maxlength="100" name="tName" type="text">
<span class="vspan"></span>
</span>
</div>
<br><br>
<input id="btnclick" value="Click" type="button">
Here is a Demo of the same.
But, the CSS is conflicting in some manner. The error message shall be shown on focus event, but it is shown after the keyup event is fired. This happens because of wrap class (found out after lots of analysis), but I do not know why this happens. What have I done wrong?
Any help will be much appreciated. Thanks!

Hi add below code inside your button click event,
$('[name="tName"]').focus();
and also change <span> tags to <div> tags like in snippet.
Then whole code looks like below,
$('#btnclick').click(function(){
if($('[name="tName"]').val() == "")
{
$('[name="tName"]').addClass('validationInput');
$('[name="tName"]').closest('div').addClass('wrap');
$('[name="tName"]').focus()
}
else
alert('Success');
});
Code snippet,
$(document).ready(function(){
$('#btnclick').click(function(){
if($('[name="tName"]').val() == "")
{
$('[name="tName"]').addClass('validationInput');
$('[name="tName"]').closest('div').addClass('wrap');
$('[name="tName"]').focus();
}
else
alert('Success');
});
$('[name="tName"]').on('focus', function () {
if ($(this).hasClass('validationInput')) {
$(this).next("span.vspan").css("display", "inline-block").html("Please enter Name");
}
});
$('[name="tName"]').on('keyup', function () {
$(this).removeClass("validationInput");
$(this).closest('div').removeClass("wrap");
});
});
.validationInput,
.validationInput:focus,
.validationInput:hover {
background-color: #FFFFE0!important;
border: 1px solid red!important;
height: 30px
}
.wrap>span:first {
display: inline-block;
position: relative;
overflow: hidden;
width: 100%
}
.wrap>span:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
input[type=text].vtooltips {
position: relative;
display: inline;
}
input[type=text].vtooltips + span.vspan {
position: absolute;
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3">
<span class="caret">
<input class="mandatoryText vtooltips form-control textbox" style="width: 100%;vertical-align:top;border-radius:4px;" maxlength="100" name="tName" type="text">
<span class="vspan"></span>
</span>
</div>
<br><br>
<input id="btnclick" value="Click" type="button">

I hope this help you. I just did make a function to add and remove the css class and display or not the message:
jQuery.fn.myValidate = function(){
if(this.val() == ""){
this.next("span.vspan").html("Please enter Name");
this.next("span.vspan").css("display", "inline-block");
this.addClass('validationInput');
this.closest('div').addClass('wrap');
return false;
}else{
this.next("span.vspan").css("display", "none");
this.closest('div').removeClass("wrap");
this.removeClass('validationInput');
this.next("span.vspan").css("display", "none");
return true;
}
}
$(document).ready(function(){
$('#btnclick').click(function(){
if ($('[name="tName"]').myValidate())
alert('Success');
});
$('[name="tName"]').on('focusout keyup', function (evt) {
$(this).myValidate();
});
});
.validationInput,
.validationInput{
background-color: #FFFFE0;
border: 1px solid red;
outline: none;
height: 30px
}
.wrap>span {
display: inline-block;
position: relative;
width: 100%
}
.wrap>span:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
input[type=text].vtooltips {
position: relative;
display: inline;
}
input[type=text].vtooltips + span.vspan {
position: absolute;
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3">
<span>
<input class="mandatoryText vtooltips form-control textbox" style="width: 100%;vertical-align:top;border-radius:4px;" maxlength="100" name="tName" type="text">
<span class="vspan"></span>
</span>
</div>
<br><br>
<input id="btnclick" value="Click" type="button">

How to put label inside input and make alwas visible

I need to do input like this, and word "seconds" should always stay visible and
unchangeable. How can I do that?

No JavaScripting needed here,
.round {
border:1px solid grey;
border-radius: 4px;
padding: 8px;
}
.round input {
border:0px solid black;
width: 40px;
margin-right: 8px;
}
.round label {
color: grey;
}
.container {
width: 200px;
}
<div class="container">
<div class="round">
<label><input type="text">seconds</input></label>
</div>
</div>
HTMLDog's CSS tutorial is a great one to follow.

#test{
width:100px;
border:1px solid #E0E0E0;
display:inline-block;
border-radius: 5px;
border-top:1px solid #BBDEFB;
}
input{
width:25px;
float:left;
border:none;
}
label{
color:#BDBDBD
}
input:focus{
outline: none;
}
<div id="test">
<div>
<input type="text">
</div>
<div>
<label>Seconds</label>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

click inside anywhere in the box,getting closed - javascript

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") } });

Related

How to check a specific checkbox in a pure CSS Accordion via URL?

Jquery appendTo html to a javascript function

add previous ans next button

CSS classes conflicting with each other

How to put label inside input and make alwas visible

Categories

Resources