I have the following situation see this fiddle: https://jsfiddle.net/rmt70fjw/
In this example there are 2 buttons where only one of them (register-trigger) triggers a popup to open. The other button login-trigger doesn't do this. This situation together with the HTML is a given, and cannot be changed. Be aware that the popup generator is more complex, than just the click on hide example here.
What I am trying to do is that login-trigger opens as well the popup via the register-trigger button and hides the registration form and shows the login form. And for the register-trigger button the other way around. Currently they arrive in a loop because of the popup trigger.
How do I do this? See fiddle with below jQuery attempt and problem.
jQuery
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is the current attempt
jQuery('.login-trigger, .register-trigger').click(function(e){
if(e.currentTarget == '.register-trigger'){
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
} else {
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
jQuery('a.register-trigger').trigger('click');
}
});
You could just add the .register-trigger class to your login button aswell in that case. That will trigger all events of your plugin on the login button click. If you then need some special logic like hiding the register form add some Event handler for your login-trigger
$('.login-trigger').addClass('register-trigger');
// PLUGIN CODE START
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// PLUGIN CODE END
jQuery('.register-trigger').click(function(){
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
});
jQuery('.login-trigger').click(function(e){
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
});
body { background-color: #ddd; }
p { width: 100%; }
.popup {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
margin: 0 20%;
width: auto;
height: 66%;
background-color: #fff;
border: 1px solid #e4e4e4;
border-radius: 5px;
}
.hide { display: none; }
form {
margin: 0.5rem;
display: inline-flex;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.3);
width: 300px;
height: 300px;
text-align: center;
}
#close {
position: absolute;
top: 0;
left: -1.75rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.25);
border-radius: 5px 0 0 5px;
background-color: white;
padding: 0.5rem;
transition: 0.3s all;
}
.btn-wrapper {
display: flex;
justify-content: center;
position: absolute;
bottom: 1rem;
right: 0;
left: 0;
}
a {
width: 200px;
margin: 0 1rem;
line-height: 1.4;
text-align: center;
font-size: 1.2rem;
padding: 0.5rem;
background-color: #eee;
color: #333;
border-radius: 0.5rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.25);
transition: 0.3s all;
}
a:hover, #close:hover {
background-color: #fff;
cursor: pointer;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="popup hide">
<form class="login-form">
<p style="padding:1rem 3rem;text-align:center;">This is the login form</p>
</form>
<form class="register-form">
<p style="padding:1rem 3rem;text-align:center;">This is the registration form</p>
</form>
<div id="close">X</div>
</div>
<div class="btn-wrapper">
<a class="register-trigger">Register</a>
<a class="login-trigger">Log In</a>
</div>
</body>
Here is the code of jQuery which will work for you!
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is to
jQuery('.login-trigger').click(function(e){
jQuery('.popup').removeClass('hide');
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
});
jQuery('.register-trigger').click(function(e){
jQuery('.popup').removeClass('hide');
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
});
Ok, if i understood correctly, it should work like this. Alert should pop up with both buttons.
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is to
$('.login-trigger, .register-trigger').click(function(e){
$('.popup').removeClass('hide');
if(e.currentTarget == $('.register-trigger').get(0)){
alert("test");
$('.popup .register-form').removeClass('hide');
$('.popup .login-form').addClass('hide');
}
else
{
$(".register-trigger").trigger('click');
$('.popup .login-form').removeClass('hide');
$('.popup .register-form').addClass('hide');
}
});
Related
I have one icon. When you hover over the icon with the cursor, the tooltip opens. But when the tooltip is opened, it appears in the input on the back.
Here is the problem;
How can I solve this problem?
html
<div className="installmentinfo__container">
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{billDate}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
</div>
css
.installmentinfo__container {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
background-color: white;
top: 210px;
margin: auto;
transform: translateX(-280px);
padding: 0.3em;
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px ;
}
}
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
So if you don't have any other z-indexes event 9 will do the job :
.installmentinfo__container {
z-index: 9; ..
I want to make a lock screen, when I click on a button, an input require password show up. I set a password, when type a valid password and press enter, the lockscreen disappear. Thank you guys!
Here is my demo : https://jsbin.com/rugoqupora/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>Lockscreen</button>
<div class="lock-screen">
<input type="text" placeholder="Password">
</div>
</body>
</html>
.lock-screen {
display: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, .7);
display: flex;
justify-content: center;
align-items: center;
display: none;
}
btn = document.querySelector('button');
lockscreen = document.querySelector('.lock-screen');
btn.addEventListener('click', function(){
lockscreen.style.display = 'flex';
})
You can easily create the form input etc. But you'll have to host your server to store all the credentials, and send the credentials (hashed) to the sever.
When you want to check if it's valid, just hash the password you typed in, and send it to the server, then if the server says it matches the one stored, then let them through.
I've created an example login dialog here.
function showLogin() {
// .show() doesn't work with transitions
$("#u, #p").val("");
$("#login").show().css("opacity", "1");
$("#loginBackground").show().css("opacity", "0.5");
}
function hideLogin() {
// .hide() doesn't work with transitions,
// but you need it for user interaction
// with objects behind it.
$("#login, #loginBackground").css("opacity", "0").hide();
}
function login() {
var username = $("#u").val();
var password = $("#p").val();
// Do something here!
}
input {
border-radius: 5px;
background: white;
border: solid 1px black;
height: 20px;
margin-top: 3px;
margin-bottom: 2px;
width: 200px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.big-button {
height: 50px;
padding: 0px;
}
.login {
padding-left: 5px;
padding-right: 5px;
width: 188px;
}
input[type="button"],
input[type="submit"],
button {
cursor: pointer;
}
#login {
transition: 0.2s;
border-radius: 5px;
position: fixed;
background: white;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
top: 8px;
left: 50%;
width: 300px;
margin-left: -150px;
height: 150px;
z-index: 10000;
}
#loginBackground {
transition: 0.2s;
background-color: black;
opacity: 0.5;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
margin: 0px;
z-index: 9999;
}
.small-button {
width: 40px;
height: 40px;
}
.no-border {
border: none;
}
.close {
color: red;
left: 30px;
bottom: 20px;
}
.accept {
color: lime;
right: 30px;
top: 25px;
}
.login-button {
position: relative;
font-size: 26px;
border-radius: 100%;
outline: none;
transition: 0.4s;
}
.login-button:hover,
.login-button:focus,
.login-button:active {
background: rgb(127, 127, 255);
color: white;
}
.shadow {
box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.5), 0px 0px 4px rgba(0, 0, 0, 0.5);
}
* {
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
body {
text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2), 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.center {
text-align: center;
}
.login-title {
position: relative;
bottom: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center">
<h1>Foo Bar</h1>
<input class="shadow no-border big-button" type="button" value="Login" onclick="showLogin();">
</div>
<div id="loginBackground" style="opacity: 0; display: none;"></div>
<div id="login" style="opacity: 0; display: none;" class="shadow" action="https://example.com">
<h3 class="login-title">Login to Foo Bar</h3>
<input placeholder="Username or Email" id="u" class="login shadow no-border" type="textbox"><br/>
<input placeholder="Password" id="p" class="login shadow no-border" type="password"><br/>
<input class="shadow no-border small-button accept login-button" type="button" onclick="hideLogin(); login(); " value="✓"><br/>
<input class="shadow no-border small-button close login-button" type="button" onclick="hideLogin(); " value="✗">
</div>
There is currently no possible way to make a lock screen using pure JavaScript! You can make an artificial one that stores the credentials within itself, but hackers could easily just look in the code and get the username/password, therefor making it unsafe.
The only way to truly achieve this is using a server-side language (Like PHP, Node.js) alongside a web language (Like JavaScript). Although, to do this you would need to set up a server (or multiple) that store the credentials, and then send the user's input to the server and have the server check to make sure they are correct. That way the client never stores the password, making it impossible for others to find. (As long as you protect your server well enough and code it right.)
The div I'm animating in jquery is supposed to slide out to expand the width. I've gotten the width animation to work but after adding the slideDown and up code nothing works, the way it should work is:
Enquiries should be clicked and it expands and after it expands the. For slides down and when its clicked again, first the fork slides up and then the ENQUIRIES- shown goes back to its original width.
I'm not sure where my codes gone wrong as I'm new to jquery and java script. THANK YOU FOR ANY HELP!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
setTimeout(function() {
$('#enquiry-form').slideDown('slow');
}, 1000);
function() {
if ($('#enquiry-form').is("visible") {
$('#enquiry-form').slideUp("slow");
else($('#enquiry-form').is("hidden") {
$('#enquiry-form ').slideDown("slow");
});
});
};
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>
I changed i few things in your js code, i used a class to define the condition when to slideup or down
See the result:
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
var current = $(this)
if ($('#enquiry-shown').hasClass("active")) {
$('#enquiry-form').slideUp('slow', function() {
current.animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
$('#enquiry-shown').removeClass("active");
} else {
current.animate({
width: "100%",
borderRadius: "0px"
}, 1000, function() {
$('#enquiry-form').slideDown('slow');
});
$('#enquiry-shown').addClass("active");
}
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 0px 20px 0 0;
display: inline-block;
transition: all 1s;
transform: rotate(-90deg);
}
#enquiry-form {
width: 100%;
height: 100px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
#enquiry-shown.active img {
transform: rotate(0deg);
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
This is the enquiry form
</div>
</div>
I don't know if u want to achieve this effect, but try this and give me feedback:
$('#enquiry-shown').click(function() {
if($('#enquiry-form').is(':visible')){
$('#enquiry-form').slideUp('slow', function(){
$('#enquiry-shown').animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
}
else if($('#enquiry-form').is(':hidden')){
$('#enquiry-shown').animate({
width: "950px",
borderRadius: "0px"
}, 1000, function(){
$('#enquiry-form').slideDown('slow');
});
}
});
You have a lot of syntax errors such as incorrectly matched brackets, missing parenthesis, missing function name, and using else when you should use else if.
When you fix all of them it looks like your click function already has some of your intended functionality.
Next I'd suggest removing the setTimeout in favor of jQuery's animate end handler, which you use by attaching a function to most animations.
Lastly you should refactor your code a little. I don't think is('visible') does what you think it does, but luckily there's a slideToggle method that does do what you want pretty easily.
Your click handler then needs to consider cases when the menu is already open and when it's not open and then act accordingly. For that you might consider using toggleClass and then checking which class it is with hasClass before deciding what animation to perform.
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
if(!$(this).hasClass('closed')){ // if the form is not closed
$(this).animate({ // animate the form to open state
width: "950px",
borderRadius: "0px",
}, 1000, ()=>{
$("#enquiry-form").slideToggle()
});
}else{ // if the form is closed animate in reverse order
$("#enquiry-form").slideToggle(
()=>{
$(this).animate({
width : "210px",
borderRadius : "50px"
}, 1000);
}
)
}
$(this).toggleClass('closed'); // toggle the class
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
<div> Hello I am a form </div>
</div>
</div>
I'm a beginner to website building, and I wanted to create an animation every time a button is pressed. So I tried doing it on CSS first, but realized it could not be done with that alone, so I incorporated JS into my code which is still not working. The idea is, when I press the button, "Filter", the menu that is in the element, ".filter" comes down, so I tried adding an animation to shift the margin down, which does not work. How can I make this work?
function btnFilter() {
document.getElementByClass(".filter").style.WebkitAnimation = "filter-animation";
document.getElementByClass(".filter").style.animation = "filter-animation";
}
.filter {
display: none;
position: relative;
border-radius: 8px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
margin-top: -57px;
}
#-webkit-keyframes filter-animation {
from {
margin-top: -57px;
display: none;
}
to {
margin-top: 30px;
display: flex;
}
}
#keyframes filter-animation {
from {
margin-top: -57px;
display: none;
}
to {
margin-top: 30px;
display: flex;
}
}
<button onclick="btnFilter()">Filter</button>
<div class="filter">
<p>filter</p>
<form class="drpdwn-1">
<p>Price range:</p>
<select value="Price Range">
<option>$0 - $50</option>
<option>$50 - $100</option>
<option>> $100</option>
</select>
</form>
</div>
jQuery(JS)may help you
https://jsfiddle.net/moongod101/h8t6347b/
My way to do it is just use the jQuery function addClass,easy and simple
function btnFilter() {
document.getElementsByClassName(".filter").style.WebkitAnimation = "filter-animation";
document.getElementsByClassName(".filter").style.animation = "filter-animation";
}
use getElementsByClassName('.className')...
You can use just CSS but you need to toggle a css class for animating the button every time.
Here is an example:
var el = document.querySelector(".button");
el.addEventListener('click', function() {
if(!el.classList.contains("animate")) {
el.classList.add("animate");
} else {
el.classList.remove("animate");
}
});
.button {
font-weight: bold;
font-size: 1.2em;
color: white;
background-color: #777;
padding: 0.7em 2em;
border: 0;
margin: 1em auto 0;
border-radius: 3px;
box-shadow: 0 3px 0 #444;
display: block;
cursor: pointer;
appearance: none;
transition: transform 1.5s ease;
}
.animate {
transform: translateY(50px);
}
<button class="button">Click me</button>
I want to display tooltip on click of textbox.
What i did is:
CSS:
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
float:right;
text-align:left;
font-size:12px;
position:absolute;
z-index: 1;
}
.input1 {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px #DFDFDF inset;
clear: left;
min-height: 45px;
position: relative;
}
.textfield {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
height: 100%;
line-height: 1em;
margin: 0;
padding: 15px;
width: 100%;
}
.label {
float: left;
line-height: 15px;
margin: 0;
padding: 15px 0;
text-align: right;
width: 26%;
}
JS:
$(function () {
$("#help_form :input").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7
});
});
HTML:
<div id="help">
<form id="help_form" class="help_form" action="/me/problem" method="post">
<div class="input1">
<label class="label" for="issuetitle">Title</label>
<input class="textfield" type="text" name="issuetitle" title="must be 100 characters long" />
</div>
</form>
</div>
Actually by setting width of textfield = 30%. We can able to see tooltip. But because of some restriction i don't want want to do it. Is there any other way to do it by using it tooltip comes over textbox.
Thanks in advance.
you can also use jquery for tooltip, like this,
$(function() {
$( document ).tooltip();
});
</script>
And if you want to know more about it then refer this link,
http://jqueryui.com/tooltip/
First you need to have a correct html : put a <style>after your head.
Then you need to load the tooltip plugin you want to call with .tooltip().
Then check for your console and javascript errors.
But maybe you have stripped down your code to post here.
If it's the case, try with a display: block on your .tooltip declaration and check if you can see it.