Morphtext jQuery plugin not working - javascript

I've linked jQuery, animate.css, and morphtext.js in my document's header.
Within h1 I've created a span with the id 'js-rotating'. I've then called it directly in the html like so
<script>
$("#js-rotating").Morphext({
animation: "bounceIn",
separator: ",",
speed: 2000,
complete: function () {
}
});
</script>
However, the plugin is not responding. I've verified that I can access the linked css and js files via the direct links. What could cause this issue?

your code works perfectly for me,but the problem is that your script is executed before the complete loading of Dom.
to fix this issue,put your script inside jQuery ready() Method to ensure that the DOM is loaded properly before executing any functions.
<script>
$( document ).ready(function() {
$("#js-rotating").Morphext({
animation: "bounceIn",
separator: ",",
speed: 2000,
complete: function () {
}
});
});
</script>
this a working demo

Your Theme is enqueueing jQuery 1.7.2:
And WordPress is enqueueing jQuery 1.8.3:
See also, Frank's answer regarding jQuery no-conflict mode.
Edit
WordPress bundles a version of jQuery. You will inevitably encounter problems if your Theme (or a Plugin) enqueues a separate version of jQuery - whether by enqueueing that separate jQuery version along side the WordPress-bundled version, or else by deregistering the core-bundled version, and enqueueing a custom version.
Don't register a custom version of jQuery via your Theme or any Plugins. If you need to use jQuery, just use the core-bundled version, via:
wp_enqueue_script( 'jquery' );

Related

RequireJS sporadic failure

