I'm looking for some combination of a plugin or clever programming technique that will allow me to have a context-style menu in jQuery but rather than actually triggering it from a right-click, I'd like to be able to have it triggered from a button that can potentially move to different locations on my window. I can handle the part of the button itself moving without much trouble. My requirements are:
It should be compatible with jQuery UI 1.8 and my custom themeroller-generated theme
It needs to be relocatable
I either need to have it execute a callback when an element is selected, or have it honor the href on any a tags that make up the menu elements
I looked at Selectmenu and it's close, but it seems to want to always show the currently selected item, which is not quite what I want. Also I had to hack around it in an ugly way to make it relocate properly.
This blog post is also pretty close but the jsEvent.clientX and jsEvent.clientY don't put the dialog in the right place and I'm a little stuck as to what to do about that. Also I don't really want the options to be buttons. The menu-ish plugins have them looking right.
This plugin here is pretty much exactly what I want (I'd have to add the bit about the button, but it doesn't look too hard). But that requires jQuery UI 1.9.
Any thoughts? It may be that this is just such a rare requirement that I have to roll my own, but somehow that seems surprising and I feel like I might be missing something.
I like this plugin. It seems that is more compatible than jQueryUI-contextmenu.
Is a fork of jQueryUI-contextmenu actually
jQuery-contextMenu
I liked it because it has more examples, and it says that only use one footprint in memory so it consume less resources in comparison to others. Works with +jquery 1.6 and don't necessarily need html markup,
The menu plugin you mentioned last seems to work fine with jQuery UI 1.8.x, but not jQuery UI 1.7.x.
jQ-UI 1.8.7: http://jsfiddle.net/william/xxGUW/
jQ-UI 1.8.9: http://jsfiddle.net/william/xxGUW/1/
jQ-UI 1.8.14: http://jsfiddle.net/william/xxGUW/2/
jQ-UI 1.7.2 (broken): http://jsfiddle.net/william/xxGUW/3/
Related
I recently realized that the checkboxes take really long to respond to tapping. I am already using fastclick.js to remove the 300ms slowness caused by mobile devices waiting for double tapping.
I noticed that jQuery mobile uses some kind of technique to completely remove the lag when tapping multiple checkboxes very quickly. From what I have read elsewhere there seems to be a problem with mobiles when using click events rather than tap events, but haven't been able to find code to achieve this anywhere.
I would use a custom jQuery mobile build to take advantage of this, but what I am working on is already too heavy, so having the code that replaces click with tap for mobile, I would be really grateful!
The best approach is to use a library that handles touch events. There are many including these:
Hammer.js - 3kb gzipped
Zepto.js - 9.2kb gzipped
Quojs - 6kb gzipped
jGestures
Zepto is like a mini-jQuery and does a lot more than touch events, however it is designed in nice modules, one of which is the touch events module. One option if you don't want to include an entire library and you are using jQuery is to only include the touch module from zepto. Try using this code from github taking care to replace the last line from })(Zepto) to })(jQuery) and it should just work.
Some googling found this related SO question, with some good answers:
How to use jQuery Mobile for its touch event support only (no UI enhancements)?
Here is my dilemma:
I'm attempting to make my navigation work for the site mobilityidaho.org. On the home page, there are no problems at all with superfish working properly. When you navigate to any other page, the CMS I am using launches a javascript file that attaches the class "selected" to the li's in my navigation. Superfish cannot handle having a class assigned to the li and basically, shuts down any of the effects associated with the jquery.
I can handle this, but the "selected" li becomes inaccessible for IE6 users (tabbing through works, but who tabs?) It's a government site so it needs to be ie6 compatible.
Also, the CMS we use does not have the option of not assigning the selected class name so deleting that javascript file is out of the question as well.
My question is this: Is there a way to rewrite superfish to work with an <li> that has a class or should I look for a different dropdown nav solution?
When faced with an issue so specifically unworkable, like what you have here, where you can't just replace a CMS and you have to cater to a wide audience - even if they really should just update their browser, the simplest solution is to sniff them out, and display appropriately.
What I mean is:
if(IE6)
{
displayMenu(IE6);
}else{
useSuperFish();
}
Here is some reference material on browser sniffing:
Using jQuery for IE6 specifically.
Or some more reference material using navigator.says() and gives you information for all versions of Chrome, Firefox and IE, which could be really handy for a whole bunch of reasons - but maybe unnecessary for this instance.
Particularly because the jQuery is a one - liner:
if($.browser.msie && $.browser.version=="6.0") alert("Im the annoying IE6");
Hope this helps!
I need a plugin for mootools like this.
It's just a simple button which, when clicked, opens up a hidden portion of a div with an animation. When the page is loaded it closes to a point (truncating to some x characters) in the same div. If you take a look at the link, you'll understand...
But I need it for mootools, not jQuery. :(
Thanks. :)
The best place to look at is the official Mootools plugin repository but it doesn't look like there is a Mootools equivalent.
Converting the jQuery plugin to Mootools may not be that difficult, at least porting the minimal features you want to use.
Good luck.
EDIT: see this expander experiment
I am in need of a popupwindow with the option of a radio button. I have tested with Impromtu. Is any easy made Popupwindow plugin available?
My plugin should work in Internet Explorer, Mozilla and Google Chrome. What would some sample code be?
jqModal is great and easy-to-use for building Modal Popups and the like.
If you want a tutorial on how to build one yourself without jQuery, check out this tutorial.
Check out Thickbox! You can use a div or so on your page as content (see inline content demo).
Here's a list of lightbox like plugins depending on your need:
http://www.fortysomething.ca/mt/etc/archives/006978.php
If you're not absolutely bent on using jQuery, there is another library available that uses the Prototype library that is rather handy. The popup windows are very easy to implement, and the modal dialog boxes are even easier.
On a side note, I have used thickbox before and was rather impressed, but the URL parsing structure that it uses were kind of limiting me for what I needed to do (I was using a ComponentArt object that didn't use anchors).
Anyway, definitely check out this tool. It's probably more than you need, but who knows maybe you'll get inspired to find other uses for it. It's a pretty fun tool:
http://prototype-window.xilinus.com/documentation.html
FaceBox is another option to check out.
Currently it seems that I can only use effects in their most basic form when using the Dialog widget. For example, the following will use the drop effect for both showing and hiding the dialog box:
$('#dialog').dialog({show:'drop', hide:'drop'});
However, the default for the drop method always drops to the left. What I really want is for it to drop to the right. Something like this:
$('#dialog').dialog({
show:{effect:'drop', direction:'right'},
hide:{effect:'drop', direction:'right'}
});
Is this possible?
I'm currently using 1.6rc6. I've also tried it 1.5.3 (stable) without any luck.
After digging into the source a bit, I don't think this is supported in both version 1.5.3 and 1.6rc*. It'll probably require a change to the API before the functionality above can be supported. Steerpike has found a version that probably should be in the mainline. If anyone knows otherwise, do correct me.
Actually, you can use any of the jQuery UI effects; e.g. pulsate:
$("#dialog").dialog({ show: "pulsate" });
There are plenty to be found here: http://docs.jquery.com/UI/Effects/
Note that there is a dependency on effects.core.js.
I tried passing an option (like you did) into 'show', it didn't work. I also tried to make 'show' a function, no luck avail.
What works however is:
$("a").click(function() {
$("#dialog").hide("drop", { direction: "right" }, 1000);
});
This is currently not Possible with 1.6 and 1.7.1.
You may find this link of dialog box examples useful. In particular the second one from the right. I'm not sure if it's using the standard dialogue plugin, but you should be able to figure it out from the examples they use.