Hi everyone,
As I wrote in the summary, I’ve had some success getting my site to look like I want it w/ the help of jQuery, but I’ve found that when java is turned off in the browser, things get messed up, particularly jCarousel lite.
Does anyone have any suggestions on changes I can make to keep this site functional in these circumstances?
Thanks
code for the 1st carousel in index.php (best sellers):
<div id="newDemo">
<div class="carousel main">
<a href="#" class="prev2"> </a>
<div class="new">
<ul>
<li>...</li>
...
...
<li>...</li>
</ul>
</div>
<a href="#" class="next2"> </a>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
$(".new").jCarouselLite({
btnNext: ".next2",
btnPrev: ".prev2",
visible: 4
});
});
</script>
stylesheet entries for the 1st instance of the carousel (best sellers):
/*_____________________________________________ Start - Projects - jCarouselLiteDemo _____________________________________________*/
#jCarouselLiteDemo .carousel {
padding: 10px 0 0 0;
margin: 0 0 20px 10px;
position: relative;
}
#jCarouselLiteDemo .main {
margin-left: 0px;
}
#jCarouselLiteDemo .carousel button { /*Don't remove this. we still use this for individual demos. only the front pages use images as of now*/
float: left;
}
#jCarouselLiteDemo .carousel a.prev, #jCarouselLiteDemo .carousel a.next {
display: block;
float: left;
width: 30px;
height: 143px;
text-decoration: none;
background: url("/images/home_page/imageNavLeft.gif") left 60px no-repeat;
}
#jCarouselLiteDemo .carousel a.next {
background: url("/images/home_page/imageNavRight.gif") right 60px no-repeat;
}
#jCarouselLiteDemo .carousel a.next:hover {
background-image: url("/images/home_page/imageNavRightHover.gif");
}
#jCarouselLiteDemo .carousel a.prev:hover {
background-image: url("/images/home_page/imageNavLeftHover.gif");
}
#jCarouselLiteDemo .carousel a:hover, #jCarouselLiteDemo .carousel a:active {
border: none;
outline: none;
}
#jCarouselLiteDemo .carousel .jCarouselLite {
border: 0px solid black;
float: left;
background-color: #ffffff;
/* Needed for rendering without flicker */
position: relative;
visibility: hidden;
left: -5000px;
}
#jCarouselLiteDemo .carousel ul {
margin: 0;
}
#jCarouselLiteDemo .carousel li img,
#jCarouselLiteDemo .carousel li p {
background-color: #fff;
width: 156px;
height: 118px;
margin: 0px 10px 0px 10px;
}
#jCarouselLiteDemo .imageSlider li img,
#jCarouselLiteDemo .imageSlider li p,
#jCarouselLiteDemo .imageSliderExt li img ,
#jCarouselLiteDemo .imageSliderExt li p {
width: 400px;
height: 300px;
}
#jCarouselLiteDemo a img {
border:0px solid #072B8A;
margin: 0px 0px 0px 0px;
vertical-align: top;
}
#jCarouselLiteDemo a:hover img {
border:0px solid #95B3D7
}
/*_____________________________________________ End - Projects - jCarouselLiteDemo _____________________________________________*/