-1

Right now I have a Tab based layout that when I click on a tab and it loads a new page the hover state of the tab before clicking on it does not persist when the new page is loaded, and it defaults to the original tab it was set on.

The template at the time of purchase did exactly as I am trying to convey here as the action I am looking for (refer to link). My current work which is not the link provided is what I am talking about in regards to not being persistent like the originally purchased product.

My Page

Roman C
  • 49,761
  • 33
  • 66
  • 176
Jeff Davidson
  • 1,921
  • 7
  • 36
  • 60
  • 1
    Please provide some more information, which browser(s) do the problems occur. Try to describe your problem a little better, because I don't see a problem at the moment, it kind of does what I expect it does (unless I completely miss interpret what you want). – Styxxy Jun 18 '12 at 23:04
  • It does. I'm just curious what makes it do it because its not on my page. – Jeff Davidson Jun 18 '12 at 23:08
  • 1
    how is anyone supposed to troubleshoot your page from a page that is working properly without seeing what is going on? – charlietfl Jun 18 '12 at 23:09
  • Please provide your page, since I really can't know what your page looks like. Just like @charlietfl points out. – Styxxy Jun 18 '12 at 23:11
  • kansasoutlawwrestling.com/kowmanager/dashboard – Jeff Davidson Jun 18 '12 at 23:13

3 Answers3

2

I'm not sure this is what you are referring to, but my guess is that when you refresh the page while you're on the "Elements" tab, for instance, you want it to re-load with the "Elements" tab selected.

The typical way to do this is through the use of Hash Tags, and a bit of JavaScript logic. Specifically: each of your tabs is actually an <a /> tag, and currently - they each have a url of href='#' - which means that they are hash-tag links. However - they all link to the base hash.

Usually, what you will see is that each tab will have a different hash-reference, which refers to a different view mode the page is supposed to be in. So - if the URL contains #dashboard, the javascript on the page knows that as soon as the page loads, it is supposed to show the dashboard. If, on the other hand, the URL contains #elements, then it is the "Elements" tab that should be showing.

There are some solid plugins out there that handle this sort of thing - but without a major rewrite to your UI (which is already pretty snazzy lookin') - I'd suggest just doing a little bit of jQuery to figure out what the hash is, and checking it on load.

Look at the Stack Overflow question Retrieve specific hash tag's value from url as an example of some ways to work with hashtags.

Community
  • 1
  • 1
Troy Alford
  • 26,660
  • 10
  • 64
  • 82
1

If the issue you are trying to figure out is how to set tabs to reflect page changes you need to adjust the "current" class on tabs based on url loaded. This class can easily be viewed in a browser console by inspecting the nav elements in html view.

Class would likely be easiest if added by your server code.

The javascript( jQUery) code for your nav tabs starts on line 477 of scripts.js

charlietfl
  • 170,828
  • 13
  • 121
  • 150
1

Your problem is, your not passing the "current" class to the tabs when the new page loads. So if you click on the second, third, forth tabs, and the page reloads, or loads new the original tab with the class "current" is still the first tab.

You have to either manually on a per page basis apply the "current" class to each tab, or build a logic to figure out what page your on when the page is loaded to populate the right tab with the class "current", essentially thats dependent upon how your actual template is laid out is it static, dynamic, etc.

chris
  • 36,115
  • 52
  • 143
  • 252
  • How is it that the template file is doing it then what am I not including? – Jeff Davidson Jun 19 '12 at 04:42
  • Click on a tab in your link, then refresh the page, notice that it does not stick.. again, passing the class `current` to the one clicked is key to making it stick. – chris Jun 19 '12 at 06:57
  • Well can you direct me to where I can find a good code chunk that will help me perform this task. – Jeff Davidson Jun 19 '12 at 07:45