UKJim wrote:
>
>
> Hi,
>
> I have a problem where my UI Tabs 3 does not activate and redisplay the
> correct Tab
> content when a menu on the page uses the tabs hash fragment identifier
> for tabs ON THE SAME PAGE. It works fine if the link is clicked from a
> DIFFERENT page.......
>
I'm back with another solution to the problem.
To recap, the excellent jQuery UI-Tabs interface by Klaus Hartl has a small
problem. The browser is not able to activate/redisplay a tab when a link
containing the tabs anchor (fragment hash # identifier) that is not part of
the actual UI-Tabs interface is clicked, i.e. a link elsewhere on the page,
say part of some text content, or in another menu elsewhere on the page.
Note that the key issue here is not whether a link will cause the page to
reposition at a selected normal anchor. The problem is that the UI-Tabs
interface which uses Anchors to identify the relevant section to display,
will activate the correct tab when the actual UI-Tabs nav system
(ui-tabs-nav-group) is clicked, but not when an individual "link to anchor"
elsewhere on the same page is clicked.
This is why Klaus provided the .tabs('select',x) function, so that some code
can be specially written to activate (select) a specific Tab (x) in the
interface.
Here is an example of how this can be done:-
In the page a link is added with a unique ID, e.g. we have a link in an
initially displayed tab section which needs to display a second tab section
containing a location map for visitors to find the office (note the
id="clickMap" in the link).
Click here for our Contact.htm#TabSection2 location map .
And here is the associated tab sections for the UI-Tabs interface, with the
above link built-in:-
<div id="container-1">
<ul class="ui-tabs-nav-group">
<li class="ui-tabs-nav"> #TabSection1 Office Details </li>
<li class="ui-tabs-nav"> #TabSection2 Location Map </li>
</ul>
<div class="ui-tabs-panel-group" id="MainContentBox">
<div class="ui-tabs-panel" id="TabSection1">
<h1>Office Details</h1>
<p>Details of our Office are......blah </p>
<p>Go to #TabSection2 Location .</p>
(Here is the link....)
<p>Click here for our Contact.htm#TabSection2 location map .</p>
</div>
(This is the tab section we want the link to activate and display....)
<div class="ui-tabs-panel" id="TabSection2">
<h1>Location Map</h1>
<p>We are located in Stamford Lincs, click here
for a http://www.google.co.uk/somemap-link/ Google map.</p>
</div>
</div>
</div>
Then in the Head section coding of the page where the jQuery functions
reside we can define a function that will select TabSection2 (index of 1) by
means of the .tabs('select',1); function:-
<script type="text/javascript">
$(document).ready(function(){ // jQuery functions
setTimeout(function() { // making IE happy (and sometimes Safari)
$('#clickMap').click(function(){
$('#container-1 > ul').tabs('select',1);
return false;
});
}, 500); // end of timeout
});
</script>
Note that this will only activate for the link identified by the ID of
"clickMap".
However this method means that each time we have to write a specific Click
function to select the required tab for any links we require elsewhere on
the page (outside the normal UI-Tabs functionality).
The new method proposed is to utilise the following code instead within the
jQuery function definitions in the Head section, e.g.
<script type="text/javascript">
$(document).ready(function(){ // jQuery functions
setTimeout(function() { // making IE happy (and sometimes Safari)
// fix to make Anchor type links (hash # fragment identifiers) activate
the
required jQuery UI-Tabs tab
$('a[href*=#]').click(function() {
var id = this.href.toString().replace(/^[^#]*#/,'#');
if ($('a[href='+id+']').parents('.ui-tabs-nav').length > 0) {
$('a[href='+id+']').parents('.ui-tabs-nav').tabs('select',id);
return false;
}
});
}, 500); // end of timeout
});
</script>
This method extracts the actual name of the tab section from the Link Anchor
URL and passes that to the 'select' function as the section to activate and
display.
This is a much better solution because you don't have to write dedicated
Click functions (this one function handles all tab sections), nor do you
have to add ID's to the Links. Of course you must retain the ID on the Tab
section.
I have tried this and it works fine in IE6/7, Firefox, Safari and Opera.
As a sidenote I still had to write special code for a Flash-based menu
system I was using because Flash is outside the normal control of anchor
behaviour within the context of the browser.
--
View this message in context:
http://www.nabble.com/Fragment-Identifiers-Hash-not-working-on-same-page.-tp17323596s27240p19994912.html
Sent from the jQuery UI Discussion mailing list archive at Nabble.com.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
