I am new to MODx... I have this wonderful jQuery horizontal accordion that I use in my website... When i tried to make the move to MODx it stopped working... I am sure its a path issue or something... Here is the code
/**************************
ACCORDION CODE
**************************/
// default width of accordion for this template is set to 960 pixels,
// this value is hardcoded and must be equal to accordion width coded in
// accordionContainer CSS style (file: indexCSS.css)
var ACCORDION_WIDTH = 960;
// this variable determine the width of div then it is draw aside
var ACCORDION_DRAW_ASIDE_WIDTH = 50;
// slide function, the default is "liner" which is implemented in jQuery,
// it's not looking good, so we use special easing pluging and method "jQuery EasIng v1.1.2"
var ACCORDION_EASING_METHOD = "easeOutCirc";
// slide time
var ACCORDION_SLIDE_TIME = 650;
// collection of objects which describe divs included in accordion image slider,
// every described div have included one main image, and some addiotonal images and
// elements whith other informations needed for main image, we pack objects into an array
var g_slidedDivs = null;
var g_hoveredSlideIndex = null;
function setupAccordionImageSlider()
{
// turn off displaying border-left for first div holding image in accordion
$j("#accordionContainer").find(".accordionImgDiv:first").css("border-left", "0px");
// get list of all slided divs in slider
var slidedDivsList = $j("#accordionContainer .accordionImgDiv");
// collect information on every div in to an global array
g_slidedDivs = new Array;
var firstDiv = $j("#accordionContainer .accordionImgDiv:first");
for(var i = 0; i < slidedDivsList.length; i++)
{
var obj = new Object();
obj.name = "#" + $j(firstDiv).attr('id');
obj.dest = 0;
obj.out = 0;
g_slidedDivs.push(obj);
firstDiv = $j(firstDiv).next(".accordionImgDiv");
}
// calculating rib width based on accordion containter width divided by slides number in accordion
var ribOutWidth = 0;
// calculate width of the rib
ribOutWidth = ACCORDION_WIDTH / g_slidedDivs.length;
// then the page is load we must set the left margin of every div in accordion
// distance between divs a equal to rib width so the divs are placed equally
for(var i = 0; i < g_slidedDivs.length; i++)
{
// set left margin
$j(g_slidedDivs[i].name).css("margin-left", (i*ribOutWidth)+"px");
// addiotinaly we set the dest member to the same value
g_slidedDivs[i].dest = i*ribOutWidth;
}
// we set the acction for hover the accordion container,
// when the mouse is moved on, there is no action taken,
// when mouse is moved from we distribyte all slided divs in accordion
// equally on accordion space
$j("#accordionContainer").hover(
function()
{
// stop the auto play accordion image slider
if(true == g_sliderAutoPlay)
{
clearTimeout(g_sliderTimerAutoPlay);
}
// if slider is not fully loaded
if(g_loadedStripCount < g_slidedDivs.length)
{
return;
}
// hide slide strip desc
$j("#accordionContainer .accordionImgDiv").find(".slideDesc").stop().animate({opacity: 0.0}, 150);
},
function()
{
// if slider is not fully loaded
if(g_loadedStripCount < g_slidedDivs.length)
{
return;
}
mouseOutAccorOnAll(null);
for(var i = 0; i < g_slidedDivs.length; i++)
{
// if div is currently moved we stop the animation
// and set new animation for left margin
$j(g_slidedDivs[i].name).stop()
.animate({marginLeft: (i*ribOutWidth)+"px"}, {duration: 900, easing: ACCORDION_EASING_METHOD});
// we set the destination member to the same value
g_slidedDivs[i].dest = i*ribOutWidth;
// show strip desc
$j(g_slidedDivs[i].name).find(".slideDesc").stop().animate({opacity: 1.0}, 1200);
}
// fire up auto play for slider
if(true == g_sliderAutoPlay)
{
clearTimeout(g_sliderTimerAutoPlay);
mouseOutAccorOnAll(null);
g_sliderTimerAutoPlay = setTimeout(accordionPlay, g_sliderTimerInterval);
}
}
);
// setting hover action for every div of class accordionImgDiv in accordion,
// when user move mause on div, we must to draw aside all dive except the hovered
$j(".accordionImgDiv").hover(
function()
{
// stop the auto play accordion image slider
if(true == g_sliderAutoPlay)
{
clearTimeout(g_sliderTimerAutoPlay);
}
// if slider is not fully loaded we return
if(g_loadedStripCount < g_slidedDivs.length)
{
return;
}
// save in variable id of hovered element
var divID = ("#" + $j(this).attr('id'));
// fade out all divs with excluding hovered div
mouseOutAccorOnAll(divID);
g_hoveredSlideIndex = $j("#accordionContainer .accordionImgDiv").index(this);
var context = $j(this)[0];
// stop and set new animation of main image opacity
$j(".accordionSlideImage", context).find("img").stop().animate({opacity: 1.0}, 400);
// stop and set new animation of image description background div
$j(".accordionDescBack", context).stop().animate({bottom: 0, opacity: 0.8}, 1000);
// stop and set new animation of image description div
$j(".accordionDesc", context).stop().animate({bottom: 0, opacity: 1.0}, 1000);
$j(".slideStrip", context).stop().animate({opacity: 0.0}, 200, ACCORDION_EASING_METHOD);
g_slidedDivs[g_hoveredSlideIndex].out = 0;
// draw aside all divs
setMoveForAccordionDivs(g_hoveredSlideIndex);
},
function()
{
if(g_loadedStripCount < g_slidedDivs.length)
{
return;
}
g_hoveredSlideIndex = null;
// save in variable id of hovered element
var divID = ("#" + $j(this).attr('id'));
// now we need to find the index of hovered div,
// so we searching it name in array g_slidedDivs, when
// the named match we save index and break loop
var index = 0;
for(var i = 0; i < g_slidedDivs.length; i++)
{
if(divID == g_slidedDivs[i].name)
{
index = i;
break;
}
}
if(g_slidedDivs[index].out != 1)
{
g_slidedDivs[index].out = 1;
mouseOutAccor(this);
}
}
);
} // end of function setupAccordionImageSlider
// Function set value of left margin for every slided div in accordion
// @param[in] index - index of ohovered div with class accordionImgDiv
function setMoveForAccordionDivs(index)
{
// for every slided div we make the same
for(var i = 0; i < g_slidedDivs.length; i++)
{
var context = $j(g_slidedDivs[i].name)[0];
var object = $j(g_slidedDivs[i].name);
$j(".slideDesc", context).stop().animate({opacity: 0.0}, 150);
// if div lie on left we move it on left
if(i < index)
{
// calculate new margin, this equal to calculate new position of div
var newMargin = (i*ACCORDION_DRAW_ASIDE_WIDTH);
// if new margin is diffrent from div destination margin the animation is set
if(g_slidedDivs[i].dest != newMargin)
{
// first we stop the old animation
object.stop();
// animation time
var animTime = ACCORDION_SLIDE_TIME;
// save new margin
g_slidedDivs[i].dest = newMargin;
// set new animation
object.animate(
{marginLeft: newMargin+"px"},
{duration: animTime, easing: ACCORDION_EASING_METHOD});
}
// go to next iteraction of loop
continue;
}
// if div is hovered, we move it max to the left, the code is identical,
// but is separated for future to add maybe some special actions
if(index == i)
{
// calculate new margin
var newMargin = (i*ACCORDION_DRAW_ASIDE_WIDTH);
// if new margin is diffrent from div destination margin the animation is set
if(g_slidedDivs[i].dest != newMargin)
{
// first we stop old animation
object.stop();
// animation time
var animTime = ACCORDION_SLIDE_TIME;
// save new margin
g_slidedDivs[i].dest = newMargin;
// set new animation
object.animate(
{marginLeft: newMargin+"px"},
{duration: animTime, easing: ACCORDION_EASING_METHOD});
}
// go to next iteraction of loop
continue;
}
// if div lie on right we move it on right, we must calculate
// margin from right border of accordion container
if(i > index)
{
// calculate new margin
var newMargin = (ACCORDION_WIDTH - ((g_slidedDivs.length - i) * ACCORDION_DRAW_ASIDE_WIDTH));
// if new margin is diffrent from div destination margin the animation is set
if(g_slidedDivs[i].dest != newMargin)
{
// first we stop old animation
object.stop();
// animation time
var animTime = ACCORDION_SLIDE_TIME;
// save new margin
g_slidedDivs[i].dest = newMargin;
// set new animation
object.animate({"marginLeft": newMargin+"px"}, {duration: animTime,
easing: ACCORDION_EASING_METHOD});
}
// go to next iteraction of loop
continue;
}
}
} // end of function setMoveForAccordionDivs
var g_actualSlideImage = 0;
// auto play timer handle for accordion image slider
var g_sliderTimerAutoPlay = null;
// slider timer interval
var g_sliderTimerInterval = 4500;
// is accordion auto play on/off
var g_sliderAutoPlay = true;
// if have true, the new loop of slider is starting
var g_sliderNewLoop = false;
// true if new slider loop gona be start
var g_setBackwardBtnOnLast = false;
function accordionPlay()
{
if(g_loadedStripCount < g_slidedDivs.length)
{
// fire up slider
if(true == g_sliderAutoPlay)
{
g_sliderTimerAutoPlay = setTimeout(accordionPlay, g_sliderTimerInterval);
}
return;
}
var timeOut = g_sliderTimerInterval;
if(BACKWARD == g_lastSlideMoveDirection)
{
g_actualSlideImage++;
if(g_actualSlideImage >= g_slidedDivs.length)
{
g_actualSlideImage = 0;
g_sliderNewLoop = true;
}
}
g_lastSlideMoveDirection = FORWARD;
g_setBackwardBtnOnLast = false;
if(true == g_sliderNewLoop)
{
ribOutWidth = ACCORDION_WIDTH / g_slidedDivs.length;
mouseOutAccorOnAll(null);
for(var i = 0; i < g_slidedDivs.length; i++)
{
// if div is currently moved we stop the animation
// and set new animation for left margin
$j(g_slidedDivs[i].name).stop()
.animate({marginLeft: (i*ribOutWidth)+"px"}, {duration: 900, easing: ACCORDION_EASING_METHOD});
// we set the destination member to the same value
g_slidedDivs[i].dest = i*ribOutWidth;
$j(g_slidedDivs[i].name).find(".slideDesc").stop().animate({opacity: 1.0}, 2000);
}
timeOut = g_sliderTimerInterval * 2;
g_sliderNewLoop = false;
// for backward button, we set the index to last element
g_setBackwardBtnOnLast = true;
// fire up slider
g_sliderTimerAutoPlay = setTimeout(accordionPlay, timeOut);
return;
}
mouseOutAccorOnAll(null);
mouseOnAccor(g_slidedDivs[g_actualSlideImage].name);
g_actualSlideImage++;
if(g_actualSlideImage >= g_slidedDivs.length)
{
g_actualSlideImage = 0;
g_sliderNewLoop = true;
}
// fire up slider
if(true == g_sliderAutoPlay)
{
g_sliderTimerAutoPlay = setTimeout(accordionPlay, g_sliderTimerInterval);
}
} // end of function accordionPlay
function setupAccordionAutoPlay()
{
// fire up auto play for accordion image slider
if(true == g_sliderAutoPlay)
{
g_sliderTimerAutoPlay = setTimeout(accordionPlay, g_sliderTimerInterval);
}
} // end of function setupAccordionAutoPlay
function mouseOnAccor(_this)
{
// now we need to find the index of hovered div,
// so we searching it name in array g_slidedDivs, when
// the named match we save index and break loop
var index = 0;
for(var i = 0; i < g_slidedDivs.length; i++)
{
if(("#" + $j(_this).attr('id')) == g_slidedDivs[i].name)
{
index = i;
break;
}
}
g_slidedDivs[index].out = 0;
// stop and set new animation of main image opacity
$j(_this).find(".accordionSlideImage").find("img").stop().animate({opacity: 1.0}, 400);
// stop and set new animation of image description background div
$j(_this).find(".accordionDescBack").stop().animate({bottom: 0, opacity: 0.8}, 1000);
// stop and set new animation of image description div
$j(_this).find(".accordionDesc").stop().animate({bottom: 0, opacity: 1.0}, 1000);
$j(_this).find(".slideStrip").stop().animate({opacity: 0.0}, 300);
// draw aside all divs
setMoveForAccordionDivs(index);
} // end of function mouseOnAccor
function mouseOutAccor(_this)
{
var context = $j('#accordionContainer')[0];
// stop and set new animation of main image opacity
$j(_this, context).find(".accordionSlideImage").find("img").stop().animate({opacity: 0.0}, 800
,function(){$j(_this, context).find(".slideStrip").stop().animate({opacity: 1.0}, 600);}
);
// stop and set new animation of image description background div
$j(_this, context).find(".accordionDescBack").stop().animate({bottom: -70, opacity: 0}, 300);
// stop and set new animation of image description div
$j(_this, context).find(".accordionDesc").stop().animate({bottom: -70, opacity: 0}, 300);
} // end of function mouseOutAccor
function mouseOutAccorOnAll(excludedID)
{
for(var j = 0; j < g_slidedDivs.length; j++)
{
if(excludedID != null)
{
if(excludedID == g_slidedDivs[j].name)
{
continue;
}
}
if(g_slidedDivs[j].out != 1)
{
g_slidedDivs[j].out = 1;
mouseOutAccor(g_slidedDivs[j].name);
}
}
} // end of function mouseOutAccorOnAll
prolificcommunications.com is the website... you can see that all that shows up is loading graphics... i am so confused lol.. I changed all of the paths to the right ones... I made a index.html file and placed in the root directory for testing.. I linked everything to my assets/templates/procom/ .. i.e. jQuery and images... Everything worked just fine. I created a new template in MODx and added the index.html code to it... I assigned my resource to the template and when i clicked preview... I get everthing loaded except the images for my slider... So it was working before I put it into a MODx template... what am i doing wrong???
... the syntax $j in jQuery was screwing things up... replaced all the $j with $ and problem solved