Apply Color Picker Selection to Div Font

Apply Color Picker Selection to Div Font - javascript

How would I apply the selected color from the color-picker to the these divs: #header, #subHeader, #button ?
How can I hide the border of the div #button until the user types text into <input id="text3" class="textInput">
$(document).ready(function(){
var div1 = $('#header')[0];
$('#text1').bind('keyup change', function() {
div1.innerHTML = this.value;
});
var div2 = $('#subHeader')[0];
$('#text2').bind('keyup change', function() {
div2.innerHTML = this.value;
});
var div3 = $('#button')[0];
$('#text3').bind('keyup change', function() {
div3.innerHTML = this.value;
});
});
$(".basic").spectrum();
$(".override").spectrum({
color: "yellow"
});
$(".startEmpty").spectrum({
allowEmpty: true
});
.wrapper {
padding: 10px;
border: 2px solid black;
}
h2 {
margin: 20px 0 5px;
font-size: 16px;
font-family: "helevtica", sans-serif;
font-weight: 400;
}
#header {
font-size: 60px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 10px 0;
padding: 20px;
}
#subHeader {
font-size: 24px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 300;
margin: 10px 0;
padding: 20px;
display: block;
}
#button {
font-size: 16px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 30px 0;
padding: 16px 24px;
border: 2px solid #000;
border-radius: 3px;
text-align: center;
}
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.js"></script>
<div class="wrapper">
<div id="header"></div>
<div id="subHeader"></div>
<div id="button"></div>
</div>
<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button</h2><input id="text3" class="textInput">
<h2>Color</h2>
<input type='text' class="basic" />

This will change your #subHeader color.
$(document).ready(function(){
var div1 = $('#header')[0];
$('#text1').bind('keyup change', function() {
div1.innerHTML = this.value;
});
var div2 = $('#subHeader')[0];
$('#text2').bind('keyup change', function() {
div2.innerHTML = this.value;
});
var div3 = $('#button')[0];
$('#text3').bind('keyup change', function() {
div3.innerHTML = this.value;
if(this.value.length > 0) {
$('#button').css('display', 'block')
} else {
$('#button').css('display', 'none')
}
});
});
$(".basic").spectrum({
change: function(color) {
console.log(color.toHexString());
$('#subHeader').css('color',color.toHexString());
var s = '2px solid ' + color.toHexString();
$('#button').css('border', s);
}
});
$(".override").spectrum({
color: "yellow"
});
$(".startEmpty").spectrum({
allowEmpty: true
});
.wrapper {
padding: 10px;
border: 2px solid black;
}
h2 {
margin: 20px 0 5px;
font-size: 16px;
font-family: "helevtica", sans-serif;
font-weight: 400;
}
#header {
font-size: 60px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 10px 0;
padding: 20px;
}
#subHeader {
font-size: 24px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 300;
margin: 10px 0;
padding: 20px;
display: block;
}
#button {
display:none;
font-size: 16px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 30px 0;
padding: 16px 24px;
border: 2px solid #000;
border-radius: 3px;
text-align: center;
}
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.js"></script>
<div class="wrapper">
<div id="header"></div>
<div id="subHeader"></div>
<div id="button"></div>
</div>
<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button</h2><input id="text3" class="textInput">
<h2>Color</h2>
<input type='text' class="basic" />

Add this:
$(".basic").spectrum({
change: function(color) {
console.log(color.toHexString());
//add your code here
}
});
Then you should add your code to change what you want based on the selected color. Let me know if this helped you, or if you have any other question.

Related

Function slideToggle not detecting the previous open/close state of the div script only javascript

