Develop Reference

Notification show as input textbox click with jquery patterns

I don't know that I will explain my question well or not because I'm new on stack overflow. I've read the T&C and have tried my best to explain what I want to accomplish. I hope you understand what I'm asking.
I would like to create a system using javascript or jQuery that will display a popup box on the top or bottom of a browser window with custom text and colors defined in my css styles. The "notification" would tell users to about what they need to do in the text box like "Write your email" etc.
This is the code that will show you what I'd like them to look like:
<div class="warning"id="notification"><span>This is default message show first time</span></div>
<div class="information" id="notification"><span>Enter your registered Email ID</span></div>
<div class="error" id="notification"><span>Email ID is incorrect</span></div>
<div class="error" id="notification"><span>Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.</span></div>
<input type="text" name="email" id="username"/>
<input type="text" name="mobile" id="phone"/>
<input type="submit" id="ok" name="done"/>
<style>#notification {
position:fixed;
width: 100%;
text-align: center;
z-index:99;
overflow:hidden;
}
#notification h2{
font-size:16px;
font-weight:400
}
/*#notification.showNote{
width:50%;
left:230px
}*/
/*error, info, notice, alert*/
.success,.warning,.error,.information{display: block; position: relative; padding:5px 20px}
.information{background-color:#3bafda}
.success{background-color:#8cc152}
.warning{background-color:#f6bb42}
.error{background-color:#e9573f}
.notify h2{color:#fff}</style>

Some tips:
ids are unique in each page. You can not define multiple elements with just one id. Instead, You should use class attribute`.
To do something after some seconds, You should use setTimeout function
You must know about jQuery selectors and some of its functions. Read available tutorials on the web.
To validate a value, You must know Regex
A simple working example of your question is this. Hope it helps
let time2Hide = 5000;
function f(selector) {
$(selector).show();
setTimeout(() => {
$(selector).hide();
}, time2Hide);
}
f("#warning");
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
function onSubmit() {
let email = $("#email").text()
if(!email) {
f("#information" )
}
else if(validateEmail(email)) {
f("#success");
}
else {
f("#error")
}
}
/**********************************************/
/* notification styles */
.notification {
position: fixed;
width: 100%;
text-align: center;
z-index: 99;
overflow: hidden;
}
.notification h2 {
font-size: 16px;
font-weight: 400
}
/*#notification.showNote{
width:50%;
left:230px
}*/
/*error, info, notice, alert*/
#success,
#warning,
#error,
#information {
display: none;
position: relative;
padding: 5px 20px
}
#information {
background-color: #3bafda
}
#success {
background-color: #8cc152
}
#warning {
background-color: #f6bb42
}
#error {
background-color: #e9573f
}
.notify h2 {
color: #fff
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="warning" class="notification">
<span>This is default message show first time</span>
</div>
<div id="information" class="notification">
<span>Enter your registered Email ID</span>
</div>
<div id="error" class="notification">
<span>Email ID is incorrect</span>
</div>
<div id="success" class="notification">
<span>Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.</span>
</div>
<hr><br><br><br>
<input type="email" name="email" id="username" />
<input type="phone" name="mobile" id="phone" />
<input type="submit" id="ok" name="done" onclick="onSubmit()"/>
let time2Hide = 5000;
function hideAll() {
$("#error").hide();
$("#warning").hide();
$("#success").hide();
$("#information").hide();
}
function show(selector) {
hideAll();
$(selector).show();
}
function showNHide(selector) {
hideAll();
$(selector).show();
setTimeout(() => {
$(selector).hide(); show("#warning");
}, time2Hide);
}
$("#username")
.on("input click", () => {
show("#information");
})
.on("input", () => {
let email = $("#username").val();
if (!email) {
show("#information");
} else if (validateEmail(email)) {
showNHide("#success");
} else {
show("#error");
}
})
.on('focusout', () => {
show("#warning");
});
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
function onSubmit() {
let email = $("#username").val();
if (!email) {
show("#information");
} else if (validateEmail(email)) {
showNHide("#success");
} else {
show("#error");
}
}
show("#warning");
/**********************************************/
/* notification styles */
.notification {
position: fixed;
width: 100%;
text-align: center;
z-index: 99;
overflow: hidden;
}
.notification h2 {
font-size: 16px;
font-weight: 400
}
/*#notification.showNote{
width:50%;
left:230px
}*/
/*error, info, notice, alert*/
#success,
#warning,
#error,
#information {
display: none;
position: relative;
padding: 5px 20px
}
#information {
background-color: #3bafda
}
#success {
background-color: #8cc152
}
#warning {
background-color: #f6bb42
}
#error {
background-color: #e9573f
}
.notify h2 {
color: #fff
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="warning" class="notification">
<span>This is default message show first time</span>
</div>
<div id="information" class="notification">
<span>Enter your registered Email ID</span>
</div>
<div id="error" class="notification">
<span>Email ID is incorrect</span>
</div>
<div id="success" class="notification">
<span>Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.</span>
</div>
<hr><br><br><br>
<input type="email" name="email" id="username" />
<input type="phone" name="mobile" id="phone" />
<input type="submit" id="ok" name="done" onclick="onSubmit()" />

Why does the following Jquery event.target does not work properly

Following is my code in question
(function($) {
'use strict';
var button = $('#open_button');
var box = $('#dropdown');
function init() {
eventsInit();
}
function eventsInit() {
box.hide();
button.on('click', open);
}
function open(event) {
if (event.target !== button[0]) {
box.hide();
} else {
box.show();
}
}
init();
})(jQuery);
body,
html {
padding: 0;
margin: 0;
}
#container {
height: 100px;
width: 800px;
margin: 0 auto;
}
h1 {
color: white;
}
#dropdown {
height: 600px;
width: 800px;
background-color: black;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<form action="" id="open_button">
<input type="text" placeholder="Enter the text" />
</form>
</div>
<div id="dropdown"></div>
I need to dropdown when I click on the input form input element and close it when I click outside.
My code I believe it says, if the click target is not the button, close the dropdown, else show.
Could someone explain, why doesnt it work ?

(event.target !== button[0]) is always true.
event.target is the <input> field.
button[0] is the <form> element.
You could move the #open_button id to the input field, that would cause the box to appear when the user clicks the input field -- but then the box would never disappear (because your if condition would never return true.)
What you really want are focus and blur handlers on the input field, to show and hide the box respectively:
$('#open_button input').on('focus', function() {
$('#dropdown').show()
}).on('blur', function() {
$('#dropdown').hide()
});
// added to answer per comment below:
$('#dropdown').on('mousedown',function(e) {
e.preventDefault() // prevent input field from losing focus when user clicks inside the box
});
$('#dropdown').hide();
#dropdown {
height: 600px;
width: 800px;
background-color: black;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<form action="" id="open_button">
<input type="text" placeholder="Enter the text" />
</form>
</div>
<div id="dropdown"></div>

Firing function on focus or blur(together)

What I want is to be able to do something when the input get focus or lose it(both event).
I tried the following, but this works separately(when coded separately) by event: only on focus, or only on losing focus.
Also, I want it cross platform as possible(including touch devices), would this be enough(focus and blur) or there is some other events I need to care?
HTML:
<input type="text" class="inp">
<div id="zzz" class=""></div>
CSS:
div {
height: 100px;
width: 100px;
background: #000;
}
.one {
background: #ff0;
}
jQuery(3.2.1):
$(document).ready(function() {
// Also tried using: $(".inp").focus.blur(function() {
$(".inp").on("keypress", "focus", "blur", function () {
if ( !$(this).val() ) {
$("#zzz").removeClass("one");
}
else {
$("#zzz").addClass("one");
}
});
});

Another way of doing this is -
You have to change this -
$(".inp").on("keypress", "focus", "blur", function () {
to
$(".inp").on("keypress focus blur", function () {
$(document).ready(function() {
// Also tried using: $(".inp").focus.blur(function() {
$(".inp").on("keypress focus blur", function () {
if ( !$(this).val() ) {
$("#zzz").removeClass("one");
}
else {
$("#zzz").addClass("one");
}
});
});
div {
height: 100px;
width: 100px;
background: #000;
}
.one {
background: #ff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp">
<div id="zzz" class=""></div>

Give all the event listeners separately and invoke a function on them it will work.
$(document).ready(function() {
$(".inp").on("keypress",function () {
doSomething();
});
$(".inp").on("focus",function () {
doSomething();
});
$(".inp").on("blur",function () {
doSomething();
});
});
function doSomething()
{
if ( !$(".inp").val() ) {
$("#zzz").removeClass("one");
}
else {
$("#zzz").addClass("one");
}
}
div {
height: 100px;
width: 100px;
background: #000;
}
.one {
background: #ff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp">
<div id="zzz" class=""></div>
OR
If you really want to combine all the events then follow the below approach:
$('#element').on('keypress blur focus', function(e) {
// e.type is the type of event fired
});
See the code example below:
$(document).ready(function() {
$('.inp').on('keypress blur focus', doSomething);
});
function doSomething()
{
if ( !$(".inp").val() ) {
$("#zzz").removeClass("one");
}
else {
$("#zzz").addClass("one");
}
}
div {
height: 100px;
width: 100px;
background: #000;
}
.one {
background: #ff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp">
<div id="zzz" class=""></div>

How do I align text/class with the button in the <style> tag when it won't center in css or style tag?

I put margin-auto in the toggle class on my site. It sort of went it the middle but it didn't align with the button. Do I need to do something in CSS or JavaScript and what should I place there?
<style>
.toggler { width: 500px; height: 200px; position: relative; margin-top:0; margin-right:auto; margin-bottom:0;
}
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
.kiri{text-align:center;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 50 };
} else if ( selectedEffect === "transfer" ) {
options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// Run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// Callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
return false;
});
} );
</script>
</head>
<body>
<nav>
<ul>
<li>Contact</li>
<li>JQUERY TIPS</li>
<li>JS TIPS</li>
<li>Info</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<h2>Jquery Tips</h2>
<p id="js">JavaScript/jQuery is a programming language that you can use to add interactivity to your web page.</p>
<p id="poo"> if you put your mouse over the sentence above there will be a light blue highlight the lightgray background that was made using the <span class="pink">onmouse event.</span>
<div class="footer">
<span class="flatorange">#2016-20XX &#8226 Nia Daniels &#8226 FINAL EXAM &#8226 CIST1520 </span><br>
<span class="flatblue">Scripting Technologies</span><br>
<span class="flatgreen">Mr.Cash</span><br>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">2 Jquery Effects</h3>
<p id="hmm">eres una mujer o hombre? soy una mujer. quiero una pizza. queires una pizza o no?</p>
</div>
</div>
<div class="kiri">
<select name="effects" id="effectTypes">
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
</select></div>
<div class="kiri">
<button id="button" class="ui-state-default ui-corner-all">Run Le Effect</button></div>
<script>

Add margin: 0 auto; to both .toggler and #effect and it should do the trick. Since you set a width on #effect you'll need the auto margin to handle the centering for you.

jQuery hide if either div is visible

I have 2 divs that are initially hidden
<div id="whistle" style="display:none;">
<div id="lean" style="display:none;">
I also have a div that is visible
<div id="me" style="display:block">
I have jQuery code that allows only the #whistle or #lean divs to be open at once, their buttons will hide the other.
I currently have code that also hides the #me div, but I would now like the #me div to open back up when both #whistle and #lean are closed.
If you want to see the site, the link is maxdev.tk
The jQuery code is
$(document).ready(function(){
$("#calc").click(function(){
$("#whistle").hide(600);
$("#lean").toggle(900);
});
});
$(document).ready(function(){
$("#whi").click(function(){
$("#lean").hide(600);
$("#whistle").toggle(900);
});
});

This is one way to solve it. Find it also as a pen at the end of this post.
$(document).ready(function() {
function callback() {
if( $('#whistle').hasClass('hidden') && $('#lean').hasClass('hidden') ) {
$('#me').removeClass('hidden');
} else {
$('#me').addClass('hidden');
}
}
$('button[data-for=whistle]').on('click', function() {
$('#whistle').toggleClass('hidden');
$('#lean').addClass('hidden');
callback();
});
$('button[data-for=lean]').on('click', function() {
$('#lean').toggleClass('hidden');
$('#whistle').addClass('hidden');
callback();
});
})
.hidden {
opacity: 0;
height: 0;
overflow: hidden;
padding: 0;
}
div {
background-color: #ccc;
border-radius: 25px;
margin-top: 20px;
padding: 50px;
text-align: center;
transition-duration: 0.4s;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-for="whistle">Whistle</button>
<button data-for="lean">Lean</button>
<div id="whistle" class="hidden">Whistle!</div>
<div id="lean" class="hidden">Lean!</div>
<div id="me">Me!</div>
http://codepen.io/anon/pen/yNJrwe

Add this code to the end of whatever buttons' click function.
if( !$('#whistle').is(':visible') && !$('#lean').is(':visible') ) {
$('#me').css("display","block"); // or use .show();
} else {
$('#me').css("display","none"); // or use .hide();
}