SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Malaysia
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Deep link to tab content

    How can I make script direct link to a tab content? E.g. a page direct link into tab 2 at http://jqueryui.com/demos/tabs/ instead of tab 1.
    Bored with reading SEO text article? Visit our blog,
    we collected interesting SEO Infographic.
    We are local SEO company in Kuala Lumpur, Malaysia.

  2. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Depends on how the tabs are set up, but for that example: http://jqueryui.com/demos/tabs/#tabs-2

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Malaysia
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Immerse, thanks to reply.

    How about those tab content which is not support anchor link? My site gen-education.com/preview/page/gen-buddies-uk.html have problem to link to tab content, each time when I click the back button, it will fall into landing tab, instead of custom tab content.
    Bored with reading SEO text article? Visit our blog,
    we collected interesting SEO Infographic.
    We are local SEO company in Kuala Lumpur, Malaysia.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by patrick0001 View Post
    How about those tab content which is not support anchor link? My site gen-education.com/preview/page/gen-buddies-uk.html have problem to link to tab content, each time when I click the back button, it will fall into landing tab, instead of custom tab content.
    If the target web site is one that you have no control over, there is no much that can be done, other than to leave instructions telling the user how to get to the appropriate tab.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Malaysia
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am the site owner, how can I add the call back function? I did try javasript back to history function, but its seem like have limit function on frameset.
    Bored with reading SEO text article? Visit our blog,
    we collected interesting SEO Infographic.
    We are local SEO company in Kuala Lumpur, Malaysia.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by patrick0001 View Post
    I am the site owner, how can I add the call back function? I did try javasript back to history function, but its seem like have limit function on frameset.
    That depends on what's being dealt with.

    Can you provide us with a link to a tabbed content page that exhibits the problem?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Malaysia
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I click on below back button, I cant back to C tab content, it keep back to A tab.

    gen-education.com/preview/cms/index.php?option=com_content&view=article&id=14

    My back button insert the following code: #tab_3
    Bored with reading SEO text article? Visit our blog,
    we collected interesting SEO Infographic.
    We are local SEO company in Kuala Lumpur, Malaysia.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by patrick0001 View Post
    My back button insert the following code: #tab_3
    Don't get me wrong on this, but haven't web browsers had a back button located in a prominent and easy to find location since forever?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by patrick0001 View Post
    My back button insert the following code: #tab_3
    What is the origin of your tab code. Is its origin from some other location? There might be a good solution that I can find for you there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Malaysia
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I wasn't clear enough, I am not referring to the top back button at the browser. But I am referring the green back button on the page itself, I need it can be link back to Tab C

    gen-education.com/preview/cms/index.php?option=com_content&view=article&id=14
    Bored with reading SEO text article? Visit our blog,
    we collected interesting SEO Infographic.
    We are local SEO company in Kuala Lumpur, Malaysia.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by patrick0001 View Post
    Sorry I wasn't clear enough, I am not referring to the top back button at the browser. But I am referring the green back button on the page itself, I need it can be link back to Tab C
    What is the origin of your tab code. Did you get it from some other location, or have you written it yourself?
    If from some other location, there might be a good solution that I can find for you there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Malaysia
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I cant provide it because I grab it from friend template. Origin template: mcare.org.my/test/webbiemy/tab.html
    Bored with reading SEO text article? Visit our blog,
    we collected interesting SEO Infographic.
    We are local SEO company in Kuala Lumpur, Malaysia.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Would you consider using the official jQuery tabs, which are designed to work in the way that you want to use them here.
    For example, using the link http://jqueryui.com/demos/tabs/#tabs-2 it automatically shows that tab when the page loads.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Malaysia
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, I will consider that, as it is well support. Fixing a code can be a painful job. Thanks again.
    Bored with reading SEO text article? Visit our blog,
    we collected interesting SEO Infographic.
    We are local SEO company in Kuala Lumpur, Malaysia.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by patrick0001 View Post
    Thank you Paul, I will consider that, as it is well support. Fixing a code can be a painful job. Thanks again.
    If you were going to support the pre-existing tabs, it would mean running some code after the page has finished loading that checks the fragment identifier of the page, and if there is something there it would then call the tab-based code to change the displayed tab to the one that is referenced in the url.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Malaysia
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a solution at zachstronaut.com/posts/2009/06/08/jquery-ui-tabs-fix.html

    I added the following code to gen-education.com/preview/page/gen-buddies-uk.html#tab_3

    Code:
    <script type="text/javascript">
    			$(function(){
    	
    				// Tabs
    				$('#tabs-gallery').tabs-gallery();
                    $('#tabs-gallery ul li a:active').click(function () {location.hash = $(this).attr('href');});
    				
    				//hover states on the static widgets
    				$('#dialog_link, ul#icons li').hover(
    					function() { $(this).addClass('ui-state-hover'); }, 
    					function() { $(this).removeClass('ui-state-hover'); }
    				);
    				
    			});
    		</script>
    Bored with reading SEO text article? Visit our blog,
    we collected interesting SEO Infographic.
    We are local SEO company in Kuala Lumpur, Malaysia.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •