I apologize if this question is answered somewhere, but I couldn't find it.
I am working on editable javascript grid for MS Dynamics CRM and I am trying to display loading screen when user clicks "Save" button on the grid (the loading spinner should only be covering my grid - which is actually a HTML web resource displayed inside the CRM window). It takes about 2-5 seconds until CRM system saves the data and reloads my grid. So I want to display the loading screen during that time.
I found spin.js http://spin.js.org/ and it seems that it can be easily implemented but I am failing to realize on what event should I display the loading screen?
Basically, I have a table and when user clicks "Save" or "Delete" button, I wish to show that there is something going on under the hood.
Thank you very much for you time and help!
It sounds like you know what you want to call from spin.js, you're just trying to figure out where to call it from. You can try adding this to your javascript, where "#saveButton" and "#deleteButton" are the css identifiers for the buttons you want to fire the script off of.
$("#saveButton").click(function(){
displayLoadingPage();
});
$("#deleteButton").click(function(){
displayLoadingPage();
});
function displayLoadingPage() {
//call your spin.js code here.
}
Let me know if this answers what you were getting at.
I know you have got your answer but I think you can do it using vanilla JS code rather than using a library like spin.js
All you need is :
1) A div which is hidden on page load covering your table with spinner aligned center in it
2) On Save/Delete button click you can just make the div visible.
3) Hide the div again once you receive response from the rest api that saves or delete the data.
Below is the HTML:
<div class="container">
<div id="loading" class="loading" onClick="hideSpinner()">
Loading…
</div>
<input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>
JS Code:
var loadingDiv = document.getElementById('loading');
function showSpinner() {
loadingDiv.style.visibility = 'visible';
}
function hideSpinner() {
loadingDiv.style.visibility = 'hidden';
}
Here is a demo : http://codepen.io/AshutoshD/pen/dMEGqM
Click anywhere on the overlay to close it.
I have used the overlay that #MattIn4D has created here
Related
My project has a script on the landing page that repositions the footer when certain buttons are clicked and another script that positions it back to its original starting point when certain other buttons are clicked.
A script on a subordinate page (not the landing page) submits a file to upload, and on the click of that button, the code to position it back to its original starting point (RestoreFooter) is called.
I considered that the submit button click causes a page reload, and that may cause the footer to reposition to its starting point, but that's not the problem (as far as I could tell).
Here is the script to reposition the footer, and the script to set it back to its starting point:
<script>
function MoveFooter() {
document.getElementById("footer_x").style.visibility = "hidden";
document.getElementById("footer_y").style.visibility = "visible"; }
</script>
<script>
function RestoreFooter() {
console.log("here_RF");
document.getElementById("footer_y").style.visibility = "hidden";
document.getElementById("footer_x").style.visibility = "visible";}
</script>
Here is the button script:
It has no call to execute either of the two functions above, but it does call RestoreFooter -- I know because the console.log function does log "here_RF" when the submit button is clicked
<div class="upload_text" style="margin-left: 10%;">
<button class="btn" id="submit_btn" type="submit" value="Submit" onsubmit="submit_btn.disabled = true; return true;">Create extension</button></div>
I also tried making it an ordinary button, not a submit button, but still the same problem:
<div class="upload_text" style="margin-left: 10%;">
<button class="btn" id="submit_btn">Create extension</button></div>
What causes this strange performance?
This is a fairly large project, so I've posted enough code to understand the problem. If more code is needed, I'll post more.
Thanks very much.
EDIT: I made a comment below about the likely source of this problem. I'll post back later.
There are not enough informations about the code, and you should post more details.
Suggests that add debugger to Step into the handler function line by line.
I suppose some code elsewhere might override the handler.
As I mentioned in my edit above, the button is in a div, and the div has a handler that calls a function to make certain changes in the DOM when a user clicks anywhere within the div region. That propagates to children like my button. I solved it by eliminating the function that fires whenever the region (div) is clicked. If I needed that functionality in some situations and not others I would need to specify all places where that function should be called.
I hope that clarifies the problem. Thanks.
I've seen the new website of megaupload (mega) and we've got this:
Ok, if I press on left-menu contacts, it only reloads the white part on the image, if I press messages, the same, it only reloads white part. But if I go from contacts to messages and I press browser's back button, it goes from messages to contact and only reloads white part as always.
In my website, I do the same using jquery hide and show, but obviously, if I press browser's back button it doesn't hide the div and shows the other one.
My web site is only one html file and there are 4 div that get shown or hidden depending on the button you press, this is an example:
$("#btn_contact").click(function () {
$("#content_contact").show();
$("#content_home").hide();
$("#content_products").hide();
$("#body_aux").hide() ;
$(this).addClass('visited');
$('#btn_products').removeClass('visited');
$('#btn_home').removeClass('visited');
});
Can anybody tell me how to find this with jquery or whatever I have to use.
I don't know if I've explained myself well, if not, ask me to do it better.
I would appreciate any help. Thanxs a lot.
Maybe it'd be easier for you and more appropiate to make "content_contact.html", "content_home.html", and so on and use .load() function as Ozan Deniz said. You wouldn't have to change margins, positions, etc. and back button would work withouth programming. I think is not appropiate to make the whole website using just one html file, showing and hiding div's, ofcourse you can do this but maybe is not the right way. I'm newbie at this, but that's what an expert told me beacuse I was doing something similar to that.
Hope to help you.
You can use jquery load function to load white part
For example;
$('#result').load('ajax/test.html');
And in back button event you can load the white part
jquery hide and show
window.onbeforeunload = function() { $('#result').hide(); }; or
window.onbeforeunload = function() { $('#result').show(); };
jquery load function
window.onbeforeunload = function() { $('#result').load('ajax/test.html'); };
I am using HumaneJs http://wavded.github.com/humane-js/ to display notifications. Everything is working well except that I cant seem to specify a DIV where my notifications should appear. The discussion in this link https://github.com/wavded/humane-js/pull/32 seems to indicate that it is possible but I am not able to get it to work
Here is my HTML code
<button id="1">Display default notification</button><br/><br/><br/><br/>
<div id="container">
<button id="2">Display notification inside div</button><br/><br/>
</div>
and here is the Javascript
/*display notification in default position*/
$("#1").click(function() {
humane.log("Default notification");
});
/*display notification inside div*/
$("#2").click(function() {
var custom = humane.create({container: $("#container")[0]});
custom.log("Notification inside div");
});
I have also setup a fiddle to demonstrate the issue
http://jsfiddle.net/ZvCvJ/
Clicking on the button seems to display the notification in the default position(top-right) every time and I am not able to display the notification inside the DIV. Any help would be appreciated.
The reason it is displaying in the corner is because you are using the default libnotify
Add baseCls: "humane-bigbox" and it should fix it.
http://jsfiddle.net/ThdLC/
The CSS of the individual themes in Humane don't look like they take the 'container' into account.
Another notification plugin that explicitly supports this 'container restricted' notification is Noty.
http://needim.github.io/noty/#custom-container
I'm looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I'm working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile
What I want to happen is when users click on the search icon at the top, a search box appears. I don't want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.
Any recommendations for code or libraries for me to look at what be great. I don't need you to give me the code, but my Google searches aren't turning up exactly what I'm looking for.
Here's a non-jQuery solution:
document.getElementById("identifier").style.setProperty("visibility", "hidden");
and
document.getElementById("identifier").style.setProperty("visibility", "visible");
I know you said you don't want to use the jQuery accordion effect, but using jQuery to animate the opacity?. Please see below.
$("#idClicked").click(function() {
$("#searchBox").fadeTo("fast", 1);
});
jQuery's hide() and show() will do exactly that (they don't have any accordion effect, they just appear and dissapear with no ornaments).
$('#HtmlId').hide();
$('#HtmlId').show();
Additionally you get toggle(), to hide if shown and show if hidden:
$('#HtmlId').toggle();
---- Edit ----
After reading your comment, imagine you have the html:
<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li>
And the div to hide/show is:
<div id="search"> <gcse:search></gcse:search> </div>
Then you bind the click event to the image with the callback function performing the toggle:
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
----- Edit 2-----
I saw your site and you don't have a document ready function. Basically it should look like this:
$(document).ready(function() {
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
});
If you don't add this, jQuery tries to bind the action to an element that doesn't exist yet.
I have been working on a jquery slider which slides out once a record is clicked and then when u click close it slides back off the screen.. the issue i orginally had was if i clicked on the record twice it would try load the same infomation on top of it self and created heaps of errors.. so i found some code which i could use to deelte all the data and then move the slider pane back accross the screen the issue im having is it wipes all the details like i wont but the slider pane doesnt move at all i have only put the javascript code here to see if anyone can tell me what im doing wrong with the code and how to fix it if possible...
function deleteParentElement(){
$(this).parent().animate({right:-1000}); // on its own as an onlcick event
attached to the button it works on its own the pane its moving class is called "details"
$('.student').remove() //the class defined in here is only the div containing the data
e.stopPropagation()
}
this is the button used to trigger the function
<button style="position: absolute; top:40px; right:25px;" href="#" id="bt-close" class="<? echo $Stu_id;?>" onClick="deleteParentElement()">Close</button>
You're missing two semicolons and a
$(document).ready(function(){
//the rest of the code
});
... That's probably your problem