If you've already got the 1.9.0+ UI CSS installed from a themeroller, follow these instructions.
- Download this file from github: https://github.com/cmcculloh/jQuery-UI-Tabs-Rotate/blob/master/jquery-ui-tabs-rotate.js
- Copy the file into the "scripts" folder in the Mocha skin folder on your server. (data/sites/[site-number]/skins/i7MEDIA-Mocha/scripts)
- Open your layout.master. Scroll to line 18. Create a new line under 18 and paste the following:<portal:SkinFolderScript ID="sfs3" runat="server" ScriptFileName="scripts/jquery-ui-tabs-rotate.js" AddToCombinedScript="true" />
- Make sure you have "AssumejQueryUiIsLoaded="true" on your ScriptLoader on line 24.
- Open the "script.js" file inside the scripts folder.
- Select the content from lines 56-68 and replace it with the following:
// For the Content Slider
$("#contentslider").tabs().tabs("rotate", 5000, true);
$("#contentslider .slidercontainer").hover(
function() {
$("#contentslider").tabs().tabs("rotate", 0, true);
}, function() {
$("#contentslider").tabs().tabs("rotate", 5000, true);
}
);
If you don't have a new UI theme installed that uses v1.9.0+, please change back to using the default UI version that mojoPortal loads, because the UI theme in Mocha is not compatible with the new version of the UI either.
Because of the changes in the new jQuery UI version, I may rewrite the Mocha Slider in the newest version of the skin that we'll be releasing soon, and set it up to use a custom script so that compatibility with the new version of the UI isn't a problem.
Let me know if you still have trouble after following these instructions.
Hope this helps,
-Isaac