Overlay is clickable through an element in front of it - javascript

I am using an overlay for a login which appears in front of everything when the user hit "sign-in". The overlay consists of an opaque wrapper which contains a solid inner-div where the login form is held.
Here is the html:
<div class="login_wrapper">
<div class="login_info">
<div class="login_form">
// form
</div>
</div>
</div>
and the css:
.login_wrapper{
position:absolute;
position: fixed;
margin: auto;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
z-index:9998;
display: none;
}
.login_info{
font-family: "NimbusCondensed";
position:absolute;
margin: auto;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 350px;
height:300px;
background: #cacaca;
border: solid #000000 1px;
border-radius: 10px;
z-index:99999;
pointer-events: none;
}
.login_form{
margin-top: 40px;
margin-left: 12.5%;
padding: 10 20 0 20;
width: 220px;
border: 1px solid black;
border-radius: 7px;
background: white;
box-shadow: 0px 5px 13px black;
z-index: 100000;
}
I would like this overlay to be hidden when the user clicks anywhere outside of the login_info.
I have the following JQuery handling this:
$(document).ready(function(){
$(".login_wrapper").click(function(){
$(".login_wrapper").fadeToggle(300);
});
});
But login_wrapper is hidden if the use clicks ANYWHERE on the overlay, including the form in the middle which prevent then form entering any info.
Somehow the click events are getting "through" login_form & login_info and the browser reacts like login_wrapper is clicked.
How can I resolve this so that jQuery code applies ONLY when the overlay is clicked outside the inner divs.
Thanks!

Change your code to this:
$(document).ready(function(){
$(".login_wrapper").click(function(){
$(".login_wrapper").fadeToggle(300);
});
$(".login_info").click(function(event){
event.stopPropagation();
});
});
This will stop the click event from bubbling up to the .login_wrapper. For more information on stopPropagation() see https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation.

First, you have to transform .login_wrapper in #login_wrapper, then add this:
$('#login_wrapper').click(function(e) {
if (e.target.id === "login_wrapper")
$('#login_wrapper').fadeToggle(300);
});
This will target only the element with the id login_wrapper.
Hope this helps

Related

text wont activate js and css animation

