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.
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'm building a site using bootstrap and have created a navbar with some links. The index page consists of the navbar and a body with a single div that pulls in content (pages I've created) via jQuery's ajax feature (depending on what link was clicked in the navbar, that page is displayed in the div).
The site is for users who have permission to access pages based on folder settings I've created (if a user has access to a folder, he can view the pages within it). It works fine for the most part, but when a user who does not have access to a page clicks on a link, I assumed that the error page would show up in the div. However, it just bounces the user off the site completely to an error page.
My solution is to use a jQuery unload event.
I placed this in a .js file:
$( window ).unload(function() {
alert( "Bye now!" );
});
But a popup now shows up when I click on any external link, when I close the browser, or when I refresh the page. I only want it to activate when a user clicks on a specific link (one with an id class). I want to let them know that they clicked on a link that they do not have access to, and if they do not stay on the page they will be forwarded to an error page. How would I go about doing this?
--Update--
Here is the JSFiddle Link to JSFiddle
So for example, all users have access to the page "technology", so when they click that link on the navbar it is fetched and displayed in the div id "result". However, only some users have access to the page "inspections"; for those who have access the page is fetched, for those without it redirects them from my page to an external error page. I want a warning to pop up so they know that they don't have access and if they follow the link they opened that they will end up on an error page.
--Update 2--
Using Mr. Genuis' code got it working, but I have one final question. I implemented the code and a pop up appears for users who don't have access to the link (exactly what I wanted to happen), but when they click the OK button or click the x button on the popup, they are still forwarded to the error page.
Is there anyway to disable that? I tried updating the unload function (that Mr. Genuis provided) with this code, and it works (it gives the user an option to stay on current page which prevents the error page from loading), but the pop up function also activates when a user tries to close the browser page. I just want it to trigger when the link is clicked.
Here is the code i used:
$(window).bind('beforeunload', function(){ return '>>>>>Before You Go<<<<<<<< \n Your custom message go here'; })
I am really not sure if your approach is right for the given problem.
About activating the window unload event conditionally,
move that unload event hookup inside the link click event, that way you hookup the window unload event only when needed. Not always!
Update:
Something like below. For illustration purpose only.
Warning: I feel there is a smell in this approach.
$(".link").click(function(){
if(true){//Your condition check goes here.
$( window ).unload(function() {
alert( "Bye now!" );
});
}
else{
window.location.href = "someurl";
}
});
Now I have a link
link
However, this always open up a new tab. I want the following effect
If the user already has a tab with the same URL, reuse that tab, and refresh if possible
Otherwise, open a new tab
How can I achieve this using JavaScript?
It's OK if there're only some browser-specific methods, so users of browsers without corresponding support will "fallback" to the always-new-tab way.
You can set specific window's name, in order to open reuse the tab. The problem is, as far as the href will be the same, it won't be reloaded. So you can't obtain the refresh part easily.
So, for instance, you can have:
link
link
In JS, you can actually obtain the same, using window.open. You could also use the url as target, so that you don't need to specify manually:
link
link
You could also generalize, and add a click listener to the document, in order to open some links in this way. Something like:
<div id="container">
link
link
</div>
<script>
document.getElementById("container").onclick = function(evt){
if (evt.target.tagName === "A")
window.open(evt.target.href, evt.target.href);
return false;
}
</script>
If the page are on the same domain, at this point you could probably trying to do an empiric refresh of the page as well.
setting up target="child" would refresh the current tab if already opened
ABcd
Defg
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.
Example of what I want to do: On Facebook, clicking a link to open it in the current tab will trigger some JavaScript rather than opening the link. However, opening it in a new tab (either by right-clicking or by holding Ctrl/Cmd) will open the link without calling any JavaScript.
I'd like to do the same with my links (have link behaviour dependent on the target). I have the onclick event handler return false; to avoid opening the link; but this causes Ctrl+clicking to fail to open the link. How do I achieve this?
EDIT: I do not want links to forcefully open in new windows. IF a link is opened in a new window, I want it to follow the href as usual. However, IF the link is opened in the current window, rather than following the link in the current window, I want to have some JavaScript run.
Facebook does this to open an image in a popup "theatre" if you open it in the current window, and open it in a full page if you open it in a new window.
Note that capturing the click event on links and using preventDefault() or return false causes Cmd+Click (open in new tab) to fail. In any case, this should work regardless of how the link is opened - click, Enter key, etc.
EDIT 2: It seems that hashchange / HTML5 pushState is the correct way to go about this
You can set the href of the anchor pointing to correct url. This way right click and open in a new tab or window will work fine.
Use jQuery to bind the click event handler to the anchor like this.
$('a').click(function(e){
//Do whatever javascript operation you want.
if(!e.ctrlKey){
e.preventDefault();//Stop the page to navigate to the url set in href
}
});
Demo