Direct Link to Tab

Re: Direct Link to Tab **Posted:** Fri Jun 25, 2010 1:50 pm +0-

Dear Boblam,

All actions are given to the ul tag by the code Y.on('click', changeTab, '#demoLinks'); which you don't use in your own html. So you have 2 options:
1. use my unsorted list and place in instead of your own references (and change some html text)
or
2. don't use my unsorted list, change your own html a bit like: <a id='hreftab1' href="#tab1">Tab 1 - Description</a> (same for tab2 and 3) and replace the scriptcode

Code:

Y.on('click', changeTab, '#demoLinks');

by

Code:

Y.on('click', changeTab, '#hreftab1');
Y.on('click', changeTab, '#hreftab2');
Y.on('click', changeTab, '#hreftab3');

My suggestion to you is that you dive a bit more in YUI3 by looking at some examples: http://developer.yahoo.com/yui/3/examples/. Remember that YUI3 is really sophisticated so better not just copy-paste the code without knowing the meaning.
Success

.

Re: Direct Link to Tab **Posted:** Fri Jun 25, 2010 6:02 pm +0-

I was successful at getting your changes above to work on the same page (both with your unsorted list and with my own custom html link as you have shown above). Since my goal is to link to a tab from another page, I then put a link like this on a different page:

<a id='hreftab3' href="/testtabyui.aspx#tab3">Tab 3 - PPS Tutorial</a>

When I tried this, I got to the correct page, but the tab didn't change.

