Hi,
after much fiddling, i figured out that in Mozilla the
jquery.jcarousel.css gets rendered last (or has priorit) and the
classes that relate to the buttons in the mentioned file did not have
the image declaration as that resides in the skin.css file hence the
images for the arrows were not showing even though the alignment and
even the click event for the image containing divs were working fine.
so basically i move the following lines over into their respective
classes in the jquery.jcarousel.css and it worked:
background : transparent url(../skins/tango/next-horizontal.png) no-
repeat 0 0; into the .jcarousel-next class
AND
background : transparent url(../skins/tango/prev-horizontal.png) no-
repeat 0 0; into the .jcarousel-prev class
it is a very weired behaviour of Mozilla but at least i got it right.
as for IE, it doesnt care in which one of the files mentioned the
image declaration resides.
thanks for trying to help anyways.
ciao.
On Mar 13, 2:16 pm, chrismarx <[EMAIL PROTECTED]> wrote:
> i recently implement jcarousel on one of my own pages, and i ran into
> the same problem, but i noticed that the buttons worked after the
> browser window was resized. if you look, there are some methods that
> "refresh" the jcarousel on window resize, and calling these methods
> after initialization have fixed the problem for me in firefox.
>
> it was a little tricky storing a reference to the carousel reference,
> i did so in the function i used for the itemLoadCallback
>
> //helper function
> function mycarousel_itemLoadCallback(carousel, state) {
> self.mycarousel = carousel;
> for (var i = carousel.first; i <= carousel.last; i++) {
> if (carousel.has(i)) {
> continue;
> }
> if (i > self.mycarousel_itemList.length) {
> break;
> }
> carousel.add(i,
> self.mycarousel_getItemHTML(self.mycarousel_itemList[i-1]));
> }
> };
>
> where self refers the a parent functions property that could then
> store the reference to the carousel.
> after that, you can call:
>
> mycarousel.reload();
>
> to get those buttons to work.
> hope that helps-
>
> On Feb 26, 6:42 am,Tal<[EMAIL PROTECTED]> wrote:
>
>
>
> > I've pasted all the code you need in my message. assuming you have the
> > rest of the files.
>
> > I cant give you a link to my page as it is on my company's intranet.
>
> > below is the latest version of my attempt:
>
> > (using the tango skin - skin.css)
> > [css]
> > .jcarousel-skin-tango.jcarousel-container-horizontal
> > {
> > width : 450px;
> > padding : 0px;
>
> > }
>
> > .jcarousel-skin-tango.jcarousel-container-vertical
> > {
> > width : 115px;
> > height : 365px;
> > padding : 40px 0px 40px 0px;
>
> > }
>
> > .jcarousel-skin-tango.jcarousel-clip-horizontal
> > {
> > width : 365px;
> > height : 115px;
>
> > }
>
> > .jcarousel-skin-tango.jcarousel-clip-vertical
> > {
> > width : 115px;
> > height : 365px;
>
> > }
>
> > .jcarousel-skin-tango.jcarousel-item
> > {
> > width : 115px;
> > height : 115px;
>
> > }
>
> > .jcarousel-skin-tango.jcarousel-item-horizontal{ margin-right :
> > 10px; }
>
> > .jcarousel-skin-tango.jcarousel-item-vertical{ margin-bottom : 10px; }
>
> > .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 center
> > center;
>
> > }
>
> > .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 center
> > center;
>
> > }
>
> > .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 : 43px;
> > 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 : 43px;
> > 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]
>
> > (jCarousel core CSS - jquery.jcarousel.css)
> > [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 : 115px;
> > height : 115px;
> > cursor : pointer;
> > margin-right : 10px;
> > #margin-right : 0px;
>
> > }
>
> > /**
> > * 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;*/
> > border : 1px solid #000000;
> > width : 34px;
> > height : 34px;
>
> > }
>
> > .jcarousel-prev
> > {
> > position : relative;
> > float : left;
> > margin-top : 27px;
> > z-index : 3;
> > /*display : none;*/
> > border : 1px solid #000000;
> > width : 34px;
> > height : 34px;}
>
> > [/css]
>
> > (create a page with the following)
> > [html]
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> > <html>
> > <head>
> > <title>libellus - 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>
>
> ...
>
> read more »- Hide quoted text -
>
> - Show quoted text -
