change name of tabs

[soreyn]

Hi,

Currently the name of the tab panel is the name of the id plus a number. Is there a way to name your tabs? That would be some awesome :)

Thanks in advance.

[ghost]

Struggled with this one myself last week.
Replace: var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString(); with var newHash = $respTabs.find('ul.resp-tabs-list li.resp-tab-active').attr('id');

And Replace: var re = new RegExp(respTabsId+"[0-9]+"); with var re = $respTabs.find('ul.resp-tabs-list li.resp-tab-active').attr('id');

That should do it!

[davidhellmann]

That's sounds good but with the changes above the result is this:

click1: url#Specification click2: url#Specification|Technology click3: url#Specification|Technology|TestResults

any idea how I (or we) can fix that? :)

Thanks!

[davidhellmann]

Oh it works. I change this line: newHash = currentHash+"|"+newHash;

into this: newHash = '#'+newHash;

thanks :)

[jaygao79]

Hi, I wonder if you could help me. I followed your work and what I get is #undefined for all tabs. What did I do wrong? I made the change in that js file, is that correct? Thanks :)

[miguelleite]

@jaygao79 maybe you forgot to add an id to each li in ul.resp-tabs-list. Does that make sense?

[jaygao79]

@miguelleite, exactly, thank you very much!

[ghost]

Awesome all!

[miguelleite]

well, there's still a problem. with those changes, if you open your page with something.html#some-tab-id (it means you're linking directly to a specific tab) it doesn't open the correct tab. maybe something in these lines https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion/blob/master/js/easyResponsiveTabs.js#L87-L111

[jaygao79]

@miguelleite that's true... It was working correctly before the modification. Anyone able to work this out? I am sorry that I am a complete white paper with Jquery.

[miguelleite]

i'm taking a look at it to see if i can work it. if someone can help, would be welcome :)

[ghost]

Yup!!! #C13 is my default so ignore it - but this is how I solved that problem - read my comments too:

// if the URL contains a hashtag, trigger click on that tab.
if (window.location.hash !== '') {
    var thisUrlHash = window.location.hash;
    $('#C13').find(thisUrlHash).click();
}

// add the class .tab-link to any old <a> tag, set the href attribute to the #id of the tab you want to switch to.
$('.tab-link').click(function(e){
    var thisHref = $(this).attr('href');

    e.preventDefault();
    $(thisHref).click();
});

});

[jaygao79]

Sorry for being a newbee, where do you put this code, into the js file that I downloaded? If so, anywhere on that file?

[ghost]

No worries. It's how we learn. I use these boards for my problems too :-) I put mine underneath the script that lives on the html page. Although I did put that into it's own .js file and just call it on the page. So my complete .js file (separate from the easyResponsiveTabs.js is called main.js and it looks like this:

$(document).ready(function () { $('#C13').easyResponsiveTabs({ type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px fit: true, // 100% fit in a container closed: 'accordion', // Start closed if in accordion view activate: function(event) { // Callback function if tab is switched var $tab = $(this); var $info = $('#tabInfo'); var $name = $('span', $info); $name.text($tab.text()); $info.show(); } });

// if the URL contains a hashtag, trigger click on that tab.

if (window.location.hash !== '') {
    var thisUrlHash = window.location.hash;
    $('#C13').find(thisUrlHash).click();
}

// add the class .tab-link to any old <a> tag, set the href attribute to the #id of the tab you want to switch to.
$('.tab-link').click(function(e){
    var thisHref = $(this).attr('href');

    e.preventDefault();
    $(thisHref).click();
});

});

[miguelleite]

@suenotsuan great support! just one more issue on this. how to avoid the browser to scroll to the selected tab position - default browser behaviour.

[ghost]

e.preventDefault(); should be preventing that from happening. I'm not having that issue since I put that line in. Is there possibly something clashing with that?

[jaygao79]

@suenotsuan that has done it, thank you! Can I ask you all to take a look at 2 new issues I submitted? Thank you!

[miguelleite]

@suenotsuan maybe the problem is in this line that i can't understand:

// add the class .tab-link to any old < a > tag, set the href attribute to the #id of the tab you want to switch to.

I have no .tab-link's on there..

[jaygao79]

When you create a link, use < a class="tab-link"

[jaygao79]

Sorry I left a space between < and a to avoid being recognised as html

[miguelleite]

when i create a link? a link for what?

[jaygao79]

I am sorry I thought you were someone else. I replied on the wrong post. :(

[miguelleite]

i think we're not in sync. my problem is, when i load the page using an hash for a specific tab, for example #random-tab, the default browser behaviour is that the page jumps to the anchor in the URL. how can i prevent that?

[jaygao79]

I see. I can only confirm that I am not getting that problem on my test site. In addition to the css file and js file I load on the page, I have this at the bottom of the page before < /html > Note in line 2 #horizontalTab is the id of the tab < div >.

$(document).ready(function () { $('#horizontalTab').easyResponsiveTabs({ type: 'default', //Types: default, vertical, accordion width: 'auto', //auto or any width like 600px fit: true, // 100% fit in a container closed: 'accordion', // Start closed if in accordion view activate: function(event) { // Callback function if tab is switched var $tab = $(this); var $info = $('#tabInfo'); var $name = $('span', $info);

            $name.text($tab.text());

            $info.show();
        }
    });

if (window.location.hash !== '') { var thisUrlHash = window.location.hash; $('#horizontalTab').find(thisUrlHash).click(); }

// add the class .tab-link to any old tag, set the href attribute to the #id of the tab you want to switch to. $('.tab-link').click(function(e){ var thisHref = $(this).attr('href');

e.preventDefault();
$(thisHref).click();

});
});

and what's the #tabInfo ?

[miguelleite]

well, i could fix that this way:

easyResponsiveTabs.js

newHash = "#section="+newHash;

index.html

// if the URL contains a hashtag, trigger click on that tab. if (window.location.hash !== '') { var thisUrlHash = window.location.hash; var selectedHash = '#'+thisUrlHash.split('#section=')[1]; $('#documentationTabs').find(selectedHash).click(); }

this way, it will never find that anchor, so it will not scroll to there.

[pkbaweja]

Hi All,

Can anybody show me tab id example change with URL on every click.

Please help

[rijosh]

see other tabs have class undefined... whats was the issue how can we fix this

http://www.jqueryscript.net/demo/Responsive-Multipurpose-Tabs-Accordion-Plugin-With-jQuery/