[jQuery] Re: ui.tabs question
So i've tried using the latest build of ui1.6rc5, including the tabs +
jquery 1.3 and i reproduced exactly the demo sample available on the
jqueryUI ui.Tabs demo page with the required CSS files, but it still
breaks the tabbing functionality. I've reduced my code to simply call
$(#mydiv ul).tabs();
Klaus can you please tell me if something has changed in the necessary
html markup from tabs 3 to the latest tab release? Is there something
else, specific, that i should look for ?
I'll try to isolate further my implementation to understand what the
problem is in the meanwhile but any pointers would be time savers for
me. Thanks a lot
alexandre
On Wed, Jan 21, 2009 at 11:30 PM, Alexandre Plennevaux
aplennev...@gmail.com wrote:
In that case, thank you Klaus for the preventive comment.
On Wed, Jan 21, 2009 at 11:25 PM, Klaus Hartl
klaus.ha...@googlemail.com wrote:
Sorry to hear that, but I was only referring to MorningZ's example,
which contained an outdated syntax and I wanted to prevent you (and
everybody else) to use it and wonder why it wouldn't work.
I'll try to quote better next time.
--Klaus
On 21 Jan., 22:43, Alexandre Plennevaux aplennev...@gmail.com wrote:
Well, quite Frankly Klaus, i started this project 3 years ago and i
used the tabs when it was but a plugin like another.
The fact that now i have to integrate ui.core with ui.tabs is not
really a good thing in my case: i don't have needs for anything else
from the ui library, therefore i wish that alongside, there was a
distro as a standalone plugin.
I'm using jquery 1.3 so i've made myself a personalised ui distro
using rc5, but now it breaks the hell out of my app, i don't have tabs
anymore so here i go, back to the starting point, redoing things that
were actually working well, but for that one missing callback.
ah, it's hard to have a reproach to make to jquery. First in 3 years
in my case, and it's not like i'm mad or anything. Just ... annoyed.
:)
On Wed, Jan 21, 2009 at 7:30 PM, Klaus Hartl klaus.ha...@googlemail.com
wrote:
Seems to be using a fairly outdated version. The event's name to bind
has changed since quite a while. Why not take a look at the
documentation:
http://docs.jquery.com/UI/Tabs#Events
--Klaus
On 21 Jan., 16:36, MorningZ morni...@gmail.com wrote:
I've got this code working if it helps
$(#TabContainer ul.tabs).tabs().bind(select.ui-tabs, function(e,
ui) {
//Code inside here runs when tab is selected
});
On Jan 21, 10:29 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
Hi all,
I'm using ui.tabs and i would like to trigger a function when a tab is
clicked, or more precisely, when a new panel gets shown.
I figured from the doc i should use the select callback but that does
not work... HEre is the code i use
var $tabs = $(#tabbedTextContent).tabs({
selected: 0,
fx: { opacity: 'toggle', duration:
200 },
select: function(e, ui)
{
alert(hi); //!-- the
alert() never gets called
var $img =
$('#tabbedTextContent div.ui-tabs_panel:visible img.albumImage');
if ($img.length)
{
$('#imageLegend').text($img.attr('title'));
}
}
});
So, the tabs are displayed and work correctly, but the select
callback (namely, the alert() call) never gets fired...
Right after that block of code i have
$('#tabbedTextContent img.albumImage')
.css('cursor', 'pointer')
//.attr('title', Click to view the
next image)
.click(function()
{ // in image albums, clicking on an
image brings the user to the next image
var currentTab =
$tabs.data('selected.tabs');
$('#imageLegend').text($(this).attr('title'));
var nextTab = (currentTab
$tabs.length - 1) ? currentTab + 1 : 0;
$tabs.tabs('select', nextTab);
return false;
});
which works just fine.
[jQuery] Re: ui.tabs question
I've got this code working if it helps
$(#TabContainer ul.tabs).tabs().bind(select.ui-tabs, function(e,
ui) {
//Code inside here runs when tab is selected
});
On Jan 21, 10:29 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
Hi all,
I'm using ui.tabs and i would like to trigger a function when a tab is
clicked, or more precisely, when a new panel gets shown.
I figured from the doc i should use the select callback but that does
not work... HEre is the code i use
var $tabs = $(#tabbedTextContent).tabs({
selected: 0,
fx: { opacity: 'toggle', duration: 200 },
select: function(e, ui)
{
alert(hi); //!-- the
alert() never gets called
var $img =
$('#tabbedTextContent div.ui-tabs_panel:visible img.albumImage');
if ($img.length)
{
$('#imageLegend').text($img.attr('title'));
}
}
});
So, the tabs are displayed and work correctly, but the select
callback (namely, the alert() call) never gets fired...
Right after that block of code i have
$('#tabbedTextContent img.albumImage')
.css('cursor', 'pointer')
//.attr('title', Click to view the next
image)
.click(function()
{ // in image albums, clicking on an
image brings the user to the next image
var currentTab =
$tabs.data('selected.tabs');
$('#imageLegend').text($(this).attr('title'));
var nextTab = (currentTab
$tabs.length - 1) ? currentTab + 1 : 0;
$tabs.tabs('select', nextTab);
return false;
});
which works just fine.
[jQuery] Re: ui.tabs question
hi MorningZ
unfortunately that doesn't seem to work for me. Question: you attach
that event to the tabs ul element ?
On Wed, Jan 21, 2009 at 4:36 PM, MorningZ morni...@gmail.com wrote:
I've got this code working if it helps
$(#TabContainer ul.tabs).tabs().bind(select.ui-tabs, function(e,
ui) {
//Code inside here runs when tab is selected
});
On Jan 21, 10:29 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
Hi all,
I'm using ui.tabs and i would like to trigger a function when a tab is
clicked, or more precisely, when a new panel gets shown.
I figured from the doc i should use the select callback but that does
not work... HEre is the code i use
var $tabs = $(#tabbedTextContent).tabs({
selected: 0,
fx: { opacity: 'toggle', duration: 200 },
select: function(e, ui)
{
alert(hi); //!-- the
alert() never gets called
var $img =
$('#tabbedTextContent div.ui-tabs_panel:visible img.albumImage');
if ($img.length)
{
$('#imageLegend').text($img.attr('title'));
}
}
});
So, the tabs are displayed and work correctly, but the select
callback (namely, the alert() call) never gets fired...
Right after that block of code i have
$('#tabbedTextContent img.albumImage')
.css('cursor', 'pointer')
//.attr('title', Click to view the next
image)
.click(function()
{ // in image albums, clicking on an
image brings the user to the next image
var currentTab =
$tabs.data('selected.tabs');
$('#imageLegend').text($(this).attr('title'));
var nextTab = (currentTab
$tabs.length - 1) ? currentTab + 1 : 0;
$tabs.tabs('select', nextTab);
return false;
});
which works just fine.
[jQuery] Re: ui.tabs question
A couple other people have reported this same issue. It was because they
were using incompatible versions of jQuery and jQuery UI. Make sure you're
using one of the following
jQuery UI 1.5.3 with jQuery 1.2.6 (not 1.3)
jQuery UI 1.6rc4 with jQuery 1.2.6 (not 1.3)
jQuery UI 1.6rc5 with jQuery 1.3 (not 1.2.6)
For more, see
http://blog.jquery.com/2009/01/16/jquery-ui-16rc5-compatible-with-jquery-13/
- Richard
On Wed, Jan 21, 2009 at 10:29 AM, Alexandre Plennevaux
aplennev...@gmail.com wrote:
Hi all,
I'm using ui.tabs and i would like to trigger a function when a tab is
clicked, or more precisely, when a new panel gets shown.
I figured from the doc i should use the select callback but that does
not work... HEre is the code i use
var $tabs = $(#tabbedTextContent).tabs({
selected: 0,
fx: { opacity: 'toggle', duration: 200
},
select: function(e, ui)
{
alert(hi); //!-- the
alert() never gets called
var $img =
$('#tabbedTextContent div.ui-tabs_panel:visible img.albumImage');
if ($img.length)
{
$('#imageLegend').text($img.attr('title'));
}
}
});
So, the tabs are displayed and work correctly, but the select
callback (namely, the alert() call) never gets fired...
Right after that block of code i have
$('#tabbedTextContent img.albumImage')
.css('cursor', 'pointer')
//.attr('title', Click to view the next
image)
.click(function()
{ // in image albums, clicking on an
image brings the user to the next image
var currentTab =
$tabs.data('selected.tabs');
$('#imageLegend').text($(this).attr('title'));
var nextTab = (currentTab
$tabs.length - 1) ? currentTab + 1 : 0;
$tabs.tabs('select', nextTab);
return false;
});
which works just fine.
[jQuery] Re: ui.tabs question
Seems to be using a fairly outdated version. The event's name to bind
has changed since quite a while. Why not take a look at the
documentation:
http://docs.jquery.com/UI/Tabs#Events
--Klaus
On 21 Jan., 16:36, MorningZ morni...@gmail.com wrote:
I've got this code working if it helps
$(#TabContainer ul.tabs).tabs().bind(select.ui-tabs, function(e,
ui) {
//Code inside here runs when tab is selected
});
On Jan 21, 10:29 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
Hi all,
I'm using ui.tabs and i would like to trigger a function when a tab is
clicked, or more precisely, when a new panel gets shown.
I figured from the doc i should use the select callback but that does
not work... HEre is the code i use
var $tabs = $(#tabbedTextContent).tabs({
selected: 0,
fx: { opacity: 'toggle', duration: 200
},
select: function(e, ui)
{
alert(hi); //!-- the
alert() never gets called
var $img =
$('#tabbedTextContent div.ui-tabs_panel:visible img.albumImage');
if ($img.length)
{
$('#imageLegend').text($img.attr('title'));
}
}
});
So, the tabs are displayed and work correctly, but the select
callback (namely, the alert() call) never gets fired...
Right after that block of code i have
$('#tabbedTextContent img.albumImage')
.css('cursor', 'pointer')
//.attr('title', Click to view the next
image)
.click(function()
{ // in image albums, clicking on an
image brings the user to the next image
var currentTab =
$tabs.data('selected.tabs');
$('#imageLegend').text($(this).attr('title'));
var nextTab = (currentTab
$tabs.length - 1) ? currentTab + 1 : 0;
$tabs.tabs('select', nextTab);
return false;
});
which works just fine.
[jQuery] Re: ui.tabs question
Well, quite Frankly Klaus, i started this project 3 years ago and i
used the tabs when it was but a plugin like another.
The fact that now i have to integrate ui.core with ui.tabs is not
really a good thing in my case: i don't have needs for anything else
from the ui library, therefore i wish that alongside, there was a
distro as a standalone plugin.
I'm using jquery 1.3 so i've made myself a personalised ui distro
using rc5, but now it breaks the hell out of my app, i don't have tabs
anymore so here i go, back to the starting point, redoing things that
were actually working well, but for that one missing callback.
ah, it's hard to have a reproach to make to jquery. First in 3 years
in my case, and it's not like i'm mad or anything. Just ... annoyed.
:)
On Wed, Jan 21, 2009 at 7:30 PM, Klaus Hartl klaus.ha...@googlemail.com wrote:
Seems to be using a fairly outdated version. The event's name to bind
has changed since quite a while. Why not take a look at the
documentation:
http://docs.jquery.com/UI/Tabs#Events
--Klaus
On 21 Jan., 16:36, MorningZ morni...@gmail.com wrote:
I've got this code working if it helps
$(#TabContainer ul.tabs).tabs().bind(select.ui-tabs, function(e,
ui) {
//Code inside here runs when tab is selected
});
On Jan 21, 10:29 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
Hi all,
I'm using ui.tabs and i would like to trigger a function when a tab is
clicked, or more precisely, when a new panel gets shown.
I figured from the doc i should use the select callback but that does
not work... HEre is the code i use
var $tabs = $(#tabbedTextContent).tabs({
selected: 0,
fx: { opacity: 'toggle', duration: 200
},
select: function(e, ui)
{
alert(hi); //!-- the
alert() never gets called
var $img =
$('#tabbedTextContent div.ui-tabs_panel:visible img.albumImage');
if ($img.length)
{
$('#imageLegend').text($img.attr('title'));
}
}
});
So, the tabs are displayed and work correctly, but the select
callback (namely, the alert() call) never gets fired...
Right after that block of code i have
$('#tabbedTextContent img.albumImage')
.css('cursor', 'pointer')
//.attr('title', Click to view the next
image)
.click(function()
{ // in image albums, clicking on an
image brings the user to the next image
var currentTab =
$tabs.data('selected.tabs');
$('#imageLegend').text($(this).attr('title'));
var nextTab = (currentTab
$tabs.length - 1) ? currentTab + 1 : 0;
$tabs.tabs('select', nextTab);
return false;
});
which works just fine.
[jQuery] Re: ui.tabs question
Sorry to hear that, but I was only referring to MorningZ's example,
which contained an outdated syntax and I wanted to prevent you (and
everybody else) to use it and wonder why it wouldn't work.
I'll try to quote better next time.
--Klaus
On 21 Jan., 22:43, Alexandre Plennevaux aplennev...@gmail.com wrote:
Well, quite Frankly Klaus, i started this project 3 years ago and i
used the tabs when it was but a plugin like another.
The fact that now i have to integrate ui.core with ui.tabs is not
really a good thing in my case: i don't have needs for anything else
from the ui library, therefore i wish that alongside, there was a
distro as a standalone plugin.
I'm using jquery 1.3 so i've made myself a personalised ui distro
using rc5, but now it breaks the hell out of my app, i don't have tabs
anymore so here i go, back to the starting point, redoing things that
were actually working well, but for that one missing callback.
ah, it's hard to have a reproach to make to jquery. First in 3 years
in my case, and it's not like i'm mad or anything. Just ... annoyed.
:)
On Wed, Jan 21, 2009 at 7:30 PM, Klaus Hartl klaus.ha...@googlemail.com
wrote:
Seems to be using a fairly outdated version. The event's name to bind
has changed since quite a while. Why not take a look at the
documentation:
http://docs.jquery.com/UI/Tabs#Events
--Klaus
On 21 Jan., 16:36, MorningZ morni...@gmail.com wrote:
I've got this code working if it helps
$(#TabContainer ul.tabs).tabs().bind(select.ui-tabs, function(e,
ui) {
//Code inside here runs when tab is selected
});
On Jan 21, 10:29 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
Hi all,
I'm using ui.tabs and i would like to trigger a function when a tab is
clicked, or more precisely, when a new panel gets shown.
I figured from the doc i should use the select callback but that does
not work... HEre is the code i use
var $tabs = $(#tabbedTextContent).tabs({
selected: 0,
fx: { opacity: 'toggle', duration:
200 },
select: function(e, ui)
{
alert(hi); //!-- the
alert() never gets called
var $img =
$('#tabbedTextContent div.ui-tabs_panel:visible img.albumImage');
if ($img.length)
{
$('#imageLegend').text($img.attr('title'));
}
}
});
So, the tabs are displayed and work correctly, but the select
callback (namely, the alert() call) never gets fired...
Right after that block of code i have
$('#tabbedTextContent img.albumImage')
.css('cursor', 'pointer')
//.attr('title', Click to view the next
image)
.click(function()
{ // in image albums, clicking on an
image brings the user to the next image
var currentTab =
$tabs.data('selected.tabs');
$('#imageLegend').text($(this).attr('title'));
var nextTab = (currentTab
$tabs.length - 1) ? currentTab + 1 : 0;
$tabs.tabs('select', nextTab);
return false;
});
which works just fine.
[jQuery] Re: ui.tabs question
In that case, thank you Klaus for the preventive comment.
On Wed, Jan 21, 2009 at 11:25 PM, Klaus Hartl
klaus.ha...@googlemail.com wrote:
Sorry to hear that, but I was only referring to MorningZ's example,
which contained an outdated syntax and I wanted to prevent you (and
everybody else) to use it and wonder why it wouldn't work.
I'll try to quote better next time.
--Klaus
On 21 Jan., 22:43, Alexandre Plennevaux aplennev...@gmail.com wrote:
Well, quite Frankly Klaus, i started this project 3 years ago and i
used the tabs when it was but a plugin like another.
The fact that now i have to integrate ui.core with ui.tabs is not
really a good thing in my case: i don't have needs for anything else
from the ui library, therefore i wish that alongside, there was a
distro as a standalone plugin.
I'm using jquery 1.3 so i've made myself a personalised ui distro
using rc5, but now it breaks the hell out of my app, i don't have tabs
anymore so here i go, back to the starting point, redoing things that
were actually working well, but for that one missing callback.
ah, it's hard to have a reproach to make to jquery. First in 3 years
in my case, and it's not like i'm mad or anything. Just ... annoyed.
:)
On Wed, Jan 21, 2009 at 7:30 PM, Klaus Hartl klaus.ha...@googlemail.com
wrote:
Seems to be using a fairly outdated version. The event's name to bind
has changed since quite a while. Why not take a look at the
documentation:
http://docs.jquery.com/UI/Tabs#Events
--Klaus
On 21 Jan., 16:36, MorningZ morni...@gmail.com wrote:
I've got this code working if it helps
$(#TabContainer ul.tabs).tabs().bind(select.ui-tabs, function(e,
ui) {
//Code inside here runs when tab is selected
});
On Jan 21, 10:29 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
Hi all,
I'm using ui.tabs and i would like to trigger a function when a tab is
clicked, or more precisely, when a new panel gets shown.
I figured from the doc i should use the select callback but that does
not work... HEre is the code i use
var $tabs = $(#tabbedTextContent).tabs({
selected: 0,
fx: { opacity: 'toggle', duration:
200 },
select: function(e, ui)
{
alert(hi); //!-- the
alert() never gets called
var $img =
$('#tabbedTextContent div.ui-tabs_panel:visible img.albumImage');
if ($img.length)
{
$('#imageLegend').text($img.attr('title'));
}
}
});
So, the tabs are displayed and work correctly, but the select
callback (namely, the alert() call) never gets fired...
Right after that block of code i have
$('#tabbedTextContent img.albumImage')
.css('cursor', 'pointer')
//.attr('title', Click to view the
next image)
.click(function()
{ // in image albums, clicking on an
image brings the user to the next image
var currentTab =
$tabs.data('selected.tabs');
$('#imageLegend').text($(this).attr('title'));
var nextTab = (currentTab
$tabs.length - 1) ? currentTab + 1 : 0;
$tabs.tabs('select', nextTab);
return false;
});
which works just fine.
