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.
Related
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.
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 been updating my dashboard application which uses Bootstrap and D3.js to the most recent versions of all its dependencies.
In the jump from 1.10.2 to 3.0.0 it looks like jQuery no longer returns context for $(this). It's been removed since .live() has been deprecated for a while now.
I wan't using .live(), but the fact that context is no longer returned breaks the positioning of my Bootstrap popovers for SVG elements generated by D3.js.
My code looks like this...
I have a function that is called on the mouseover of the SVG element:
function showPopover(d)
{
$(this).popover(
{
placement: 'auto left',
container: 'body',
trigger: 'manual',
html : true,
content: tip(d),
});
$(this).popover('show');
}
And here's how I call it:
svg.selectAll(".svg.rect")
.on('mouseover',
function(d)
{
showPopover.call(this, d);
})
.on('mouseout',
function(d)
{
$(this).popover('destroy');
});
With jQuery 1.10.2, this worked fine. Bootstrap's popover() function correctly generated the DIV's style based on the SVG element's position because $(this) returned the context.
But, with jQuery 3.0.0 context has been removed, so the popover() generates it's top and left coordinates based on the specified container (which is <body>). This causes the popover to appear in the top left of the page regardless of what element I'm mousing over.
Is there a different way to handle this in jQuery 3.0.0, or do I have to stick with the outdated version?
Bootstrap 3 requires a jQuery version between 1.9.1 and 2.x (see their bower.json file here: https://github.com/twbs/bootstrap/blob/v3.3.6/bower.json)
I have tried too to use jQuery 3 with Bootstrap 3 without success. It seems we will have to wait for Bootstrap 4 to be released.
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 upgraded my jQuery1.6.2 to jQuery2.1.1.js. I included jquery-migrate-1.2.1.min.js in my app so that there is no need to change the previous code according to jQuery2.1.1.
Everything works fine but scrollTo is not working. I already had jquery.scrollTo.js plugin. I used scrollTo as
$('#wrapper').scrollTo(anchor, 0, {offset:{top:-50, left:-50}});
anchor is a <div> object.
Any idea of how to use scrollTo in jquery2.1.1?