[jQuery] vertical scroll of jcarousel in Mozilla and Safari
Hi all,
I tried to use the vertical specification of the JCarousel but for
some reason it doesnt work in Mozilla or Safari.
In IE7 it asks you whether you want to allow active content and as
soon as you allow it, it seems to work fine, most of the time.
Did anyone encounter a problem with the vertical display? and does
anyone know how to solve it?
here is my css files as well as the html file:
[css name="jquery.jcarousel.css"]
/**
* This <div> element is wrapped by jCarousel around the list
* and has the classname "jcarousel-container".
*/
/*#mycarousel{ display : none; }*/
.jcarousel-container{ position : relative; }
.jcarousel-clip
{
z-index : 2;
padding : 0;
margin : 0px 0px 10px 7px;
#margin : 0;
overflow : hidden;
position : relative;
float : left;
#float : none;
width : 365px;
}
.jcarousel-list
{
z-index : 1;
overflow : hidden;
position : relative;
top : 0;
left : 0;
margin : 0;
padding : 0;
}
.jcarousel-item
{
float : left;
list-style : none;
/* We set the width/height explicitly. No width/height causes
infinite loops. */
width : 144px;
height : 132px;
cursor : pointer;
/*margin-right : 10px;
#margin-right : 0px;*/
margin-bottom : 5px;
}
/**
* The buttons are added dynamically by jCarousel before
* the <ul> list (inside the <div> described above) and
* have the classnames "jcarousel-next" and "jcarousel-prev".
*/
.jcarousel-next
{
/*position : relative;
float : right;
margin-top : 27px;*/
z-index : 3;
/*display : none;*/
width : 34px;
height : 34px;
cursor : pointer;
background : transparent url(../skins/tango/next-vertical.png) no-
repeat 0 0;
}
.jcarousel-prev
{
/*position : relative;
float : left;
margin-top : 27px;*/
z-index : 3;
/*display : none;*/
width : 34px;
height : 34px;
cursor : pointer;
background : transparent url(../skins/tango/prev-vertical.png) no-
repeat 0 0;
}
[/css]
[css name="skin.css"] (tango)
.jcarousel-skin-tango.jcarousel-container-horizontal
{
width : 450px;
padding : 0px;
}
.jcarousel-skin-tango.jcarousel-container-vertical
{
width : 147px;
height : 580px;
padding : 40px 0px 40px 0px;
}
.jcarousel-skin-tango.jcarousel-clip-horizontal
{
width : 365px;
height : 115px;
}
.jcarousel-skin-tango.jcarousel-clip-vertical
{
width : 147px;
height : 580px;
}
.jcarousel-skin-tango.jcarousel-item
{
width : 144px;
height : 132px;
}
.jcarousel-skin-tango.jcarousel-item-horizontal{ margin-right :
10px; }
.jcarousel-skin-tango.jcarousel-item-vertical{ margin-bottom : 5px; }
.jcarousel-skin-tango.jcarousel-item-placeholder
{
background : #FFFFFF;
color : #000000;
}
/* Horizontal Buttons */
.jcarousel-skin-tango.jcarousel-next-horizontal
{
position : absolute;
top : 43px;
right : 5px;
width : 32px;
height : 32px;
/*cursor : pointer;*/
/*background : transparent url(next-horizontal.png) no-repeat 0
0;*/
}
.jcarousel-skin-tango.jcarousel-next-horizontal:hover{ background-
position : -32px 0; }
.jcarousel-skin-tango.jcarousel-next-horizontal:active{ background-
position : -64px 0; }
.jcarousel-skin-tango.jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango.jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango.jcarousel-next-disabled-horizontal:active
{
cursor : default;
background-position : -96px 0;
}
.jcarousel-skin-tango.jcarousel-prev-horizontal
{
position : absolute;
top : 43px;
left : 5px;
width : 32px;
height : 32px;
/*cursor : pointer;*/
/*background : transparent url(prev-horizontal.png) no-repeat 0
0;*/
}
.jcarousel-skin-tango.jcarousel-prev-horizontal:hover{ background-
position : -32px 0; }
.jcarousel-skin-tango.jcarousel-prev-horizontal:active{ background-
position : -64px 0; }
.jcarousel-skin-tango.jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango.jcarousel-prev-disabled-horizontal:active
{
cursor : default;
background-position : -96px 0;
}
/* Vertical Buttons */
.jcarousel-skin-tango.jcarousel-next-vertical
{
position : absolute;
bottom : 5px;
left : 53px;
width : 32px;
height : 32px;
/*cursor : pointer;
background : transparent url(next-vertical.png) no-repeat 0 0;*/
}
.jcarousel-skin-tango.jcarousel-next-vertical:hover{ background-
position : 0 -32px; }
.jcarousel-skin-tango.jcarousel-next-vertical:active{ background-
position : 0 -64px; }
.jcarousel-skin-tango.jcarousel-next-disabled-vertical,
.jcarousel-skin-tango.jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango.jcarousel-next-disabled-vertical:active
{
cursor : default;
background-position : 0 -96px;
}
.jcarousel-skin-tango.jcarousel-prev-vertical
{
position : absolute;
top : 5px;
left : 53px;
width : 32px;
height : 32px;
/*cursor : pointer;
background : transparent url(prev-vertical.png) no-repeat 0 0;*/
}
.jcarousel-skin-tango.jcarousel-prev-vertical:hover{ background-
position : 0 -32px; }
.jcarousel-skin-tango.jcarousel-prev-vertical:active{ background-
position : 0 -64px; }
.jcarousel-skin-tango.jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango.jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango.jcarousel-prev-disabled-vertical:active
{
cursor : default;
background-position : 0 -96px;
}
[/css]
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>itintranet - home</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<!-- jCarousel core stylesheet -->
<link rel="stylesheet" type="text/css" href="js/jcarousel/lib/
jquery.jcarousel.css" />
<!-- jCarousel skin stylesheet -->
<link rel="stylesheet" type="text/css" href="js/jcarousel/
skins/tango/skin.css" />
<style type="text/css">
<!--
/* Additional styles for the controls. */
.jcarousel-control
{
width : 365px;
margin-bottom : 10px;
text-align : center;
}
.jcarousel-control a
{
font-size : 75%;
text-decoration : none;
padding : 0 5px;
margin : 0 0 5px 0;
border : 1px solid #FFFFFF;
color : #EEEEEE;
background-color : #05AAE8;
font-weight : bold;
}
.jcarousel-control a:focus, .jcarousel-control
a:active, .jcarousel-control a:hover
{
color : #FC4FF0;
font-size : 75%;
font-weight : bold;
outline : none;
}
.jcarousel-scroll
{
width : 365px;
margin-top : 10px;
text-align : center;
}
.jcarousel-scroll form
{
margin : 0;
padding : 0;
}
.jcarousel-scroll select{ font-size : 75%; }
a#mycarousel-next ,a#mycarousel-prev
{
color : #333333;
font-family : Arial, "Trebuchet ms", sans-serif;
text-decoration : underline;
font-size : 11px;
font-weight : normal;
text-decoration : underline;
cursor : pointer;
margin-top : 5px;
}
a:visited#mycarousel-next, a:visited#mycarousel-prev{ color :
#666666; }
a:active#mycarousel-next, a:active#mycarousel-prev{ color :
#FC4FFE; }
a:hover#mycarousel-next, a:hover#mycarousel-prev{ color :
#00ABEC; }
-->
</style>
<!-- IMAGE SCROLLER
----------------------------------------------------------------------------------------