I will be looking more into the examples (however, I haven't found a lot of them with tabview). Also trying to understand better how several of the statements work like:

e.target.get('href')

Thoughts?

Re: Direct Link to Tab **Posted:** Sat Jun 26, 2010 2:31 am +0-

Hi Boblam,

Ok. I misunderstood that you were working with multiple domains. Your examplesite didn't show that out to me, although I could have seen it when I looked better at the YUI2 solution Dav gave. This changes the the solution quiet a bit. Forget my previous solution and try this:

At one page use the links like:

Code:

<a href='http://www.otherdomain.com#tab1'>Tab One</a>
<a href='http://www.otherdomain.com#tab2'>Tab Two</a>
<a href='http://www.otherdomain.com#tab3'>Tab Three</a>

At your second page (http://www.otherdomain.com) use tabview like this (modified at own will):

Code:

<div id="demo">
    <ul>
        <li><a href="#foo">foo</a></li>
        <li><a href="#bar">bar</a></li>
        <li><a href="#baz">baz</a></li>
    </ul>
    <div>
        <div id="foo">
            <p>foo content</p>
        </div>
        <div id="bar">
            <p>bar content</p>
        </div>
        <div id="baz">
            <p>baz content</p>
        </div>
    </div>
</div>
<script type="text/javascript">
YUI().use('event', 'tabview', function(Y) {
    var tabview = new Y.TabView({srcNode:'#demo'});
    tabview.render();
    var url = window.location.href.split('#');
    if (url[1]) { //We have a hash
        var tabHash = url[1];
        if (tabHash.substring(0,3)==='tab') {
            var tabnr = parseInt(tabHash.substring(3),10);
            tabview.selectChild(tabnr-1);
        }
    }
});
</script>

b.t.w. e.target can be used when using events. It gives you controll where the event took place: e.target is the node (for instance the <li> element where a visitor clicks on. e.target.get('attribute') can give you the attributes of the node (id, or href). http://developer.yahoo.com/yui/3/node/ is a really good way to start with.
Hope this works!

Re: Direct Link to Tab **Posted:** Sat Jun 26, 2010 4:20 pm +0-

That works well from an external page. Thank you.

I now have examples of both an external link calling a specific tab on a page and a link on the same page changing the tabs.

I have created an example of the external link calling a page at http://futuresults.com/test.aspx It calls page http://futuresults.com/testtabyuiex.aspx

My other example is http://futuresults.com/testtabyui.aspx for the changing tabs on the same page example.

This gets me thinking about two other cases:
1. In my case I am calling pages via iframes for each of my tab's content. Neither of the two examples above work in this case (calling a different tab from within the content of the current tab). I'm kind of surprised that the external link example doesn't work for this.
2. Trying to create an example that allows for all of these cases. So basically, I could use the selected method (same page or external link or within a tab) and get the proper tab to be called.

Any thoughts on changing the tab from within a iframe in a different tab. I have added this example to the first tab from within the iframe.

Re: Direct Link to Tab **Posted:** Sun Jun 27, 2010 3:36 am +0-

Remember that iframe is a sort of sandbox within your page. It doesn't know of its parent. So accessing its parent's tabview by scripting has quite some pitfalls, and is impossible when scripting cross-domains (fortunately, due to safety restrictions). So best shot you have is by creating anchors like this (in your iframe):
<a href='http://www.yourdomain.com#tab2' target='_parent'>Tab 2 - Features (Internal Process)</a>
Drawback is that the whole page will reload.
By the way, YUI3 gives you a much better alternative than iframes. You can use the IO-module and insert foreign content life in your page. See the example http://developer.yahoo.com/yui/3/examples/tabview/tabview-io.html
Good luck.

Re: Direct Link to Tab **Posted:** Mon Jun 28, 2010 10:25 am +0-

When I try the iframe href you have provided, it reloads the iframe page, but it doesn't change the tab on the parent page nor change the content. http://futuresults.com/testtabyuiex.aspx#tab1 Try the link for Tab 3 in the Description tab in the iframe.

Also, I have created a sample with the IO-module. http://futuresults.com/testtabyuidynamic.aspx
If you look at the "Tutorial" tab, it doesn't seem to load the embedded videos. This should look more like: http://futuresults.com/testtabyuiex.aspx#tab3 I like this approach better if I can get the embedded content to load.

Re: Direct Link to Tab **Posted:** Mon Jun 28, 2010 11:39 am +0-

Hi Boblam,

The code seems Ok.
Look at the address-bar. In firefox the new address stays visible, in Safari (and perhaps other browsers) your page has a reload. For reasons I don't know. To be honest, at this point it goes beyond this topic and I can't help you any further.
My best suggestion is that you try to create your pages with standard html editor tools, so that you can create the pages from scratch. For me: I'm just using standard texteditor and follow the html guidelines in combination with yui3. I test the code firefox with some great add-on tools YSlow: https://addons.mozilla.org/en-US/firefox/addon/5369/ which gives you almost everything you need to see if everything works out fine.

Kind regards,
Marco.

Re: Direct Link to Tab **Posted:** Mon Jun 28, 2010 8:34 pm +0-

I was successful at getting your changes above to work on the same page.
Thank you for this support forum and thank you for the template. It's awesome.

Forums

Direct Link to Tab

Marco Asbreuk

YUI Contributor

Re: Direct Link to Tab

boblam

Re: Direct Link to Tab

Marco Asbreuk

YUI Contributor

Re: Direct Link to Tab

boblam

Re: Direct Link to Tab

Marco Asbreuk

YUI Contributor

Re: Direct Link to Tab

boblam

Re: Direct Link to Tab

Marco Asbreuk

YUI Contributor

Re: Direct Link to Tab

Eric Deko

Re: Direct Link to Tab

Recent Forums Posts

How do i sort the tablecolm iresptiv of serv returnded data

Panel - modal panels and the yui3-widget-modal class

Re: YUI Conf 2012 - program ?

Re: Simplified YUI3 Datatable cell formatting

Re: Simplified YUI3 Datatable cell formatting

Re: Simplified YUI3 Datatable cell formatting

Re: Mock Objects - How to handle calls to instanceof

Re: Simplified YUI3 Datatable cell formatting

Recent YUI Blog Posts

YUI Weekly for May 24th, 2013

YUI Weekly for May 17th, 2013

Yahoo’s International Team Is Hiring!

YUICompressor 2.4.8 Released

YUI 3.10.1 Released to Fix SWF Vulnerability

YUI Weekly for May 10th, 2013

Online Users