[jQuery] jCarousel : works great in FF but broken in IE HELP PLEASE
I have a page that is doing a combo of things
mutiple scrollers on the page each in a UI.tab
each being dynamically generated.
and I need to use external controls with this
The Page works flawlessly in FF
but in IE it will not scroll.... Any help greatly appreciated
_________________________________________________________
link to page:
http://www.layerdynamics.com/gotgamefinal/tabpanel2.html
____________________________________________________________
code of page:
// end jQuery
//custom
var car1;
var car2;
var car3;
function mycarousel_initCallback(carousel, state) {
alert(state);
if (state == 'init'){
//display('Carousel initialised');
}
else if (state == 'reset'){
//display('Carousel reseted');
}
car1 = carousel;
jQuery('#leftcontrolbut').bind('click', function() {
carousel.prev();
return false;
});
jQuery('#rightcontrolbut').bind('click', function() {
car1.next();
return false;
});
};
function mycarousel_initCallback2(carousel1, state) {
if (state == 'init'){
//display('Carousel initialised');
}
else if (state == 'reset'){
//display('Carousel reseted');
}
jQuery('#rightcontrol2but').bind('click', function() {
carousel1.next();
return false;
});
jQuery('#leftcontrol2but').bind('click', function() {
carousel1.prev();
return false;
});
};
function mycarousel_initCallback3(carousel2, state) {
if (state == 'init'){
//display('Carousel initialised');
}
else if (state == 'reset'){
//display('Carousel reseted');
}
jQuery('#rightcontrol3but').bind('click', function() {
carousel2.next();
return false;
});
jQuery('#leftcontrol3but').bind('click', function() {
carousel2.prev();
return false;
});
};
function mycarousel_itemLoadCallback(carousel, state)
{
// Check if the requested items already exist
if (carousel.has(carousel.first, carousel.last)) {
return;
}
jQuery.get('http://www.layerdynamics.com/gotgamefinal/
getscrollerdata.php', {q: 'last', f: carousel.first, l:
carousel.last},
function(data) {
//alert(data);
mycarousel_itemAddCallback(carousel, carousel.first,
carousel.last, data);
}
);
};
function mycarousel_itemLoadCallback2(carousel, state)
{
// Check if the requested items already exist
if (carousel.has(carousel.first, carousel.last)) {
return;
}
jQuery.get('http://www.layerdynamics.com/gotgamefinal/
getscrollerdata.php', {q: 'most', f: carousel.first, l:
carousel.last},
function(data) {
//alert(data);
mycarousel_itemAddCallback(carousel, carousel.first,
carousel.last, data);
}
);
};
function mycarousel_itemLoadCallback3(carousel, state)
{
// Check if the requested items already exist
if (carousel.has(carousel.first, carousel.last)) {
return;
}
jQuery.get('http://www.layerdynamics.com/gotgamefinal/
getscrollerdata.php', {q: 'top', f: carousel.first, l: carousel.last},
function(data) {
//alert(data);
mycarousel_itemAddCallback(carousel, carousel.first,
carousel.last, data);
}
);
};
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
//alert(xml);
// Set the size of the carousel
carousel.size(parseInt(jQuery('count', xml).text()));
var data = jQuery.xml2json(xml);
jQuery.each(data.video, function(i,video){
var imager = data.video[i].image;
var title = data.video[i].title;
var line2 = data.video[i].line2;
var VID = data.video[i].VID;
var VIDLINK = "playVid('http://www.leettube.com/flvideo/" + VID +
".flv','" + VID + "');";
var colorchange = "jQuery(this).css('backgroundColor','#49494b');"
var colorchange2 =
"jQuery(this).css('backgroundColor','transparent');"
var inhtml = '<li onMouseover="' + colorchange + '" onMouseout="'
+
colorchange2 + '" onClick="' + VIDLINK + '" ><img src="' + imager + '"
class="vidimgbut" width="120" height="67" border="0" alt="">
<span
class="line1">' + title + '</span><span class="line2">' + line2 +
'</span></li>';
carousel.add(first + i, inhtml);
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 3,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null,
itemLoadCallback: mycarousel_itemLoadCallback
});
jQuery('#mycarousel2').jcarousel({
scroll: 3,
initCallback: mycarousel_initCallback2,
buttonNextHTML: null,
buttonPrevHTML: null,
itemLoadCallback: mycarousel_itemLoadCallback2
});
jQuery('#mycarousel3').jcarousel({
scroll: 3,
initCallback: mycarousel_initCallback3,
buttonNextHTML: null,
buttonPrevHTML: null,
itemLoadCallback: mycarousel_itemLoadCallback3
});
jQuery("#LD_PLAYER_SCROLL_OUTER > ul").tabs();
});
//end cusotm
__________________________________________________________________________________
HTML OF PAGE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link href="scroller_skin/skin.css" type="text/css" rel="stylesheet">
<script type="text/javascript"
src="scripts/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="scripts/scroller.js"></script>
</head>
<body style="background-color:#4D4D4D;" >
<div id='LD_PLAYER_SCROLL_OUTER'>
<ul>
<li><a href="#fragment-1"><span>Last Viewed</span></
a></li>
<li><a href="#fragment-2"><span>Most Viewed</span></
a></li>
<li><a href="#fragment-3"><span>Top Rated</span></a></
li>
</ul>
<div id='fragment-1'>
<div class="scrollerouter1">
<div id="leftcontrol" class="leftcontrol">
<a href="#" id="leftcontrolbut">
<img src="images/
scroller_left_button.png" width="21" height="97"
border="0" alt="">
</a>
</div>
<div class="scrollimgholder">
<ul id="mycarousel" class="jcarousel-
skin-ie7">
</ul>
</div>
<div id="rightcontrol" class="rightcontrol">
<a href="#" onclick="alert('test');
car1.next();"
id="rightcontrolbut">
<img src="images/
scroller_right_button.png" width="21" height="97"
border="0" alt="">
</a>
</div>
</div>
</div>
<div id='fragment-2'>
<div class="scrollerouter2">
<div id="leftcontrol2" class="leftcontrol">
<a href="#" id="leftcontrol2but>
<img src="images/
scroller_left_button.png" width="21" height="97"
border="0" alt="">
</a>
</div>
<div class="scrollimgholder">
<ul id="mycarousel2" class="jcarousel-
skin-ie7">
</ul>
</div>
<div id="rightcontrol2" class="rightcontrol">
<a href="#" id="rightcontrol2but">
<img src="images/
scroller_right_button.png" width="21" height="97"
border="0" alt="">
</a>
</div>
</div>
</div>
<div id='fragment-3'>
<div class="scrollerouter3">
<div id="leftcontrol3" class="leftcontrol">
<a href="#" id="leftcontrol3but">
<img src="images/
scroller_left_button.png" width="21" height="97"
border="0" alt="">
</a>
</div>
<div class="scrollimgholder">
<ul id="mycarousel3" class="jcarousel-
skin-ie7">
</ul>
</div>
<div id="rightcontrol3" class="rightcontrol">
<a href="#" id="rightcontrol3but"><img
src="images/scroller_right_button.png" width="21" height="97"
border="0"
alt="">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
___________________________________________________________________________________
CSS of Page
.jcarousel-container {
position: relative;
}
.jcarousel-clip {
z-index: 2;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}
.jcarousel-list {
z-index: 1;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.jcarousel-list li,
.jcarousel-item {
float: left;
list-style: none;
/* We set the width/height explicitly. No width/height causes
infinite loops. */
width: 122px;
height: 100px;
text-align: center;
}
.jcarousel-skin-ie7 .jcarousel-container {
-moz-border-radius: 10px;
}
.jcarousel-skin-ie7 .jcarousel-container-horizontal {
width: 510px;
}
.jcarousel-skin-ie7 .jcarousel-container-vertical {
width: 75px;
height: 245px;
padding: 40px 20px;
}
.jcarousel-skin-ie7 .jcarousel-clip-horizontal {
width: 505px;
height: 100px;
}
.jcarousel-skin-ie7 .jcarousel-clip-vertical {
width: 77px;
height: 245px;
}
.jcarousel-skin-ie7 .jcarousel-item {
width: 125px;
height: 100px;
color: white;
line-height: 70%
}
.jcarousel-skin-ie7 .jcarousel-item:hover {
border-color: #808080;
}
.jcarousel-skin-ie7 .jcarousel-item-horizontal {
margin-right: 7px;
}
.jcarousel-skin-ie7 .jcarousel-item-vertical {
margin-bottom: 7px;
}
.jcarousel-skin-ie7 .jcarousel-item-placeholder {
}
/**
* Horizontal Buttons
*/
.jcarousel-skin-ie7 .jcarousel-next-horizontal {
position: absolute;
top: 43px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-horizontal.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-ie7 .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal,
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal {
position: absolute;
top: 43px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-horizontal.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
/**
* Vertical Buttons
*/
.jcarousel-skin-ie7 .jcarousel-next-vertical {
position: absolute;
bottom: 5px;
left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-vertical.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-next-vertical:hover {
background-position: 0 -32px;
}
.jcarousel-skin-ie7 .jcarousel-next-vertical:active {
background-position: 0 -64px;
}
.jcarousel-skin-ie7 .jcarousel-next-disabled-vertical,
.jcarousel-skin-ie7 .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-ie7 .jcarousel-next-disabled-vertical:active {
cursor: default;
background-position: 0 -96px;
}
.jcarousel-skin-ie7 .jcarousel-prev-vertical {
position: absolute;
top: 5px;
left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-vertical.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-vertical:hover {
background-position: 0 -32px;
}
.jcarousel-skin-ie7 .jcarousel-prev-vertical:active {
background-position: 0 -64px;
}
.jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical:active {
cursor: default;
background-position: 0 -96px;
}
.leftcontrol {
position: absolute;
left:0px;
top:4px;
width:21px;
height:97px;
}
.rightcontrol {
position: absolute;
left:537px;
top:4px;
width:21px;
height:97px;
}
.scrollimgholder{
left:25px;
position:absolute;
top:6px;
}
.line1{
color:#920000;
display:block;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
overflow:hidden;
white-space:nowrap;
width:120px;
}
.line2{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
overflow:hidden;
white-space:nowrap;
width:120px;
}
.scrollerouter1 {
width: 558px;
}
.scrollerouter2 {
width: 558px;
}
.scrollerouter3 {
width: 558px;
}
#LD_PLAYER_SCROLL_OUTER{
width: 558px;
//height: 135px;
left: 100px;
top: 200px;
position:relative;
background-color: black;
}
.ui-tabs-nav{
list-style: none;
margin: 0;
padding-top: 0;
padding-left: 30px;
padding-right: 0;
padding-top: 1px;
text-align:center;
text-decoration: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: white;
position: relative;
display: inline;
}
.ui-tabs-nav a{
text-decoration: none;
color: white;
vertical-align: -25%;
}
.ui-tabs-nav li {
float:left;
width:96px;
height:26px;
background-image:
url('http://www.layerdynamics.com/gotgamefinal/images/tabdark.png');
}
.ui-tabs-nav .ui-tabs-selected{
font-weight:bold;
background-image:
url('http://www.layerdynamics.com/gotgamefinal/images/tablite.png');
}
.ui-tabs-unselect li{
background-image:
url('http://www.layerdynamics.com/gotgamefinal/images/tabdark.png');
}
.ui-tabs-disabled{
background-image:
url('http://www.layerdynamics.com/gotgamefinal/images/tabdark.png');
}
.ui-tabs-panel{
width: 558px;
height: 105px;
position: relative;
top: 0px;
background-color:#1A1A1A;
background-image:
url('http://www.layerdynamics.com/gotgamefinal/images/
imgareaback.png');
}
.ui-tabs-hide{
display: none;
}
.vidimgbut{
text-align: center;
border: thin inset ;
border-color: #434142;
}