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........
>
>
Ok, I might have known it wouldn't be that easy!
There is a further problem with this method if the Anchor link the user
clicks actually refers to a UI-Tabs TabSection DIV which is on a different
page to the one the user is currently viewing.
Let's say the current page the user is on is called index.php and has 3
tabs, with content held in TabSection1, TabSection2 and TabSection3.
And then we have another page contacts.php which has TabSection1 thru
TabSection5.
Now if you have an contacts.php#TabSection2 in index.php the above
solution does not work properly. It causes TabSection2 on index.php to
activate, instead of the desired action of going to
contacts.php#TabSection2, despite the fact the page contacts.php is
explicitly named, and this is because the replace removes anything preceding
the # symbol.
However if the link was instead to tab 5, ie. like contacts.php#TabSection5
this does work because the index.php only contains TabSection1, 2, and 3,
not a TabSection5, and so since it doesn't exist it seems the browser then
uses the complete URL and will jump to the new page, and then the correct
Tab content section.
So my code needs to decide whether the link URL refers to an anchor on the
current page or a different page, and either use the UI-Tabs
.tabs('select',id) command, or force a browser redirect using the
"location=newurl" command. Here is my full solution (looks long due to the
extensive commenting).....
<script type="text/javascript">
<!--
$(document).ready(function(){ // jQuery functions
setTimeout(function() { // making IE happy (and sometimes Safari)
// fix to make global Anchor links within page (hash # fragment
identifiers) activate the required
// jQuery UI-Tabs tab
// but NOT if the URL refers to a DIFFERENT page (uses
GetFileName.js)
$('a[href*=#]').click(function() { // jQuery finds all
elements where
the href
// attribute CONTAINS a #, then
bind clicks on them to following
// function:-
var fullurl = this.href.toString();
if(fullurl.indexOf('#TabSection')) { // is it
specifically for a UI Tabs
div? e.g. activate
// div TabSection2
if(getFileName(document.URL)==getFileName(fullurl)) { // if desired Tab
div is
// on THIS page must use
tabs(select) to show correct
// TabSection (id) - browser
wont!
var id =
this.href.toString().replace(/^[^#]*#/,'#'); // get rid of any
// URL chars before the # eg.
remove domain and page name
// leaving just anchor name
if
($('a[href='+id+']').parents('.ui-tabs-nav').length > 0) { // do we
still
// have something?
$('a[href='+id+']').parents('.ui-tabs-nav').tabs('select',id);
// activate the UI Tab
return false;
}
} else {location=fullurl;} // otherwise go to
the NEW page + Tab # ID
// (going to a new page the
browser+jQuery IS able to
// activate the required tab on
page load)
} else {location=fullurl;} // some other normal URL or
anchor
});
}, 500);
});
//-->
</script>
Note that the above is specifically looking for links to UI Tabs content
divs called "TabSectionN", e.g. TabSection1, TabSection2, etc. Also this
uses an additional Javascript function called getFileName(), which is as
follows;
GetFileName.js:
// Function to return filename portion from URL
// required for use by F-Source menu in JSF function
// and jQuery global Anchor jump fix
function getFileName(url) {
// var url=document.URL,
var i=url.lastIndexOf('/')+1,
j=url.indexOf('#',i),
k=url.indexOf('?',i);
if(-1==j) {j=url.length;}
if(-1==k) {k=url.length;}
return url.substring(i,Math.min(j,k));
}
This should be included in pages thus;
<script type="text/javascript" src="scripts/GetFileName.js"></script>
I wondered if there is a neater jQuery way of returning the filename from
the URL, but the above works for me. Hopefully the comments in the code
explain what is happening. I have tested this in IE6, IE7, Firefox, Opera,
Safari, Mozilla.
I hope that helps other folks.
Jim
--
View this message in context:
http://www.nabble.com/Fragment-Identifiers-Hash-not-working-on-same-page.-tp17323596s27240p20324776.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
-~----------~----~----~----~------~----~------~--~---
