You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Tabs, full-path fragments and history (with patch) Created Aug 12, 2009

This thread is solved

Views: 3881     Replies: 19     Last reply Dec 10, 2010  
You must login first before you can use this feature

hamish

Posts: 1

Registered:
Aug 11, 2009

Tabs, full-path fragments and history (with patch)

Posted: Aug 12, 2009

Hi,

I'm using jQuery Tools with a SilverStripe project. Because SilverStripe uses a base tag, all fragment links need to include the path URL (href="/current-page#foo" not href="#foo").

This almost works as-is with jQuery Tools. The only issue is that when history is on and a history change event occurs jQuery Tools can't find the tab associated with the new hash, because it does an exact href comparison with the hash.

This small change fixes the issue. I'm not sure if it's general enough to be included in the main jQuery tools distro but it might be useful to others who have hit this problem.


- tab = tabs.filter("[href=" +i+ "]");
+ tab = tabs.filter("[href$=" +i+ "]");

louisk

Posts: 18

Registered:
May 25, 2009

» Tabs, full-path fragments and history (with patch)

Posted: Aug 17, 2009

Reply to: Tabs, full-path fragments and history (with patch), from hamish
Hi hamish,
I have this same problem. I'm using CMS Made Simple.
How do I use your code? Where do I place it?

If I include the full URL in the href, I cant see the hashes being added to my url when clicking a tab, however, that tabs are not changing when clicking the back-button (but the urls in the browser are).

Will this fix that too?

Thx

louisk

Posts: 18

Registered:
May 25, 2009

» Tabs, full-path fragments and history (with patch)

Posted: Sep 2, 2009

Reply to: Tabs, full-path fragments and history (with patch), from hamish
anyone?

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» » Tabs, full-path fragments and history (with patch)

Posted: Sep 4, 2009

Reply to: » Tabs, full-path fragments and history (with patch), from louisk
Have you tried this with the latest version of tabs & the history plugin. It does not require exact match. This is the code being used:


el.filter("[href$=" + h + "]");

louisk

Posts: 18

Registered:
May 25, 2009

» » » Tabs, full-path fragments and history (with patch)

Posted: Sep 4, 2009

Reply to: » » Tabs, full-path fragments and history (with patch), from tipiirai
Yes, I have tried the latest version but it doesn't work.
(I have also tried the beta version but it breaks with jquery.scrollTo/localScroll plugin)

When I click on a tab, I can see the hash (# + anchor name) being added to the URL, but when I open a new browser window and add that URL with the anchor, it doesn't open the appropriate tab.

Also, the possibility to open tabs from within a tab doesn't work.
I have tried using absolute URLs (with hash), only the anchor, just the sub-directory and the anchor, but nothing seems to work.

The rest of the functionalities work fine by the way.
Could this also have to do with the jquery.scrollTo/localScroll plugin?

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 4, 2009

Reply to: » » » Tabs, full-path fragments and history (with patch), from louisk
Can I possibly see a live demo about your issue?

louisk

Posts: 18

Registered:
May 25, 2009

» » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 6, 2009

Reply to: » » » » Tabs, full-path fragments and history (with patch), from tipiirai
Yes:http://www.susannakay.com/video/detail/Susanna-Kay-sings-Duffy-Warwick-Avenue-World-Fashion-Centre/69#commercials

As you can see, the tab 'commercials' will not be selected.

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» » » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 7, 2009

Reply to: » » » » » Tabs, full-path fragments and history (with patch), from louisk
OK. Need to check this out. Possibly a fix release coming out soon.

louisk

Posts: 18

Registered:
May 25, 2009

» » » » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 7, 2009

Reply to: » » » » » » Tabs, full-path fragments and history (with patch), from tipiirai
That would be great, I really like this feature.
Thanks!

louisk

Posts: 18

Registered:
May 25, 2009

» » » » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 8, 2009

Reply to: » » » » » » Tabs, full-path fragments and history (with patch), from tipiirai
Okay, I have some developments.

I'm using tabs 1.0.2 and tabs history 1.0.0.

I found out that the tabs history is working, but only if you are not using any options, like: event, effect, tabs, current.

When I use options, the tabs work fine with all the options used, but no history.

If I don't use any options, then history works.... but no options.

FireBug tells me this is the error: "d(this).attr("href") is undefined" at line 113 of tools.tabs-1.0.2.js.

Hope this is a small fix :)

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» » » » » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 8, 2009