I'm working on a Magento2 site. Magento2 uses requirejs and the theme I'm using makes use of it as well. Part of the theme uses Owl Carousel. The code used to load the carousel was originally
require(['jquery', 'owl.carousel/owl.carousel.min'], function($) {
$("#banner-slider-demo-1").owlCarousel({
// carousel settings
});
});
However I noticed sometimes when I load the homepage (where the carousel is used) the carousel doesn't display, and there are errors in the console
Uncaught TypeError: $(...).owlCarousel is not a function
Thinking jQuery might not be loaded, I changed the require code to serialize the requirements
require(['jquery'], function($) {
require(['owl.carousel/owl.carousel.min'], function () {
$("#banner-slider-demo-1").owlCarousel({
// ...
but this had no effect... Sometimes the carousel loads and there are no errors, other times there are errors and it doesn't load.
Even when there is an error the carousel file has been fetched by the browser. It also seems require has loaded the carousel script per developer tools
Any idea what could be going on?
Your issue is that you are loading jQuery through a script element and through RequireJS. You have to use one method, not both.
If I run this in the console:
console.log("owlCarousel", typeof jQuery.fn.owlCarousel)
I get:
owlCarousel function
But with this:
require(["jquery"], function ($) {
console.log("owlCarousel", typeof $.fn.owlCarousel);
})
I get:
owlCarousel undefined
And if you try require(["jquery"], function ($) { console.log("equal", $ === window.jQuery); }) you'll get equal false. So you have two instances of jQuery loaded. The code that uses RequireJS to access jQuery gets a version without .owlCarousel. That's because Owl Carousel installed itself on window.jQuery.
If you must load jQuery through script for some reason, you should move the script element that loads it before you load RequireJS. (You should do this for all scripts you load that you want to load with script and that are AMD-aware.) Then for RequireJS, you should just define this fake module:
define("jquery", function () {
return jQuery;
});
This makes it so that when RequireJS loads jQuery it just uses the jQuery already defined in the global space. The ideal place for this fake module would be just before you configure RequireJS.
While you're at it you should define a shim for owl.carousel/owl.carousel.min:
`owl.carousel/owl.carousel.min`: ['jquery']
This way there's no need to nest the call to load owl.carousel/owl.carousel.min inside a call to load jquery. You can just do what you were trying initially:
require(['jquery', 'owl.carousel/owl.carousel.min'], function($) {
$("#banner-slider-demo-1").owlCarousel({
// carousel settings
});
});

jQuery UI error - f.getClientRects is not a function

I'm trying to make jQuery UI work, but it doesn't. Here's what happens.
I'm loading dependencies:
<script src="assets/src/js/angular/angular.js"></script>
<script src="assets/src/js/angular-animate/angular-animate.js"></script>
<script src="assets/src/js/angular-route/angular-route.js"></script>
<script src="assets/src/js/jquery/dist/jquery.js"></script>
<script src="assets/src/js/jquery-ui/jquery-ui.js"></script>
<script src="assets/src/js/app.js"></script>
<script src="assets/src/js/main.js"></script>
That's my main.js file:
$(function () {
$("input[type=submit]")
.button()
.click(function (event) {
event.preventDefault();
});
});
$(function () {
$("#circum").buttonset();
});
$(function () {
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
When I run the code in Brackets jQuery UI is loaded but doesn't work, however, when I comment my main.js file out and then bring it back that's the error I get in the console and UI is suddenly working. It's extremely weird.
jQuery.Deferred exception: elem.getClientRects is not a function TypeError: elem.getClientRects is not a function
at jQuery.offset (http://127.0.0.1:27530/assets/src/js/jquery/dist/jquery.js:9779:14)
at Object.getWithinInfo (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1157:26)
at jQuery.$.fn.position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1179:23)
at _position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8709:17)
at ._position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8334:8)
at .open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8210:9)
at ._init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _createWidget (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:587:8) undefined
I've found this thread discussing the issue, but still wasn't able to fix it.
Github
Cheers.
What version is your jQuery UI? I had the same issue with jQuery UI 1.11.4 and jQuery 3.0.
After installing jQuery UI 1.12.0-rc.2, the problem was fixed.
Adding the jQuery 3 Migrate Plugin resolves this issue as noted here, updated UI will be coming out soon.
NOVEMBER 5, 2018 UPDATE
If using latest jQuery and jQuery UI , use latest jQuery migrate to prevent compatibility warnings/issues.
Turns out this is a compatibility between jQuery 3.x.x and jQueryUI prior to 1.12.0.
including below script resolved the issue for me.
https://code.jquery.com/jquery-migrate-3.0.0.min.js
After doing all of the updates and STILL having the problem, I just fixed it in the code:
Look for this:
if ( !elem.getClientRects().length ) {
return { top: 0, left: 0 };
}
Enter this just before it:
if (!elem.getClientRects()) {
return { top: 0, left: 0 };
}
I updated our legacy site, from jquery 1.12 to jquery 3.5 and hit this same problem.
The site is using jquery-ui 1.10 but sadly updating to jquery-ui 1.12 broke other things so I couldnt use that option.
Running the production site with the migration plugin felt wrong so instead I looked how this problem was fixed in jquery-ui 1.12.
Patching jquery-ui 1.10 with the fix from jquery-ui github "Position: Guard against passing window to Offset" worked for me.
This is an old post, but if someone like me need to update legacy sites, maybe this information can be useful.
I had same issue with jquery-3.0.0. I have just included jquery-migrate.3.0.0 reference after jquery reference. Issue is resolved and its working fine now.
> npm remove jqueryui
> npm i -S jquery-ui-dist
This will download a version of JQuery UI which can be included directly with <script> tags.
I had the same problem when I was trying to get X and Y position of the mouse using " .pageX/.pageY " on a click event.
Try to change the source of the libraries in order to get the latest update of them, making sure that they are compatible.
Those links are now working and they could fix the issues.

execute js function after tinymce is loaded

I have a select that onchange trigger a js funtion to show/hide tinymce editor:
<select id="mySelect" onChange="myFuntion()">
<option value="1">Yes</option>
<option value="0">No</option>
Then I have a textarea with tinymce (loaded on page load).
<textarea class="mce" id="myTextarea"></textarea>
<script src="tinymce.js></script> // file with global tinymce.init({ ... });
The js function is like:
<script>
function myFuntion(){
if( $( '#mySelect' ).val() == '1' ) { tinymce.get( 'myTextarea' ).show(); }
else { tinymce.get( 'myTextarea' ).hide(); }
}
$( document ).ready(function() { myFuntion(); }); // show/hide tinymce based on how the mySelect setting is on page load
Everything works great except for the "$( document ).ready(function(){ myFuntion(); });" that throw an error "Uncaught TypeError: Cannot read property 'show' of null", I think its because tinymce is not yet loaded.
There is a way to change the "document ready function" with "when tinymce is loaded > execute myFunction()"
PS: I use tinymce 4, the tinymce.init() is on a external files and used on other pages, so i prefer not to edit this file
EDIT:
my actual workaround is to use:
setTimeout( function(){ myFunction(); }, 1500 );
but if there is a callback or similiar, for example $(document).on('tinymce:init') will be great
In tinymce 4 try to do with Promise
tinymce.init({
//some settings
}).then(function(editors) {
//what to do after editors init
});
To add to the answer that Kim Gysen wrote ... you can always use JavaScript to modify/extend your standard init on a page by page basis.
For example, start with your standard configuration:
baseConfig = {
selector: 'textarea'
....
}
...since this is just a simple JavaScript object you can inject additional properties/methods into that object before you use it to initialize TinyMCE.
For example:
customConfig = {
setup: function (editor) {
editor.on('init', function () {
//Do what you need to do once TinyMCE is initialized
});
}
}
Then you can "inject" customConfig into baseConfig. The easiest way is to use jQuery's extend method:
$.extend(baseConfig, customConfig);
...this will take all the methods and properties from customConfig and add them to baseConfig. Once you are done you can then load TinyMCE using the newly updated baseConfig:
tinymce.init(baseConfig);
This general technique allows you to create a "standard" configuration with all the base capabilities you need while injecting additional configuration options on a page by page basis.
So now you can trigger the "onInit" capability in TinyMCE when you need it without modifying the core configuration used elsewhere.
According to the docs, you have to declare the callback as follows:
function myCustomOnInit() {
alert("We are ready to rumble!!");
}
tinyMCE.init({
...
oninit : myCustomOnInit
});
This is the handle they offer to assure that tinyMCE is ready.
What you're saying here:
I use tinymce 4, the tinymce.init() is on a external files and used on
other page, so i prefer not to edit this file
Doesn't make a lot of sense to me.
According to the docs:
oninit: This option enables you to specify a function to be executed
when all editor instances have finished their initialization. This is
much like the onload event of an HTML page.
Makes it abundantly clear that this is the way you should go.
It doesn't matter where tinymce.init() is declared, just make sure that you provide the function you wish to execute is added.

Link to leanModal.js works fine in rendered by HTML link but not within React

I am using Lean Modal: http://leanmodal.finelysliced.com.au/ in a Rails app with a React front-end.
When I put the link to the modal in application.html.erb it works fine but when loaded through a React link using the same code, nothing happens.
I have jQuery loaded and checked 10 times if the code is the same. What could cause such an issue?
Here is the link code in React:
<a rel="leanModal" name="login" href="#login">
The template file (html.erb) script:
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
And I am loading the modal JS from my application.js file in Rails.
Thanks for any help!
You should wrap things that interact with DOM (e.g. jQuery plugins) in a component.
var LeanModal = React.createClass({
componentDidMount: function(){
$(this.getDOMNode()).leanModal({
top: this.props.top || 200
});
},
render: function(){
return <div>{this.props.children}</div>;
}
});
Note that you also need to provide a componentWillUnmount to handle clean up, and that the plugin can't do things like add/remove elements. Plugins that don't allow cleanup or make destructive changes are incompatible with react.
Sometimes implementing it with just the existing CSS and using react components instead of the jQuery plugin can be very simple and end up with a better result.

$("#slider_range").slider is not a function

Ok, I have included the google api libraries for Jquery UI, like so:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js' ></script>
Now I have a script that updates some spans and a hidden input on document slide and not only, on document ready:
<script type="text/javascript">
$(document).ready(function()
{
var slider=$('#slider_range').slider({
range:true,
min:0,
max:5,
step:1,
values:[0,3],
slide:function(event,ui)
{
$('#level').val(ui.values[0]+'-'+ui.values[1]);
$('#low').html(ui.values[0]);
$('#high').html(ui.values[1]);
}
});
var s=slider;
if(s.slider("values",0)==s.slider("values",1))
{
$('#level').val(s.slider("values",0));
$('#low').html(s.slider("values",0));
$('#high').html(s.slider("values",0));
}
else
{
$('#level').val(s.slider("values",0)+'-'+s.slider("values",1));
$('#low').html(s.slider("values",0));
$('#high').html(s.slider("values",1));
}
});
</script>
The ideea is that on a page it shows the slider and on another not.
The error message I get from Firebug is this:
$("#slider_range").slider is not a function
And points to the line
slide:function(event,ui)
What could be causing this? Why on a page the slider can be seen and on another (which uses the same template that loads the above) can`t?
Please help!
There were two differing jquery libraries included on the second page.
I just had the same error while i used the foundation framework from zurb along with jquery ui slider.
Problem #1:
the foundation framework 3.2.4 already delivers jquery 1.8.1 and i tried to include my own copy of jquery 1.9 just before the foundation files. (= duplicate jquery inclusion)
Problem #2:
the order of my inclusions. jquery ui needs to be included AFTER the foundation framework files.

Categories

Resources