I am using StepCarousel on my page but have it hidden in a span until the span is viewed, i can get the carousel to hide but the buttons do not hide, i think this is a css problem.
css for carousel is as follows
this is the used in the following code
All works fine except the buttons appear in the top left corner of the page??
css for carousel is as follows
Code:
<style type="text/css">
.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 600px; /*Width of Carousel Viewer itself*/
height: 100px; /*Height should enough to fit largest content's height*/
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 125px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style>
Code:
<span class="voicedesc"><%=yaketyRecordset("voicedesc")%></span><a id="displayText" href="javascript:toggle();" class="moreitalic"> Read Biog</a><br>
<span id="toggleText" style="display: none" class="biotext"><div id="mygallery" class="stepcarousel" align="center">
<div class="belt">
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=11" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/waldhorn/kwik fit.jpg" Title="Kwik Fit - Gary Waldhorn" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=12" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/adams/shape.jpg" Title="Shape - Kelly Adams" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=13" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/degas/nestle.jpg" Title="Nestle - Rupert Degas" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=14" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/elliott/johnson.jpg" Title="Johnson & Johnson 24 Hour Moisture Body Lotion - Jonell Elliott" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=8" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/ashby/mr kipling.jpg" Title="Mr Kipling - Robert Ashby" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=10" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/evans/viking.jpg" Title="Viking - Chris Evans" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=3" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/yorke/Happy Meals Mudpuddle.jpg" Title="McDonalds Happy Meals - Stephen Alan Yorke" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=6" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/kaye/hyundai.jpg" Title="Hyundai - Paul Kaye" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=4" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/buffery/Digital UK.jpg" Title="Digital UK - Kate Buffery" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=5" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/brown/freeview rugby world cup.jpg" Title="Freeview Rugby World Cup - Warren Brown" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=7" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/webb/sky multiroom.jpg" Title="Sky Multiroom - Niamh Webb" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=9" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/piper/debenhams.jpg" Title="Debenhams - Billie Piper" border="0" /></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=1" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/long/snickers.jpg" Title="Snickers - Jordan Long" border="0"/></a>
</div>
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=2" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/williams/loctite.jpg" Title="Loctite - Lee Williams" border="0" /></a>
</div>
</div>
</div>
</span>
Comment