How can I disable PrettyPhoto after it has been enabled?
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto();
}
$("#disablePrettyphoto").click(function (e) {
$("a[rel^='prettyPhoto']").KILLPRETTYPHOTO();
});
On a page with images, where I use Prettyphoto, I need to do some drag and drop action on the same images. Doing this with prettyPhoto enabled is not nice, as it fires the popups when I am dragging and dropping (as it should). So when I enable drag and drop, I want to disable PrettyPhoto and enable it again when I disable drag and drop.
I've had this problem with prettyPhoto as well. I've actually started using the api to have more control over the plugin.
You can, however, use unbind() to remove all click handlers, then do your drag/drop stuff, then add prettyPhoto again. Take a look at this question (Best way to remove an event handler in jQuery?), this should help.
To disable prettyPhoto, unbind the click attribute:
$("a[rel^='prettyPhoto']").unbind('click');
After that, reinitializing prettyPhoto works well for me.
If you don't want to reenable it later, you can destroy it completely by removing rel attribute:
$("a[rel^='prettyPhoto']").attr('rel', '');
(based on this answer)
Related
I'm using Bootstrap select that converts native selects to twitter bootstrap dropdown lists.
I have the problem that the change event is not triggered on iOS or Android devices in normal browsers on the pc is it working. If I'm using the native element support of the library the change event is triggered on these devices.
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
var submitSearchForm = function() {
$(this).parents('form').submit();
};
$('.selectpicker').on('blur change', submitSearchForm);
Anyone an idea?
Tested (ios-safari and chrome, android chrome, desktop chrome & FF) and it worked fine for me.
jsfiddle: Demo with the plugin and latest Bootstrap
The problem is not with the plugin and it might be with some additional code.
Make some tiny changes for testing and debuging:
Remove blur event - it will submit your form when you click the select box, for some unknown reason the plugin focus and immediately blur the select-box when clicking the select-box.
Make sure you are firing your js on DOM-ready - use $(function(){ }); or put your script before the closing BODY tag.
Change the selector - by default the plugin recognizes the .selectpicker and just for testing lets make sure it doesn't add some unwanted events that may cause unwanted behavior.
Use the chrome devtools with the extension jQuery debuger installed. select the select box with the inspector -> go to "jQuery events" tab and make sure the "change" event is attached and only him, another "change" event may cause the problem.
Make sure there is no ~"submit" event attached to the form - it may stop the form from submitting.
Make sure the action attribute of the form tag is set correctly or not defined at all. Be sure the select box is a child of the form and that the form is closed properly.
Obviously the problem is caused by your additional code that we can't see - if those tests won't work for you add your code or a demo that reproduce the problem you have and we will be more capable to help you.
Ok, it's probably because of the rendering of the bootstrap select in the page. This should work
$(document).on('change','.selectpicker',submitSearchForm)
or, in alternative
$("body").on('change','.selectpicker',submitSearchForm)
'm using a jquery tool called LightBox. Its a tool for displaying images. It works fine but I need to prevent the lightbox functionality from happening if a certain value is returned from an ajax call. Now, this question is not about the ajax call, its about how do I stop LightBox from doing its thing after the link has already been clicked?
This is the link that popups the image using LightBox (it works fine)
<a id="test_id" href="http://localhost/histogram.do" data-lightbox="histogram1"> Click Me </a>
This is my clumsy code to try to stop LightBox from continuing. The alert happens but the lightbox popup still appears right after clicking ok. Any ideas?
$("#test_id").click(function(e){
alert("hello");
e.stopPropagation();
})
That library uses jQuery .on() to bind the click event to the element.
Have you tried e.stopImmediatePropagation() ?
http://api.jquery.com/event.stopImmediatePropagation/
It prevents any other handlers from firing and then calls stopPropagation() to prevent bubbling.
Furthermore, to prevent the element from following the href link on click, you can use e.preventDefault()
http://api.jquery.com/event.preventDefault/
Chrome browser has this weird functionality that when I drag a div, or image, it drags that item. For example, if you go to http://www.google.com you'll be able to drag that google image.
The thing is, it's messing with my javascript events. Is there a way, in javascript to disable this functionality for the chrome/safari browser?
The other answers suggesting .preventDefault() do not work for me in Chrome (v26). Had to set draggable='false' HTML5 attribute on the image. FWIW I'm using the threedubmedia drag jQuery plugin (actually the nifty newer jdragdrop reimplementation).
Calling
event.preventDefault();
in your event handler should disable that.
Reference
I had the same problem when I needed to create my own drag and drop functionality. I was using mousedown, mouseup, and mousemove events. I solved it by adding event.preventDefault(); as the first line in my mousedown event handler.
We are developing a site with fluid layout (so it works on mobile too), that adjusts itself when resizing the window.
Everything is ok but an area when we use fancybox to zoom the images.
What I want it to disable fancybox when I call our "mobile ajusts" function (triggered by window.resize already) on our gallery, and re-enable it again when when going back to the "desktop" version.
I've tried a lot of things like preventDefault on 'click', using the $('.case-gallery a').fancybox($.fancybox.cancel) and stuff like that, but it seems that as fancybox is already stored in the DOM element, I'm not being able to disable it and enable it again on the fly - and my knowledge of JS is not really advanced.
Any help?
try this to listen to fancybox onStart event and then use $.fancybox.cancel() (don't forget (). It's a function).
I have the same problem, and here is my current working thought:
jQuery check if event exists on element
use this answer to check a variable property to the DOM... like check if DOM.style.whatever > 10. just my working thought. I have a site that has a carousel of products in DIVs, and i want the not-displayed products to not be clickable based on their DIVs opacity. I'll repost in a day if i figure it out.
I'm trying to implement a "custom" combobox options popup, so that near each option on the list i can place an icon / image.
My goal is to make this as unobtrusive as possible and make it look as close to a regular combo as possible, so, for Chrome and IE, the solution of grabbing the mouse and keyboard events that cause the standard popup to appear works fine:
#el.bind 'mousedown keydown keyup click', (e) =>
(...)
e.stopPropagation()
e.preventDefault()
This basically makes it so that the control is still there, looking native, and whenever the user clicks or focuses it, it shows up the "custom" list instead of the native one.
However, in firefox, as soon as the user clicks the combobox control (< select >), a popupshowing event is triggered, but i can't find a way to cancel it before the popup with the < options > shows up, covering up my "custom" options display implementation.
The only information regarding this event i was able to find, was on the Mozilla XUL documentation.
Thanks in advance.
I looked at the source code and it doesn't appear to be possible to cancel either the mouse event that opens the drop down or the popupshowing event (I don't even know why that event is generated). However I think you might be able to capture the mouse event on a parent element and stop its propagation.