I'm trying to show a modal window on top of the screen when user submits the form.
I want to disable form (show some loading icon) to show that button was clicked and action is being processed, because sometimes on mobile it's not so clear for our users
On PC browsers (Firefox, IE, Opera) everything works fine, but on Android or WP 8.1 div overlay is not shown after submitting the form.
Do you have any idea how to resolve this issue?
Maybe some other approach?
My sample code:
<script type="text/javascript">
function ShowLoadingPanel() {
document.getElementById('loadingPanel').style.display = 'block';
document.getElementById('overlay').style.display = 'block'
}
</script>
<body>
<div id="loadingPanel" class="loadingPanelStyle"></div>
<div id="overlay" class="blackOverlay"> </div>
<form id="form1" runat="server" onsubmit="return ShowLoadingPanel();">
//some content
<asp:Button runat="server" ID="xNext" Text="Next" OnClick="xNext_Click" />
</form>
</body>
And some CSS for modal window
.loadingPanelStyle
{
display: none;
position: fixed;
background:url(../img/load2.gif) no-repeat center center;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
font-size: small;
z-index: 1002;
overflow: auto;
}
.blackOverlay
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
After some hints from #Velimir Tchatchevsky I found solution which is working.
function ShowLoadingPanel() {
document.getElementById('loadingPanel').style.display = 'block';
document.getElementById('overlay').style.display = 'block';
setTimeout(function(){
document.getElementById('form1').submit();
}, 100);
return false;
}
But it's weird that on WP8.1 (Internet Explorer) and Android 4 (Default browser) it's mandatory to use setTimeout() function, to postpone submit action.
Is it some mobile optimization or what?
Thank you all for help!
Please try with this. Remove javascript and add jquery function.
$("#loadingPanel").show();
$("#overlay").show();
You should put .preventDefault() to stop the form from submitting
<script type="text/javascript">
function ShowLoadingPanel(e) {
e.preventDefault();
document.getElementById('loadingPanel').style.display = 'block';
document.getElementById('overlay').style.display = 'block'
setTimeout(function(){
$(this).submit();
}, 3000);
}
</script>
Related
I am trying to implement a new behavior when the user click on the button .employers-button I am going to scroll down to the form #contactin JS.
I implemented a function with window.scrool and the current top is top: 200 (as it as to be a value).
It is working but how can I replace the top: 2000 by top: contact? I tried to put contact instead of 2000 but it is not going down at all since it was to be an int
const goToContact = () => {
const button = document.getElementsByClassName("employers-button")[0];
const contact = document.getElementById("contact");
button.addEventListener("click", ()=>{
event.preventDefault();
window.scroll({
top: 2000,
behavior: 'smooth'
});
});
}
Use element.scrollIntoView() with behavior:smooth to scroll to specific element and to avoid any hacks.
codepen:https://codepen.io/murliprajapati/pen/RwwLYyR
function scrollToElement() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView({behavior:'smooth', block:'start'});
}
#myDIV {
height: 250px;
width: 100%;
overflow: auto;
background: green;
}
#content {
margin-top:500px;
height: 800px;
width: 100%;
background-color: coral;
}
<html>
<head>
</head>
<body>
<div id="myDIV">
<button onclick="scrollToElement()">Scroll</button>
<div id="content">
Some text inside an element.
</div>
</div>
</body>
</html>
You can use anchor tags
.big-space{
height:2000px;
}
Button that scroll
<div class="big-space">
</div>
<form id="myForm">
<label>form here</label>
<input type="text" />
</form>
For the smooth transition, I made the following fiddle. The property you were looking for is offsetTop. Hope this help!
const button = document.getElementById("employers-button");
const contact = document.getElementById("contact");
button.addEventListener("click", ()=>{
window.scroll({
top: contact.offsetTop,
behavior: 'smooth'
});
});
html,
body {
height: 3000px;
background-image: linear-gradient(red, yellow);
}
#contact {
margin-top: 1800px;
height: 200px;
background-color: green;
}
<button id="employers-button">Let's scroll!</button>
<div id="contact">Contact</div>
Did you try something like:
VANILLA
top: contact.offsetTop;
Or JQUERY
top: contact.offset().top;
// but if you want it positioned relative to the closest positioned parent:
top: contact.position().top
Contact, in this case, is a DOM element, and as you rightly mentioned the top property of window.scroll expects a number.
I have a web page that contains a button. When the button is clicked it calls some code in my code behind that processes. I want to display a "processing" message and a modal to make it so the user has to wait for the processing to be done before they do anything else. I use a javascript function to show the "processing" message and the modal when the button is clicked. When the processing is done the message goes away but the modal stays.
Here's my code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function ShowProgress2() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal2");
$('body').append(modal);
var loading2 = $(".loading2");
loading2.show();
var top = Math.max($(window).height() / 2 - loading2[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading2[0].offsetWidth / 2, 0);
loading2.css({ top: top, left: left });
}, 200);
//$('modal2').modal('hide'); //this does not hide the modal when processing is done
//document.getElementById('modal2').style.display = 'none'; //this does not hide the modal when processing is done
}
</script>
.modal2
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading2
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
<asp:Button runat="server" ID="MedicaidDataGenerateBillingFile_Generate" Text="Generate" width="100px" OnClientClick="ShowProgress2();"/>
<div class="loading2" align="center" style="display:none;">
<div style="margin: auto; text-align: center; position: absolute; top: 0px; left: 0px; z-index: 9998; width: 100%; height: 100%; background-color: #fff; filter: alpha(opacity=70); opacity: 0.7;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/activity/roller.gif" /><br />
Generating Billing File...
</div>
</div>
Running this as is when the button is clicked the modal displays and the processing message displays in the middle of the modal. When the processing is finished the processing message goes away but the modal stays visible. I've tried a couple of things that are listed at the end of the javascript function that I have commented out, neither of them work to hide the modal. I need the code to make it so the modal goes away/is hidden at the same time the processing message goes away. If anyone would help me out with what needs to be changed/added to my code to accomplish this I would be grateful, thanks in advance.
You define modal like this:
var modal = $('<div />');
modal.addClass("modal2");
$('body').append(modal);
document.getElementById('modal2').style.display = 'none';
this doesnt work, bc you modal doesn't have any id property, when you created it, only class. Either assign it, or use the class
$('modal2').modal('hide');
It doesn't work, because the class in jQuery should be written with dot $('.modal2');
And if you are not using any plugins for modals, the code should be
$('.modal2').hide();
After doing some additional looking into this I found a solution to getting the modal to hide/go away. I found this bit of code in another page where the similar code is being used and the modal is hidden after the processing is done:
<Triggers>
<asp:PostBackTrigger ControlID ="MedicaidDataGenerateBillingFile_Generate" />
</Triggers>
I included this code in my code and set the ControlID equal to my button ID that is getting clicked and now when the processing is finished the processing message goes away and so does the modal.
I hope this can help someone else.
I am working on a site with a pop up, the only thing I am missing is a blur effect whenever this pop up is showing. This pop up will be showing every time the page loads, I therefore found a great blur code here on SO. Although that code is for a function where the blur effect is shown by a button.
Because of that I have changed the code, so that instead of the button it is now onLoad which is launched from the body tag.
The only issue is that the blur is showing up in front of the actual pop up which it isn't supposed to. I have tried to change the z-index in the CSS code for the pop up but it doesn't work.
Here is the JSFiddle for my code (modified) Also apparently this doesn't work on Safari.
HTML:
<div id="overlay">
<div id="popup">
X
</div>
</div>
<body id="main_container" onload="myBlurFunction(1)">
</body>
Javascript:
myBlurFunction = function(state) {
var containerElement = document.getElementById('main_container');
var overlayEle = document.getElementById('overlay');
if (state) {
overlayEle.style.display = 'block';
containerElement.setAttribute('class', 'blur');
} else {
overlayEle.style.display = 'none';
containerElement.setAttribute('class', null);
}
};
CSS:
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
#overlay {
position: fixed;
display: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(255,255,255,.8);
z-index: 999;
}
#popup {
position: absolute;
width: 400px;
height: 200px;
background: rgb(255,255,255);
border: 5px solid rgb(90,90,90);
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
Here is the JSFiddle for the stock code from the SO answer.
body tag should wrap all page content.
You might do as follows:
<body onload="myBlurFunction(1);">
<div id="overlay">
<div id="popup">
X
</div>
</div>
<div id="main_container">
Whatever
</div>
</body>
See jsfiddle
In this case, it's because you are setting the blur in the Body.
The best aprouch, i guess, is create a Div to put the Blur, e show this div in 100% e after the popup with a Z-index higher than the Blur.
applying blur to a tag has an impact on all inner tags, so try it this way.
do no set any styles on the body itself:
<body onload="myBlurFunction(true)">
do not include your popup inside the overlay (I added a button- you should use one instead of an anchor):
<div id="overlay" class="blur"></div>
<div id="popup">
<button onclick="javascript: myBlurFunction(false);">X</button>
LINK X
</div>
As you can see I added the blur css class to the overlay directly (uncommented code).
Modify your scripts:
myBlurFunction = function(state) {
var overlayEle = document.getElementById('overlay');
var popupEle = document.getElementById('popup');
if (state) {
overlayEle.style.display = 'block';
//overlayEle.setAttribute('class', 'blur');
popupEle.style.display = 'block';
} else {
overlayEle.style.display = 'none';
//overlayEle.setAttribute('class', null);
popupEle.style.display = 'none';
}
};
set your popup position to fixed, because it's not in you overlay anymore:
#popup {
position: fixed;
}
fiddle: https://jsfiddle.net/uy4xvz12/19/
So I was trying to make a little game but the first step just doesn't work.
This is my code
<div id="box1">
<button id="button">Click Me</button>
<div id="progress-bar"></div>
</div>
$('button').click(function() {
var progressBar = $('#progress-bar'),
width = 0;
progressBar.width(width);
var interval = setInterval(function () {
width += 2.5;
progressBar.css('width', width + '%');
if (width >= 100) {
clearInterval(interval);
}
}, 125)
});
#progress-bar {
width: 0;
background: red;
text-align: center;
overflow: hidden;
height: 4px;
position: absolute;
bottom: 0px;
}
#box1 {
height: 100px;
width: 600px;
position: relative;
border: 1px solid grey;
}
So when clicking the button there will be a progress-bar at the bottom of box1.
When doing a document ready it works but when using the .click it doesn't work.
When doing a document ready it works but when using the .click it doesn't work.
It works when you have a $(document).ready wrapped around your code because that instructs the javascript engine to wait until all js is fully loaded before trying to execute.
If you don't have the $(document).ready and you click before the everything is loaded, then you'll get a console error.
Press F12 to open developer toos and perform the same action, I would suspect you'll see an error in the console.
I'm working on project to provide a bolt-on tool for websites, which makes heavy use of jQuery. Presentation / design is crucial, and I want to replace the standard (ugly) scrollbar applied by the browser to html elements with overflowing content, with something better looking.
There are numerous jQuery plug-ins around that apply custom scrollbars and allow styling via CSS which is great, but all the ones I've tried seem to suffer from the same problem which is this: if the scrollable content contains a form with text fields etc, tabbing between fields does not activate the scrollbar, and in some cases can screw up the custom scrollbar layout altogether.
Two examples of plug-ins I've tried:
http://manos.malihu.gr/jquery-custom-content-scroller
http://baijs.nl/tinyscrollbar/
I've tried others also, but in all demos / examples the content is plain text. I've done a lot of searching on this already, but it seems no-one has tried using these plug-ins with form-based content.
All these plug-ins seem to work in more or less the same way, and I can see exactly what happens and why, but just wondered if anyone else has had this problem and / or found a solution?
This issue can be easily replicated as follows (using the tinyscrollbar plug-in):
Add this to a standard html test page -
CSS:
<style>
#tinyscrollbartest { width: 520px; height: 250px; padding-right: 20px; background-color: #eee; }
#tinyscrollbartest .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#tinyscrollbartest .overview { list-style: none; position: absolute; left: 0; top: 0; }
#tinyscrollbartest .scrollbar { position: relative; float: right; width: 15px; }
#tinyscrollbartest .track { background: #d8eefd; height: 100%; width: 13px; position: relative; padding: 0 1px; }
#tinyscrollbartest .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#tinyscrollbartest .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#tinyscrollbartest .thumb, #tinyscrollbartest .thumb .end { background-color: #003d5d; }
#tinyscrollbartest .disable { display: none; }
</style>
Html:
<div id="tinyscrollbartest">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end"></div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
</p>Here's a text field: <input type="text"/><p>
...
// lots of content to force scrollbar to appear,
// and to push the next field out of sight ..
...
<p>Here's another field: <input type="text"/></p>
</div>
</div>
</div>
Plug-in reference (assuming jquery libraries etc are referenced also):
<script type="text/javascript" src="scripts/jquery.tinyscrollbar.min.js"></script>
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$('#tinyscrollbartest').tinyscrollbar();
});
</script>
Now click in the first text field so it has focus, hit the tab key to move to the next one and see what happens.
I understand your problem.. But is hard to find a good solution to this. You could try to set a focus event on your form elements. And let this event trigger the scrollbar_update function of tinyscrollbar. You can set the offsetTop of the form element that currently has focus as the methods parameter. I think that would work.
$('formelements').focus(function(){
YourScrollbar.tinyscrollbar_update(this.offsetTop);
});
I had to overwrite the standard tabbing functionality with my own:
$(".scrollable").each(function() {
if (!$(this).data("scrollbar"))
{
$(this).data("scrollbar", new Scrollbar({
holder:$(this)
}));
$(this).find("input").bind("keydown", function(e)
{
var keyCode = e.keyCode || e.which;
if (keyCode == 9)
{
e.preventDefault();
var scrollTo = $(this);
if (e.shiftKey)
{
var nextInput = $(this).prevAll("input:not([type=hidden])").first();
scrollTo = nextInput.prevAll("input:not([type=hidden]), label").first();
}
else
{
var nextInput = $(this).nextAll("input:not([type=hidden])").first();
}
if (nextInput.length)
{
console.log(scrollTo);
$(this).closest(".scrollable").data("scrollbar").scrollTo(scrollTo, function()
{
nextInput.focus().select();
});
}
}
});
}
});
It's a bit annoying to have to wait for the scroll but I don't see any other option.