I have this old code which is now not working with the new jQuery library. It works well with 1.7.2 but I'm using 3.2.1 now. Is there anything to change in the code so it would work with the new library?
<div class="last-screem-open" id="last-screem-open" onclick="$('#last-screem-open,#last-screem-text,#last-screem-open-button').animate({left: '-=60'}, 200, 'linear');$('#last-screem-wrapped').delay(300).animate({left: '+=250'}, 200, 'linear');">
<b class="last-screem-open-button" id="last-screem-open-button">▸</b><span id="last-screem-text">TExt</span>
</div>
(function($) {
$('.macro-post-poster img, .post-block-poster img').show().lazyload({
effect: 'fadeIn',
threshold: 200
});
$("img.lazy").lazyload({
container: $("#right")
});
})(jQuery);
You can use Jquery migrate, add it after your working jquery library (1.7.x) and it will highlight what you need to change to get your code to work in version 3.x.
Just check the console for the output.
Related
i'm using the newest version (2.2.1) of readmore.js from http://jedfoster.com and the scrollTop function in my affterToggle only works if i'm using jquery smaller then version 3.0.0. So jquery 2.. and 1.. works fine.
I googled but i dont find anything special about scrollTop and jquery 3.
$('#text').readmore({
speed: 75,
moreLink: 'read more',
lessLink: 'close',
collapsedHeight: 60,
afterToggle: function(trigger, element, expanded) {
if (!expanded) { // The "Close" link was clicked
$('html, body').animate({ scrollTop: $("#top").offset().top }, 100);
}
}
});
https://jsfiddle.net/0djenaxh/5/
Change jquery version to 1 or 2 and it works ... Can anybody tell me why this dont work with jquery 3?
Greetings
jQuery scrollTop works fine with all jQuery versions (You can test scrollTop with different jQuery versions here: http://jsfiddle.net/rdayptu8/3/ )
According to your code, the afterToggle method in readmore.js does not gets called/involved in the latest version of jQuery. It will definitely be the readmore.js library being not supported by the latest jQuery versions.
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.
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' );
I use sortable function to be able to sort some textareas (I want to be able to sort textarea and to color text inside those textarea.)
It is working fine when using 1.7.2 version of jQuery, but it is not working anymore when using jQuery 1.11.2
here my code in js.do (the code is with 1.7.2, but if you change 7 for 11 the sortable functionality wont be working anymore)
Here line 29,30,31 of my code
//LINES_ISSUE_START
$('.sortable').sortable({
cancel: '.textarea,.block_bouton_color'
});
//LINES_ISSUE_END
Any idea about how to fix it?
You have to change this
cancel: '.textarea,.block_bouton_color,',
to this
cancel: '.textarea,.block_bouton_color'
and include the jQuery migrate plugin.
OK now it is working
here the changement I made
1/ I use jquery_1.11.2 as I wanted (standard to user bootstrap)
2/ I switch for jquery_UI_1.11.4 (last version at the time I am writing)
3/ As recommanded by meskobalazs I modify the line cancel as follow without ","
cancel: '.textarea,.block_bouton_color'
4/ Finally I had to add
$(".sortable").sortable();
HERE THE CODE (BEFORE ANY MODIFICATION)
$(".sortable").delegate(".bouton_ordre_drag_and_drop","mouseover",function(){
$(".sortable").sortable("enable");
$(".sortable").sortable({
cancel: '.textarea,.block_bouton_color,',
});
});
HERE THE CODE (AFTER MODIFICATION)
$(".sortable").sortable();
$(".sortable").delegate(".bouton_ordre_drag_and_drop","mouseover",function(){
$(".sortable").sortable("enable");
$(".sortable").sortable({
cancel: '.textarea,.block_bouton_color'
});
});
I've found the http://docs.jquery.com/UI/Menu widget.
I'd like to achieve exactly the same behavior as seen in this demo:
http://view.jqueryui.com/menubar/demos/menu/contextmenu.html
But if I add this code on my page:
<div class="demo">
<button>Select a city</button>
<ul id="cities">
<li>Amsterdam</li>
<li>Anaheim</li>
<li>Cologne</li>
<li>Frankfurt</li>
<li>Magdeburg</li>
<li>Munich</li>
<li>Utrecht</li>
<li>Zurich</li>
</ul>
<div id="log"></div>
$(function() {
var btn = $(".demo button").button({
icons: {
primary: "ui-icon-home",
secondary: "ui-icon-triangle-1-s"
}
});
$("#cities").menu({
select: function(event, ui) {
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
},
trigger : btn});
});
I get this result:
http://jsfiddle.net/Q7CTz/
I saw that the demo is using somewhat different jquery ui, but I couldn't figure out the exact difference. Could you please help me how to create the same local popup with pure jquery ui as seen on the demo.
Please don't recommend 3rd party plugins.
The demo was created with jquery ui 1.9, that (at the moment of writing this) is not yet released publicly. http://blog.jqueryui.com/2010/06/jquery-ui-19m2-menu/
So the behavior in the demo can't be achieved using the jquery-ui 1.8 series. The latest development version at the moment is 1.9m7; can be downloaded from https://github.com/jquery/jquery-ui/tree/1.9m7/ui