Reply to: » » » » » » » Tabs, full-path fragments and history (with patch), from louisk
ok. need to check this out. thanks!

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» » » » » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 9, 2009

Reply to: » » » » » » » Tabs, full-path fragments and history (with patch), from louisk
This history plugin should work with options. For example this demo:

http://flowplayer.org/tools/demos/tabs/ajax-history.html

uses effect option.

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 9, 2009

Reply to: » » » Tabs, full-path fragments and history (with patch), from louisk
louisk: A simple question here. Why do you need to use full paths on your tabs instead of simple anchors such as #commercials. Let's say you have an anchor such as other_page.html#foo then the history plugin will set the browser's hash on the location bar to

mypage.html#other_page.html#foo

resulting two # characters on the URL. This is not supported / standard behaviour. Not sure whether to enable support for this feature.

louisk

Posts: 18

Registered:
May 25, 2009

» » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 9, 2009

Reply to: » » » » Tabs, full-path fragments and history (with patch), from tipiirai
Well, that is because my CMS uses the base tag. The base is set to the root of the domain. When I click on an anchor (lets say: #foo), then by browser gets redirected to domain.com/#foo.
At least, this is what I kept getting (maybe return false; was not set correctly???, I don't know).

Now I'm not using full paths any more, but I get the problem that it's not using the history plug-in; go here and see for yourself:http://www.susannakay.com/video

This is the code I'm using:
$("#tabs > ul").tabs("#tabs > div", {effect:'fade', tabs:'li', current:'active'}).history();

With above code, the history only works when I remove all options.

louisk

Posts: 18

Registered:
May 25, 2009

» » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 10, 2009

Reply to: » » » » Tabs, full-path fragments and history (with patch), from tipiirai
I was able to narrow down the problem to the 'tabs: 'li'' option.
That is because I want to add the current class to the li and not the a tag.
If I dont use the tabs option, it works fine.
I hope this will make it easier to find the problem.

louisk

Posts: 18

Registered:
May 25, 2009

» » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 10, 2009

Reply to: » » » » Tabs, full-path fragments and history (with patch), from tipiirai
OK, I found my problem... :s
I had the anchor with hash on the a tag, while I was defining the li tag as tab, hence the script couldn't find the hash (because it was not on the tab...)
I wanted the class to be added to the li, and the anchor link to the a tag.
However, this works fine now.
thanks, great script ;)

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» » » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 11, 2009

Reply to: » » » » » Tabs, full-path fragments and history (with patch), from louisk
You can always initialize your tabs with the tabs selector. For example


$("ul.tabs").tabs("#tabs > div", {tabs: 'a'});

louisk

Posts: 18

Registered:
May 25, 2009

» » » » » » » Tabs, full-path fragments and history (with patch)

Posted: Sep 11, 2009

Reply to: » » » » » » Tabs, full-path fragments and history (with patch), from tipiirai
Yes I know, that is what I did, I set it to 'li'.

The problem is that when you use the history plugin, it looks for the 'href' but when {tabs: 'li'} it can't find the href because li doesn't have a href. When I add href="#what-ever" to the li then history works.
Understand what I'm saying?

hubub

Posts: 36

Registered:
Sep 4, 2009

» » » » » » » » Tabs, full-path fragments and history (with patch)

Posted: Nov 20, 2009

Reply to: » » » » » » » Tabs, full-path fragments and history (with patch), from louisk
Has there been a resolution to this problem yet?

Jako

Posts: 1

Registered:
Dec 10, 2010

» » » » » Tabs, full-path fragments and history (with patch)

Posted: Dec 10, 2010

Reply to: » » » » Tabs, full-path fragments and history (with patch), from tipiirai
My CMS (MODx) uses the base tag too and it is not possible to use anchors in it without the full path. The suggested solution of louisk does not work for me. history() is using '#tabs > ul' then and not '#tabs > ul a'.

Is there any way to get the history tool work with an url path? Maybe if the url path is provided to the history tool by a configuration property.

•