vadimsva / waitme Goto Github PK
View Code? Open in Web Editor NEWjquery plugin for easy creating loading css3/images animations
Home Page: http://vadimsva.github.io/waitMe/
License: MIT License
jquery plugin for easy creating loading css3/images animations
Home Page: http://vadimsva.github.io/waitMe/
License: MIT License
I have several scenario need waitMe on a elment that within 30 px height, since the waitMe icon and text are two lines, the height is greater than my element, looks ugly.
So add this option would solve my problem, any plan?
In scenario like knockoutjs, if we call waitMe first, and ko.applyBindings, we just can not remove waitMe later directly, we need use ko.cleanNode first to clear knockout specific data, or memory leaks.
it's my code in typescript:
$('body').waitMe("hide"); var ajax = JSON.parse(result); if (ajax.Status == 0) { alert("some message"); }
I'm trying to integrate waitme into a webpack / angular 2 project based on:
https://github.com/AngularClass/angular2-webpack-starter.
I've added jQuery through npm as explained in:
https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-jQuery
Ive included waitMe.js in the index.html:
<script src="assets/waitme/waitMe.js"></script>However, I'm getting:
VM461 waitMe.js:284 Uncaught ReferenceError: jQuery is not defined
Which seems to refer to the last line of waitMe.js:
})(jQuery);
I've tried:
http://stackoverflow.com/questions/26749045/webpack-expressing-module-dependency
but to no avail.
Any ideas?
Kind regards.
Hello, When using the normal file not thes .min I get this error
setElTop is not defined : setElTop(getTop); line 179: col 7
if (getTop - elH >= 0 && getTop + elH <= cH) {
setElTop(getTop); // at This line
Also why WaitMe doesn't allow javascript to be execute before closing it ? example :
submitHandler: function(form) {
run_waitMe();
//th **('.form-horizontal').submit(function(e)** after run-waitMe() is not executed
//If I add $('.wrapper').waitMe('hide'); the code will be excuted.
$('.form-horizontal').submit(function(e){
console.log("insideTheForm");
var $form = $(this);
e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
var url = $form.attr('action');
var formData = {};
//submit a POST request with the form data
$form.find(':input').each(function()
{
formData[ $(this).attr('name') ] = $(this).val();
});
//submits an array of key-value pairs to the form's action URL
$.post(url, formData, function(response) {
//handle successful validation
console.log("closeWaitME");
$('.wrapper').waitMe('hide');
...
}).fail(function(response) {
//handle failed validation
$('.wrapper').waitMe('hide');
console.log("Failed");
});
});
}
If content height is larger than waitMe container height, one can scroll down and some of the content appears not overlayed by waitMe.
Maybe disable container content scrolling or something else while waitMe is active?
I know that here's not the place to ask for features, but... I would like to have an option to enable fadeIn and fadeOut, and stack the requests, like if I call it two times, only hide after two hide() calls:
$('#container').waitMe();
...something...
$('#container').waitMe();
...something...
$('#container').waitMe('hide');
// do not hide yet, wait until I call it again
...something...
$('#container').waitMe('hide'); //now you can hide the loading animation
Thanks for a great tool.
I have notice a problem - when the WaitMe mask appears my page scrolls to the top. Any way to prevent this?
The scroll appears to occur with this line:
elem.addClass(elemClass + '_container').append(waitMeObj);
Thanks in advance,
Rich
Make it as bower package please!
I'm using angular 1.x. And i added waitMe.css and also waitMe.js.
And this is my javascript controller file.
$scope.makeNewLogin = function () {
$('#login-box-body').waitMe({
effect: 'bounce',
text: '',
bg: 'rgba(255,255,255,0.7)',
color: '#000',
maxSize: '',
waitTime: -1,
source: 'img.svg',
textPos: 'vertical',
fontSize: '',
onClose: function (el) {
}
});
And also this is the corresponding HTML div.
<div class="login-box-body">
<div class="wrapper">
<form class="form-signin">
<h2 class="form-signin-heading">Sign In</h2>
<div style="text-align: center">
But there nothing. No error message or loading.
What's the issue for this ? This should appear when i press makeNewLogin
function.
eg:roundBounce
black circle not animating...
I hope can fix it.
waitMe.css
add "-webkit-" to animation,keyframes can fix this problem
eg:
-webkit-animation:roundBounce 1.2s xxxxxxx
-webkit-animation-delay:-1.1s
@-webkit-keyframes roundBounce {
xxxxxx
xxxxxx
}
Hi,
The overlay is not covering all my webpage.
If I scroll down the overlay stays fixed at the top.
I'm using $('body').waitMe();
Can you help me ?
Thanks
It will be nice if also this plugin exists in nuget.org repository.
I am using 1.19 and I found that the animation appears on the left of my div instead of the center. How can I make it appear in the center?
Environment
Chrome 40 Firefox 36 or IE 11 on Windows 7 Enterprise SP1
Steps to Reproduce
Expected Result
Loading animation should be displayed.
Actual Result
Loading animation is NOT displayed for all Effects. Clicking Submit & Stop or Refreshing the page also do NOT start the animation.
on .waitMe
class addcursor: wait;
Would make things easier :)
Steps to reproduce problem
Expected Result:
loading animation should work normally
Actual Result:
Following console error are encountered and loading animation does not get shows up.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.