I have a form of textboxes with validation.
It is working fine if we click the save button first time it showing correctly. But once if we fill the text boxes and then remove the text from text boxes it is error message is getting displayed on text boxes. please see this fiddle:
http://jsfiddle.net/9fYxb/2/
CSS:
#field
{
margin-left: .5em;
float: right;
}
#field, label
{
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
br
{
clear: both;
}
input
{
border: 1px solid black;
margin-bottom: .5em;
width: 72px;
}
input.error
{
border: 1px solid red;
}
label.error
{
position:fixed;
Background-image:url("../images/unchecked.jpg");
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:middle;
background-color: #FFEBE8;
border: solid 1px red;
width:210px;
height:15px;
}
label.valid
{
position:absolute;
Background-image:url("../images/checked.gif") ;
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:top;
background-color:White;
border:none;
width:1px;
height: 16px;
}
Do you need float left for #field and label?
#field, label {
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
If you remove that and also remove position form label error and label valid:
http://jsfiddle.net/kimiliini/8SM7f/
Also, you would probably want to fix the mobile number check. Your current:
/[789]\d{9}$/
Would validate
// This as OK
7111111111
// But this would also validate this as OK:
123155551333321212121521251215421212487884655487111111111
Try using:
/^[789]\d{9}$/
The ^ denotes start of string.
Background-image is also bad. The CSS property does not have capital B.
Change your CSS for label.error from:
label.error
{
position:absolute;
Background-image:url("../images/unchecked.jpg");
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:middle;
background-color: #FFEBE8;
border: solid 1px red;
width:210px;
height:15px;
}
to:
label.error
{
clear:both;
float:right;
Background-image:url("../images/unchecked.jpg");
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:middle;
background-color: #FFEBE8;
border: solid 1px red;
width:210px;
height:15px;
}
Related
While trying to style my html with CSS i have to use an LI and i am getting trouble with it.
If the Html or js is need i will provide it asap.
The error i am getting is at the "LI" every time
The exact error i am getting is "property value expectedcss(css-propertyvalueexpected)"
#menu{
list-style:none;
padding: 0;
margin: 0;
li: {
display : block;
border-right: 1px solid #fff;
background: #E7E7E7;
color: #3B3B3b;
text-decoration:none;
padding:0 10px;
float:left
padding-left:0
position:relative
line-height: 4.5em
width: 10em
text-align: center
&:hover{
background-color: #3d6fc3;
background-image: -webkit-linear-gradient(left,#4577cb,#3264b6);
background-image: -o-linear-gradient(left,#4577cb,#3264b6);
background-image: -moz-linear-gradient(left,#4577cb,#3264b6);
background-image: -ms-linear-gradient(left,#4577cb,#3264b6);
background-image: linear-gradient(left,#4577cb,#3264b6);
color:#fff;
}
ul {
position:absolute;
}
a{
color: #3B3B3B;
text-decoration:none;
&:hover {
color:#fff;
}
}
}
ul {
border-top:1px solid #fff;
list-style:none;
padding:0;
margin:0;
li {
ul {
margin-top: -73px;
margin-left: 170px;
}
}
}
#drop-down{
display:none;
}
}
So I've got this button, and it looks just fine in Chrome, but load it in Firefox and it's TOTALLY different. I've tried adding prefixes and it doesn't seem to change anything.
var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;
body
{
font-family:arial;
}
.flipswitch
{
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline:none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor:pointer;
border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
transition: all 0.3s ease-in 0s;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:indeterminate:after
{
left:30%;
content:"???";
background:grey;
}
.flipswitch:not(:indeterminate):after
{
left:2%;
content: "OFF";
background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
left:53%;
content: "ON";
background:#0f0;
}
<!--Marketing Emails -->
<div class="form-row">
<h4>Do you wish to receive Marketing Emails</h4>
<p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
<div>
<input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
<span></span>
</div>
</div>
It is meant to display as it does in Chrome.
Any advice would be appreciated - if I find anything new I'll make an edit.
Cheers all.
You just need to add the -moz-appearance: initial; for Firefox.
var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;
body
{
font-family:arial;
}
.flipswitch
{
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
-moz-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline:none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor:pointer;
border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
transition: all 0.3s ease-in 0s;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:indeterminate:after
{
left:30%;
content:"???";
background:grey;
}
.flipswitch:not(:indeterminate):after
{
left:2%;
content: "OFF";
background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
left:53%;
content: "ON";
background:#0f0;
}
<!--Marketing Emails -->
<div class="form-row">
<h4>Do you wish to receive Marketing Emails</h4>
<p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
<div>
<input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
<span></span>
</div>
</div>
Both Brackets and Firefox call this a non-valid function. I'm a beginner. Can somebody tell my why? It's just about the js.
I want that if you hover over "timer" and click "jaar", the button that says "timer" now says "1 jaar".
function maand() {
HTMLDocument.getElementById("timer").innerHTML = "Hello JavaScript!";
}
html {
padding: 0;
margin: 0;
font-family: 'tahoma';
font-size: 14px;
}
body {
padding: 0;
margin: 0;
background-color: #f3f3ed;
}
.messages_compose {
padding: 10px;
margin-bottom: auto;
}
.messages_textarea_container {
display: inline-block;
width: 400px;
margin-left: 10px;
}
.messages_textarea {
border: 3px solid lightgray;
margin-top: 0;
margin-bottom: 10px;
padding: 5px;
width: 400px;
height: 40px;
resize: none;
float:left;
border-radius:2px;
position:absolute;
}
.button {
border: none;
font-size: 12px;
padding: 12px 12px;
height: 40px
text-align: center;
}
.green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
float:right;
position:relative;
margin-right: -54px;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
position:absolute;
width:100px;
height:100px;
float:left
}
#timer {
color:black;
background:#eee;
border:none;
padding-left: 10px;
font-size:12px;
border-radius: 2px;
float:left;
padding: 12px 12px;
cursor:pointer;
list-style-type: none;
position:Relative;
margin-left:414px;
margin-top: -14px;
width:60px
}
#timer:hover {
color:white;
background:#027fed;
}
li {
background-color:#eee;
font-size:inherit;
width:150px;
position:relative;
float:left;
bottom:31px;
left:0;
display: block;
font-size: 12px;
text-decoration: none;
font-family: tahoma;
color: black;
width: 50px;
height: auto;
border: 1px solid #;
border-width: 1px 1px 0 0;
background: #eee;
background-color: rgb(238, 238, 238);
padding-left: 10px;
line-height: 38px;
border-radius: 2px;
height: auto;
line-height: 1em;
padding: 5px 10px;
width: 129px;
margin-bottom:1px;
margin-left:431px;
}
li:hover{
cursor:pointer;
background-color:#027fed;
color:white
}
.list {
display:none;
list-style-type: none;
position:absolute !important;
}
.keuze:hover .list {
display:block
}
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list"><li>jaar</li>
<li id="jaar" id="maand" onclick="maand()">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
<li id="uur">uur</li></div>
</ul>
</div>
Use document instead of HTMLDocument.
document.getElementById("timer").innerHTML = "Hello JavaScript!";
Better yet, if you're only inserting text, use textContent, it's more reliable and more appropriate:
document.getElementById("timer").textContent = "Hello JavaScript!";
I solved the problem by using a script tag I found at W3schools.com:
<script>
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dom
thanks to all of the people who tried solving it.
I have created a small call back popup on the footer
http://bit.ly/1MThJ5w
The problem is when I click the text box it disappeared. I don't know how to stop that. Does anyone has any ideas on how to fix this? Thanks.
It should only close and open when I click- CALL BACK
And also the close and open arrows are not showing as well
My code snippet:
<script type="text/javascript">
$(document).ready(function() {
$('.foot').click(function() {
if($('.foot').hasClass('slide-up')) {
$('.foot').addClass('slide-down', 1000);
$('.foot').removeClass('slide-up');
} else {
$('.foot').removeClass('slide-down');
$('.foot').addClass('slide-up', 1000);
}
});
});
CSS CODE:
/*Contact Styles
------------------------------------*/
.contact{
width:28%;
float:left;
padding-left:20px;
background:#001832;
color:#FFFFFF;
padding-top:15px;
padding-bottom:12px;
}
.contact h2{
font-size:27px;
font-family:impact;
font-weight:500;
color:#fff;
}
.contact form{
margin-top:6px;
}
.contact label{
font-size:10px;
}
.contact input{
width:210px;
color:#666;
}
.contact a{
text-decoration:none;
text-align: center;
background: none repeat scroll 0% 0% #0060A3;
color: #FFF;
display: inline-block;
padding: 12px 37px;
margin-top: 5px;
font-family: arial;
font-weight: 700;
margin-bottom:15px;
}
.contact .btn{
text-decoration:none;
text-align: center;
background: #0060A3;
color: #FFF;
display: inline-block;
padding: 10px 20px;
margin-top: 5px;
font-family: arial;
font-weight: 700;
margin-bottom:15px;
font-size:20px;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
}
/*Slider footer*/
.foot {
position:fixed;
width: 300px;
z-index: 10000;
text-align:center;
height: 500px;
font-size:18px;
color: #000;
display: flex;
justify-content: center; /* align horizontal */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: -185px;
}
.slide-up
{
bottom: -445px !important;
}
.slide-down
{
bottom: -185px !important;
}
.call_back{
background:#405E51;
padding:10px;
margin-bottom:10px !important;
color:#fff;
}
#closer{
background:none;
width:10px;
margin-top: -25px;
margin-right: 15px;
float:right;
}
#closer{
background:none;
width:10px;
margin-top: -25px;
margin-right: 15px;
float:right;
}
Your click event is bound to the wrong element. Change it to the "call_back" class instead.
Change this:
$('.foot').click(function() {
// your code
});
To this:
$('.call_back').click(function() {
// your code
});
I have a problem to convert this below navigation bar from vertical to horizontal.
http://codepen.io/anon/pen/bdpRjx
Who could help me to take a look on my code. Here is my CSS but the effect and size are chaotic.
*{
box-sizing: border-box;
}
body{
height:100%;
background-color: #444;
}
h1{
font-size:1em;
text-align:center;
color: #eee;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
width:100%;
margin-top:10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
}
li{
height:50px;
width: 300px;
position:relative;
background: linear-gradient(#292929, #242424);
display: inline;
}
ul{
float:left;
width: 100%;
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:inline;
height:100%;
width:300px;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
border-left:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
}
.active a{
color: #B93632;
border-left:5px solid #B93632;
background-color: #1B1B1B;
outline:0;
width: 200px;
}
li:not(.active):hover a{
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size: 1.5em;
transition: all 0.3s linear;
}
Thank you very much for any suggestion.
Regards
Ryan
Apologies in advance if this is in no way what you meant, but I think all you want to do, basically, is set the list item display to inline-block. Something like this:
.nav-container li {
box-shadow: 0 2px 2px 2px black;
display: inline-block;
width: 300px;
}
You'd need to remove the box shadow and width from .nav-container and put it here instead.
You're obviously going to see a lot of issues on smaller screens if that's all you do, but maybe that gets you started?