Function slideToggle not detecting the previous open/close state of the div script only javascript because in jquery no problem but I only want javascript.
When I click on the second button the div opens and this closes right away as the script does not include detect the state I think but I do not see how to modify the javascript script to prevent the bug.
I want each button to open and close its own div.
current result :
https://jsfiddle.net/vincent1890/5fje4zwv/2/
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css.css">
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<style type="text/css">
/* Just to play with animations */
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
font-size: 0.835em;
text-transform: uppercase;
letter-spacing: 0.125em;
font-weight: bold;
}
/* Some Generic styles */
body {
text-align: center;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color: #444;
line-height: 1.6;
}
/* CSS styles "+ OPTIONS ..." */
.bouton-deplier {
text-decoration: none;
color: #fff;
background: #000;
padding: 5px 10px;
cursor: pointer;
}
.montexte {
padding: 10px 10px 20px 10px;
}
#mdiv {
height: 0px;
margin-top: 0px;
border-radius: 0px;
font-weight: bold;
text-align: center;
overflow-y: hidden;
background-color: #ef1;
margin-bottom: 0em;
color: rgba(0, 0, 0, .65);
}
#mdiv2 {
height: 0px;
margin-top: 0px;
border-radius: 0px;
font-weight: bold;
text-align: center;
overflow-y: hidden;
background-color: #ef1;
margin-bottom: 0em;
color: rgba(0, 0, 0, .65);
}
</style>
</head>
<body onload="chg_item()">
<div class="header" id="myHeader" >
<button class="bouton-deplier" id="mbtn" onclick="slideToggle('mdiv', 50);">+ Options autres</button>
<button class="bouton-deplier" id="mbtn2" onclick="slideToggle('mdiv2', 100);">+ Optionnel (Telephonie Audioconf)</button>
<div id="mdiv">
<div class="montexte">
<label for="UidText">Uid (User):</label>
<input type="text" id="ChoisirUid" onfocus="this.value=''" onchange="chg_item()">
</div>
</div>
<div id="mdiv2">
<div class="montexte">
<label for="TelNumberText">Num Tel (User):</label>
<input type="text" id="ChoisirTelNumber" onfocus="this.value=''" onchange="chg_item()">
<br>
<label for="NomPrenomText">Nom Prenom :</label>
<input type="text" id="ChoisirNomPrenom" onfocus="this.value=''" onchange="chg_item()">
</div>
</div>
</div>
</body>
<script>
var slideOpen = false;
//var heightChecked = false;
var initHeight = 60;
var intval = null;
function slideToggle(NameDiv, Height) {
var initHeight = Height;
window.clearInterval(intval);
var NameDiv = document.getElementById(NameDiv);
/*
if(!heightChecked) {
initHeight = NameDiv.offsetHeight;
heightChecked = true;
}
*/
if(slideOpen) {
var h = initHeight;
slideOpen = false;
intval = setInterval(function(){
h--;
NameDiv.style.height = h + 'px';
if(h <= 0)
window.clearInterval(intval);
}, 1
);
}
else {
var h = 0;
slideOpen = true;
intval = setInterval(function(){
h++;
NameDiv.style.height = h + 'px';
if(h >= initHeight)
window.clearInterval(intval);
}, 1
);
}
}
</script>
</html>

HTML
<div class="container">
<button id="btn1" class="btn" onclick="clickHandler('first')">First tab</button>
<button id="btn2" class="btn" onclick="clickHandler('second')">Second tab</button>
<div id="first" class="data hidden">Hello</div>
<div id="second" class="data hidden">World!</div>
</div>
JavaScript
function clickHandler(id) {
toggle("data");
const div = document.getElementById(id);
div.classList.add("shown");
div.classList.remove("hidden");
}
function toggle(className) {
const elements = document.getElementsByClassName(className);
for (let i = 0; i < elements.length; i++) {
const elm = elements[i];
if (elm.classList.contains("shown")) {
elm.classList.remove("shown")
elm.classList.add("hidden")
}
}
}
This handler changes every element currently shown to hidden, then executes the clickHandler and shows the button only which was clicked.
You can add more css to this for better visuals.
Check out this JSFiddle

