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
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 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'm trying to get a JQuery dialog to appear and immediately got the error $(...).dialog() doesn't exist. My googling has revealed that this is usually caused by loading 2 different JQuery libraries but the only script tags in my file are for JQuery and Twitter Bootstrap. Here's my code (including my dialog code adapted from How to implement "confirmation" dialog in Jquery UI dialog?)..
<script src="jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
...
<script>
$(function(){
$("#dialog").dialog({
autoOpen: false,
modal: true
});
$(".deleteLink").click(function(e){
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Yes" : function(){
window.location.replace(targetUrl);
},
"No" : function(){
$(this).dialog("close");
}
}
});
});
});
</script>
Is there any other reason that I might be getting this error besides loading multiple libraries or does bootstrap maybe provide interference of some kind?
You are attempting to use the dialog() method and properties of jQueryUI, yet you have included the Bootstrap library. To use the Bootstrap dialog, the method is called modal().
Bootstrap Modal docs
Note that the properties are completely different. If you want to use the jQuery UI dialog() method, you would need to include the jQueryUI library, however be aware that this sometimes causes incompatibilities with Bootstrap, in both the JS and CSS.
I am using the following piece of jquery code for displaying a loading.gif when the user has clicked on a link/button on a page.
<div class="progress-indicator">
<img src="/myapplication/images/loading.gif" alt="" />
</div>
<script>
$j(window).bind(
$j.browser.opera ? 'unload' : 'beforeunload',
function(){
//display image container
$j('.progress-indicator').css( 'display', 'block' );
//set a little timeout and force re-displaying of the image
//this can work around IE behavior, that 'freezes'
//animations during a submit
setTimeout( function() {
$j('.progress-indicator > img').attr( 'src',
$j('.progress-indicator > img').attr('src')+'?reload' );
}, 50 );
} );
</script>
It was working great with 'jquery version 1.5.1', until I upgraded jquery to version 1.10.0. The code no longer works.
Can anyone please help me with it? Thanks a lot for all your help and suggestions.
.browser() was removed in jQuery 1.9
http://api.jquery.com/jQuery.browser/
You should use the jQuery Migrate plugin to check your scripts when upgrading.
http://jquery.com/upgrade-guide/1.9/#jquery-migrate-plugin
Here is an upgrade guide
1: http://jquery.com/upgrade-guide/1.9/ and migration plugin
Try looking for the problem