Hey Guys,
Is there a way to rotate content in an example similar to
this:
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample .htm
Trying to find a way to have the tabs cycle in and out every
X seconds ..
Any suggestions would be appreciated.
Thanks.
Tabbed Panels Example - Way to...
Any suggestions from anyone?
Tabbed Panels Example - Way to...
Hi,
Can you be more specific about what you are trying to do?
What do you mean by 'cycle in' or 'rotate content'?
Thanks,
Don
Sure Don - I'd like to have the tabs for instance, rotate
automatically, in essence cycling content every X seconds.
It would be something similar to the ''highlights'' section on
this page:
http://www.michelinman.com/
Hi kraftomatic84,
Here's a very basic one that I slapped together. It doesn't
do any fading in/out effects though.
%26lt;!DOCTYPE html PUBLIC ''-//W3C//DTD XHTML 1.0
Transitional//EN'' ''
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd''%26gt;
%26lt;html xmlns=''
http://www.w3.org/1999/xhtml''
xmlns:spry=''
http://ns.adobe.com/spry''%26gt;
%26lt;head%26gt;
%26lt;meta http-equiv=''Content-Type'' content=''text/html;
charset=utf-8'' /%26gt;
%26lt;title%26gt;TabbedPanels Cycler Example%26lt;/title%26gt;
%26lt;script src=''SpryAssets/SpryTabbedPanels.js''
type=''text/javascript''%26gt;%26lt;/script%26gt;
%26lt;script type=''text/javascript''%26gt;
function TabbedPanelsCycler(tp)
{
this.tp = tp;
this.timerID = 0;
this.interval = 2000; // Milliseconds
}
TabbedPanelsCycler.prototype.start = function()
{
this.stop();
var self = this;
this.timerID = setTimeout(function() { self.next(); },
this.interval);
};
TabbedPanelsCycler.prototype.stop = function()
{
if (this.timerID)
clearTimeout(this.timerID);
this.timerID = 0;
};
TabbedPanelsCycler.prototype.next = function()
{
var tp = this.tp;
tp.showPanel((tp.getCurrentTabIndex()+1) %
tp.getTabbedPanelCount());
if (this.timerID)
this.start();
};
TabbedPanelsCycler.prototype.previous = function()
{
var tp = this.tp;
var curIndex = tp.getCurrentTabIndex();
tp.showPanel(((curIndex %26lt; 1) ? tp.getTabbedPanelCount() :
curIndex) - 1);
if (this.timerID)
this.start();
};
%26lt;/script%26gt;
%26lt;link href=''SpryAssets/SpryTabbedPanels.css''
rel=''stylesheet'' type=''text/css'' /%26gt;
%26lt;/head%26gt;
%26lt;body%26gt;
%26lt;input type=''button'' value=''Start''
onclick=''cycler.start();'' /%26gt;
%26lt;input type=''button'' value=''Stop'' onclick=''cycler.stop();''
/%26gt;
%26lt;div id=''TabbedPanels1'' class=''TabbedPanels''%26gt;
%26lt;ul class=''TabbedPanelsTabGroup''%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
1%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
2%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
3%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
4%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
5%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;div class=''TabbedPanelsContentGroup''%26gt;
%26lt;div class=''TabbedPanelsContent''%26gt;
%26lt;div%26gt;Content 1%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent''%26gt;
%26lt;div%26gt;Content 2%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent''%26gt;
%26lt;div%26gt;Content 3%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent''%26gt;
%26lt;div%26gt;Content 4%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent''%26gt;
%26lt;div%26gt;Content 5%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;script type=''text/javascript''%26gt;
%26lt;!--
var tp1 = new Spry.Widget.TabbedPanels(''TabbedPanels1'');
var cycler = new TabbedPanelsCycler(tp1);
//--%26gt;
%26lt;/script%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
--== Kin ==--
Great, thanks. I'm trying to add a fade in/fade out effect
(similar to the effects demo). It's not working too well currently,
as I'm trying to automatically fade out the current tab, while
fading in the next tab, which has proven difficult thus far
...
Ok, so I've almost got it working. After pressing ''start'', it
doesn't cycle correctly on the first pass, but on the second
passing of the tabs being animated, it does work. Any suggestions?
Thanks.
%26lt;!DOCTYPE html PUBLIC ''-//W3C//DTD XHTML 1.0
Transitional//EN'' ''
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd''%26gt;
%26lt;html xmlns=''
http://www.w3.org/1999/xhtml''
xmlns:spry=''
http://ns.adobe.com/spry''%26gt;
%26lt;head%26gt;
%26lt;meta http-equiv=''Content-Type'' content=''text/html;
charset=utf-8'' /%26gt;
%26lt;title%26gt;TabbedPanels Cycler Example%26lt;/title%26gt;
%26lt;script src=''SpryTabbedPanels.js''
type=''text/javascript''%26gt;%26lt;/script%26gt;
%26lt;script src=''SpryEffects.js''
type=''text/javascript''%26gt;%26lt;/script%26gt;
%26lt;script type=''text/javascript''%26gt;
function TabbedPanelsCycler(tp)
{
this.tp = tp;
this.timerID = 0;
this.interval = 2000; // Milliseconds
}
TabbedPanelsCycler.prototype.start = function()
{
this.stop();
var self = this;
this.timerID = setTimeout(function() { self.next(); },
this.interval);
};
TabbedPanelsCycler.prototype.stop = function()
{
if (this.timerID)
clearTimeout(this.timerID);
this.timerID = 0;
};
TabbedPanelsCycler.prototype.next = function()
{
var tp = this.tp;
tp.showPanel((tp.getCurrentTabIndex()+1) %
tp.getTabbedPanelCount()); // 1, 2, 3, 4, 0 ... loop
//Spry.Effect.AppearFade('product_box', {duration: 1000,
from: 100, to: 0, toggle: true});
Spry.Effect.AppearFade('panel_content' +
(tp.getCurrentTabIndex()) % tp.getTabbedPanelCount(), {duration:
1000, from: 100, to: 0, toggle: false});
Spry.Effect.AppearFade('panel_content' +
(tp.getCurrentTabIndex() + 1) % tp.getTabbedPanelCount(),
{duration: 1000, from: 0, to: 100, toggle: false});
if (this.timerID)
this.start();
};
TabbedPanelsCycler.prototype.previous = function()
{
var tp = this.tp;
var curIndex = tp.getCurrentTabIndex();
tp.showPanel(((curIndex %26lt; 1) ? tp.getTabbedPanelCount() :
curIndex) - 1);
if (this.timerID)
this.start();
};
function ExampleHelpText(helpText)
{
document.getElementById(''text_pane'').innerHTML='%26lt;p%26gt;'+helpText+'%26lt;/p%26gt;';
}
function ReloadDocument()
{
window.location.reload(true);
}
%26lt;/script%26gt;
%26lt;link href=''SpryTabbedPanels.css'' rel=''stylesheet''
type=''text/css'' /%26gt;
%26lt;link href=''effects.css'' rel=''stylesheet'' type=''text/css''
/%26gt;
%26lt;/head%26gt;
%26lt;body%26gt;
%26lt;input type=''button'' value=''Start''
onclick=''cycler.start();'' /%26gt;
%26lt;input type=''button'' value=''Stop'' onclick=''cycler.stop();''
/%26gt;
%26lt;div id=''TabbedPanels1'' class=''TabbedPanels''%26gt;
%26lt;ul class=''TabbedPanelsTabGroup''%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
1%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
2%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
3%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
4%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
5%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;div class=''TabbedPanelsContentGroup''%26gt;
%26lt;div class=''TabbedPanelsContent'' id=''panel_content1''%26gt;
%26lt;div%26gt;Content 1%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent'' id=''panel_content2''%26gt;
%26lt;div%26gt;Content 2%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent'' id=''panel_content3''%26gt;
%26lt;div%26gt;Content 3%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent'' id=''panel_content4''%26gt;
%26lt;div%26gt;Content 4%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent'' id=''panel_content0''%26gt;
%26lt;div%26gt;Content 5%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;script type=''text/javascript''%26gt;
%26lt;!--
var tp1 = new Spry.Widget.TabbedPanels(''TabbedPanels1'');
var cycler = new TabbedPanelsCycler(tp1);
//--%26gt;
%26lt;/script%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
anyone have any experience with the fading in and out of
objects? that's the problem i'm having here ..
thanks.
Hello,
In your code there are couple of logical problems:
1. The tabs use a 0 based numeration system but your id's
starts from 1 so when you use the getCurrentPanel you should sync
first the base systems. In your case they were incorrect after the
first run and the behave was actually incorrect after.
2. Only a single div is made visible at a moment by the
tabbed widget so the effects should run in parallel but one after
the other on the visible element. Because of this the effect forced
a second div to be visible.
3. The change of the current panel id should be done only
after the first fade in finish.
So here is the correct code for the next:
TabbedPanelsCycler.prototype.next = function()
{
var tp = this.tp;
//Spry.Effect.AppearFade('product_box', {duration: 1000,
from: 100, to: 0, toggle: true});
Spry.Effect.AppearFade('panel_content' +
(tp.getCurrentTabIndex()+1) % tp.getTabbedPanelCount(), {duration:
1000, from: 100, to: 0, toggle: false, finish: function(){
var el = document.getElementById('panel_content' +
((tp.getCurrentTabIndex() + 2) % tp.getTabbedPanelCount()));
el.style.opacity = '0';
el.style.filter = 'alpha(opacity:0.0)';
tp.showPanel((tp.getCurrentTabIndex()+1) %
tp.getTabbedPanelCount()); // 1, 2, 3, 4, 0 ... loop
Spry.Effect.AppearFade('panel_content' +
(tp.getCurrentTabIndex() + 1) % tp.getTabbedPanelCount(),
{duration: 1000, from: 0, to: 100, toggle: false});
}
});
if (this.timerID)
this.start();
};
Regards,
Cristian
Perfect. Thanks so much Cristian ..
Hey Cristian,
I just ran into a small snag. I justified the tabs to the
right (in TabbedPanelsTab within the CSS), and they're now
displaying as:
5 4 3 2 1
And with that, they're cycling through backwards, right to
left ..
Do you have any suggestions on how I could reverse this?
Thanks.
Hello kraftomatic84,
You can always look through a mirror to your monitor or ask a
guy familiar with left-to-right reading if he see any problem with
your page :- ) ( I am joking ).
In this situation I really have to look to a link and see why
this problem appears. As a rule of thumb CSS problems should be
debugged directly in the page they appear on the same browser they
duplicate otherwise you can try for hours to duplicate on your side
and the solution most of the time will not fix the original
problem.
I have really no idea why this problem happens and I never
seen it before.
Regards,
Cristian
Sure .. You can duplicate it easily by taking the standard
example we've been using:
%26lt;!DOCTYPE html PUBLIC ''-//W3C//DTD XHTML 1.0
Transitional//EN'' ''
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd''%26gt;
%26lt;html xmlns=''
http://www.w3.org/1999/xhtml''
xmlns:spry=''
http://ns.adobe.com/spry''%26gt;
%26lt;head%26gt;
%26lt;meta http-equiv=''Content-Type'' content=''text/html;
charset=utf-8'' /%26gt;
%26lt;title%26gt;TabbedPanels Cycler Example%26lt;/title%26gt;
%26lt;script src=''SpryTabbedPanels.js''
type=''text/javascript''%26gt;%26lt;/script%26gt;
%26lt;script src=''SpryEffects.js''
type=''text/javascript''%26gt;%26lt;/script%26gt;
%26lt;script type=''text/javascript''%26gt;
function TabbedPanelsCycler(tp)
{
this.tp = tp;
this.timerID = 0;
this.interval = 2000; // Milliseconds
}
TabbedPanelsCycler.prototype.start = function()
{
this.stop();
var self = this;
this.timerID = setTimeout(function() { self.next(); },
this.interval);
};
TabbedPanelsCycler.prototype.stop = function()
{
if (this.timerID)
clearTimeout(this.timerID);
this.timerID = 0;
};
TabbedPanelsCycler.prototype.next = function()
{
var tp = this.tp;
//Spry.Effect.AppearFade('product_box', {duration: 1000,
from: 100, to: 0, toggle: true});
Spry.Effect.AppearFade('panel_content' +
(tp.getCurrentTabIndex()+1) % tp.getTabbedPanelCount(), {duration:
1000, from: 100, to: 0, toggle: false, finish: function(){
var el = document.getElementById('panel_content' +
((tp.getCurrentTabIndex() + 2) % tp.getTabbedPanelCount()));
el.style.opacity = '0';
el.style.filter = 'alpha(opacity:0.0)';
tp.showPanel((tp.getCurrentTabIndex()+1) %
tp.getTabbedPanelCount()); // 1, 2, 3, 4, 0 ... loop
Spry.Effect.AppearFade('panel_content' +
(tp.getCurrentTabIndex() + 1) % tp.getTabbedPanelCount(),
{duration: 1000, from: 0, to: 100, toggle: false});
}
});
if (this.timerID)
this.start();
};
TabbedPanelsCycler.prototype.previous = function()
{
var tp = this.tp;
var curIndex = tp.getCurrentTabIndex();
tp.showPanel(((curIndex %26lt; 1) ? tp.getTabbedPanelCount() :
curIndex) - 1);
if (this.timerID)
this.start();
};
function ExampleHelpText(helpText)
{
document.getElementById(''text_pane'').innerHTML='%26lt;p%26gt;'+helpText+'%26lt;/p%26gt;';
}
function ReloadDocument()
{
window.location.reload(true);
}
%26lt;/script%26gt;
%26lt;link href=''SpryTabbedPanels.css'' rel=''stylesheet''
type=''text/css'' /%26gt;
%26lt;/head%26gt;
%26lt;body%26gt;
%26lt;input type=''button'' value=''Start''
onclick=''cycler.start();'' /%26gt;
%26lt;input type=''button'' value=''Stop'' onclick=''cycler.stop();''
/%26gt;
%26lt;div id=''TabbedPanels1'' class=''TabbedPanels''%26gt;
%26lt;ul class=''TabbedPanelsTabGroup''%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
1%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
2%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
3%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
4%26lt;/li%26gt;
%26lt;li class=''TabbedPanelsTab'' tabindex=''0''%26gt;Tab
5%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;div class=''TabbedPanelsContentGroup''%26gt;
%26lt;div class=''TabbedPanelsContent'' id=''panel_content1''%26gt;
%26lt;div%26gt;Content 1%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent'' id=''panel_content2''%26gt;
%26lt;div%26gt;Content 2%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent'' id=''panel_content3''%26gt;
%26lt;div%26gt;Content 3%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent'' id=''panel_content4''%26gt;
%26lt;div%26gt;Content 4%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div class=''TabbedPanelsContent'' id=''panel_content0''%26gt;
%26lt;div%26gt;Content 5%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;script type=''text/javascript''%26gt;
%26lt;!--
var tp1 = new Spry.Widget.TabbedPanels(''TabbedPanels1'');
var cycler = new TabbedPanelsCycler(tp1);
//--%26gt;
%26lt;/script%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
And then in SpryTabbedPanels.css, change ''float: left;'' to
''float: right;'' within ''.TabbedPanelsTab''.
It will push the tabs to the right and cycle them backwards.
I can post a direct URL page also if the above doesn't work
for you.
Oh, so this is how you changed the page. In this situation
everything works normally because this is the way the float: right
should behave. The first element will become the most right element
followed to its left by the second element and so on.
What you actually want can be achieved by changing the float:
right back to float: left for the .TabbedPanelsTab and add into the
.TabbedPanelsTabGroup float: right to move only the container to
right and keep the order of inner elements unchanged.
Regards,
Cristian
That did it. Thanks Cristian. I should have tried that.
Cheers.
Subscribe to:
Post Comments
(Atom)
No comments:
Post a Comment