You can do like this with jquery
$(".bouton-deplier").click(function() {
var btnID = $(this).attr('id');
if ($(".textContent:visible").is(':visible')) {
$(".textContent:visible").slideUp(0, function() {
$("." + btnID + ".textContent").slideDown("slow");
});
} else {
$("." + btnID + ".textContent").slideDown("slow");
}
});
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
font-size: 0.835em;
text-transform: uppercase;
letter-spacing: 0.125em;
font-weight: bold;
}
/* Some Generic styles */
body {
text-align: center;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color: #444;
line-height: 1.6;
}
/* CSS styles "+ OPTIONS ..." */
.bouton-deplier {
text-decoration: none;
color: #fff;
background: #000;
padding: 5px 10px;
cursor: pointer;
}
.montexte {
padding: 10px 10px 20px 10px;
}
.mbtn {
display:none;
height: 60px;
margin-top: 0px;
border-radius: 0px;
font-weight: bold;
text-align: center;
overflow-y: hidden;
background-color: #ef1;
margin-bottom: 0em;
color: rgba(0, 0, 0, .65);
}
.mbtn2 {
display:none;
height: 60px;
margin-top: 0px;
border-radius: 0px;
font-weight: bold;
text-align: center;
overflow-y: hidden;
background-color: #ef1;
margin-bottom: 0em;
color: rgba(0, 0, 0, .65);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header" id="myHeader" >
<button class="bouton-deplier" id="mbtn">+ Options autres</button>
<button class="bouton-deplier" id="mbtn2">+ Optionnel (Telephonie Audioconf)</button>
<div class="mbtn textContent">
<div class="montexte">
<label for="UidText">Uid (User):</label>
<input type="text" id="ChoisirUid" onfocus="this.value=''" onchange="chg_item()">
</div>
</div>
<div class="mbtn2 textContent">
<div class="montexte">
<label for="TelNumberText">Num Tel (User):</label>
<input type="text" id="ChoisirTelNumber" onfocus="this.value=''" onchange="chg_item()">
<br>
<label for="NomPrenomText">Nom Prenom :</label>
<input type="text" id="ChoisirNomPrenom" onfocus="this.value=''" onchange="chg_item()">
</div>
</div>
</div>

Auto resize text element not working with keyup

In my below jQuery I have an element that reflects the written input within a secondary element. At the same time the element with the reflected text needs to resize, this is working, but there are 2 problems I cannot resolve:
1. When holding a backspace down, it doesn't keep up.
2. When you press single backspace, it skips a character and field cannot be emptied.
Please see below snippet:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').bind('keypress keyup blur', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>

The problem is that the .bind('keypress keyup blur', function() { is not cooping well with updating the values. When the key is down it needs an update and is waiting for up, it then skips, and vice versa.
So the solution here is to use .on('input', function() { instead.
See below outcome:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').on('input', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>

How can I persist state of slideToggle() in my case?

I want javascript function slideToggle() to persist it's state. For now, everytime i refresh the page, it looses the information. i know it can be done using cookies or localstorage but i have failed to do so..
I would really be thankful if someone could show me how to implement a solution in my code;
//toggle hide/show shout box
$(".close_btnn").click(function (e) {
//get CSS display state of .toggle_chat element
var toggleState = $('.toggle_chat').css('display');
//toggle show/hide chat box
$('.toggle_chat').slideToggle();
//use toggleState var to change close/open icon image
if(toggleState == 'block')
{
$(".header div").attr('class', 'open_btnn');
}else{
$(".header div").attr('class', 'close_btnn');
}
});
This is the HTML/PHP of the page with the shoutbox;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.shout_box {
background: #000000;
width: 260px;
overflow: hidden;
position: fixed;
bottom: 0;
right: 10px;
z-index:9;
}
.shout_box .header .close_btn {
background: url(close_btn.gif) no-repeat 0px 0px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .close_btn:hover {
background: url(close_btn.gif) no-repeat 0px -16px;
}
.shout_box .header .open_btn {
background: url(close_btn.gif) no-repeat 0px -32px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .open_btn:hover {
background: url(close_btn.gif) no-repeat 0px -48px;
}
.shout_box .header{
padding: 5px 3px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: bold;
color:#fff;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom:none;
cursor: pointer;
}
.shout_box .header:hover{
background-color: #000000;
}
.shout_box .message_box {
background: #FFFFFF;
height: 200px;
overflow:auto;
border: 1px solid #CCC;
}
.shout_msg{
margin-bottom: 10px;
display: block;
border-bottom: 1px solid #F3F3F3;
padding: 0px 5px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
color:#7C7C7C;
}
.message_box:last-child {
border-bottom:none;
}
time{
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: normal;
float:right;
color: #D5D5D5;
}
.shout_msg .username{
margin-bottom: 10px;
margin-top: 10px;
}
.user_info input {
width: 98%;
height: 25px;
border: 1px solid #CCC;
border-top: none;
padding: 3px 0px 0px 3px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
font-weight: bold;
display: block;
}
-->
</style>
<script type="text/javascript" src="shoutbox/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// load messages every 1000 milliseconds from server.
load_data = {'fetch':1};
//window.setInterval(function(){
$.post('shoutbox/shout.php', load_data, function(data) {
$('.message_box').html(data);
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
});
//}, 1000);
//method to trigger when user hits enter key
$("#shout_message").keypress(function(evt) {
if(evt.which == 13) {
var iusername = "java";
var imessage = $('#shout_message').val();
post_data = {'username':iusername, 'message':imessage};
//send data to "shout.php" using jQuery $.post()
$.post('shoutbox/shout.php', post_data, function(data) {
//append data into messagebox with jQuery fade effect!
$(data).hide().appendTo('.message_box').fadeIn();
//keep scrolled to bottom of chat!
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
//reset value of message box
$('#shout_message').val('');
}).fail(function(err) {
//alert HTTP server error
alert(err.statusText);
});
}
});
//toggle hide/show shout box
$(".close_btn").click(function (e) {
//get CSS display state of .toggle_chat element
var toggleState = $('.toggle_chat').css('display');
//toggle show/hide chat box
$('.toggle_chat').slideToggle();
//use toggleState var to change close/open icon image
if(toggleState == 'block')
{
$(".header div").attr('class', 'open_btn');
}else{
$(".header div").attr('class', 'close_btn');
}
});
});
</script>
</head>
<body>
<div class="shout_box">
<div class="header">Shout Box <div class="close_btn"> </div></div>
<div class="toggle_chat">
<div class="message_box">
</div>
<div class="user_info">
<input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" />
</div>
</div>
</div>
</body>
</html>

Here is how you can do it using localstorage.
$(document).ready(function() {
var $shoutBox = $('#shout-box');
var isShoutBoxClosed = JSON.parse(localStorage.getItem('shoutBoxClosed'));
if(isShoutBoxClosed){
$shoutBox.hide();
}
//toggle hide/show shout box
$(".close_btn").click(function (e) {
//save users preference on localstoage
localStorage.setItem('shoutBoxClosed', true);
//toggle show/hide chat box
$shoutBox.slideToggle();
});
});
.shout_box {
background: #000000;
width: 260px;
overflow: hidden;
position: fixed;
bottom: 0;
right: 10px;
z-index:9;
}
.shout_box .header .close_btn {
background: url(close_btn.gif) no-repeat 0px 0px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .close_btn:hover {
background: url(close_btn.gif) no-repeat 0px -16px;
}
.shout_box .header .open_btn {
background: url(close_btn.gif) no-repeat 0px -32px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .open_btn:hover {
background: url(close_btn.gif) no-repeat 0px -48px;
}
.shout_box .header{
padding: 5px 3px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: bold;
color:#fff;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom:none;
cursor: pointer;
}
.shout_box .header:hover{
background-color: #000000;
}
.shout_box .message_box {
background: #FFFFFF;
height: 200px;
overflow:auto;
border: 1px solid #CCC;
}
.shout_msg{
margin-bottom: 10px;
display: block;
border-bottom: 1px solid #F3F3F3;
padding: 0px 5px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
color:#7C7C7C;
}
.message_box:last-child {
border-bottom:none;
}
time{
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: normal;
float:right;
color: #D5D5D5;
}
.shout_msg .username{
margin-bottom: 10px;
margin-top: 10px;
}
.user_info input {
width: 98%;
height: 25px;
border: 1px solid #CCC;
border-top: none;
padding: 3px 0px 0px 3px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
font-weight: bold;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="shout-box" class="shout_box">
<div class="header">Shout Box <div class="close_btn">X</div></div>
<div class="toggle_chat">
<div class="message_box">
</div>
<div class="user_info">
<input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" />
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
Here is a jsbin of the above snippet https://jsbin.com/hewataz/edit?html,js,output

As you pointed out you can use a cookie to save the user preference. You can read more about cookies
When the user clicks the button to toggle the chat you will set the cookie to that preference. Then when the page loads you will read the cookie and set the css on the chat box. Here is an example and a working fiddle
https://fiddle.jshell.net/75nrozxd/1
<div class="shout_box">
<div class="header">Shout Box
<div class="close_btn">Toggle</div>
</div>
<div class="toggle_chat">
<div class="message_box">
</div>
<div class="user_info">
<input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" />
</div>
</div>
</div>
<script>
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)chatCSS\s*\=\s*([^;]*).*$)|^.*$/, "$1");
console.log("Cookie Value is: " + cookieValue)
$('.toggle_chat').css("display", cookieValue);
//toggle hide/show shout box
$(".close_btn").click(function(e) {
//get CSS display state of .toggle_chat element
//toggle show/hide chat box
$('.toggle_chat').slideToggle(function() {
var toggleState = $('.toggle_chat').css('display');
document.cookie = "chatCSS=" + toggleState;
//use toggleState var to change close/open icon image
if (toggleState == 'block') {
$(".header div").attr('class', 'open_btn');
} else {
$(".header div").attr('class', 'close_btn');
}
});
});
</script>

javascript is not working

jsp and a loginValidate.js i have provided a link to js in jsp. But the login form is not getting validates. I have a span id which should display an error message but its not happening.
my login.jsp is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Header</title>
<script type="text/javascript" src="js/LoginValidate.js"></script>
<link href="CSS/Header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div class="wrapper col1">
<div id="header">
<div id="logo">
<h1>
<U>SK Business Group, Inc.</U>
</h1>
<p>
<strong>Helping GROW your business</strong>
</p>
</div>
<div class="wrapper col6">
<div id="head">
<div id="login">
<h2>Login !</h2>
<B>Already have an account.LOGIN here</B>
<form name="login" action="LoginValidateServlet" method="post"
onSubmit="return loginValidate()">
<input type="hidden" name="pagename" value="login" />
<fieldset>
<legend>Client Login</legend>
<div class="fl_left">
<input type="text" name="txtUsername" id="uname" value="Enter Username…" onfocus="this.value=(this.value=='Enter Username…')? '' : this.value;" /><br />
<span id="errorUserNameMissing" style="display: none;"><font
color="red">*Enter user name.</font></span>
<input type="password" name="txtPassword" id="pass" value="Enter Password…" onfocus="this.value=(this.value=='Enter Password…')? '' : this.value ;" /><br/> <br/><span
id="errorPasswordMissing" style="display: none;"><font
color="red">*Enter Password.</font></span>
<select name="txtCategory" id="txtCategory" style="width: 230px">
<option value="unknown">Select your Category</option>
<option value="Admin">Admin</option>
<option value="Affiliate">Affiliate</option>
<option value="Client">Client</option>
</select>
</div>
<div class="fl_right">
<input type="submit" name="login_go" id="login_go"
value="»" />
</div>
</fieldset>
</form>
<p>
» Lost Your Password | Create An Account »
</p>
</div>
<br class="clear" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And this is my CSS
#CHARSET "ISO-8859-1";
#top {
margin: 0;
padding: 0;
font-size: 12px;
font-family: verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #DDDDDD;
}
.clear {
clear: both;
}
br.clear {
clear: both;
margin-top: -15px;
}
a {
outline: none;
text-decoration: none;
}
.fl_left {
float: left;
}
.fl_right {
float: right;
}
div.wrapper {
display: block;
width: 100%;
margin: 0;
text-align: left;
}
div.wrapper h1,div.wrapper h2,div.wrapper h3,div.wrapper h4,div.wrapper h5,div.wrapper h6
{
margin: 0 0 20px 0;
padding: 0 0 8px 0;
font-size: 20px;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
border-bottom: 1px dotted #DDDDDD;
}
.col1 {
color: #2684B7;
background-color: #E3F1F9;
}
.col6 {
color: #999999;
background-color: #F3F3F3;
}
.col6 a {
color: #2684B7;
background-color: #F3F3F3;
}
#logo {
width: 378px;
}
#header,#head {
color: #2684B7;
position: relative;
margin: 0 auto 0;
display: block;
width: 960px;
}
#header {
padding: 30px 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
#header #logo {
display: block;
float: left;
width: 300px;
width: 100%;
margin-top: 7px;
}
#header #logo h1,#header #logo p {
margin: 0;
padding: 0;
line-height: normal;
}
#header #logo h1 {
margin: 0 0 10px 0;
padding: 0;
font-size: 36px;
border: none;
}
#header h1 a {
color: #3A6C86;
background-color: #E3F1F9;
}
#header #login {
width: 300px;
height: 250px;
float: right;
padding: 10px 10px 12px 10px;
color: #000000;
background-color: #ADD6ED;
}
#header #login p {
margin: 0 0 8px 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#head {
padding: 30px 0;
}
#head h2 {
margin-bottom: 10px;
border-bottom: 1px dotted #999999;
}
#login {
display: block;
float: right;
width: 300px;
}
form,fieldset,legend {
margin: 0;
padding: 0;
border: none;
}
legend {
display: none;
}
#header input {
display: block;
float: left;
width: 155px;
margin: 0 11px 0 0;
padding: 5px;
color: #4C4C4C;
background-color: #FFFFFF;
border: 1px solid #396B86;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#header input#login_go {
width: auto;
height: auto;
margin: 0;
padding: 4px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
background-color: #4D9FC7;
cursor: pointer;
}
#head form {
display: block;
width: 300px;
margin: 0;
padding: 10px 0 0 0;
border: none;
}
#head input {
display: block;
width: 218px;
margin: 0 0 10px 0;
padding: 5px;
color: #FFFFFF;
background-color: #2684B7;
border: 1px solid #1C5E82;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#head input#login_go {
width: 58px;
height: 100px;
margin: 0;
padding: 0;
font-weight: bold;
text-transform: uppercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 60px;
cursor: pointer;
}
#head select#txtCategory {
width: width:956px;
}
And this is my LoginValidate.js
function loginValidate() {
var valid = true;
var validationMessage = 'Please correct the following errors:\r\n';
document.getElementById('errorUserNameMissing').style.display = 'none';
document.getElementById('errorPasswordMissing').style.display = 'none';
if ((document.getElementById('uname').value = 'Enter Username…')||(document.getElementById('uname').value.length == 0) ){
validationMessage = validationMessage + ' - UserName is missing\r\n';
document.getElementById('errorUserNameMissing').style.display = 'block';
valid = false;
} else {
document.getElementById('errorUserNameMissing').style.display = 'none';
}
if ((document.getElementById('pass').value = 'Enter Password…')||(document.getElementById('pass').value.length == 0) ){
validationMessage = validationMessage + ' - Password is missing\r\n';
document.getElementById('errorPasswordMissing').style.display = 'block';
valid = false;
} else {
document.getElementById('errorPasswordMissing').style.display = 'none';
}
if (valid == false) {
alert(validationMessage);
}
return valid;
}
please some one help in validating the login page with errors on not providing any input(it should display respective error message).
Thanks in advance

