Activating accordion panels from external anchors/links - javascript

I've been trying for some time to activate a jQuery UI accordion's panel from an external link.
I have links within pages that an accordion widget is on that I'd like to use to activate panels of the accordion. These links are not within the accordion widget's markup.
These links are manipulating tab interactivity and are used for popping in AJAX content.
At some states of the application, the { navigation: true } part of my options object for the accordion gets forgotten.
I believe this is because I'm initiating a window.reload.location() to get back to certain states of the application.
The function below shows this. What I think I need is either a custom navigation filter built on hashes, or location that will work within this function to also activate accordion panels depending on what URL the user is on.
I do have navigation set to true in the beginning of my scripts and the following script comes later...
// "Back to xxxtabTitle" button used to revert tabs to their default state after
// photoNav pop-in AJAX content has been loaded
$('#mainContent').on('click', '.backToInitTab', function(event) {
event.preventDefault();
window.location.reload();
// accordion navigation filter to open correct accordion panel on click event
// Can you help with this? I'd greatly appreciate it.
// /accordion navigation filter
});
// /"Back to xxxtabTitle" button
Any help or insight on this issue would be greatly appreciated!
Thanks in advance.
Sincerely,
Dick Kirkland

Sort of the answer: I had to abandon using navigation options with the jQuery UI accordion as I'm using a design on a site that contains buttons that perform reloads on pages and/or UI tab panels with window.location.reload();. If you have this reloading of content in your site, you may see the navigation begin to take effect by opening up the desired accordion panel, but then seeing the panel contracting. I believe this is because normally, clicks from the accordion panel itself instruct the UI accordion component how to react to the hash history. We turned navigation off and did manual instantiations of what panels should open on a minimum of pages. This allows AJAX functionality (tabbed content) to still have the accordion panels open and the only animation seen is when the total page reloads.

write
$( "#accordion" ).accordion({ active: 2 });
refer to this site

Related

Keeping slideshow on top with page below visible

I have a pretty big Intranet site at work, there are detailed work descriptions. There are links in the procedure that bring up pics, and I'm using Highslide. The default behavior is to bring the gallery up and dim the background. When you click outside the gallery it closes. Some of my users would like to keep a gallery up, on top so they can follow the procedure. As of now they keep having to bring the gallery up. I also have a pop up on a section of another page that pops up a modal with html in it(I have calculators popping up). The behaviors of these is they stay on top of the page until you close them. I'd like the same behavior for my gallery, is it possible?
A Highslide gallery/image can stay open exactly like an Highslide HTML popup. All you need to do, is removing the hs.dimmingOpacity setting for your gallery. Since I haven't seen your page, I can't tell where to find this setting in your gallery setup.
Highslide lets you define a function to run before closing. If this function returns true, it will close, if false, it will stay open. Without seeing your code this is the best response I can offer.
<script type="text/javascript">
var allowClose=false;
hs.Expander.prototype.onBeforeClose = function (sender) {
return allowClose;
}
</script>
The somewhere else you can add a button to switch allowClose to true, which will restore the basic closing functionality. There is also a close() function in highslide, so you could have a large button somewhere to call close().
The full set of properties, functions, and events is here-> http://highslide.com/ref/

Need to apply jquery switch class to a target page

I'm building a one page website with slides that load in the different content. These are controlled by the navigation which has some switchclass jquery added to the links so each link you click switches the class of the body and therefore a different slide loads.
The problem I have is that from the blog when you open a post in full there is no way of displaying that post within the same page as the rest of the site. The CMS I'm using (Business Catalyst) opens the post in a new page which I have styled up to look like the rest of the site.
So my problem is that now the nav links on that page need to work their switchclass jquery magic on the target page when going back to the index page....
This is the jquery that is currently running the links..
$(document).ready(function(){
$(".home a").click(function(){
$("body").switchClass("default about training charities coaching blog contact", "home", 500, "swing");
});
});
any help greatly appreciated.

How to load the right pane without reloading header/footer or leftnav

I'm trying to build a web app (HTML/Bootstrap/jquery) which has header,footer,leftnav and right pane. The content of the right pane would be a separate html page which will be loaded based on what is clicked in the left nav.
I got individual pages with HTML for header/footer/leftnav replicated for each content page. But I only would like to have the right pane content to be loaded without reloading the other components.
Heres an example, upon click on left nav item.. only the content of the right pane changes:
http://play.raaga.com/myraaga
Appreciate any help, thanks!
You could use the ".load()" function of jquery.
$('selector-of-the-panel').load('url');
jQuery .load() docs
The example you included looks pretty close to jQuery UI's .tabs() widget, which you can use with ajax to load your different html pages: http://jqueryui.com/tabs/#ajax For a vertical nav-like look, see: http://jqueryui.com/tabs/#vertical

How to link to a "tab" on my website

I have made tabs on my site. By tabs I mean the navigation links, rather then loading a new page use some java script and css to just switch to another tab containing more content. I'm wondering how I would be able to link to a specific page when it's done like this?
My code is similar to this one:
Using jquery easyui, how to create a tab by a link which is in a tab?
Edit: http://fogest.net16.net/righttoweb/ <<< There is a link to the site. Look at the tabs. How would I link to the page of one of those tabs?
Add anchors to the end of your URL, ie http://URL/righttoweb#about and on $(document).ready() block of code pick up the anchor and using a hash table figure out what tab needs to be selected.
Also make sure when users click on your tabs, you update the anchor in the top bar as well, in order to preserve which tab was selected if the user decides to bookmark the URL or send it to someone else
edit:
Well every time a user clicks on one of your tabs, with the onClick event you need to alter the navigation history of your page, for ex:
window.history.pushState("object or string", "Some Title", "#tab" + tabname);
This will enable the back/forward buttons to work
then everytime the page loads you need to
$(document).ready(function() {
if(window.location.href.indexOf('#'))
updateTab(location.hash);
});
function updateTab(tabname) {
your logic to update tab...
}
Hope this makes sense

Pin tabs in a tab panel

i couldn't find a better title,
but i would like to build a tab panel with two tabs that are always present
and a undefined number of other tabs that are generated dynamically by the user.
I would like to implement something similar to the app-Tabs in Firefox:
The tabs added by the user should be scrollable, while the other 2 tabs should be pinned and always displayed.
Here's an image:
Is this possible via ext or do I have to do it via css?
Thanks for any ideas!
Ok for those who are interested, here is how i did it now.
I shift my tab bar to the right by applying a padding-left.
The two tabs that i want to pin are hidden
and in the free space that results from the padding i put two buttons and make them look like tabs.
If they are clicked, the hidden buttons are activated.
It's not completely finished, but i think it will act as desired.

Categories