Youtube Embeds displaying on every tabbed panel
So I am having a problem with spry tabbed panels.
Everything seems to be going fine, except that every youtube video that is embeded shows on every page ( or almost every page) even though they are only contained with certain tabbedPanelContentGroups.
Is there anything to do about this? I would be happy to proivde code, but I'm hoping there is a quick fix as I would assume other people would have this problem.
Thank you very much for your time.
EDIT: I am adding code because I realized that some of the tabs don't have the problem, specifically the ones that have the soundCloud embeds (the section with <!--Cabbibo--> at the top works fine, as well as the <!--Cash Villa--> section
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="index.html"><img src="images/300 dpi Swaish.png" style="opacity:.8;" width="100%"/></a>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" style="padding-left:0px;padding-right:0px;" tabindex="0"></li>
<li class="TabbedPanelsTab" tabindex="0">Cozy</li>
<li class="TabbedPanelsTab" tabindex="0">Charles Melvin</li>
<li class="TabbedPanelsTab" tabindex="0">Pink Noise Ordinance</li>
<li class="TabbedPanelsTab" tabindex="0">Xei The Ghost</li>
<li class="TabbedPanelsTab" tabindex="0">Ded Pimpin</li>
<li class="TabbedPanelsTab" tabindex="0">ESMK</li>
<li class="TabbedPanelsTab" tabindex="0">Cabbibo</li>
<li class="TabbedPanelsTab" tabindex="0">Defense</li>
<li class="TabbedPanelsTab" tabindex="0">Ca$h Villa</li>
<li class="TabbedPanelsTab" tabindex="0">Drrty Pharmecuticals</li>
<li class="TabbedPanelsTab" tabindex="0">Supa Ape</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div class="homeLeft">
<iframe width="100%" height="500" src="http://www.youtube.com/embed/4nPAa2Xjg2Y" frameborder="0" allowfullscreen></iframe>
</div>
<div class="homeRight">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
<a href="downloads/xei le phantom - o lard.mp3"><img src="images/oLard.jpg" /></a>
</div>
</div>
<!--COZY-->
<div class="TabbedPanelsContent">
<div class="cozyLeft">
<iframe width="100%" height="150" src="http://www.youtube.com/embed/DTjeN3kvH14" frameborder="0" allowfullscreen></iframe>
<p></p>
<p></p>
<p></p>
<iframe width="100%" height="150" src="http://www.youtube.com/embed/46ucyzYpoB8" frameborder="0" allowfullscreen></iframe>
<div class="downLoad">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="cozyRight">
<iframe width="100%" height="150" src="http://www.youtube.com/embed/ay1DeoNRJUM" frameborder="0" allowfullscreen></iframe>
<p></p>
<p></p>
<p></p>
<iframe width="100%" height="150" src="http://www.youtube.com/embed/prwGrPAsEVU" frameborder="0" allowfullscreen></iframe>
<p></p>
<p></p>
<p></p>
<iframe width="100%" height="150" src="http://www.youtube.com/embed/FUQf25vrct4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<!--END COZY-->
<!--CHARLES MELVIN-->
<div class="TabbedPanelsContent">
<div class="left">
<iframe width="100%" height="335" src="http://www.youtube.com/embed/4nPAa2Xjg2Y" frameborder="0" allowfullscreen></iframe>
<div class="downLoad2">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="right">
<iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src= "http://bandcamp.com/EmbeddedPlayer/v=2/track=1227280531/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://charlesmelvin.bandcamp.com/track/king-supa">King SUPA by Charles Melvin</a></iframe>
<p></p>
<p></p>
<p></p>
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=2269435729/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://charlesmelvin.bandcamp.com/album/beatoff-vol-1">#BEATOFF Vol. 1 by Charles Melvin</a></iframe>
</div>
</div>
<!--CHARLES MELVIN END-->
<!--Pink Noise Ordinance-->
<div class="TabbedPanelsContent">
<!--Through Columns-->
<div class="left">
<iframe height="335px" width="560px" src="http://www.youtube.com/embed/jePt-ZupucE" frameborder="0" allowfullscreen></iframe>
<div class="downLoad2">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="right">
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=2897124287/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://pinknoiseordinance.bandcamp.com/album/virtual-vampire">Virtual Vampire by Pink Noise Ordinance</a></iframe>
<br/>
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=4238875189/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://elsuper.bandcamp.com/album/your-flower">✿Your Flower✿ by Pink Noise Ordinance</a></iframe>
<br/>
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=2652019939/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://elsuper.bandcamp.com/album/i-slept-in-a-field">I Slept in a Field by Pink Noise Ordinance</a></iframe>
</div>
</div>
<!--Pink Noise Ordinance-->
<!--Xei-->
<div class="TabbedPanelsContent">
<div class="left">
<iframe width="100%" height="335" src="http://www.youtube.com/embed/JqvD14vC1Hs" frameborder="0" allowfullscreen></iframe>
<div class="downLoad2">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="right">
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=383178372/size=venti/bgcol=161616/linkcol=428 5BB/" allowtransparency="true" frameborder="0"><a href="http://xeilephantom.bandcamp.com/track/leviathan-ke-has-***">leviathan..(ke$ha's ***) by ghostly</a></iframe>
<br/>
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=4169793453/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://xeilephantom.bandcamp.com/track/paws">paws. by xei the ghost</a></iframe>
<br/>
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=4280837736/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://xeilephantom.bandcamp.com/track/real-lize-told">real.lize.told by xei le phantom</a></iframe>
<br/>
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=3766529241/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://xeilephantom.bandcamp.com/track/o-lard">o lard by xei le phantom</a></iframe>
</div>
</div>
<!--Xei End-->
<!--Pimpin-->
<div class="TabbedPanelsContent">
<div class="left" >
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 550,
height: 450,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
tweets: {
background: '#000000',
color: '#ffffff',
links: '#079beb'
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}).render().setUser('@dedpimpin').start();
</script>
<div class="downLoad2">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="right">
<iframe width="100%" height="410" style="position: relative; display: block; width: 100%; height: 450px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=1425481289/size=grande3/bgcol=161616;/linkcol =4285BB/" allowtransparency="true" frameborder="0"><a href="http://dedpimpin.bandcamp.com/album/is-brutality">is brutality by Ded Pimpin</a></iframe>
</div>
</div>
<!--End Pimpin-->
<!--ESMK-->
<div class="TabbedPanelsContent">
<div class="left">
<iframe width="100%" height="335" src="http://www.youtube.com/embed/5jxorLMcRf4" frameborder="0" allowfullscreen></iframe>
<div class="downLoad2">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="right">
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg" width="100%"/><br/>DOWNLOAD RICE CAKE</a>
</div>
</div>
<!--ESMK END-->
<!--Cabbibo-->
<div class="TabbedPanelsContent">
<div class="cozyLeft">
<iframe width="100%" height="335" src="http://www.youtube.com/embed/3h41ZgXOSlw" frameborder="0" allowfullscreen></iframe>
<div class="downLoad">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="cozyRight">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F33043097&sh ow_artwork=true"></iframe>
<br/>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F30474430&sh ow_artwork=true"></iframe>
<br/>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F29840842&sh ow_artwork=true"></iframe>
</div>
</div>
<!--Cabbibo End-->
<!--Defense-->
<div class="TabbedPanelsContent">
<div class="left">
<a href=""><img src="images/elHeroic.jpg" style="position:relative;width:60%;margin-left:20%"/></a>
<div class="downLoad2">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="right">
<iframe width="400" height="100" style="position: relative; display: block; width:100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=4052682958/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://defense.bandcamp.com/album/lobello-e-p">LoBello E.P. by Defense</a></iframe>
<br/>
<iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=2002203858/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://defense.bandcamp.com/album/el-heroic">El Heroic by Defense</a></iframe>
<br/>
<iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=3191448160/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://defense.bandcamp.com/album/stitches-ep">STITCHES ep by DEFENSE</a></iframe>
</div>
</div>
<!--DEFENSE END-->
<!--Ca$h Villa-->
<div class="TabbedPanelsContent">
<div class="cozyLeft">
<iframe width="100%" height="300" scrolling="yes" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1584822& show_artwork=true"></iframe>
<div class="downLoad">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="cozyRight">
<iframe width="100%" height="300" scrolling="yes" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1596385& show_artwork=true"></iframe>
</div>
</div>
<!--Cash End-->
<!--Dirty-->
<div class="TabbedPanelsContent">
<div class="left">
<iframe width="300" height="410" style="position: relative; display: block; width: 100%; height: 335px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=2093239829/size=grande3/bgcol=161616/linkcol= 4285BB/" allowtransparency="true" frameborder="0"><a href="http://dirtypharmeceuticals.bandcamp.com/album/bieber-gone-bad">Bieber Gone Bad by ✞dirty ph△rm△ceutic△ls✞</a></iframe>
<div class="downLoad2">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="right">
<iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=1544977132/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://dirtypharmeceuticals.bandcamp.com/track/the-glorious-slay-we-have-won-everythings-o urs-everyone-is-dead">The Glorious Slay: We Have Won, Everything's Ours, Everyone Is Dead by I¢y Pharmaceuticals</a></iframe>
<br/>
<iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=2622775492/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://dirtypharmeceuticals.bandcamp.com/track/ain-soph">Ain Soph by I¢y Pharmaceuticals</a></iframe>
<br/>
<iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=346130186/size=venti/bgcol=161616/linkcol=428 5BB/" allowtransparency="true" frameborder="0"><a href="http://dirtypharmeceuticals.bandcamp.com/track/my-semen-lies-dormant-mocking-me">My Semen Lies Dormant, Mocking Me by ✞dirty ph△rm△ceutic△ls✞</a></iframe>
<br/>
<iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=3626930462/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://dirtypharmeceuticals.bandcamp.com/track/--14">αεηιουω by ✞dirty ph△rm△ceutic△ls✞</a></iframe>
</div>
</div>
<!--Dirty End-->
<!--Supa-->
<div class="TabbedPanelsContent">
<div class="left">
<iframe width="100%" height="335" src="http://www.youtube.com/embed/SU910lw4saw" frameborder="0" allowfullscreen></iframe>
<div class="downLoad2">
<a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
<a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
<a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
</div>
</div>
<div class="right">
<iframe width="300" height="410" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=3884466748/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://supaape.bandcamp.com/album/strictly-for-the-*******">Strictly for the ******* by Supa Ape</a></iframe>
<br/>
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=3360886811/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://supaape.bandcamp.com/album/ifuck">ifuck by Supa Ape</a></iframe>
<br/>
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=183247306/size=venti/bgcol=161616/linkcol=428 5BB/" allowtransparency="true" frameborder="0"><a href="http://supaape.bandcamp.com/track/pink-sky">Pink Sky by Supa Ape</a></iframe>
</div>
</div>
<!--Supa End-->
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Sorry, no probs here
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="youtubePlayer.js"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2310032" binding="#youtubePlayer" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
</div>
<div class="TabbedPanelsContent">
<iframe id="html5Vid" class="youtube-player" type="text/html" width="480" height="385" src="http://www.youtube.com/embed/4nPAa2Xjg2Y" frameborder="0"></iframe>
<script type="text/javascript">
// BeginOAWidget_Instance_2310032: #youtubePlayer
if (!true) {
var vid = document.getElementById("html5Vid");
document.body.removeChild(vid);
var params = {};
params.autoplay = false;
params.loop = false;
params.hd = false;
params.start = 0;
params.border = false;
params.color1 = "#B1B1B1";
params.color2 = "#D8D8D8";
var vid = createFlashPlayer("5P91PPCw2Bs", "480", "385", params);
document.body.appendChild(vid);
// EndOAWidget_Instance_2310032
</script>
</div>
</div>
</div>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
The above is achieved by using the YouTube Player available when you use the Adobe Widget Browser.
Gramps
Similar Messages
-
IE6 displays AutoSuggestions under Tabbed Panel tabs
Problem: I am using the autoSuggest widget on the same page
as tabbed panels. In FireFox, it works GREAT! In IE6, I have a
problem with the suggestions being under the tabbed panels tabs
(possibly under the tabbed panel tab group)... I found a suggestion
which stated to set the autosuggest to z-index: 2002, and set it to
absolute positioning, both of which I've done.
When I look at the source using the IE Dev Toolbar, I see the
following:
<DIV class="predictiveSuggestionDiv hideSuggestClass"
id="destinationSuggestionsDiv">
<DIV class="fieldText" spry:hover="highlight"
spry:suggest="Oak Harbor, WA">Oak Harbor, WA</DIV>
</DIV>
<IFRAME class="iframeSuggest" style="DISPLAY: none; LEFT:
0px; WIDTH: 245px; TOP: 20px; HEIGHT: 18px" src='javascript:"";'
frameBorder="0" scrolling="no"></IFRAME>
Which leads me to believe that the autosuggest is not
actually inside the iFrame. While I found the styles for the
iframe, and set them, I did not find a way to tell spry to use the
iFrame. I was thinking that this might be the missing link, but I'm
not sure.
I've tried setting the TabbedPanelTab &
TabbedPanelTabGroup to z-index: 1, however the tabbed panels seem
to really want to be above everything else anyway. I do have the
iFrameSuggest class and I set it as suggested in another forum
entry to:
.iframeSuggest
position: absolute;
z-index: 2002;
filter:alpha(opacity:0.1);
However, that does not seem to solve my problem in IE 6.
Any thoughts?Problem: I am using the autoSuggest widget on the same page
as tabbed panels. In FireFox, it works GREAT! In IE6, I have a
problem with the suggestions being under the tabbed panels tabs
(possibly under the tabbed panel tab group)... I found a suggestion
which stated to set the autosuggest to z-index: 2002, and set it to
absolute positioning, both of which I've done.
When I look at the source using the IE Dev Toolbar, I see the
following:
<DIV class="predictiveSuggestionDiv hideSuggestClass"
id="destinationSuggestionsDiv">
<DIV class="fieldText" spry:hover="highlight"
spry:suggest="Oak Harbor, WA">Oak Harbor, WA</DIV>
</DIV>
<IFRAME class="iframeSuggest" style="DISPLAY: none; LEFT:
0px; WIDTH: 245px; TOP: 20px; HEIGHT: 18px" src='javascript:"";'
frameBorder="0" scrolling="no"></IFRAME>
Which leads me to believe that the autosuggest is not
actually inside the iFrame. While I found the styles for the
iframe, and set them, I did not find a way to tell spry to use the
iFrame. I was thinking that this might be the missing link, but I'm
not sure.
I've tried setting the TabbedPanelTab &
TabbedPanelTabGroup to z-index: 1, however the tabbed panels seem
to really want to be above everything else anyway. I do have the
iFrameSuggest class and I set it as suggested in another forum
entry to:
.iframeSuggest
position: absolute;
z-index: 2002;
filter:alpha(opacity:0.1);
However, that does not seem to solve my problem in IE 6.
Any thoughts? -
Multi page recordset output from ASP page on Spry Tabbed Panel Widget
I am using a simple Spry Tabbed panel set on my asp page to show the output from different ASP pages, inside the tabbed panels. The tabbed panels on the page under consideration (destination page) display the output from different asp pages (source pages). The source asp pages generate multi page outputs which are paginated on the source page itself and pagination links are displayed on the source page itself.
However, we dont want to display the source page outside of the tabbed panel, but instead the output content from the source asp pages should show inside the tabbeed panels only. The first page generated by the source asp page displays correctly inside the tabbed panel. However, when the user clicks on the links for the next page generated by the source asp page, but which is being displayed inside the destination page tabbed panel, they dont display the next page inside the tabbed panel. Instead the source asp page displays the output outside the tabbed panel destination page.
Please advise on how to ensure that the user can page through the recordset generated by the source asp page by clicking on the pagination links at the bottom of the records, while ensuring that the output displays within the tabbed panels on the destination asp page.
I am enclosing the source code being used to generate the spry tabbed panel widget and also updating it with the output from the source asp page. In this case, the code given below is from the main page containing the widget and the source asp page is "sample.asp", which generates multi page output.
Please note that I am not too keen on using xml data sets output from the source asp page, but would be more comfortable with directly using the asp pages to fill the tabbed panel content.
Please help
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','sample.asp?page=' <%=i%>); Spry.Data.initRegions();" >Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div id=two class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>I fully agree that the problem does not lie with tthe tabbed panels.
The solution would probably be first required to be tried using ajax on any div tab.
Then the same code would have to be used on Sprytabbed panel. Hence, the following may be advised:
1. Sample code for server side pagination and displaying inside any div tag and refreshing it using ajax. the update link would also lie inside the div tag which would show the next/ previous page without reloading the page.
2. Then adapting the refresh technique using ajax in the Spry Tabbed panel using the inbuilt updatecontent method of the Spry Tabbed panels.
In order to achieve the above, I am getting the recordset output in the tab content as expected. The recordset is also getting the pagination links from server side asp as required.
However, it is also generating the following error.
Webpage error details
Message: Unterminated string constant
Line: 9
Char: 56
Code: 0
URI: http://localhost/test/test5.asp
The sourcecode is as given below. If you can help with the error indicated above, my problem would probably get solved.
<html><head>
<title>Untitled Document</title>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="/SpryAssets/xPath.js" type="text/javascript"></script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('one','untitled-5.asp');">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0" >Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div id=one class="TabbedPanelsContent">Content 1</div>
<div id ="two" class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html> -
Ghost image of a video embedded in a tabbed panel (preview mode)
What am I doing wrong?
Am using a tabbed Widget (3 tabs): the first tab with a picture gallery widget (simplest form). Tabs 2 and 3 with 1 HTML embedded youTube video on each tabbed panel. Everything was coming together great and when I previewed the page everything worked as it should. That was last week I think. Have been cleaning up details on the site for a couple of days.
Today I was checking the tab widgets suddenly instead of the one video on the panel, I had a second identical one floating on the upper left side of the page. I worked on the problem for a while, coming at last to deleting the HTML video rectangles, and discovered I STILL had the extra video floating up left, even when the original was gone!
After much hair-tearing, hand-wringing and wild experiments, I deleted the page and started from scratch, checking the preview after every move to see if anything strange was happening. Everything was fine until I copied the embed code from youTube and pasted it on the page. The rectangle appeared as it should, I centered it in the panel and previewed .... PHOOEY!! there was
the floating extra video up left, invisible until I previewed. At this point deleting the main video deletes the "ghost" as well, but of course thats not a solution.
Here is the page with the inserted HTML --
And here is is previewed
Can you hear me screaming?
Oh yeah, and when I insert the HTML for the second video embedding the "ghost" follows suit. The one floating on the left matches whichever video is visible on the widget .Also important to mention is that in the previewed page, the "ghost" video is not active, not live, does not react to the mouse.
And now I discover that as I go to another window (to write this) and then return to Muse, the "ghost" video has disappeared, but it always comes again when I preview the page.
Anyone got a suggestion???? PLEASE????
KarenI call down blessings on you, you wonderful people! That worked, Zack! Now I just have to store that somewhere I can always find it and remember to use it! I can't say I understand it at all. My default browser is Firefox but I have no idea what browser (if any) Muse uses for previews, and Chrome is also on my PC although I seldom use it.
Furthermore, compare the first photo I posted of the HTML object in Design mode with this one
See the difference on the HTML object? This is also Design view, but instead of showing an anonymous black rectangle, it now has the video title and the start arrow - in Design mode!! Go figure. Now I'll try to finish up the site at last and see how everything works.
I'd cross my fingers -- but it makes it too hard to use the mouse.
Thanks again!
Karen -
YouTube links within a tabbed panel not stopping
Within each tab of a tabbed panel, I have a YouTube link. How to I make a YouTube playback stop automatically when the user changes tabs and starts a different video on a different tab?
They will only see the 2nd video but hear both at the same time.This would need to add a little code snippet :
http://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-i frame
http://stackoverflow.com/questions/5503833/stop-all-youtube-iframe-embeds-from-playing
Thanks,
Sanjit -
Tabbed panels repeat region in cms displays 2nd item as a block of content
Hi everyone, hope someone can help:
I have a test page live
http://aegmotorhomes.co.uk/usedtest1.php
Problem is this-
I have added a repeat region on my dreamweaver template
I use Perch CMS as my management for staff to add new items for sale on this page
I have built a tabbed panels to list the item
On my CMS it allows me to press "add another" which then adds the tabbed panels again as a new item and the staff input the details
My problem is the first item works perfect and all tabbs work fine, each item after that doesn't have tabbs and shows all content as one whole block
I think it is to do with the ID and applies the java file only to item one, thats my guess.
I have attached code below for my tabbed panels template, .js file and .css file - can anyone shed any light on this issue"
TEMPLATE
<style type="text/css">
#container1 {
width: 700px;
background-color: #E6E6E6;
border: .1em solid #999;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
height: auto;
margin-bottom: 30px;
#item_description {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
color: #333;
background-color: #FFF;
height: 30px;
border-bottom-width: .1em;
border-bottom-style: dotted;
border-bottom-color: #333;
font-weight: bold;
margin-bottom: 10px;
#price {
margin-top: 5px;
float: right;
width: 150px;
background-color: #EAEAEA;
border: 0.1em solid #CCC;
.BOLDTEXT {
font-weight: bold;
text-align: center;
color: #FFF;
.BOLDTEXT_PRICE {
color: #333;
#engine_spec {
float: left;
width: 190px;
font-family: Arial, Helvetica, sans-serif;
font-size: .75em;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#top_price {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #099;
float: right;
width: 150px;
font-weight: bold;
text-align: right;
#top_price {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #099;
#overview_picture {
height: 150px;
width: 200px;
background-color: #CCC;
float: left;
margin-right: 10px;
margin-top: 5px;
.BOLDTEXT_blackprice {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #099;
#smallprint {
font-family: Arial, Helvetica, sans-serif;
font-size: .5em;
color: #666;
margin-top: 2px;
table tr td {
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
.specwhite {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
#reserve {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #FFF;
background-color: #099;
width: 140px;
float: right;
margin-top: 10px;
padding: 5px;
text-align: center;
border: .1em solid #999;
</style>
<script src="../../../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../../../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<div id="container1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Overview</li>
<li class="TabbedPanelsTab" tabindex="0">Description</li>
<li class="TabbedPanelsTab" tabindex="0">Images</li>
<li class="TabbedPanelsTab" tabindex="0">Specification</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="item_description"><perch:content id="Title1" label="Title" type="text" />
<div id="top_price">£<perch:content id="Title2" label="Top Price" type="text" /></div>
</div>
<div id="overview_picture"><img src="<perch:content id="photo" label="Photo" type="image" />" class="photo" /></div>
<div class="engine_spec" id="engine_spec">
<table width="100%" border="0" cellpadding="5" cellspacing="7">
<tr>
<td width="35%" bgcolor="#EAEAEA">Year of Make</td>
<td width="65%" bgcolor="#999999"><strong class="spec_white"><span class="engine_spec"><span class="specwhite"><perch:content id="Title3" label="Year" type="text" /></span></span></strong></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Current Miles</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title4" label="Mileage" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Engine Size</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title5" label="Engine" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Body Colour</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title6" label="Colour" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Transmission</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title7" label="Transmission" type="text" /></span></td>
</tr>
</table>
</div>
<div id="price">
<table width="150" border="0" cellspacing="9">
<tr>
<td width="50" height="25" bgcolor="#999999" class="BOLDTEXT">WAS</td>
<td width="81" class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title8" label="Old Price" type="text" /></span></td>
</tr>
<tr>
<td height="25" bgcolor="#999999" class="BOLDTEXT">NOW</td>
<td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9" label="New Price" type="text" /></span></td>
</tr>
<tr>
<td height="25" bgcolor="#999999" class="BOLDTEXT">SAVE</td>
<td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9a" label="Save" type="text" /></span></td>
</tr>
</table>
</div>
<div id="reserve">Reserve Motorhome</div>
</div>
<div class="TabbedPanelsContent"><perch:content id="Text" label="Description" type="textarea" editor="ckeditor" html="true" /></div>
<div class="TabbedPanelsContent"><table width="650" cellspacing="5">
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
</table></div>
<div class="TabbedPanelsContent"><perch:content id="Text1" label="Specification" type="textarea" editor="ckeditor" html="true" /></div>
</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
.JS file
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
this.defaultTab = 0;
else
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
if (ele == arr[i])
return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
var el = false;
if (key == this.previousPanelKeyCode && i > 0)
el = tabs[i-1];
else if (key == this.nextPanelKeyCode && i < tabs.length-1)
el = tabs[i+1];
if (el)
this.showPanel(el);
el.focus();
break;
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
var child = root.firstChild;
while (!stopTraversal && child)
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
tabIndexEle = node;
return true;
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
return false;
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
if (tabs[i])
this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i])
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
})(); // EndSpryComponent
>CSS file
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
background-color: #DDD;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: small;
font-weight: bold;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 4px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #CCC;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
background-color: #FFF;
color: #333;
border-top-color: fff;
border-right-color: fff;
border-bottom-color: fff;
border-left-color: fff;
border-color: fff;
outline-color: fff;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
background-color: #F9F9F1;
height: auto;
margin-bottom: 3px;
border: .1px solid #999;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
color: #333;
padding: 20px;
clear: both;
margin-bottom: 5px;
height: auto;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
overflow: hidden;
zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:none !important;
height: 100%;
#TabbedPanels1 {
height: auto;
padding-top: 5px;
background-color: #EAEAEA;
width: 700px;
I did read this but don't know where to start: http://www.webdevforums.com/showthread.php?27428-Dreamweaver-spry-collapsible-panel-amp-re peating-regions
Can anybody HELP PLEASE PLEASEI think I counted three tabbed panels in the markup, each with an ID of TabbedPanels1
You have only one constructor that makes one instance of the tabeed panels with an ID of TabbedPanels1
There are a couple of things that create the problem.
There can only be one ID with the same name in a document, thus the ID's of the TabbedPanels will need to change from TabbedPanels1 for the second and third instances to TabbedPanels2 and TabbedPanels3 (or similar) respectively.
There needs to be a constructor for each tabbed panels like
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
Gramps -
Embedding more than one google map in a tabbed panel
Hi, I wonder if anyone knows if this is possible. I am building google maps in business catalyst and what I want to do is add multiple maps into my muse site. For example, restaurants on one map, coffee shops on another, local produce on another. Does anyone know if this is possible? Each time I try and enter the snippet of code I get to add to muse from business catalyst it is fine if I just enter on blank page, but when I try and enter the html in the tabbed panel it doesnt work. Does anyone know of a solution ? I would really appreciate any feedback, Michele
Strange to be the first to reply to my own question but here goes, it may help someone with similar woes. I had been following the wiring colour code stringently. That being GREEN=FRONT, BLACK=REAR and ORANGE=SUBWOOF/CENTRE.
After clicking the Universal audio jack button on the realtek sound manager C.P and manually setting the blue port to be rear I took the Jack for my rear channels that had been in the BLACK port, and plugged it to the BLUE. I then tested all the speakers and "VOILA" every speaker channel works.
Im somewhere between NOOB and have to fix all my familys PC problems because they know even less than I do. Not sure what that makes me, a bit of a chancer probably, who gets lucky more than anything, anyway I can only guess that there is a problem with the onboard "BLACK" port. In saying that I have just came from a 2.1 setup for front and built in flat panel srs monitor speakers for rear, all this was setup as quadrophonic and as I recall the Black port worked fine whenever I used it as the rear channel. So anyway its working, Im not sweating too much about the whys and how comes. I am a little concerned about the 6700 reputation for a certain volume controller inner part burning out (TRANSISTOR)? I think is the culprit. Anyway I will deal with that if and when the time arises. Only 2 months left on my warranty and my speakers have been sat doing nothing for over 6 months maybe more so I should get some life out of them, fingers crossed. -
Remote Server doesn't display SPRY Tabbed Panel
I'm using DW CS4. I inserted a SPRY Tabbed Panel in the main page for navigation. The local development and testing server displays the Panel, but the remote server (Go Daddy) does not. All of the data from the panel is displayed in one log page without the tab feature.
The site's address is: mailbox.mikeklonecki.com
I saw a couple of other posts for a slideshow error using SPRY in DW, but this seems to be different behavior. I don't get an error, rather the panel just doesn't display.
Any feedback would be greatly appreciated. Thank you in advance.I apologize. I found my answer.
Two required files (one .js and one .css) were not loaded into the right folder, so the page didn't have access to them. After re-locating the files, the Tabbed panel works just fine.
Please disregard the inquiry. -
I have Spry Tabbed panels and all my content is suddenly displaying in the first, default tab. Also, the turquoise "Spry Tabbed Panels" is missing from the top of my widget. This has happened on three different pages so far, and all I have found is that I must insert a new tabbed panel. My <div> codes all match up, so I'm stumped. Any help would be really appreciated.
Source Code in this post
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/base_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>BCCA Library - Abstracts</title>
<meta name="Description" content="Designed and developed by Codify Design Studio - codifydesign.com" />
<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceParam name="Content Left" type="boolean" value="true" -->
<!-- InstanceParam name="Content Right" type="boolean" value="true" -->
</head>
<body>
<div class="bannerArea">
<div class="container">
<div class="bannernav"><a href="http://www.bccancer.bc.ca/" target="_blank" >BC Cancer Agency</a> • <a href="http://POD" target="_blank" >POD</a> • <a href="http://www.phsa.ca" target="_blank" >PHSA </a>• <a href="mailto:[email protected]?subject='Contact Us' from Library Links" >Contact Us</a></div>
<div class="toplogo"><a href="index.html" target="_parent"><img src="images/liblinks_infobase.png" alt="Library Links Home Page" hspace="135" border="0" /></a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="topnavigationArea">
<div class="container">
<div class="topnavigationgroup">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="databases.html" class="MenuBarItemSubmenu">Databases</a>
<ul>
<li><a href="databases.html">All Databases</a></li>
<li><a href="remote.html">Remote Access</a></li>
<li><a href="mobile.html">Mobile Resources</a></li>
<li><a href="training_bcca.html">Training</a></li>
<li><a href="autoalerts.html">AutoAlerts</a></li>
<li><a href="primal.html">Primal Pictures</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="journals.html">Journals</a>
<ul>
<li><a href="journals.html" class="MenuBarItemSubmenu">Journals</a>
<ul>
<li><a href="http://atoz.ebsco.com/home.asp?Id=BCCA230F" target="_blank">BCCA A-Z e-journals</a></li>
<li><a href="http://bcca.andornot.com/results.aspx?TN=bccacat&QY=find%20(Format%20ct%20Serial)%20not%20 (Status%20%3DDiscarded%20%2F%20%3DMissing)%20and%20(Location%20ct%20library)&RF=WebBriefDa te&DF=WebFull&BU=http%3A%2F%2Fbcca.andornot.com%2Fdefault.htm&MR=10&NP=255&RL=0&DL=0&MF=bc cawpmsg.ini&AC=QBE_QUERY" target="_blank">Print Journals BCCA</a></li>
<li><a href="http://toby.library.ubc.ca/ejournals/ejournals.cfm/" title="UBC Print and E-journals" target="_blank">UBC Journals</a></li>
<li><a href="mailto:[email protected]?subject=Request articles" title="Request articles from BCCA Library">Request Articles</a></li>
</ul>
</li>
<li><a href="ebooks.html">E-books</a></li>
<li><a href="abstracts.html">Abstracts/Conferences</a></li>
<li><a href="remote.html">Remote Access</a></li>
<li><a href="mailto:[email protected]?subject=Request articles">Request Articles</a></li>
</ul>
</li>
<li><a href="refworks.html">RefWorks</a></li>
<li><a href="catalogues.html" class="MenuBarItemSubmenu">Catalogues</a>
<ul>
<li><a href="catalogues.html">Catalogues</a></li>
<li><a href="http://bcca.andornot.com/" title="BCCA Library Catalogue" target="_blank" class="MenuBarItemSubmenu">BCCA</a>
<ul>
<li><a href="http://bcca.andornot.com/topics.htm" title="Automated Searches" target="_blank">Popular Topics</a></li>
<li><a href="ebooks.html" target="_blank">E-books</a></li>
<li><a href="http://tinyurl.com/4jmvwpn" title="Books added this month" target="_blank">BCCA New Books</a></li>
</ul>
</li>
<li><a href="http://library.ubc.ca/" title="UBC Library Catalogue" target="_blank" class="MenuBarItemSubmenu">UBC</a>
<ul>
<li><a href="http://toby.library.ubc.ca/ejournals/ejournals.cfm/" title="UBC Print and E-journals" target="_blank">UBC Journals</a></li>
<li><a href="http://webcat2.library.ubc.ca/vwebv/searchBasic/" title="UBC Books & more" target="_blank">UBC Books</a></li>
<li><a href="http://services.library.ubc.ca/borrowing/library-cards/" target="_blank">UBC Library Cards</a></li>
<li><a href="http://www.it.ubc.ca/cwl/homelink.shtml/" title="Campus Wide Login" target="_blank">Campus Wide Login</a></li>
<li><a href="http://www.library.ubc.ca/home/proxyinfo/" title="Connect from Home" target="_blank">VPN / EZ Proxy</a></li>
<li><a href="mailto:[email protected]?subject=Request Articles" title="Request from BCCA Library">Request Articles</a></li>
</ul>
</li>
<li><a href="http://library.sfu.ca/" title="SFU Library Catalogue" target="_blank">SFU</a></li>
<li><a href="http://www.bcit.ca/library/" title="BCIT Library Catalogue" target="_blank">BCIT</a></li>
<li><a href="http://www.ncbi.nlm.nih.gov/sites/entrez?db=nlmcatalog" title="National Library of Medicine Catalogue" target="_blank">NLM (U.S.)</a></li>
<li><a href="http://library.unbc.ca/" title="UNBC Library Catalogue" target="_blank">UNBC </a></li>
<li><a href="http://www.ubc.ca/okanagan/library/welcome.html" title="UBC Okanagan Library" target="_blank">UBC Okanagan</a></li>
<li><a href="http://library.uvic.ca/" title="U Vic Library Catalogue" target="_blank">U Victoria</a></li>
<li><a href="http://www.vpl.ca/" title="Vancouver Public Library" target="_blank">Vancouver Public </a></li>
</ul>
</li>
<li><a href="professional.html" class="MenuBarItemSubmenu">Professional Practice</a>
<ul>
<li><a href="abstracts.html">Abstracts/Conferences</a></li>
<li><a href="admin.html">Administration</a></li>
<li><a href="guidelines.html">Cancer Guidelines</a></li>
<li><a href="nursing.html">Nursing</a></li>
<li><a href="nutrition.html">Nutrition</a></li>
<li><a href="pharmacy.html">Pharmacy</a></li>
<li><a href="physicians.html">Physicians</a></li>
<li><a href="psychosocial.html">Psychosocial</a></li>
<li><a href="rt.html">RT / Physics</a></li>
<li><a href="researchers.html">Researchers</a></li>
<li><a href="writers.html">Writing & Authors</a></li>
</ul>
</li>
<li><a href="training_bcca.html" class="MenuBarItemSubmenu">Training</a>
<ul>
<li><a href="training_bcca.html" class="MenuBarItemSubmenu">Training Home Page</a>
<ul>
<li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
<li><a href="training_ac.html">AC Training</a></li>
<li><a href="training_csi.html" title="CSI Training">SAHCSI Training</a></li>
<li><a href="training_fvc.html">FVC Training</a></li>
<li><a href="training_vc.html" title="VC Training">VC Training</a></li>
<li><a href="training_vic.html">VIC Training</a></li>
</ul>
</li>
<li><a href="https://edreg.cw.bc.ca/phsaedcalendar/Home.aspx" target="_blank">Learning Hub</a></li>
<li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
<li><a href="primal.html">Primal Pictures</a></li>
</ul>
</li>
<li><a href="library.html" class="MenuBarItemSubmenu">Library Services</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Contacts & Info</a>
<ul>
<li><a href="../Documents/VC_Staff_Information_Sheet.pdf">VC - Vancouver</a></li>
<li><a href="../Documents/VIC_Staff_Information_Sheet.pdf">VIC - Victoria</a></li>
<li><a href="../Documents/SAHCSI_Staff_Information_Sheet.pdf">SAHCSI - Kelowna</a></li>
<li><a href="../Documents/FVC_Staff_Information_Sheet.pdf">FVC - Surrey</a></li>
<li><a href="../Documents/AC_Staff_Information_Sheet.pdf">AC - Abbotsford</a></li>
<li><a href="../Documents/CN_Staff_Information_Sheet_Library.pdf">CN - Prince George</a></li>
<li><a href="http://www.bccancer.bc.ca/PPI/Library/Contacts.htm" target="_blank">Library webpage</a></li>
</ul>
</li>
<li><a href="mailto:[email protected]?subject=Request a Search" title="Request a Search">Request a Search</a></li>
<li><a href="mailto:[email protected]?subject=Request Article(s)" title="Request Articles">Request Articles</a></li>
<li><a href="http://www.bccancer.bc.ca/PPI/RecommendedLinks/default.htm" target="_blank">Recommended Websites</a></li>
<li><a href="autoalerts.html" title="AutoAlert Searches">AutoAlert Searches</a></li>
<li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
<li><a href="pamphlets.html" title="May need an install from IMIT">Pamphlets Database</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="copyright.html" title="Copyright">Copyright</a></li>
<li><a href="patients_reading.html">What patients are reading</a></li>
<li><a href="patients.html" title="Services for Patients">Services for Patients</a></li>
<li><a href="archives.html">Archives</a></li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;"> </div>
</div>
</div>
<div class="contentArea">
<div class="container">
<!-- InstanceBeginEditable name="Content Left" -->
<div class="contentleft">
<h1>Abstracts and Conferences</h1>
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"> AACR</li>
<li class="TabbedPanelsTab" tabindex="0"> ASCO</li>
<li class="TabbedPanelsTab" tabindex="0"> ASH</li>
<li class="TabbedPanelsTab" tabindex="0"> ASTRO</li>
<li class="TabbedPanelsTab" tabindex="0"> CARO</li>
<li class="TabbedPanelsTab" tabindex="0"> ECCO</li>
<li class="TabbedPanelsTab" tabindex="0"> ESMO</li>
<li class="TabbedPanelsTab" tabindex="0"> ESTRO</li>
<li class="TabbedPanelsTab" tabindex="0"> ISPOR</li>
<li class="TabbedPanelsTab" tabindex="0"> San Antonio </li>
<li class="TabbedPanelsTab" tabindex="0"> UICC</li>
<li class="TabbedPanelsTab" tabindex="0"> Finding and Citing</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<h2>AACR - <a href="http://www.aacr.org/" target="_blank">American Association for Cancer Research</a></h2>
<p>These abstracts are available in two places - from the <strong>AACR</strong> website and from the journal <strong>Cancer Research.</strong></p>
<p> </p>
<p><strong>1. Cancer Research. 2009-present</strong>. </p>
<blockquote>
<p>These abstracts were published in the journal <em>Cancer Research</em>. They can be downloaded from the journal to RefWorks.
Use Advanced Search at <a href="http://cancerres.aacrjournals.org/search" target="_blank">http://cancerres.aacrjournals.org/search</a>.
Check the "Search Only Meeting Abstracts" box. You can also limit your search to April of the year you want.</p>
<p> </p>
<p><img src="images/AACR_search_meetings.jpg" alt="Search meetings" width="226" height="55" border="1" /></p>
</blockquote>
<h3>2. <a href="http://www.aacrmeetingabstracts.org/search.dtl" target="_blank">AACR online - <strong>2004-2010</strong></a></h3>
<blockquote>
<p>This online searchable database has the capability to download to RefWorks. </p>
<p> </p>
<p>Try to avoid using the sections called <em>Specify Journals to Search </em>and <em>Specify Meetings to Search</em>. They occasionally cause the search to fail without explanation.</p>
</blockquote>
<blockquote>
<p><strong>Warning</strong>: If you download these abstracts to RefWorks, they download as 'Journal Articles'. For your own sake, you should change the Reference Type to 'Abstract'. (see below)</p>
</blockquote>
<p><strong>3.</strong> <strong>1982-2004 </strong>(Volumes 23-45)</p>
<blockquote>
<p>The BCCA VC Library has print copies of AACR abstract books. Some older versions may need to be retrieved from Storage.</p>
</blockquote>
<h3>AACR Education Book <a href="http://educationbook.aacrjournals.org/search.dtl" target="_blank">2005-current</a></h3>
<blockquote>
<p><strong>Warning</strong>: If you download these abstracts to RefWorks, they download as 'Journal Articles'. For your own sake, you should change the Reference Type to 'Abstract'. (see below)</p>
</blockquote>
<h3>RefWorks: Change Reference Type to 'Abstract'</h3>
<h3> </h3>
<p><img src="images/RW_abstracts.jpg" alt="Change the Reference Type" width="423" height="440" border="1" /></p>
<p> </p>
<h3>Webcasts of 2012 AACR Meeting</h3>
<p> </p>
<p><a href="http://www.aacr.org/page29436.aspx" target="_blank"><img src="images/AACR_2012_webcasts.jpg" alt="Webcasts from 2012 conference" width="325" height="180" border="1" /></a></p>
<p> </p>
<h3>AACR 2013</h3>
<p> </p>
<p><a href="http://www.aacr.org/home/scientists/meetings--workshops/aacr-annual-meeting-2013.aspx" target="_blank"><img src="images/AACR_2013.jpg" alt="AACR 2013" width="154" height="200" border="1" /></a></p>
<p><br />
</p>
</div>
<div class="TabbedPanelsContent">
<h3>ASCO - <a href="http://www.asco.org/" target="_blank">American Society of Clinical Oncology</a></h3>
<p><br />
These abstracts are available in two places - from the journal <strong>JCO</strong> and from the <strong>ASCO</strong> Conference website. </p>
<p> </p>
<h3>1. <a href="http://jco.ascopubs.org/search.dtl">JCO</a> - 2004-current </h3>
<p>These references can be downloaded to RefWorks. Restrict your search of JCO by ticking the box "Specify Sources to Search":</p>
<blockquote>
<p><img src="images/asco_jco.jpg" alt="" width="411" height="79" /></p>
</blockquote>
<br />
<h3>2. <a href="http://jco.ascopubs.org/search.dtl" target="_blank">ASCO</a> - 2007-current</h3>
<p> This database is searchable, <strong>but you</strong> <strong>can't download to RefWorks</strong>. You may use copy and paste to add these abstracts to RefWorks.</p>
<blockquote>
<p><a href="http://www.asco.org/ASCOv2/Meetings/Abstracts" target="_blank">2007 - 2011</a><br />
</p>
<p> </p>
<p> </p>
</blockquote>
<h3>ASCO 2013 </h3>
<h3> <strong>May 31-June 4, 2013 | McCormick Place | Chicago, Illinois</strong></h3>
<p> </p>
<p><a href="http://chicago2013.asco.org/" target="_blank"><img src="images/ASCO_2013.jpg" width="366" height="260" /></a></p>
</div>
<div class="TabbedPanelsContent">
<h3>ASH - <a href="http://www.hematology.org/" target="_blank">American Society of Hematology</a></h3>
<h3><br />
Abstracts</h3>
<p>Published in <em>Blood</em>, these abstracts can be downloaded to RefWorks.</p>
<p><a href="http://abstracts.hematologylibrary.org/content/vol118/issue21/" target="_blank">2011</a></p>
<p><a href="http://abstracts.hematologylibrary.org/content/vol116/issue21/" target="_blank">2010</a></p>
<p><a href="http://bloodjournal.hematologylibrary.org/misc/ASH_Meeting_Abstracts_Info.dtl" target="_blank">2007-current</a></p>
<p><strong><br />
Hematology, </strong>the <em><strong>Education Program Book</strong></em>.<br />
</p>
<p><em><strong><a href="http://www.asheducationbook.org/contents-by-date.0.shtml" target="_blank">Hematology</a></strong></em> is published annually by the American Society of Hematology (ASH) in one volume per year. The <em>Education Program Book</em> provides review articles from the Education Program from the ASH Annual Meeting. In this book, each chapter relates to a session presented at the meeting</p>
<p> </p>
<p><a href="http://asheducationbook.hematologylibrary.org/content/current">Current issue</a></p>
<p><a href="http://www.asheducationbook.org/contents-by-date.0.shtml">Previous issues</a>.</p>
<p> </p>
<h3>ASH 2012 - Atlanta - December 8-12, 2012</h3>
<p> </p>
<p><a href="http://www.hematology.org/meetings/annual-meeting/"><img src="images/ASH_2012.jpg" width="440" height="275" alt="ASH 2012" /></a></p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<h3>ASTRO - <a href="https://www.astro.org/" target="_blank">American Society for Radiation Oncology</a></h3>
<h3><a href="http://www.redjournal.org/content/astro_abstracts" target="_blank">Abstracts</a> - from the annual conference</h3>
<p>These abstracts can be downloaded to RefWorks.</p>
<p> </p>
<p><a href="http://www.astro.org" target="_blank">ASTRO</a>’s role in research includes the promotion and support of basic, translational, clinical and outcomes/health services research and training in radiation oncology, biology and physics. These activities are facilitated through the ASTRO Research Council.</p>
<p> </p>
<p>Founded in 1958, ASTRO’s mission is to advance the practice of radiation oncology by promoting excellence in patient care, providing opportunities for educational and professional development, promoting research and disseminating research results and representing radiation oncology in a rapidly evolving healthcare environment.</p>
<blockquote>
<blockquote>
<blockquote>
<p><em>from:</em> <a href="http://www.astro.org/AboutUs/index.aspx" target="_blank">www.astro.org/AboutUs/index.aspx</a></p>
<p> </p>
</blockquote>
</blockquote>
</blockquote>
<h3>ASTRO 2012 - Boston - October 28-31, 2012</h3>
<p> </p>
<p><a href="https://www.astro.org/Meetings-and-Events/2012-Annual-Meeting/Index.aspx" target="_blank"><img src="images/ASTRO_2012.jpg" alt="ASTRO_2012" width="440" height="108" border="1" /></a></p>
<p> </p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<h3>CARO - <a href="http://www.caro-acro.ca" target="_blank">Canadian Association of Radiation Oncology</a></h3>
<p> </p>
<p>The abstracts are published in print, in <em><a href="http://www.sciencedirect.com/science/journal/01678140" target="_blank">Radiotherapy & Oncology</a></em>. All abstracts are listed in a .pdf document and are not downloadable to RefWorks. To add these abstracts to RefWorks or other citation managers, you must copy and paste.<br />
</p>
<p> </p>
<p>2011 not yet available (as of Mar 1/12)</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/96/supp/S2" target="_blank">2010</a> 96 Suppl 2</p>
<p><a href="../Documents/caro_2009_green_journal_abstracts_sept2.pdf" target="_blank">2009</a> (not yet published in R&O, but the Libary has a copy in .pdf format.)</p>
<p><a href="http://tiny.cc/j4q2r" target="_blank">2008</a> 88 Suppl 1<br />
<a href="http://www.sciencedirect.com/science/journal/01678140/84/supp/S2" target="_blank">2007</a> 84 Suppl 2</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/80/supp/S1" target="_blank">2006</a> 80 Suppl 1</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/76/supp/S1" target="_blank">2005</a> 76 Suppl 1</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/72/supp/S1" target="_blank">2004</a> 72 Suppl 1</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/69/supp/S1" target="_blank">2003</a> 69 Suppl 1</p>
<p><a href="http://www.sciencedirect.com/science/journal/01678140/65/supp/S1" target="_blank">2002</a> 65 Suppl 1</p>
<p><a href="http://www.sciencedirect.com/science/article/pii/S0360301601016728" target="_blank">2001</a> These abstracts were published in <em>Int J Radiat Oncol Biol Phys;</em>50(5):1380-1418<strong>.</strong></p>
<p> </p>
<p> </p>
<h4>CARO 2012 - Ottawa - Sept 12-15</h4>
<p><img src="images/CARO_2013.jpg" width="384" height="192" /></p>
</div>
<div class="TabbedPanelsContent">
<h3>ECCO - <a href="http://www.ecco-org.eu/" target="_blank">European CanCer Organization</a></h3>
<p> </p>
<p><a href="http://www.ecco-org.eu/Conferences/Conferences/Past-conferences.aspx" target="_blank">Past Conferences</a></p>
<ul>
<li><a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html" target="_blank">ECCO 16 2011</a> or <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 47 Suppl 1</a></li>
<li><a href="http://www.ecco-org.eu/ecco_content/ECCO15_AbstractBook/index.html" target="_blank">ECCO 15 2009</a></li>
<li><a href="http://www.ecco-org.eu/ecco_content/ECCO14_AbstractBook/index.html" target="_blank">ECCO 14 2007</a> or CD-ROM in Library: QZ200 E88 2007 vol. 2</li>
<li><a href="http://www.ecco-org.eu/ecco_content/ECCO13_abstractbook/index.html#/1/zoomed" target="_blank">ECCO 13 2005</a> or CD-ROM in Library: QZ200 E88 2005 vol. 2</li>
</ul>
<p>Education Books</p>
<ul>
<li>ECCO 15 2009 <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 45 Suppl 1</a> or CD-ROM in Library: QZ200 J74 2009</li>
<li>ECCO 14 2007 CD-ROM in VC Library: QZ200 E88 2007 vol. 1</li>
<li>ECCO 13 2005 CD-ROM in VC Library: QZ200 E88 2005 vol. 1</li>
</ul>
<h3>ECCO 2013</h3>
<p> </p>
<p><a href="http://eccamsterdam2013.ecco-org.eu/" target="_blank"><img src="images/ECCO_2013.jpg" width="384" height="165" border="1" /></a></p>
</div>
<div class="TabbedPanelsContent">
<h3>ESMO - <a href="http://www.esmo.org/" target="_blank">European Society for Medical Oncology</a></h3>
<p><a href="http://www.esmo.org/education-research/abstracts-virtual-meetings-and-meeting-reports.html">List of meetings</a></p>
<p> </p>
<p><a href="http://www.esmo.org/education-research/educational-books.html" target="_blank">ESMO Educational books</a></p>
<p>ESMO 36 2011 European Journal of Cancer <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html">47 Suppl 1</a></p>
<p>ESMO 35 2010 : Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/21/suppl_8" target="_blank">21 Suppl 8</a> (Milan)</p>
<p>ESMO 34 2009 European Journal of Cancer Supplements <a href="http://www.ecco-org.eu/ecco_content/ECCO15_AbstractBook/index.html">7(2) Sept 2009</a> (Berlin)</p>
<p>or <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 45 Suppl 1</a></p>
<p>ESMO 33 2008 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/19/suppl_8.toc">19 Suppl 8</a> (Stockholm)</p>
<p>ESMO 32 2007 Annals of Oncology <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html" target="_blank">18 Suppl 9</a> (Lugano)</p>
<p>ESMO 31 2006 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/17/suppl_9.toc?etoc" target="_blank">17 Suppl 9</a> (Istanbul)</p>
<p>ESMO 29 2004 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/15/suppl_3.toc" target="_blank">15 Suppl 3</a> (Vienna)</p>
<p> </p>
<h3>ESMO 2013 Amsterdam</h3>
<p> </p>
<p><a href="http://eccamsterdam2013.ecco-org.eu/" target="_blank"><img src="images/ECCO_2013.jpg" width="384" height="165" border="1" /></a></p>
</div>
<div class="TabbedPanelsContent">
<h3>ESTRO - <a href="http://www.estro.org" target="_blank">European Society for Therapeutic Radiology and Oncology</a></h3>
<p> </p>
<p>Many of these abstracts are published in the green journal,<em> Radiotherapy & Oncology</em>. Some of the <a href="http://www.estro-members.org/publications/Pages/AbstractBooks.aspx" target="_blank">abstract books</a> are also available for download from the ESTRO website.</p>
<p>You can't download these abstracts to RefWorks.</p>
<p> </p>
<table width="479" border="0" cellspacing="1" cellpadding="3">
<tr align="left">
<th width="33" scope="row">2011*</th>
<td width="135">30th Annual Meeting</td>
<td width="289"><p>European Journal of Cancer <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html">47 Suppl 1</a></p></td>
</tr>
<tr align="left">
<th scope="row">2010</th>
<td>29th Annual Meeting</td>
<td><a href="http://www.estro-events.org/Documents/ESTRO29_report.pdf" target="_blank">Abstracts</a> (Barcelona) </td>
</tr>
<tr align="left">
<th valign="top" scope="row">2009*</th>
<td valign="top">28th Annual Meeting</td>
<td>(abstracts not available)(ECCO15 / ESTRO 28), Berlin 20-24 September, 2009?)</td>
</tr>
<tr align="left">
<th scope="row">2008</th>
<td>27th Annual Meeting</td>
<td>Radiotherapy & Oncology <a href="http://www.estro-members.org/publications/Documents/ESTRO2720AbstractBook.pdf" target="_blank">88 Suppl 2</a></td>
</tr>
<tr align="left">
<th scope="row">2007*</th>
<td>26th Annual Meeting</td>
<td>(abstracts not found)</td>
</tr>
<tr align="left">
<th scope="row">2006</th>
<td>25th Annual Meeting</td>
<td>Radiotherapy & Oncology <a href="http://www.sciencedirect.com/science?_ob=PublicationURL&_tockey=#TOC#5155#2006#999189999.8 998#665740#FLT#&_cdi=5155&_pubType=J&_auth=y&_acct=C000054470&_version=1&_urlVersion=0&_us erid=1766625&md5=971c04d2d708ca04155e86c400b96821" target="_blank">81 Suppl 1</a></td>
</tr>
<tr align="left">
<th scope="row">2005*</th>
<td>24th Annual Meeting</td>
<td>(abstracts not found)</td>
</tr>
<tr align="left">
<th scope="row">2004</th>
<td>23th Annual Meeting</td>
<td><a href="http://www.estro-members.org/publications/Documents/2AbstractbookESTRO23.pdf" target="_blank">online abstract book</a></td>
</tr>
<tr align="left">
<th scope="row">2003*</th>
<td>22th Annual Meeting</td>
<td>(abstracts not found)</td>
</tr>
<tr align="left">
<th scope="row">2002</th>
<td>21th Annual Meeting</td>
<td>Radiotherapy & Oncology <a href="http://www.sciencedirect.com/science/journal/01678140/64/supp/S1" target="_blank">64 Suppl 1</a></td>
</tr>
<tr align="left">
<th scope="row">2001</th>
<td>20th Annual Meeting</td>
<td>(abstracts not found)</td>
</tr>
<tr align="left">
<th scope="row">2000</th>
<td>19th Annual Meeting</td>
<td>Radiotherapy & Oncology <a href="http://www.sciencedirect.com/science/journal/01678140/56/supp/S1" target="_blank">56 Suppl 1</a></td>
-
Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix
Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix
As an FYI: Adobe discontinued developing the Spry framework last year. And Spry was removed from DW CC. You can keep using Spry if you wish, but most of us have switched to other solutions that work better in IE10 and Touch Screens.
Nancy O. -
Spry Tabbed Panels Display Issue
Hi-
I'm having an issue which involves 3 tabbed panels. Each panel has an image in it. When the page loads the 3 tabbed panel images display "stacked" for a few seconds and then disappear showing the default panel once the page is fully loaded.
Is there any way I can have the page load just showing the default #1 panel - without showing the content in the 2nd and 3rd panels?
I would provide a URL but I do not have it on a public domain yet.
Thanks for any advice.Hi,
It is hard to guess where you have gone wrong with you modified CSS without actually seeing the code.
Have a look here for more background info.
I hope this helps.
Ben -
Tabbed Panels displaying all content in first panel
I'm trying to add a tabbed panels widget to my site but when it displays in browsers, the content from all of the tabs displays as a list in the first tab, and clicking the rest of the tabs does nothing. I just put the out-of-the-box widget onto my site and that won't work either. W3 validating only came up with one error, being: (Line 104, Column 42: there is no attribute "tabindex" <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>)
The page I thew the widget on to test it is http://www.herbsmithrx.com/test.asp
What am I missing?You are missing the javascript constructor script, which should have been inserted on your page below your widget when you inserted the tabbed panels:
Somehow, the script is appearing above your widget in your page. Place this code BELOW your tabbed panels widget on your page:
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
That should fix it right up.
Beth -
Spry Tabbed Panels overwritting popup menu in IE6 and IE7 but display fine in Firefox
I am new to Spry and Dreamweaver CS3 and would appreciate any
help anyone can give. I am having an issue with Spry Tabbed Panels
appearing above a navigation bar pop up menu only in IE6 and IE7.
Everyhting works like expected in FF. I have several product pages
that are exhibiting the same issue. I am not having this issue when
using Spry Accordian. Would someone be able to educate me on what I
can do to fix this problem. One of the product pages that is
exhibiting this problem is
Page
with display issueThe IE browsers implement z-indexing differently than most
browsers ... specifically, IE browsers establish a new z-index
context if you set the position CSS property of an element to
anything other than static.
What this means is that if you set something to
position:relative ... any z-index values of children inside that
element will be relative to that element.
In your case, you seem to have a position relative on your
div FWTableContainer1966866324. If you set the z-index value to
something like 10, you'll notice that it fixes the problem.
--== Kin ==-- -
Spry tabbed panels not selectable and displaying everything
I have a spry tabbed panel with 2 tabs.
In design view, this correctly shows me the contect of each of the tabs (a different table in each) when I click on the tab.
When I run it in live view or the browser however, it displays both tabs TOGETHER, (i.e both table) and I can't select either of the tabs.
I've attached a screen print.
I've tried creating a brand new page with a new tabbed panel and still get the same result.
Any suggestions.Here you go,
This is just a template with a few headers and nothing much else, plus the blank tabbed panel, I did this just to test out the panel.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Layout3.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
<link href="SpryAssets/SpryTabbedPanels_test.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<div id="Righty">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#">Members</a></li>
</ul>
<p> </p>
</div>
Login / Register
<div id="Middle">
<h1 align="center">GuitarSwap</h1>
</div>
</div>
<div id="sidebar1">
<h3>Members Area</h3>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a> </li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a> </li>
</ul>
<h3> </h3>
</div>
<div id="mainContent">
<h3>Adverts</h3>
<!-- end #mainContent -->
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<div id="main3">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<p> </p>
<p> </p>
</div>
<br class="clearfloat" />
<div id="footer">
<p> </p>
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
<h3> </h3>
<script type="text/javascript">
<!--
var = new Spry.Widget.MenuBar("", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html> -
Tabbed Panel using UpdateContent doesn't properly display spry .html page
Quick question. I have a tabbed panel widget with 12 tabs.
I'm using the UpdateContent snippet to pull in .html pages per tab.
when I have straight .html on the pages the content displays
without a problem.
What I need is for each tab to pull in an .html page that
contains a spry table that has an XML data set (think product page
with "next" and "prev" buttons to cycle through the content).
The .html page with the spry table works like a charm...on
it's own. however when I use it in conjunction with the tabbed
panel all I see is the bracketed code (i.e. {imgURL} {productName}
{SKU}) rather than [photo] large T-shirt SKU:1111.
A while ago I did an accordion that had dynamic content per
generated panel -- this utilized the Spry.Data.NestedXMLDataSet
function. A bit of a similar idea although I'm not sure if this
would also work with the tabbed panel.
Any suggestions would be helpful and I can drop the code if
that would also help. Thanks!well, what I have is:
index page with tabbed panel
|
V
click tab
|
V
content from first option .html page loads. this content has
a dataset repeating table.
The main page already had the SpryData.js and also
UpdateContent, as follows:
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('one','siracusa.html');">Siracusa
Micro Crepe</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('two','peony_georgette.html');">Peony
Printed Silk Georgette</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('three','wool_pucker.html');">Wool
Pucker</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('four','textured_dot.html');">Textured
Dot</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('five','textured_cotton.html');">Textured
Cotton</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('six','crane.html');">Crane
Printed Four Ply Silk</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('seven','tencel_jersey.html');">Tencel
Jersey</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('eight','circular_wool.html');">Circular
Stitch Wool</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('nine','silk_burnout.html');">Silk
Burnout</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('ten','organza.html');">Floral
Silk Organza</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('eleven','micro_crepe.html');">Micro
Crepe</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"
id="one">Siracusa</div>
<div class="TabbedPanelsContent" id="two">Peony
Printed</div>
<div class="TabbedPanelsContent" id="three">Wool
Pucker</div>
<div class="TabbedPanelsContent" id="four">Textured
Dot</div>
<div class="TabbedPanelsContent" id="five">Textured
Cotton</div>
<div class="TabbedPanelsContent" id="six">Crane
Printed Four Ply Silk</div>
<div class="TabbedPanelsContent" id="seven">Tencel
Jersey</div>
<div class="TabbedPanelsContent" id="eight">Circular
Stitch Wool</div>
<div class="TabbedPanelsContent" id="nine">Silk
Burnout</div>
<div class="TabbedPanelsContent" id="ten">Floral Silk
Organza</div>
<div class="TabbedPanelsContent" id="eleven">Micro
Crepe</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
Let's say you clicked on the Siracusa tab. This would call up
siracusa.html, which has
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<link href="../../ed_style.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
<!--
var fall08 = new Spry.Data.XMLDataSet("fall_collection.xml",
"collection/outfits", { filterFunc: MyPagingFunc });
fall08.setColumnType("photoURL", "image");
fall08.setColumnType("lrgphoto", "image");
var pageOffset = 0;
var pageSize = 1;
var pageStop = pageOffset + pageSize;
//var dsfall08 = new
Spry.Data.XMLDataSet("fall_collection.xml", "collection/outfits", {
filterFunc: MyPagingFunc });
function MyPagingFunc(ds, row, rowNumber)
if (rowNumber < pageOffset || rowNumber >= pageStop)
return null;
return row;
function UpdatePage(offset)
var numRows = fall08.getUnfilteredData().length;
if (offset > (numRows - pageSize))
offset = numRows - pageSize;
if (offset < 0)
offset = 0;
pageOffset = offset;
pageStop = offset + pageSize;
// Re-apply our non-destructive filter on dsStates1:
fall08.filter(MyPagingFunc);
-->
</script>
Sircusa Micro Crepe
<div spry:region="fall08">
<table>
<tr spry:repeatchildren="fall08">
<td colspan="5 "><img
src="imx/{photoURL}"/></td>
</tr>
<tr spry:repeatchildren="fall08">
<td><a href="imx/{lrgphoto}"
target="_blank">enlarge</a></td>
<td>{SKU1}</td>
<td>{SKU2}</td>
<td>{SKU3}</td>
<td>{name}</td>
<td>{desc}</td>
</tr>
</table>
<input type="button" value="Prev"
onclick="UpdatePage(pageOffset - pageSize);" />
<input type="button" value="Next"
onclick="UpdatePage(pageOffset + pageSize);" />
</div>
siracusa.html works more than fine. pulls in the photo, link,
SKU and info without any problem.
When you're on the base page with the tabbed panel the only
thing that comes up are the bracketed info, i.e. {SKU} {SKU1}
{SKU2}.
What I need help with is actually having the pulled in data
table (in the various tabbed panel content areas) actually then
populate the repeat regions rather than just showing the
code...
Maybe you are looking for
-
In iMovie, how do you modify the duration of all the clips at once?
In iMovie, using Mavericks O/S, how do you modify the duration of all the clips at once?
-
Set default timezone for users
Hello all, I am looking a for a way to set the default timezone of a user on the Portal. What needs to be done is to read the user's local time on the pc and set the timezone on the Portal accordingly. Does SAP provide any solution for the same? I am
-
Why do I get an error 150.30 whenever I attempt to open Photoshop on a Mac
Why do I get an error 150.30 whenever I attempt to open Photoshop on a Mac
-
I was trying to develop a data cartridge. I tried the sample code Power Demand Cartridge Example (chapter 11)given in Oracle Documentation "Oracle 8i Data Cartridge Developer's Guide Release 2 (8.1.6)". All objects, indextypes, tables and indexes wer
-
hi is there any one who has experienced the cluster creation on two or more desktop PCs conenctd with each other using simple network wihtout any external storage disk array (Using normal hard disks found in PCs) is it possible? if yes then can anyon