We Keep Coding

Joomla 3, disable tooltips using javascript

I would like to remove all tooltips - but only when viewed on mobile devices.
I am using javascript to check for windowsize (on load and on re-zize), which is working fine - but I cant seem to figure out how to turn off the tooltips, using javascript.
Is there a tooltip.stop() - or something else that can turn off the tooltips (and possibly turn back on, on resize?)
The reason for my request is that I have tooltips on some of my buttons, and apparently the tooltip fires on first tap, instead of just triggering the button. (The button should fire a javascript).
Only the second tap fires the button javascript. Which is a little annoying.

I wanted to remove tooltips in Joomla's pagination. I targeted the links which have the class "pagination" and removed all their event handlers with:
jQuery(".pagination a").off() ;
You could doubtless find a selector to meet your needs.

The following worked for me, as the script inserted by Joomla keys off the class name hasTooltip.
$(document).ready(function(){
$(".pagenav").removeClass('hasTooltip') ;
});

Create a link dynamically, click it and destroy it, possible?

I made some brackets for a tournament and I'm using Owl carousel to serve videos on each clicked match.
The problem I've been trying to solve is this: Create a link after each click on a match, have this link clicked (by itself) which will, in turn, activate a certain slide in the carousel. Unfortunately that's the only way this could be made to work, because the Owl carousel needs links for callbacks. It's something like in this fiddle: http://jsfiddle.net/EwFMn/9/ except that in my example I have the brackets loaded below.
Now (after searching for a solution and trying every method suggested here in other questions on SO) I couldn't find a way to get a link which was appended to a div to be clicked too immediately after being created. What I get is this: on clicking a match, a link is created which needs to be clicked separately to get the behaviour I described above.
I have tried all the methods which use
on('click', selector-to-your-element , function() { ... });
as well as simply:
$('.something').click();
as well as other methods using live and delegate. None of the solutions proposed on other similar questions on SO worked. It seems as if at the time when the click event is triggered jQuery doesn't find the link it has just created to click it, so the link only works after you click it manualy.
The problem is I need this to not only work on one single click but also I need this link to get destroyed after it automatically gets clicked. I'm not even sure this is possible with jQuery. I'm curious if anyone has a working solution for this.

You can't trigger the href with a javascript click event. You need to do something like this:
$('.button').on('click',function(){
location.href=$(this).attr('href');
});
$("[href=#seven]").trigger('click');

How to make all buttons(even dynamically created) in an application follow jquery button widget without calling .button() multiple times

I am new to stack overflow and this is my first question. Pardon me for any mistakes.
This question is more generic but i tried to search for an answer but could not find it.
Say i have a page and i am using jquery ui button() widget for all the button. What happens is i have a specific class defined for all the buttons on my page. So i can just specify $('.myButtonClass').button(); but whenever i render partial views which has button again i have to do the same thing in the partial views. Is there any way i can globally specify a transition for button or any element for that matter.
Here is a sample Fiddle which adds buttons on click. But the added buttons are not transitions as button widgets(I do not want to use clone).
http://jsfiddle.net/wjxn8/
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>');
});
Is this possible without:-
1) Adding the css classes for a button widget manually for all the buttons created.
2) Tracking DOM Changes using Javascript and perform transitions for all the button elements.
Thanks for your help!!!

Since you were looking for something else, why not trigger a custom event when you load partials or whatever:
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>').trigger('addButtonUI');
});
$(document).bind('addButtonUI',function(){
$('.clsTest').button();
});
http://jsfiddle.net/wJXN8/3/
If you trigger your event and have the document listening for it, then you can do whatever you would like. I could have put in there the ability to add more buttons as well, but this should get the point across.
What you are asking for, some event when a button is added.... you would need to come up with that yourself and trigger it when a button is added. There is this: How to detect new element creation in jQuery? which talks about a specific event that is triggered when new elements are added to the DOM. Haven't tested it, and it looks like it may not work on IE.

I'm not a huge fan of this, but you could poll for new buttons. Check out my fork of your fiddle (that sounds funny):
http://jsfiddle.net/lbstr/Hq97H/
Using your example, this would look like:
setInterval(function(){
$('.clsTest').not('.ui-button').button();
}, 1000);
As I said, I'm not a huge fan of this. I understand the desire for something like $.live here, but I still think its better to initialize your new content when you add it. If you are making an ajax call for new content, just initialize it when you add it to the DOM.
My silly polling code and $.live (which is now deprecated) might be convenient, but they perform terribly. Just my two cents. You know your code better than I do!

What is the best practice for presenting a modal view and binding events to it?

In a very common scenario, I have an HTML page with an "Add" button that opens a modal dialog (through Facebox) and asks the user to select an item from the list that appears in it.
The modal dialog gets its HTML snippet from the server asynchronously. I want this snippet to be reusable in many parts of my application so it shouldn't assume that I am using Facebox to load it. The only thing it should do is to trigger the item-selected event whenever the user selects an item in it. But since the snippet is loaded asynchronously, I cannot use $(document).ready. That is, I cannot trigger the event like this:
$(document).ready(function() {
$(".item").click(function() {
$(".items-modal-dialog").trigger("item-selected", this);
});
});
Also, I don't really like using the items-modal-dialog class to identify the enclosing DOM element.
I came up with some solutions to this, and I would like to know if there is some superior pattern that I am missing, because I think this is a very common problem.
Put the script after all the HTML so I am sure that the snippet DOM is loaded (I think this is a bad practice)
Creating a JavaScript function that loads the snippet with Facebox and then binds the events. This way I assume that I am using Facebox and also have to create a function for every type of modal dialog that I create. The only positive side I see in this is that I can create the items-modal-dialog DIV programmatically so I don't have to use a class to identify it.
Using jQuery live to bind the events.
Using an iframe and $(document).ready.
Any suggestions would be greatly appreciated.

Using jQuery's live or delegate function would be the best solution in my opinion.

jQuery Click event on object added with JavaScript not working

I'm working on a quiz for school but I've bumped into a problem. I got a JavaScript library for custom radio buttons (CUSTOM FORM ELEMENTS by Ryan Fait if it's helping). The script hides the input buttons and adds custom styled spans instead.
Desired behaviour, when I click one a span (added with JavaScript) I want to remove disabled attribute from my "Next Question"-button which when pressed takes you to the next question. I don't want users to accidentally proceed to the next question, without choosing an answer.
The problem is when I press the added spans nothing happens, but when I press another identical span which I have added in the HTML it works just as intended.
The span got the class radio, which I'm doing a lookup on with jQuery.
Short: Can't get jQuery .click() functions to work with spans added using JavaScript earlier in the document.

You are looking for jQuery's live() function. You would do something like:
$(".radio").live("click", function() {
// Enable the button here
});
Your other option would be to use the new delegate() function if you have jQuery 1.4.2 included on your page. Similar syntax, however, it only scans within the element it's called on for child elements of the kind you want to bind an eventListener to and I believe it has much less of a performance impact on large pages. (Not applicable in your case, but it's always good to practice with the best tools.)
$("element_containing_radio_buttons").delegate(".radio" "click", function() {
// Enable the button here
});