I'm using a jquery tabs plugin for Wordpress (The plugin is downloadable at http://wordpress.org/extend/plugins/wp-ui/ )
I have a page with 4 tabs on it, and I want a text link to take people from tab 1 to tab 4.
I can add a text link to #_enquire which will take me to tab 4, but it also appends the url with #_enquire, so if you then click back to tab 1 and click the text link it no longer works since it's already at that URL.
I'm assuming there must be a relatively simple way to apply the same jquery used when you click the tab itself to a text link. Therefore when you click the text link it acts as if you clicked the tab name itself.
You can see the tabs on the site here: thailand-golf-tours.com/golf-tours/bangkok/bangkok-2-days-golf-package/
I've left the anchor version of the link on at the bottom of tab 1 ("Click here for tab 4")
Any help would be much appreciated. I'm used to using css/html so I'm not too great with javascript/jquery. I've tried contacting the plugin author through his site as well as the wordpress site and twitter and had no luck.
Rather than "redirecting" with your link, you need to simulate a click with jquery.
So clicking the text link is "the same as "clicking your fourth tab. As you did not post your code, I will post some code that should get the idea across.
jQuery("#the-name-of-the-link-id").on("click", function(e){
e.preventDefault();
jQuery("#the-name-of-the-tab-id").click();
});
This will simulate a tab click when you click the link!
edit:
try this.
jQuery(document).ready(function($){
$("#the-name-of-the-link-id").on("click", function(e){
e.preventDefault();
e.stopPropagation();
$("#the-name-of-the-tab-id").click();
});
});
Again do NOT use the href. use an id, if you must use an href you do this selector $('a[href="#_enquire"]'), but that is a less straightforward way of doing it.
Related
So at the moment I have a page which uses two tabs, each tab is display none until the associated tab button at the top is clicked. I'm usin jquery for the click event.
At the moment let's say tab 1 is the default, I need to navigate to tab 2 from another page.
I was wondering if I could add something to the link on the other page which would act as a click on the tab button.
Any way, really need some help on this 😇
$(document).ready(function(){
if(window.location.hash == "#tab2"){
$(".tab-label-2").click();
}
});
Putting the above into the page with the tabs on. Add #tab2 to the end of the link you're clicking on
window.location.hash checks anything from the #. if it's the same it will run the function which in the above case is clicking on something
I am trying to link to a specific panel of a bootstrap 3 accordion. The links will be in a navigation menu, so sometimes the links will be on the same page as the accordion, and sometimes they will be on a different page. I have an example that works when the links are on a different page, but it doesn't work if you're on the same page. I need it to work in both cases.
Here is the code I'm using:
jQuery(document).ready(function($) {
// open panel when linked from an external link (this works)
location.hash && $(location.hash + '.collapse').collapse('show');
// open panel when link is on the same page (incorrectly requires double click)
$(".nav-left a").on("click", function() {
location.hash && $(location.hash + '.collapse').collapse('show');
});
});
Here is a demo that shows it opening the correct panel from an external link:
http://www.bootply.com/render/123550/#service2
(You may need to copy and paste this URL into your browser if it doesn't work.)
But if you try to use the links once you're already on the page, you have to double click them to get them to open the corresponding panel.
Here's the link to the full bootply with my code: http://www.bootply.com/123550
Thank you for any help!
The click handler for a link is executed before the browser follows the link, so your handler function will still see the old location.hash.
To circumvent that, you can either
react to the window's hashchange event (which has the advantage that it will even work when the user uses the forward/back buttons) or
determine the section to be opened from the link's hash instead of the location's hash.
I am using a jquery script called Feature List for displaying different sections of info on a page. The user can click through the various tabs to see different content. It works great for what I want it to do but I was hoping to be able to link to each tab from an external page. The problem is I'm not great with jquery am not sure how to go about this or if it's possible with the way the page is set up.
You can see the page and view the source at http://nourishedbynature.co.uk/
Ideally I'd like to be able to link to the page and display a specific tab by appending something the the url.
Any ideas would be greatly appreciated.
Thanks
Use document.location.hash on $.ready then fire the jQuery code that corresponds to that hash.
$.ready(function(){
gotosectionforhash(document.location.hash);
});
I am trying to make a Google Chrome app that automatically opens a YouTube site and clicks on the expand button, or any button.
I tried to use the following JavaScript:
$('#logo').click(); , .trigger('click');
But nothing happens.
Does anybody know how to do it?
Thanks
The thing you're clicking must be clickable. There is a link around the logo (id="logo-container") you need to click that, not the logo itself. Right click on the logo in chrome, select inspect element and then you'll see what the <a> tag is around the img.
Try this:
$('#logo-container').click();
I already have this to close the active fancybox:
javascript:parent.$.fancybox.close();
added to my link.
Question : how can I open another fancybox content when that link is clicked?
Say: I have the login form open via fancybox. There is a link which says: Do not have an account. So if that link is clicked I want to load registration form and close login form. What is best practice to do this?
Thank you.
There seem to be a few other questions around on this subject.
This one for example:
How do I open one Fancybox after another closes?
Another and simpler way to do it without using callbacks here: https://stackoverflow.com/a/10694032/1055987.
Actually that covers the latest 1.3.x version of fancybox while the other question/answer was written for a much older version.