We Keep Coding

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>

Avoid anchor tags stoping propagation of clicks

I found that a tags stop events from propagating down in the DOM. Take this example: if you click the red button, a text should log, but if you press where they overlap, you'll only get the link behaviour. ¿Is there any way to force the propagation of the event to the bottom?
var btn = document.querySelector(".btn");
btn.addEventListener("click", function() {
console.log("btn clicked");
});
.btn {
background: red;
color: white;
width: 200px;
text-align: center;
padding: 1em;
}
a {
background: rgba(0, 200, 100, 0.3);
display: block;
width: 150px;
height: 150px;
position: absolute;
top: 0;
left: 100px;
z-index: 99;
}
<div class="btn">Press me</div>
It seems that the snippet is preventing the link from firing, but test it here and you'll see it: http://codepen.io/vandervals/pen/wMNKOG

Yes, put a inside your .btn.
<div class="btn">
Press me
</div>

Overlay is clickable through an element in front of it

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

IE requires double click with custom button

I have a script that is dived as:
HTML:
<div id="wrapper">
<div id="container">
<div id="button">Click me!</div>
<form>
<input type="file" />
</form>
</div>
<div id="notice">File is uploaded!</div>
</div>
JavaScript(JQuery 2):
$(document).ready(function () {
$("input").on("change", function () {
$("div#notice").fadeIn();
//$("form").submit(); //If you want it to submit on your site uncomment this
});
});
CSS:
div#wrapper {
background-color: #ccc;
position: absolute;
width: 300px;
height: 200px;
}
div#wrapper > form > input {
color: rgba(0, 0, 0, 0);
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
color: rgba(0, 0, 0, 0);
}
div#container {
width: 200px;
height: 20px;
overflow: hidden;
}
div#button, input {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
div#button {
z-index: 1;
background-color: #AAA;
}
input {
z-index: 2;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
alpha: filter(opacity=0);
font-size: 25px;
color: rgba(0,0,0,0);
filter: alpha(opacity=0);
zoom: 1;
}
div#notice
{
background-color: green;
display: none;
position: absolute;
bottom: 0px;
left: 0px;
}
Note: This issue was there before blur was put to hide the flashing icon in IE.
In Chrome and Firefox the button only requires a single click. In IE 10 it requires a double click, which I don't want. I am trying to think of a way to make it single click.
The only thing I've tried so far is to .render("click") on the input, but that didn't work.
JSFiddle: http://jsfiddle.net/plowdawg/mk77W/

I had the same problem and found different approach. I just made that button be as big as I need with font-size on it. Then person simply can't click on text section.
<div class="divFileUpload">
<input class="fileUpload" type="file" />
</div>
and css:
.divFileUpload {
background-color: #F60;
border-radius: 5px;
height: 50px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
width: 50%
}
.fileUpload {
cursor: pointer;
font-size: 10000px; /* This is the main part. */
height: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}

To follow up on what SDLion said....
This might be what you see
But really on top of that there is a file upload control that has been made transparent.
Clicking on the browse button brings up the file upload dialog with one click.
In IE You have to double click the text box to the left of it if you want to see the file upload dialog.
Increase the font size of the file input to fill the button image

While #bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.
You will need:
A wrapper div tag
An inner dev tag
Some sort of form input
JQuery (tested on 2.1)
Steps:
Create the "wrapper" div
Create an inner "button " div
Place the form element underneath the inner "button" div
Set the "wrapper" and "inner" divs to the same size
Set overflow:hidden on the wrapper
Create a JQuery script for the "inner" div setting the on click function
In the "inner" function click function call .click() on the input
Seems to work for me in IE 10.
$(document).ready(
function()
{
$("#open_dialog").on("click",function()
{
$("input").click();
});
$("input").on("change",function()
{
alert($("input"));
$("#notice").html("uploading");
});
});
#open_dialog
{
position: relative;
width: 200px;
height: 50px;
color: white;
font-family: "Arial";
font-size: 14pt;
text-align: center;
top: 25px;
margin-top: -.5em;
z-index: 1;
}
#wrapper
{
width: 200px;
height: 50px;
overflow: hidden;
cursor: pointer;
border-radius: 10px;
background: green;
z-index: 0;
}
input
{
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="open_dialog">Click Me</div>
<input type="file" />
</div>
<div id="notice">Nothing to upload</div>

The double click is happening on the text portion of the file upload, like #TravisPessetto stated.
Since it's not possible to hide/remove the text portion out of the file input control, I recommend that you put a regular button over the file input.
See here for more details.

I found another more simple solution, just trigger the event "click" on mousedown for this element only:
$("input").mousedown(function() {
$(this).trigger('click');
})
in order to avoid problems on other browsers, apply this solution to IE only:
if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
$("#your_file_input").mousedown(function(event) {
if (event.which == 1) {
$(this).trigger('click');
}
})
}
here's your jfiddle modified, check it on IE 9-10:
http://jsfiddle.net/7Lq3k/
Edit: example modified in order to limit the event handling for left click only
(see: How to distinguish between left and right mouse click with jQuery for details)

I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.
HTML
<!--/* Upload input */-->
<div class="input-file">
Select image
<input type="file" />
</div>
LESS CSS
/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
position: relative;
overflow: hidden;
margin: 10px;
input[type="file"] {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
cursor: pointer;
width: 100%;
height: 100%;
font-size: 10000px;
}
// For Chrome
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
}

Alert when div height changes

I've been searching all day for this but i can't figure it out myself..
I have a shopping cart that you can add items to. The shoppin cart is in a drop down so you have to click it in order to view it. Therefore, everytime you add an item to the cart i want to display "+1", "+2" and so on, somewhere and when u click on the drop down it would disappear so it can start over counting.
So, i thought that when the div's height changes it could display +1.
But, i don't know enough javascript to do this....
My html:
<div id="button">Button</div>
<div id="chartdropupcontainer">
<div id="chart">
<button>test</button>
<script type="text/javascript">
$("button").click(function () {
$("#testp").hide();
});
$("#chart").bind("resize", function(){
alert("test");
});
</script>
<p id="testp"></p>
</div>
</div>
</div>
My Css:
* {
padding: 0;
margin: 0;
font-family: Helvetica;
color: white;
}
#chartdropupcontainer {
width: 200px;
background-color: red;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
padding: 0 5px 0 5px;
margin-bottom: 47px;
z-index: 998;
}
#chartdropupcontainer h1 {
margin: 5px;
color: black;
cursor: pointer;
}
#chart {
width: 100%;
background-color: black;
height: 400px;
overflow: auto;
}
#button {
background-color: blue;
cursor: pointer;
padding: 10px;
width: 190px;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
z-index: 999;
}
My javascript:
$(document).ready(function() {
$("#button").click(function () {
$("#chartdropupcontainer").slideToggle("slow");
});
});
And here is a link to an online version: http://www.rutgerinc.nl/niels/
Edit: sorry, bit inpolite!
Could anyone please help me with this?

First off, the resize event is when you resize a window so that's why your event is never firing.
http://api.jquery.com/resize/
I think you need to alter the bit of code where the item gets added to the basket. Isn't there more javascript somewhere to add things to the basket in the first place?
An event-driven approach like BGerrissen suggests would be perfect because you can fire one or more independent functions when the user adds something to the cart.
As you are using jQuery, custom events are quite easy. You use trigger to fire the event and then bind to listen for it.
http://api.jquery.com/trigger/