extremely confusing site, have you considered the user experience on
this? I see that you creat a vertical breadcrumb but all the shifting
and blinking menu items is very confusing
sometimes simple is better, understand the desire to use cutting edge
scripts and effects but judging by number of scripts acting on same
page it looks like you'll have a long term nightmare on your hands
good luck! think about the user!
pixeline wrote:
although i managed to create the tabs i needed in an isolated page,
i'm struggling to implement it in my application.
It really seems the tabs() is not fired because if i look at hte
generated source, the classes added by the plugin aren't there. They
used to in the pre - ui version of the tabs i was using.
Now, it may be due to jquery1.3.2 because i know it played on a
livequery similar function live() and i'm setting up the tabs() inside
a livequery function.
Can you tell me if this is correct?
var $this = $("#leftCol");
var href = "" + UI.sectionFolder + '/' + UI.item + '/' +
UI.menu + '/' + UI.content + '/';
UI.goLivequery = true;
$this.livequery(function()
{
if (UI.goLivequery === true)
{
UI.goLivequery = false;
$this.load(href, function()
{
$this.removeClass('loading');
UI.goLivequery = false;
// bunch of other stuffs that all
work correctly
$('#tabbedTextContent').tabs();
$('#tabbedTextContent img.albumImage')
.css('cursor', 'pointer')
.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;
});
});
}
});
And the markup is:
<div id="tabbedTextContent">
<div id="fragment0"><img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/00_cover_arca_sonic_space_labau00s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
00_cover_arca_sonic_space_labau00s.jpg" class="albumImage"
title="00_cover_arca_sonic_space_labau00s.jpg" /></div>
<div id="fragment1"><img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/01_arca_sonic_space_labau01_left_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
01_arca_sonic_space_labau01_left_s.jpg" class="albumImage"
title="01_arca_sonic_space_labau01_left_s.jpg" /></div>
<div id="fragment2"><img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/02_arca_sonic_space_labau02_right_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
02_arca_sonic_space_labau02_right_s.jpg" class="albumImage"
title="02_arca_sonic_space_labau02_right_s.jpg" /></div>
<div id="fragment3"><img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/03_arca_sonic_space_labau03_left_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
03_arca_sonic_space_labau03_left_s.jpg" class="albumImage"
title="03_arca_sonic_space_labau03_left_s.jpg" /></div>
<div id="fragment4"><img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/04_arca_sonic_space_labau04_right_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
04_arca_sonic_space_labau04_right_s.jpg" class="albumImage"
title="04_arca_sonic_space_labau04_right_s.jpg" /></div>
<div id="fragment5"><img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/05_arca_sonic_space_labau05_left_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
05_arca_sonic_space_labau05_left_s.jpg" class="albumImage"
title="05_arca_sonic_space_labau05_left_s.jpg" /></div>
<div id="fragment6"><img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/06_arca_sonic_space_labau06_right_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
06_arca_sonic_space_labau06_right_s.jpg" class="albumImage"
title="06_arca_sonic_space_labau06_right_s
.jpg" /></div>
<ul class="tab-nav-menu">
<li><a href="">0</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li id="imageLegend">Arca 180</li>
</ul>
</div>
if you want to see it for yourself:
http://m2.lab-au.com
clickpath to reproduce the error: theory > writings > articles > Any
of the 3 items > Visuals. There, the images should be tabbified. they
are not, and if u check the generated source code; no ui classes have
been injected.
Thanks in advance for your help _ i'm getting desperate.
On Feb 25, 10:30 pm, pixeline <[email protected]> wrote:
OK, i made a separate implementation, only having the uitabs in the
codeflow. turns out its the tab nav ul list inside the h3 is a no-go.
to have the tabs displayed underneath only needs to have your markup
reflect that: the ul after the tabbed divs. Would have assumed that
should be set via css, not html but why not. At least it's possible so
i'm happy. nice one, well done ui team !
if i may ask: would it be possible to be able to locate the tabs
navigator anywhere in the markup, instead of right before or right
next to the tab divs ?
On Feb 24, 5:15 pm, pixeline <[email protected]> wrote:
Thanks for the feedback i was in fact already using rc6 (that's a typo
of mine on my first post, sorry). Can you explain me how should my
markup/css be so that the tabs can be displayed underneath the tabs ?
On Feb 24, 5:07 am, Steven Black <[email protected]> wrote:
First thing I would do, Alexandre, is get yourself jquery UI 1.6.rc6,
an upgrade from rc5.
You might also venture to the latest version of Tabs in the svn trunk.
http://jquery-ui.googlecode.com/svn/trunk/ui/
It's unusual that your <ul>...</ul> isn't first in your
#tabbedTextContent, which is probably OK in theory but might be a
problem in practice.
Also your <ul>...</ul> is nested in an <h3> and that's asking for
trouble too since your #fragments aren't siblings of <ul>. Mine are
siblings, and my tabs work, but I'm guessing.
That said, I had all sorts of problems with rc5 that disappeared with
rc6. Make sure you've got the latest CSS files too.
**--** Steve
On Feb 23, 5:40 am, pixeline <[email protected]> wrote:
Hello!
I'm upgrading ui tabs from the old standalone 2007 version to the
jquery ui implementation so bear with me :)
jquery 1.3.2.min
jquery UI 1.6.rc5 personalized (only core + tabs)
The markup generated and to be tabbified:
<div id="tabbedTextContent">
<div id="fragment0">
<img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/00_cover_arca_sonic_space_labau00s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
00_cover_arca_sonic_space_labau00s.jpg"
class="albumImage"
title="00_cover_arca_sonic_space_labau00s.jpg" /></div>
<div id="fragment1">
<img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/01_arca_sonic_space_labau01_left_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
01_arca_sonic_space_labau01_left_s.jpg"
class="albumImage"
title="01_arca_sonic_space_labau01_left_s.jpg" /></div>
<div id="fragment2">
<img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/02_arca_sonic_space_labau02_right_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
02_arca_sonic_space_labau02_right_s.jpg"
class="albumImage"
title="02_arca_sonic_space_labau02_right_s.jpg" /></div>
<div id="fragment3">
<img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/03_arca_sonic_space_labau03_left_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
03_arca_sonic_space_labau03_left_s.jpg"
class="albumImage"
title="03_arca_sonic_space_labau03_left_s.jpg" /></div>
<div id="fragment4">
<img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/04_arca_sonic_space_labau04_right_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
04_arca_sonic_space_labau04_right_s.jpg"
class="albumImage"
title="04_arca_sonic_space_labau04_right_s.jpg" /></div>
<div id="fragment5">
<img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/05_arca_sonic_space_labau05_left_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
05_arca_sonic_space_labau05_left_s.jpg"
class="albumImage"
title="05_arca_sonic_space_labau05_left_s.jpg" /></div>
<div id="fragment6">
<img src="" class="moz-txt-link-rfc2396E" href="http://localhost/lab-au.com/dev/theory/article_sonic-space/images/album_images/06_arca_sonic_space_labau06_right_s.jpg">"http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
06_arca_sonic_space_labau06_right_s.jpg"
class="albumImage"
title="06_arca_sonic_space_labau06_right_s.jpg" /></div>
<h3>
<ul class="tab-nav-menu">
<li><a href="">0</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
<span id="imageLegend">Arca 180</span></h3>
</div>
the call is a simple:
var $tabs = $("#tabbedTextContent").tabs({ show: function() { alert
('hi'); } });
but the tabbiffication does not occur.
if i do $tabs.length it returns 0.
Any hint as to where to look at the culprit would be *much* welcome !
Thank you,
Alexandre
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [email protected]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
|
