Overthere
asked on
Jquery Plugin not working
I am trying to execute a jquery plugin in a php 5.5 page that I downloaded from this source:
I created a simple page, using their instructions and can not get the plugin to work.
Step 2 and 3 of their instructions were the same so, I just used those once.
I downloaded the plugin, unzipped it and placed in a folder "jqueryplugins" in my web site. I adjusted the path to the css, .js and img . (jqueryplugins is the folder.)
I decided to construct just a simple page first before trying to ingratiate in my php page.
But it isn't working. Their demo works fine, both at their site and the page you download locally to demo, works fine. But the one I constructed does not.
I am using Windows 10, Wamp and IE 11.
Can someone tell me what I am doing wrong??
http://www.jqueryscript.net/loading/jQuery-Plugin-For-Creating-Loading-Overlay-with-CSS3-Animations-waitMe.html
I created a simple page, using their instructions and can not get the plugin to work.
Step 2 and 3 of their instructions were the same so, I just used those once.
I downloaded the plugin, unzipped it and placed in a folder "jqueryplugins" in my web site. I adjusted the path to the css, .js and img . (jqueryplugins is the folder.)
I decided to construct just a simple page first before trying to ingratiate in my php page.
But it isn't working. Their demo works fine, both at their site and the page you download locally to demo, works fine. But the one I constructed does not.
I am using Windows 10, Wamp and IE 11.
Can someone tell me what I am doing wrong??
<!DOCTYPE html>
<head>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="jqueryplugins/waitMe.css">
</head>
<body>
<form>
<button type="button" id="demo">Submit</button>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="jqueryplugins/waitMe.js"></script>
<script>
$(function(){
var current_effect = 'ios';
$('#demo').click(function(){
run_waitMe(current_effect);
});
function run_waitMe(effect){
$('#SELECTOR').waitMe({
//none, rotateplane, stretch, orbit, roundBounce, win8,
//win8_linear, ios, facebook, rotation, timer, pulse,
//progressBar, bouncePulse or img
effect: 'ios',
//place text under the effect (string).
text: 'Calculating',
//background for container (string).
bg: 'rgba(255,255,255,0.7)',
//color for background animation and text (string).
color: '#000',
//change width for elem animation (string).
sizeW: '',
//change height for elem animation (string).
sizeH: '',
// url to image
source: 'jqueryplugins/img.svg',
// callback
onClose: function() {}
});
}
});
</script>
</body>
</html>
Try running it with the Chrome browser, and use Chrome Dev Tools. The Tools really give you a lot of insight into what's going on under the covers of the browser.
https://developer.chrome.com/devtools
https://www.codeschool.com/courses/discover-devtools
https://developer.chrome.com/devtools
https://www.codeschool.com/courses/discover-devtools
ASKER
Before I had posted, I had tried it with IE developer tools and Chrome tools but no errors showed.
Are you sure it is not:
<script src="SITE URL/jqueryplugins/waitMe.j s"></scrip t>
<script src="SITE URL/jqueryplugins/waitMe.j
ASKER
I FINALLY did get an error but I have coded it exactly as they show in the link
The error I received was on this line for the :
Error Message: "Object doesn't support property or method 'waitMe'"
Should "SELECTOR" be replaced with the id of the html - in this case demo?
I tried it and received same error...
If you look at the link I provided for the instructions for the plugin, it will show it as:
And this is the link:
The error I received was on this line for the :
$('#SELECTOR').waitMe({
Error Message: "Object doesn't support property or method 'waitMe'"
Should "SELECTOR" be replaced with the id of the html - in this case demo?
I tried it and received same error...
If you look at the link I provided for the instructions for the plugin, it will show it as:
<script src="waitMe.js"></script>
And this is the link:
http://www.jqueryscript.net/loading/jQuery-Plugin-For-Creating-Loading-Overlay-with-CSS3-Animations-waitMe.html
Any chance you can post the script with fully qualified URLs for the JS, CSS, and SVG files? Then others can test, too. These lines would help us remove the "guessing" part of this exercise:
4. <link type="text/css" rel="stylesheet" href="jqueryplugins/waitMe .css">
13. <script src="jqueryplugins/waitMe. js"></scri pt>
42. source: 'jqueryplugins/img.svg',
4. <link type="text/css" rel="stylesheet" href="jqueryplugins/waitMe
13. <script src="jqueryplugins/waitMe.
42. source: 'jqueryplugins/img.svg',
It looks like SELECTOR should be the id= attribute of something in the HTML document, right?
ASKER
Well, that's what I thought too. So I changed it the id of the button and the result is the same. It really doesn't make sense because the page that I download locally and that they provided in the zip file for the plugin, works great.
I have compared them, and its different in the sense they demo all the various effects etc. SO the coding isn't really comparable.
I have compared them, and its different in the sense they demo all the various effects etc. SO the coding isn't really comparable.
Any chance you can post the script with fully qualified URLs for the JS, CSS, and SVG files? Then others can test, too. These lines would help us remove the "guessing" part of this exercise:
4. <link type="text/css" rel="stylesheet" href="jqueryplugins/waitMe .css">
13. <script src="jqueryplugins/waitMe. js"></scri pt>
42. source: 'jqueryplugins/img.svg',
4. <link type="text/css" rel="stylesheet" href="jqueryplugins/waitMe
13. <script src="jqueryplugins/waitMe.
42. source: 'jqueryplugins/img.svg',
ASKER
here you go....I can now get the test message to display but not the effect nor can I turn it off (hide)
<!DOCTYPE html>
<head>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="jqueryplugins/waitMe.css">
</head>
<body class="waitMe_body">
<div id="test" align="center" class=".waitMe_progress.bouncePulse" style="background:#fff">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="jqueryplugins/waitMe.js"></script>
<script>
$(function(){
var current_effect = 'bouncePulse';
$('#test').click(function(){
run_waitMe(current_effect);
});
function run_waitMe(effect){
$('#test').waitMe({
//none, rotateplane, stretch, orbit, roundBounce, win8,
//win8_linear, ios, facebook, rotation, timer, pulse,
//progressBar, bouncePulse or img
effect: 'bouncePulse',
//place text under the effect (string).
text: 'Loading...',
//background for container (string).
bg: 'rgba(255,255,255,0.7)',
//color for background animation and text (string).
color: '#000',
//change width for elem animation (string).
sizeW: '',
//change height for elem animation (string).
sizeH: '',
// url to image
//source: 'jqueryplugins/img.svg',
source: '' ,
// callback
onClose: function() {}
});
}
});
</script>
<script>
//$(container).waitMe("hide");
</script>
</body>
</html>
Let's try this one more time...
This is a tag with a relative URL. It's relative to the existing directory that contains the HTML document. The JavaScript source cannot be found unless you know the fully qualified URL of the HTML document.
<script src="jqueryplugins/waitMe. js"></scri pt>
This is a tag with a fully qualified URL. It can be found by following the link because it starts with HTTP.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Please refer to this comment.
https://www.experts-exchange.com/questions/28928661/Jquery-Plugin-not-working.html?anchorAnswerId=41480023#a41480023
This is a tag with a relative URL. It's relative to the existing directory that contains the HTML document. The JavaScript source cannot be found unless you know the fully qualified URL of the HTML document.
<script src="jqueryplugins/waitMe.
This is a tag with a fully qualified URL. It can be found by following the link because it starts with HTTP.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Please refer to this comment.
https://www.experts-exchange.com/questions/28928661/Jquery-Plugin-not-working.html?anchorAnswerId=41480023#a41480023
ASKER
hmm, I am rather surprised. Here is why: I use relative path for my images, includes and so forth and they are readily found by my pages. This plugin, when unzipped, contains the waitMe.js and the css etc. creating its own local folder.
If you visit the link where I downloaded it, and download it yourself, unzip it, you will see it contains the necessary scripts and provides them locally. And in following the provided instructions, It contains all the necessary components except for the ones referencing at ajax.googleapis.com - why would I need to have a fully qualified url then for the waitMe.js when it is local?
And in view of the instructions, and following the instructions, the only fully qualified url are the two referencing ajax.googleapis.com
See what I mean? The css file contains different classes for the different effects.
I have attached a screen shot of the folder it creates and the files contained within it....
Capture.PNG
If you visit the link where I downloaded it, and download it yourself, unzip it, you will see it contains the necessary scripts and provides them locally. And in following the provided instructions, It contains all the necessary components except for the ones referencing at ajax.googleapis.com - why would I need to have a fully qualified url then for the waitMe.js when it is local?
And in view of the instructions, and following the instructions, the only fully qualified url are the two referencing ajax.googleapis.com
See what I mean? The css file contains different classes for the different effects.
I have attached a screen shot of the folder it creates and the files contained within it....
Capture.PNG
replace :
jqueryplugins/waitMe.js
by :
//vadimsva.github.io/waitM e/waitMe.j s
and
jqueryplugins/waitMe.css
by :
//vadimsva.github.io/waitM e/waitMe.c ss
ONCE it work, be sure you provide right to your server to access to the jqueryplugins
jqueryplugins/waitMe.js
by :
//vadimsva.github.io/waitM
and
jqueryplugins/waitMe.css
by :
//vadimsva.github.io/waitM
ONCE it work, be sure you provide right to your server to access to the jqueryplugins
ASKER
still does not work...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
good deal, I will try this tonight and see how it goes...
ASKER
Have any thoughts as to what event I can use to hide it? I want it to only to display while my page is executing some calculations, and then stop....
No I do not have any Ideas about that, because the event you would need to have stop the overlay animation, is when your calculations are finished. So whenever the JS code or AJAX is finished, and you are ready to display the results of the calc , just add the -
$('#waitForm').waitMe('hid e');
to that code block that displays the calc on the screen.
$('#waitForm').waitMe('hid
to that code block that displays the calc on the screen.
Make sure the address is correct.