I'm not the best with javascript and I've been asked to include it in a page I'm creating. I'm nearly there, getting a box containing a video, to slide over the screen from above and create a dark overlay. I can only get it to work using an image. I want to activate it from a href text link. I've looked everywhere, but everything I see uses the same method, using an image. Can someone help please?
$(function() {
$('#activator').click(function() {
$('#overlay').fadeIn('fast', function() {
$('#box').animate({
'top': '120px'
}, 500);
});
});
$('#boxclose').click(function() {
$('#box').animate({
'top': '-500px'
}, 500, function() {
$('#overlay').fadeOut('fast');
});
});
});
a.activator {
background: url(Overlay/clickme.png) no-repeat top left;
z-index: 1;
cursor: hand;
}
.overlay {
background: transparent url(Overlay/images/overlay.png) repeat top left;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
}
.box {
position: fixed;
top: -500px;
left: 20%;
width: 610px;
background-color: #fff;
color: #7F7F7F;
padding: 20px;
border: 2px solid #F79510;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<!-- I want to add the text here, separate to the image, but to do the same activation. -->
Either you need to add the text inside the original "activator", or create another one.
Try this:
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<div id="activator2"> Some text that activates the overlay </div>
And in your JS change
$('#activator').click(...
To:
$('#activator, #activator2').click(...
Now, both activators will trigger your script that makes the overlay show.
Also, in your CSS, you have a.activator while in your HTML is id="activator", but that might be just a typo.

Blacken out screen while a request is being processed

I have some controls on a page with some buttons. When a button is clicked, a request is made to the server, and on receiving the response, the button text updates (On/Off). The way I have it now, is that the button when clicked, remains active and the user is able to click it multiple times. But this causes the requests to pile up one after the other without being executed, which ultimately freezes or slows down the page and also the server. I want the screen to blacken out on the initial button click and remain so till the request is over with some result and only after that the user gets to click the buttons again. How do I incorporate something like a modal window in this case with the message that the request is being processed?
Help is much appreciated.
Thanks in advance.
Yes recently i have this type of issue.To fixed this you need to add a loader which will show at time of processing of Ajax
Add this in a your page:-
<div id="blockDiv" class="hide">
<div class="" style="padding: 0px; margin: 0px; text-align: center; color: rgb(0, 0, 0); border: 3px solid rgb(170, 170, 170); width: 100%; height: 100%; position: fixed; top: 0%; background: rgb(20, 14, 51) none repeat scroll 0% 0%; opacity: 0.5; z-index: 1004; cursor: wait; right: 0px;"></div>
<div class="blockUI blockMsg blockPage " style="padding: 0px; margin: 0px; top: 50%; color: rgb(0, 0, 0); border: 3px solid rgb(170, 170, 170); font-weight: normal; background-color: rgb(255, 255, 255); font-size: 20px; left: 35%; text-align: center; z-index: 999999 ! important; position: fixed; width: 30%;"><img src="http://deepakkit.xtgem.com/files/loading.gifjsessionidURgz41CHGWcq8M1BI6qdZQ.gif" style="height:25px;">Just a moment</div>
</div>
Add this css:-
.hide{
display: none;
}
In Ajax add:-
beforeSend : function() {
$('#blockDiv').removeClass('hide');
},
complete: function () {
$('#blockDiv').addClass('hide');
},
Then our issue will be fixed.
Like i said in my comment, you could create an absolute overlay div, hidden by default.
Then show it on beforeSend: Ajax option and hide it on .always() event.
Check the example below:
$(function() {
$.ajax({
beforeSend: function() {
$('.overlay').fadeIn();
}
//if using jQuery < 3.0, remove always and use this
//,complete: function() {
// $('.overlay').fadeOut();
//}
}).always(function() {
alert('I have finished!');
$('.overlay').fadeOut();
});
});
.overlay {
display: none;
width: 100%;
height: 100%;
left: 0;
right: 0;
position: absolute;
z-index: 999;
background: rgba(0, 0, 0, 0.65);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="overlay"></div>
</div>

Animate depending if input box is empty and stay there?

I am trying to make an input box that looks like it has a placeholder that says username, but when the box is selected it moves and changes to a darker color to resemble a label. The problem I am having is whenever I hover over the box it will complete the animation but then immediately undo it, putting the text back to look like a placeholder. I also want to make my Javascript/JQuery code so that if the box has any typing in it that the text will stay as a label and not go back to being the placeholder even without being selected. My other problem is that I do not know the JQuery command to tell if an input box is selected or not. I supply all my code below along with a link to CodePen which has the
<div id='inputdiv'>
<input id='textinp'>
</div>
<h4>Username</h4>
#textinp {
border: none;
width: 200px;
height: 30px;
font-size: 20px;
margin-left: 5px;
font-family: 'Roboto', sans-serif;
background: rgba(0, 0, 0, 0);
}
input:focus {
outline: 0;
}
#inputdiv {
width: 200px;
height: 32px;
margin: 0 auto;
margin-top: 70px;
border-top: 1px solid black;
border-right: none;
border-left: 1px solid black;
border-bottom: none;
z-index: -2;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 20px;
position: relative;
bottom: 53px;
left: 575px;
color: #C2C2C2;
z-index: -1;
}
$(document).ready(function() {
$("#inputdiv").mouseenter(function() {
$("h4").animate({
left: '470px',
color: '#00000'
});
if ($('#textinp').val() == '') {
$("h4").animate({
left: '580px',
color: '#C2C2C2'
});
}
});
});
CodePen
Try using hover() method instead. As first parameter define function to be executed on hoverIn (on mouse entering), as second - function to be executed on hoverOut (on mouse leaving).
Here's your example updated:
http://codepen.io/anon/pen/LprybQ

JS not working after doing custom css on Wordpress Site

I am currently in the process of developing an online shop via wordpress. Everything was working fine, now I wanted to give my page a custom border( inverted round corners) and found the css code for it as seen here:
css:
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
html:
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello</h1>
<div class="bottom"> </div>
</div>
</div>
I renamed the classes to get no conflict with the existing css classes of the theme. It is working fine as seen here:my site. The problem is now, that I cannot interact with the site anymore, no links, no hover effects. It seems like the custom css is overlaying the actual site. Do you have any suggestions what I maybe did wrong?
P.S. I edited the header.php so that inverted corner div and the top div are right underneath the page-wrapper div( site content) and in the footer.php I edited the top div and the inverted-corner div closing right above the page-wrapper div closing.
Add :
pointer-events: none;
to the .bottom-corner CSS, so the mouse passes through.
In your custom.css you have this:
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
This basically overlays the whole page and thus disables any interaction.
One other option I would like to suggest to change following css rule
CSS
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
Replace above code with the below one
.top - corner, .bottom - corner {
position: absolute;
width: 100 % ;
}
this solution will work on all modern browsers and IE8 and above ( I'm not sure about lower version of IE, but it may work on them as well )

JAVASCRIPT: make class visible after other class has been clicked

I am making a simple php chatbox and am starting with the css/javascript first. What I want to do is when I click the header of the chat, the main part of the chat will slide up and show, and when I click the header again, it will go down, similar to the Facebook chat. I have tried things like
$(".chatheader").on("click", function () {
$(".chatcontainer").style.display = 'visible';
}
but none of them work, here are my codes
HTML
<div id="chatbox">
<div class="chatheader"><div class="chatheadertext">chatboxheader</div></div>
<div class="chatcontainer">
test
</div>
</div>
CSS
#chatbox {
right: 0;
bottom: 0;
position: absolute;
padding-right: 50px;
}
.chatcontainer {
height: 360px;
width: 320px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
float: right;
top: 100%;
display: none;
}
.chatheader {
font-family:'PT Sans';
background: #00b4ff;
width: 322px;
height: 51px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
bottom: 360;
}
.chatheadertext {
padding-top: 15px;
padding-left: 15px;
color: #fff;
}
DEMO
I have display: hidden; on my .chatcontainer and I would like to use javascript to make the display visible when .chatheader is clicked. Thanks in advance to anyone who can help!
You can use .slideToggle():
$(".chatheader").on("click", function () {
$("#chatcontainer").slideToggle();
});
Updated Fiddle
Final code should look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".chatheader").on("click", function () {
$("#chatcontainer").slideToggle();
});
});
</script>
Use the jQuery slideDown() method:
$(".chatcontainer").slideDown();
And use slideUp() to hide it later.

Categories