jrattinger
asked on
jQuery jCarousel call getting mangled
Hi All,
I'm having trouble trying to use the jQuery - jCarousel widget. i have had this working for 6 months without any problems. i just moved my site live and now a problem has cropped up. The problem can be seen on either of these pages (the first one is a bit stripped down for debugging) - http://www.redyref.com/kiosks/custom_kiosks, http://www.redyref.com/touchscreen_building_directories/Office. the carousel should appear above the text "Install Views".
It looks like the jQuery libraries are found, but I'm not sure. I am using the expression engine CMS software for this site.
When refreshing the page, i get a javascript syntax error on the code below. i have posted both the source code and the "View Source" code. if you look closely, you will see that the information for the parameter "itemLoadCallback:" is missing from the "view source" code. So it looks like the callback is being stripped out somehow and then causing a syntax error.
Any help would be greatly appreciated.
Thanks,
John
I'm having trouble trying to use the jQuery - jCarousel widget. i have had this working for 6 months without any problems. i just moved my site live and now a problem has cropped up. The problem can be seen on either of these pages (the first one is a bit stripped down for debugging) - http://www.redyref.com/kiosks/custom_kiosks, http://www.redyref.com/touchscreen_building_directories/Office. the carousel should appear above the text "Install Views".
It looks like the jQuery libraries are found, but I'm not sure. I am using the expression engine CMS software for this site.
When refreshing the page, i get a javascript syntax error on the code below. i have posted both the source code and the "View Source" code. if you look closely, you will see that the information for the parameter "itemLoadCallback:" is missing from the "view source" code. So it looks like the callback is being stripped out somehow and then causing a syntax error.
Any help would be greatly appreciated.
Thanks,
John
ORIGINAL CODE:
==============
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
</script>
VIEW SOURCE CODE:
=================
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
size: mycarousel_itemList.length,
itemLoadCallback:
});
});
</script>
Error: syntax error
Source File: http://www.redyref.com/touchscreen_building_directories/Office
Line: 917, Column: 4
Source Code:
});
because you have nothing after
itemLoadCallback:
Source File: http://www.redyref.com/touchscreen_building_directories/Office
Line: 917, Column: 4
Source Code:
});
because you have nothing after
itemLoadCallback:
ASKER
hi mplungian,
yes there is code after the itemLoadCallback - itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallbac k}
The problem is that when the page gets rendered, that code is removed. see the original and view source code above. i have no idea why this is the case and that's what's driving me crazy.
yes there is code after the itemLoadCallback - itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallbac
The problem is that when the page gets rendered, that code is removed. see the original and view source code above. i have no idea why this is the case and that's what's driving me crazy.
Sorry, I was reading the question on my phone initially and did not notice your question was EXACTLY what I observed :(
what happens if you do
itemLoadCallback: {
onBeforeAnimation: mycarousel_itemLoadCallbac k
}
what happens if you do
itemLoadCallback: {
onBeforeAnimation: mycarousel_itemLoadCallbac
}
ASKER
no problem.... I actually just tried that a little while ago. Unfortunately, the same results.
http://www.redyref.com/index.php/carousel_test/
this is just the author's example without any code added. it is being displayed as a stand-alone page on my expression engine website.
I'm wondering if there is some sort of clash with jQuery libraries that is happening under the covers. i don't know how to check if other versions of the jQuery library are being called.
Thanks.
http://www.redyref.com/index.php/carousel_test/
this is just the author's example without any code added. it is being displayed as a stand-alone page on my expression engine website.
I'm wondering if there is some sort of clash with jQuery libraries that is happening under the covers. i don't know how to check if other versions of the jQuery library are being called.
Thanks.
That link does not execute well
the css is html and there is no jQuery loaded:
Error: The stylesheet http://www.redyref.com/index.php/style.css was not loaded because its MIME type, "text/html", is not "text/css".
Source File: http://www.redyref.com/index.php/carousel_test/
Line: 0
Error: jQuery is not defined
Source File: http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js
Line: 16
Error: jQuery is not defined
Source File: http://www.redyref.com/index.php/carousel_test/
Line: 56
since you commented out
<!--
jQuery library
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
-->
als jQuery cannot remove html from view-source so I though a clash with your template thing
the css is html and there is no jQuery loaded:
Error: The stylesheet http://www.redyref.com/index.php/style.css was not loaded because its MIME type, "text/html", is not "text/css".
Source File: http://www.redyref.com/index.php/carousel_test/
Line: 0
Error: jQuery is not defined
Source File: http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js
Line: 16
Error: jQuery is not defined
Source File: http://www.redyref.com/index.php/carousel_test/
Line: 56
since you commented out
<!--
jQuery library
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
-->
als jQuery cannot remove html from view-source so I though a clash with your template thing
ASKER
sorry, i made some changes while testing. a clean example can be found at - http://www.redyref.com/index.php/carousel_test_2/
I'm completely at a loss. Keep in mind that this code worked perfectly 2 days ago until i moved my site live. i figured that i would start with the authors example and work toward my implementation, but as you can see, i haven't gotten very far. You can see the authors page here - http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html.
All i did was pickup the code and change the relative paths for the css and jQuery. I then put that code into my expression engine site to test. if i just load that file into a browser (via open with firefox or chrome), it still does not render correctly.
In the redyref.com site, the initialization of variable - mycarousel_itemList, gets chopped, as does the itemLoadCallback parameters.
My code:
thanks for your help, my client is now screaming.... :(
John
I'm completely at a loss. Keep in mind that this code worked perfectly 2 days ago until i moved my site live. i figured that i would start with the authors example and work toward my implementation, but as you can see, i haven't gotten very far. You can see the authors page here - http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html.
All i did was pickup the code and change the relative paths for the css and jQuery. I then put that code into my expression engine site to test. if i just load that file into a browser (via open with firefox or chrome), it still does not render correctly.
In the redyref.com site, the initialization of variable - mycarousel_itemList, gets chopped, as does the itemLoadCallback parameters.
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="http://sorgalla.com/projects/jcarousel/style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />
<script type="text/javascript">
var mycarousel_itemList = [
{url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
{url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
{url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
{url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
{url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
{url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
{url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
{url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
{url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
{url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}
];
function mycarousel_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
return '<img src="' + item.url + '" width="75" height="75" alt="' + item.url + '" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with dynamic content loading via JavaScript</h3>
<p>
The data is loaded dynamically from an javascript array.
</p>
<ul id="mycarousel" class="jcarousel-skin-ie7">
<!-- The content will be dynamically loaded in here -->
</ul>
</div>
</body>
</html>
thanks for your help, my client is now screaming.... :(
John
I'll look soon
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, that seems to cure the stomping problem, but it is still not loading and displaying the list properly. Any ideas?
Download and install firefox. look in console
Error: jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...
Source File: http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js
Line: 16
Error: jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...
Source File: http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js
Line: 16
ASKER
I was able to finally resolve my issues. it was mostly due to javascript libraries definitions, sequence of these definitions and pulling the javascript into an external file.
Thanks mplungian for your help.
Thanks mplungian for your help.
ASKER
This is the new page.
http://www.redyref.com/index.php/carousel_test/
This is the authors page:
http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html