In the JavaScript
document.getElementById('uname').value
returns "Enter Username…" that is the default value and
document.getElementById('uname').value.length
returns 15 that's why the condition is not matched.
You have to check for default value along with length.
document.getElementById('uname').value = 'Enter Username…'
But once this field is focused the value is empty and it works fine.

your code provide null pointer exception here
document.getElementById('errorPassWordMissing').style.display = '';
exception raise and your function does not return false and form post data.
use placeholder property instead of value and focus event, for example
<input type="password" name="txtPassword" id="pass" placeholder="Enter password…" />
also may be you should use jQuery and validation plugin
http://plugins.jquery.com/validate/

One obvious problem I can see. This is wrong:
document.getElementById('errorUserNameMissing').style.display = '';
You shouldn't be setting style.display to a blank string. It should be one of the standard CSS display types, like "inline" or "block" (and there are other types).

What is wrong with this tabbed content?

I have a google map and a contact form on my contact.html file. They were displayed block as default. I wanted to change it to a tabbed look.
Let's say i have a code like this in HTML:
<div id="tab-group" class="tab-group">
<h3 class="tab-header activate" id="tab-header-1">We are here</h3>
<div class="tab-content activate" id="tab-content-1"></div>
<h3 class="tab-header" id="tab-header-2">Contact us</h3>
<div class="tab-content" id="tab-content-2">
The content in that div with the id="tab-content-1" , I have a google map with the necessary script in the head. And in div with the id="tab-content-2", I have a contact form like;
<form class="tab-content-2" method="post" action="contact-post.html">
<div>
<span><label>NAME</label></span>
<span><input name="userName" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-MAIL</label></span>
<span><input name="userEmail" type="text" class="textbox"></span>
</div>
<div>
<span><label>PHONE</label></span>
<span><input name="userPhone" type="text" class="textbox"></span>
</div>
<div>
<span><label>YOUR MESSAGE</label></span>
<span><textarea name="userMsg"> </textarea></span>
</div>
<div>
<span><input type="submit" value="Send me"></span>
</div>
</form>
Here is the JavaScript:
"use strict";
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('tab-group').className = 'activate';
var headerClass = 'tab-header',
contentClass = 'tab-content';
document.getElementById('tab-group').addEventListener('click', function(event) {
var myHeader = event.target;
if (myHeader.className !== headerClass) return;
var myID = myHeader.id, // e.g. tab-header-1
contentID = myID.replace('header', 'content'); // result: tab-content-1
deactivateAllTabs();
myHeader.className = headerClass + ' activate';
document.getElementById(contentID).className = contentClass + ' activate';
});
function deactivateAllTabs() {
var tabHeaders = document.getElementsByClassName(headerClass),
tabContents = document.getElementsByClassName(contentClass);
for (var i = 0; i < tabHeaders.length; i++) {
tabHeaders[i].className = headerClass;
tabContents[i].className = contentClass;
}
}
});
I know I have to clean all these up but i am lost in such a basic thing and getting angry, here is the CSS:
#tab-group h3 {
text-align: left;
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
.activate {
position: relative;
margin-bottom: 2em;
}
#tab-group.activate .tab-header {
font-weight: normal;
font-size: 13px;
text-transform: uppercase;
padding: 4px 6px;
display:inline;
}
.activate .tab-header {
position: absolute;
top: 0;
margin: 0;
padding: 0.25em 0.5em;
left: 0;
background: rgba(168, 161, 152, 0.34);
border: 1px solid #161616;
border-radius: 4px 4px 0 0;
z-index: 2;
cursor: pointer;
}
.activate .tab-header.activate {
background: #000;
}
.activate .tab-content {
position: relative;
top: 0;
margin: 0;
padding: 0.5em;
top: 24px;
border: 1px solid #999;
z-index: 1;
background: white;
zoom: 1;
}
.activate .tab-content:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.activate #tab-header-2 {
left: 9em;
}
.activate .tab-content {
}
.activate .tab-content:active {
display: block;
}
#tab-content-1 {
width: 56.4em;
height:30em;
}
#tab-header-1 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
#tab-header-2 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
#tab-content-2{
position:relative;
padding-bottom:30px;
background-color:#000;
}
I want it to act like a simple tabbed content. Yet, the contents of the tabs are displayed as block and it doesn't change the content when you click on h3 tab-headers.
it looks like this.....
What am I doing wrong ? Thanks in advance...

It should just be a simple fix. Try adding:
.activate .tab-content { display: none; }
.activate .tab-content.activate { display: block; }
That way, only the active tab is visible, and the others are hidden.
Check it out: http://jsfiddle.net/t8G57/2/

Develop Reference

JavaScript is the programming language of the Web.

Apply Color Picker Selection to Div Font - javascript

Add this: $(".basic").spectrum({ change: function(color) { console.log(color.toHexString()); //add your code here } }); Then you should add your code to change what you want based on the selected color. Let me know if this helped you, or if you have any other question.

Related

Function slideToggle not detecting the previous open/close state of the div script only javascript

Auto resize text element not working with keyup

How can I persist state of slideToggle() in my case?

javascript is not working

What is wrong with this tabbed content?

Categories

Resources