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');
Related
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') ;
});
I've got a wordpress site under my novice care (I'm an intern) and was asked to implement and a button that toggles a form. So I went digging. I found this tutorial http://www.davidtiong.com/create-toggle-shortcode-for-wordpress-using-jquery/
and used it to implement this --> http://www.hardwareclub.co/community/
The button, "request more info", works as it's supposed to when you go to the link as I just directed you to.
BUT if you get there from hardwareclub.co by using the top navigation menu the button no longer works.
What gives?
The same question can be asked about the hardwareclub.co/scale page.
jQuery(function($){
$(".toggle_container").hide();
$(document).on('click', "h3.trigger", function () {
$(this).toggleClass("active").next().slideToggle("normal");
return false; //Prevent the browser jump to the link anchor
});
});
I am not sure how familiar you are with Ajax and JQuery but basically when you click your menu links you are loading the page with Ajax and its preventing your JQuery to run. See this SO answer here. Here is a quote from that answer.
When you do an AJAX call, and replace a section of your page, you're
removing those elements with the event handlers bound to them and
replacing them with new elements. Even if those elements would now
match that selector they don't get the event handler bound because the
code to do that has already executed.
I believe you are having the same issue going on here which is why it works when the page is loaded normally but doesnt work when its loaded via Ajax.
You will need to set your JQuery click event for your form to use something like:
$(document).on('click', ".your-form-class", function () {
...
});
I dont know enough of your JQuery (since you didnt post any code) but im sure thats pretty much whats going on.
The CMS I'm using (Invision Power Board) has nifty Sign In links that when clicked open a dialog instead of changing the page. I found an example of how to create such a link:
...
The problem is, every time the mouse is moved over the link, the click handler is added. So if I move my mouse over the link ten times and then click it, the Sign In dialog comes up ten times.
I tried changing it to:
...
But that doesn't work. There aren't any errors in the console, but nothing happens when the link is clicked.
I was able to get this working, but it required some non-inline code:
<script type="text/javascript">jQuery("a.signIn").on("click", ipb.global.inlineSignin);</script>
But that's a problem, because I may have sign in links on different sections of pages (that are generated independently) and if I have the above snippet more than once, then I'm back to the same problem.
Is there any way to make this click handler work using only inline code?
You need to invoke the method
...
I've never posted here before, and I'm hoping you can help me. I have a js function that on click will toggle display and hiding a paragraph. However, I need to nest them upon one another. In other words:
1) Some text here //Click to open
2)This text opens upon click //Click to open
3)This text opens upon click.
They way I have it written now, clicking 1 opens 2 up, but clicking 2 closes everything. I'm just learning JS now, so I'm now the best with it, so I'm hoping the pros here can help me. Here's what my function looks like now http://pastebin.com/ZUzp1pUJ Anyone got any ideas?
I noticed you included jQuery in your HTML but you're not using it anywhere, I'll assume you're new to jQuery and willing to use it.
Here's what you do.
First you should read up on the jQuery Reference. It is extremely useful.
The things you need to give extra attention to are these:
jQuery Selectors - use $('.myClass') instead of getElementsByClassName
jQuery Toggle - or any of it's companions (slideToggle, fadeToggle) to do exactly what you asked for.
and as to your question - stopPropagation - which allows you to trigger only the toggle that you clicked and stop the event from bubbling up through the dom. (and not to trigger it's parents.)
These three combined should do the work. Good luck.
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!