CTabview discrepancy on different browsers

This ticket http://code.google.c…s/detail?id=120 has been closed as invalid but I think that issue is real.

Google Chrome behavior is different from both Firefox and IE.

Look at this: http://www.yiiframew…/juidatepicker/

It usually behaves like Firefox, but it does behave like IE only when you switch from the “Reviews” tab to another tab.

Opera behaves like Google Chrome, so…

Page: http://www.yiiframew…/juidatepicker/

Internet Explorer 7: always scroll

Firefox 3.0.6: never scroll

Google Chrome 1.0.154.48: scroll only when switching FROM the “Reviews” tab

Opera 9.6: scroll only when switching FROM the “Reviews” tab

Can somebody confirm this?

I don't know how we can fix this. This is about how each browser responds to a URL with anchor.

Quote

I don't know how we can fix this. This is about how each browser responds to a URL with anchor.

If you have a Google account, take a look at the “Settings” page of Gmail, there are tabs but there isn’t any discrepancy.

It uses URLs like

http://mail.google.c…l/?hl=it&shva=1#settings

http://mail.google.c…l/?hl=it&shva=1#settings/accounts

http://mail.google.c…l/?hl=it&shva=1#settings/labels

http://mail.google.c…l/?hl=it&shva=1#settings/filters

http://mail.google.c…l/?hl=it&shva=1#settings/fwdandpop

http://mail.google.c…l/?hl=it&shva=1#settings/chat

http://mail.google.c…l/?hl=it&shva=1#settings/webclips

http://mail.google.c…l/?hl=it&shva=1#settings/themes

and pages never scroll on any browser.

If I'm not mistaken, the Event.preventDefault() method in JQuery should block any behaviour when a link is clicked.



$("a").bind("click", function(event){


	event.preventDefault();


});

check http://docs.jquery.com/Events/bind

8)

We still want the anchor  in URL so that if you copy and paste the URL to another browser, you can open the same tab.

Actually I don't know how to fix this, however if I have a tabview in the middle of the page and I click on a tab, the scrolling thing is definitely annoying.

The solution should exist because the "tabview" of Gmail does work fine.

Seems like they load the tabview into an iframe.

Regarding projects under http://yiiframework.com/extensions:

On IE6 the tabs are rendered as a vertical plain bullet list

(obviously because the ">":s are still present in CSS, class yiiTab in this case).

/Tommy

If it's still topical for someone, this is a solution:

protected/components/MyTabView.php:

protected/components/js/tab.js:

Quote

If it's still topical for someone, this is a solution:

protected/components/MyTabView.php:

protected/components/js/tab.js:

Maybe you want to add it to yii extensions.

Good job. Could you explain what changes you have made? I will merge your code if it solves problem.

Quote

Good job. Could you explain what changes you have made? I will merge your code if it solves problem.

Look, in current widget tabs we have divs with id's like #review, #doc, #download, etc. That's why IE scrolls down the page to that id's. The solution is:

  1. Change divs id's to #review-div, #doc-div, etc.:
  1. Remove this code from js (for firefox, chrome normal url hashing in address bar):
  1. Change this code in js (for accessing right divs):

And we still have this links in CTabView (with id's '#review' and '#doc'):

So, the main idea is to get links to non-existent divs, but access this divs by js manipulations. It seems to me that it is not really a solution, but a good workaround.

Thank you, I'll test this asap

For me this is a fix:


in jquery.yiitab.js, line 25:

this.find('>ul a').click(function(event) {

	activate($(event.target).attr('href'));

	//if($(this).attr('href')[0]=='#')

		return false;

});

Simply commenting the if-statement and always returning ‘false’, but I can not say, if this breaks some

features?!

The forum script migration also destroyed the code snippets from "master-m2", too bad.

Are there any news on this topic? I just encountered this problem with IE scrolling the page down. That’s bad. This way I unfortunately cannot use CTabView…

@master-m2: Could you probably repost your modification code, please?

Thanks in advance!

Thomas

New comment here:

http://code.google.com/p/yii/issues/detail?id=561&can=1&q=ctabview