2

Working on a project which uses Jquery(1.6) Tabs, works all good but wondering if there's a way to stop the page focusing on the content div when using the hash tag in the url, its the browsers bookmarking feature i suspect but asking if i can override this, stop it or alternative solutions?

I already have alternative javascript referencing solutions ie make the ids obtuse and re-reference them in an array so when you use a certain hash its translated to "tab1" for example, that bit is easy its questioning whether this is possible via means of simply stopping the auto id focusing.

Example scenario:

  1. Go to www.domain.com/about-us#company-info
  2. www.domain.com/about-us loads and tab "company-info" activates, browser focuses on the div with the same id as the tab which has the content of the tab hiding the whole heading section.

Code is as follows:

<ul>
  <li><a href="#company-info">Company Info</a></li>
  <li><a href="#meet-the-team">Meet the team</a></li>
</ul>

<div id="company-info">
 content here
</div>
<div id="meet-the-team">
content here
</div>

<script>
   var tabs = $("#tabs").tabs({
    select: function(event, ui) {
     window.location.hash = ui.tab.hash;
    }
   });

 if(window.location.hash!=''){
   var param = window.location.hash;
   param = param.replace('#','');
   tabs.tabs('select',param);
 }
</script>

Adam J
  • 35
  • 7
  • 1
    Check out this question: http://stackoverflow.com/questions/1489624/modifying-document-location-hash-without-page-scrolling. I've used the fix before and it works well. – Rory McCrossan May 17 '11 at 10:41
  • Nice technique but my issue isn't when selecting a tab and it focusing/scrolling, i don't have that issue, its when going to the page first time from the url with the hash that it focuses. – Adam J May 17 '11 at 11:00
  • It does work onload as well. I have a similar tab system as yourself where each tab points to a #anchor, and this fixes the auto-scroll issue on direct linkin/reloading. – Rory McCrossan May 17 '11 at 11:03
  • Do you have a live example? I've been attempting to use the solution you advised but just can't seem to get much luck with onload. Tested using FF4/Chrome12. – Adam J May 17 '11 at 12:26
  • Got it working in the end with that solution but only way i got it working was not removing the temp id div, since bots ignore it, its a decent enough solution. thanks for the help! – Adam J May 18 '11 at 14:04

1 Answers1

1
var tabs = $("#tabs").tabs({
    select: function(event, ui) {
      event.preventDefault();
      window.location.hash = ui.tab.hash;
      return;
   }
});

I think this should do it .

Val
  • 17,336
  • 23
  • 95
  • 144
  • thanks for the attempt but to note, this actually breaks the functionality of the tab after its called – Adam J May 17 '11 at 11:03
  • oh ok try to remove the `return;` – Val May 17 '11 at 11:06
  • The preventDefault() func stops the jquery bind event in its tracks and therefore removes the tab functionality, the return doesn't do anything. My issue is not related to the onclick event anyway but thank you for trying =) – Adam J May 17 '11 at 12:29
  • preventDefault() is a native function which tells the browser not to do the browsers default functionalities; return; is return false; which does not carry on the rest of the instructions after it, – Val May 17 '11 at 13:32