Question : alert('jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...');

Alright I am receving the error:

 alert('jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...');

I don't know why this is popping up...google and yahoo search don't provide anything useful on correcting the error. I'v tried several different avenues from the search results but non have fixed the problem.

Using the developer tools between Chrome and Firefox everything apears to be the same between the two browsers. The only main difference I see is in the gallery tag:
CHROME: <ul id="gallery" class="jcarousel-list jcarousel-list-horizontal" style="width: 1152px; left: 0px; ">
FIREFOX: <ul class="jcarousel-list jcarousel-list-horizontal" id="gallery" style="width: 1218px; left: 0px;">
Using the ability to change chrome width to match firefox does not fix the issue..

I don't have this issue with either IE (amazing enough!) and Firefox. This error only occures between Chrome and Safari.

Additionally, I am able to mouse over the images that do show and click on them, however I am unable to to acutally "carousel" through the images. If I do try go through the images, once I click on the arrows the error reapears. The error occures on each page I have jcarousel in use.

I have attached the CSS code to show that everything has a hieght and width for the jcarousel items and jcarousel itself.

Let me know if you need more.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
/*--- carousel ---*/
.carousel-box {
	position:relative;
	width:680px;
	height:200px;
	text-align:center;
}
.carousel-box .prev {
	position:absolute;

	top:80px;
}
.carousel-box .next {
	position:absolute;
	left:690px;
	top:80px;
}
.carousel-box .carousel {
	width:680px;
	overflow:hidden;
}
.carousel-box ul li {
	float:left;
	border:0;
	margin-right:13px;
	position:relative;
}
.carousel-box ul li a {
	 width:192px;
	 height:181px;
	 display:block;
}
/* gallery */
#wrapper {
	padding-left:30px;
}
#img {
    width:600px;
    height:323px;
}

#gallery { 
	height:201px;
	width:3000px;
}

#gallery li {
    float: left;
    cursor: pointer;
    margin-right:11px;	
}

.caption {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 96%;
    height: 50px;
    padding: 0 2%;
    line-height: 50px;
    color: #fff;
    display:none !important;
}


.jcarousel-container {
	position:relative;
	padding:0;
	width:600px;
}

.jcarousel-clip {
	width:600px;
	overflow:hidden;
}

.jcarousel-prev {
    position: absolute;
    top: 80px;
    left: -21px;
    width: 10px;
    height: 19px;
    cursor: pointer;
    background:url("../images/prev.gif") no-repeat left top;
    z-index:1000;
}
.jcarousel-prev:hover {}

.jcarousel-next {
    position: absolute;
    top: 80px;
    left: 608px;
    width: 10px;
    height: 19px;
    cursor: pointer;
    background:url("../images/next.gif") no-repeat left top;
    z-index:1000;
}
.jcarousel-next:hover {}

.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 {
	background:none repeat scroll 0 0 transparent !important;
    float: left !important;
    list-style: none outside none !important;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 192px;
    height: 181px;
	padding:0 !important;
}

/**
 * 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 {
	width: 10px;
    height: 19px;
    z-index: 3;
    display: none;
}

.jcarousel-prev {
	width: 10px;
    height: 19px;
    z-index: 3;
    display: none;
}

Answer : alert('jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...');

Well, I could not get it to work at all...so I've gone ahead and went with a flash carousel menu.
Random Solutions  
 
programming4us programming4us