PDA

Click to See Complete Forum and Search --> : Need help with js and xml

snails07
05-01-2009, 06:38 AM
I'm not sure where this question belongs as it involves both JavaScript and xml, but here goes...

I have recently purchased a program called '3D Carousel' which is simply a Flash products carousel like the ones seen in Amazon. The carousel is configured via an .xml document, which is loaded (embedded?) into a .html document for viewing.
When the .html page is loaded, the products in the carousel all spin around and you can click on the image(s) to get more info about each particular product.

The makers of the carousel say that JavaScript functions can be called up when an image is clicked. I have a JavaScript file that I would like to bring up when an image is clicked (a different file for each different image). This is one of those 5 star ratings widgets that you often see on blogs etc so that people can rate the product.

So, I guess what I am asking is, is this possible to do from the .xml file?

Here is the code for the carousel where I am supposed to insert the Javascript function, but is a widget still classed as a function? Is it possible to do?

<Image>
<ImagePath><![CDATA[img01.png]]></ImagePath>
<ImageLink><![CDATA[]]></ImageLink>
<ImageLinkTarget><![CDATA[_blank]]></ImageLinkTarget>
<ToolTip><![CDATA[Tooltip]]></ToolTip>
<Content1><![CDATA[Content1 (dynamic)]]></Content1>
<Content2><![CDATA[Content2 (dynamic)]]></Content2>
<JSFunction><![CDATA[]]></JSFunction>
</Image>


Sorry if this is a dumb question, but I am not entirely sure if this is to do with js or xml. I have been searching around for the answer but I'm not really sure what I need to be looking for.

Any nudge in the right direction is appreciated.
Cheers
jkmyoung
05-01-2009, 02:08 PM
<JSFunction><![CDATA[
Your javascript code goes here.
]]></JSFunction>
snails07
05-01-2009, 07:12 PM
Hi, thanks for the reply.

Yeah, I can see that the code would go in there, but I'm not exactly sure how to set it up properly.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SpryRating Widget Reference</title>
<script src="SpryRating.js" type="text/javascript"></script>
<link href="SpryRating.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span id="spryrating1" class="ratingContainer">
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
</span>
<script type="text/javascript">
var spryrating1 = new Spry.Widget.Rating("spryrating1");
</script>
</body>
</html>


This is the html code for the rating widget, if I paste this code onto the same page as the carousel, it works fine and the widget shows up on the bottom of the page beneath the carousel.
But how do I make the widget appear only when an image in the carousel is clicked.
What do I need to put in between the
<JSFunction><![CDATA[
Your javascript code goes here.
]]></JSFunction>

If i paste the widgets whole js code into this area nothing happens??

Sorry, I'm all a bit new to this...
snails07
05-01-2009, 07:21 PM
Here is some example code from the help files of the carousel.
I can see how that works but can't figure out what I need to put in there to get the ratings widget to work...


Settings in 3dcarouselv2.xml:
- <JSFunction><![CDATA[MyFunction('Mask')]]></JSFunction>

Please note: If you set the token :afterclick: in front of the function name, the JavaScript function will be called up after(!) all effects (see helpfile) have been carried out.
Example: <JSFunction><![CDATA[:afterclick:MyFunction('Mask')]]></JSFunction>

Settings in ClickMe.htlm:
<script type="text/javascript">
function MyFunction(p1){
alert("You have clicked on image: " + p1);
}
</script>




and this is what the start of the js code looks if it helps...


//fix IE6 flicker bug - only once per browser session
try
{
document.execCommand("BackgroundImageCache", false, true);
}
catch(err){}

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

// Rating widget

Spry.Widget.Rating = function(element, opts)
{
Spry.Widget.Rating.Notifier.call(this);

//initialize object
this.init(element, opts);
};

Spry.Widget.Rating.KEY_ENTER = 13;
Spry.Widget.Rating.KEY_LEFT = 37;
Spry.Widget.Rating.KEY_RIGHT = 39;

//Notifier mechanism

Spry.Widget.Rating.Notifier = function()
{
this.observers = [];
this.suppressNotifications = 0;
};

Spry.Widget.Rating.Notifier.prototype.addObserver = function(observer)
{
if (!observer)
return;

// Make sure the observer isn't already on the list.
var len = this.observers.length;
for (var i = 0; i < len; i++)
if (this.observers[i] == observer) return;

this.observers[len] = observer;
};

Spry.Widget.Rating.Notifier.prototype.removeObserver = function(observer)
{
if (!observer)
return;

for (var i = 0; i < this.observers.length; i++)
{
if (this.observers[i] == observer)
{
this.observers.splice(i, 1);
break;
}
jkmyoung
05-05-2009, 02:03 PM
Can you edit the other parts of the code to add a onclick function? eg, something like:
<span id="spryrating1" class="ratingContainer" onclick="runFunction()">

....
then in your javascript section describe function runFunction.