[jQuery] jcarousel not working with latest jQuery
Hi All, I've found a very odd thing. I tried to upgrade my jQuery to the latest (v. 1.3.2) but then jcarousel is not working. The left and right arrows don't show. Anyone has any idea as to why would that be? Regards, Tal.
[jQuery] jcarousel not rendering in Mozilla Fire Fox v3.0.6
Hi guys,
In IE7 my jcarousel works perfectly however in Mozilla FF it remains
vertical, show the list bullets, does not show the arrows and on top
of all, when i try to throw it off by doing something drastic to the
CSS files it shows no effect at all.
It seems to me like its not rendering the files at all.
I'm using the Tango skin.
Any ideas?
here is my CSS:
jquery.jcarousel.css
[css]
/**
* This div element is wrapped by jCarousel around the list
* and has the classname jcarousel-container.
*/
.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 : 123px;
height : 120px;
text-align : center;
}
/**
* 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
{
z-index : 3;
display : none;
}
.jcarousel-prev
{
z-index : 3;
display : none;
}
[/css]
skin.css
[css]
.jcarousel-skin-tango .jcarousel-container
{
-moz-border-radius : 10px;
background-color : #FF;
}
.jcarousel-skin-tango .jcarousel-container-horizontal
{
width : 500px;
padding : 20px 40px;
}
.jcarousel-skin-tango .jcarousel-container-vertical
{
width : 75px;
height : 500px;
padding : 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal
{
width : 500px;
height : 120px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical
{
width : 100px;
height : 500px;
}
.jcarousel-skin-tango .jcarousel-item
{
width : 123px;
height : 120px;
text-align : center;
}
.jcarousel-skin-tango .jcarousel-item-horizontal{ margin-right :
0px; }
.jcarousel-skin-tango .jcarousel-item-vertical{ margin-bottom :
10px; }
.jcarousel-skin-tango .jcarousel-item-placeholder
{
background-color : #FF;
color: #00;
}
/**
* Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal
{
position : absolute;
top: 60px;
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: 60px;
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 : 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
[jQuery] Re: jcarousel not rendering in Mozilla Fire Fox v3.0.6
no worries, i solved it.
apparently in Mozilla FF the file order needed to be exactly as it is
in the example files i.e. javascript files filrst and then the css
file and then the extra javascript that you would put for
customization.
also i changed the DOCTYPE to transitional fro strict. i dont know if
that helped at all but thats how it is in the examples.
anyways, that did the trick.
needless to say IE is much more forgiving and is much easier to design
for.
Ciao,
Tal.
On Feb 13, 3:58 pm, Tal talor...@gmail.com wrote:
Hi guys,
In IE7 my jcarousel works perfectly however in Mozilla FF it remains
vertical, show the list bullets, does not show the arrows and on top
of all, when i try to throw it off by doing something drastic to the
CSS files it shows no effect at all.
It seems to me like its not rendering the files at all.
I'm using the Tango skin.
Any ideas?
here is my CSS:
jquery.jcarousel.css
[css]
/**
* This div element is wrapped by jCarousel around the list
* and has the classname jcarousel-container.
*/
.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 : 123px;
height : 120px;
text-align : center;
}
/**
* 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
{
z-index : 3;
display : none;
}
.jcarousel-prev
{
z-index : 3;
display : none;
}
[/css]
skin.css
[css]
.jcarousel-skin-tango .jcarousel-container
{
-moz-border-radius : 10px;
background-color : #FF;
}
.jcarousel-skin-tango .jcarousel-container-horizontal
{
width : 500px;
padding : 20px 40px;
}
.jcarousel-skin-tango .jcarousel-container-vertical
{
width : 75px;
height : 500px;
padding : 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal
{
width : 500px;
height : 120px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical
{
width : 100px;
height : 500px;
}
.jcarousel-skin-tango .jcarousel-item
{
width : 123px;
height : 120px;
text-align : center;
}
.jcarousel-skin-tango .jcarousel-item-horizontal{ margin-right :
0px; }
.jcarousel-skin-tango .jcarousel-item-vertical{ margin-bottom :
10px; }
.jcarousel-skin-tango .jcarousel-item-placeholder
{
background-color : #FF;
color : #00;
}
/**
* Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal
{
position : absolute;
top : 60px;
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 : 60px;
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 : 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
[jQuery] vertical scroll of jcarousel in Mozilla and Safari
!-- /head body div align=center div id=mycarousel class=jcarousel-skin-tango ul liimg src=images/mug_shots/anthony.jpg alt=Anthony title=Anthony/li liimg src=images/mug_shots/dion.jpg alt=Dion title=Dion/li liimg src=images/mug_shots/ed.jpg alt=Ed title=Ed/li liimg src=images/mug_shots/francois.jpg alt=Francois title=Francois/li liimg src=images/mug_shots/julia.jpg alt=Julia title=Julia/li liimg src=images/mug_shots/lisa.jpg alt=Lisa title=Lisa/li liimg src=images/mug_shots/mark.jpg alt=Mark title=Mark/li liimg src=images/mug_shots/tal.jpg alt=Tal title=Tal/li liimg src=images/mug_shots/v.jpg alt=Tal title=Tal/li /ul /div /div /body /html [/html] Please if you can help that will be great. Tal. P.S. i assume i dont need to post all the files since you guys will probably have the rest.
[jQuery] Re: jCarousel - previouse and next arrow problem
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 Feb 27, 6:35 pm, FishNYC [EMAIL PROTECTED] wrote:
it prob has something to do with the width of
.jcarousel-skin-tango.jcarousel-container-horizontal
and
.jcarousel-skin-tango.jcarousel-clip-horizontal
I struggled with that for a while before I got the right numbers to
get them to no be pushed out of view.
Also I see you commented out this stuff... did you not want the
rollovers to work for your buttons?
/*.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;
}*/
On Feb 26, 5:27 am, TALORLIK [EMAIL PROTECTED] wrote:
Hi,
I've posted 3 times to the group but got no answers at all.
Pleasei really need help with this.
Basically in IE7 i got it to work perfectly but in FireFox Mozilla the
arrows don't show. I've tried a million and one things including changing
the arrow images to gif but it still doesn't work.
I'm attaching just the modified CSS files, the HTML page and the two new
images, i assume you have the rest. i.e. the js files.
Thank you in advance,
Tal.
P.S. im using the tango skin (you can also see in the code but just in
case).
skin.css
5KDownload
next-horizontal.gif
1KViewDownload
prev-horizontal.gif
1KViewDownload
jquery.jcarousel.css
1KDownload
[jcarusel_test.html]147
« PrevScroll 1 item per clickScroll 2 items per clickScroll 3 items per
clickScroll 4 items per clickScroll 5 items per clickNext »- Hide quoted
text -
- Show quoted text -
[jQuery] Re: please, please, please, please, please, help me with this
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 : #FF;
color : #00;
}
/* 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
[jQuery] please, please, please, please, please, help me with this
liimg width=115 height=115 src=http:// static.flickr.com/66/199481236_dc98b5abb3_s.jpg alt= //li liimg width=115 height=115 src=http://static.flickr.com/ 75/199481072_b4a0d09597_s.jpg alt= //li liimg width=115 height=115 src=http://static.flickr.com/ 57/199481087_33ae73a8de_s.jpg alt= //li liimg width=115 height=115 src=http://static.flickr.com/ 77/199481108_4359e6b971_s.jpg alt= //li liimg width=115 height=115 src=http://static.flickr.com/ 58/199481143_3c148d9dd3_s.jpg alt= //li liimg width=115 height=115 src=http://static.flickr.com/ 72/199481203_ad4cdcf109_s.jpg alt= //li liimg width=115 height=115 src=http://static.flickr.com/ 58/199481218_264ce20da0_s.jpg alt= //li liimg width=115 height=115 src=http://static.flickr.com/ 69/199481255_fdfe885f87_s.jpg alt= //li liimg width=115 height=115 src=http://static.flickr.com/ 60/199480111_87d4cb3e38_s.jpg alt= //li liimg width=115 height=115 src=http://static.flickr.com/ 70/229228324_08223b70fa_s.jpg alt= //li /ul div class=jcarousel-scroll form action= a href=# id=mycarousel-prevlaquo; Prev/ a select option value=1Scroll 1 item per click/ option option value=2Scroll 2 items per click/option option value=3Scroll 3 items per click/option option value=4Scroll 4 items per click/option option value=5Scroll 5 items per click/option /select a href=# id=mycarousel-nextNext raquo;/ a /form /div /div /div /body /html [/html] thank you in advance, Tal.
[jQuery] JCarousel prev and next images problem
Hi All, I've mannaged to get it to work perfectly in IE but had to make minor adjustments for Mozilla Fireforx 2.0.0.11. The only problem i still encounter is that for some reason the arrow images for the next and previous do not show. Does anyone have any idea on what can it be and how can solve it? Ciao, Tal.
[jQuery] Prev Next Arrow Images are not showing in Mozilla Firefox 2.0
Hi All, I've also posted a topic on the group page, but i figured it wouldn't hurt to send an email out as well. I managed to get the jcarousel to work in IE with no problems i did however needed to make some adjustments when it came to Mozilla Firefox. The only problem i got left with is that for some odd reason unknown to me the two arrow images for prev and next are not showing. Please does someone have an idea why is this happening and how to solve it? Regards, Tal.
