function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
michaewamichaewa 

mooTools integration

I am new to SF / apex development, so I apologize in advance for any extreme ignorance displayed...

 

I am creating a custom apex page to display tasks, and alongside the tasks I need to display some 'helper' content to allow users to determine appropriate action for the task.

 

I have used a mooTools slider in the past  to accomplish this, and am having trouble instantiating the slider within the apex page.

 

I have a page with the following resources to include the css and js files.  

 

 

<link rel="Stylesheet" type="text/css" href="{!$Resource.slider}" /><apex:includeScript value="{!$Resource.moo_12}"/><apex:includeScript value="{!$Resource.sl_slider}"/>

 

 Then within the page after this section, I'm attempting to call the object:

 

<script> window.addEvent('domready', function() { //slider variables for making things easier below var itemsHolder = $('container'); var myItems = $$(itemsHolder.getElements('.item')); //controls for slider var theControls = $('controls1'); var numNavHolder = $(theControls.getElement('ul')); var thePlayBtn = $(theControls.getElement('.play_btn')); var thePrevBtn = $(theControls.getElement('.prev_btn')); var theNextBtn = $(theControls.getElement('.next_btn')); //create instance of the slider, and start it up var mySlider = new SL_Slider({ slideTimer: 6000, orientation: 'horizontal', //vertical, horizontal, or none: None will create a fading in/out transition. fade: true, //if true will fade the outgoing slide - only used if orientation is != None isPaused: true, container: itemsHolder, items: myItems, numNavActive: false, numNavHolder: numNavHolder, playBtn: thePlayBtn, prevBtn: thePrevBtn, nextBtn: theNextBtn }); mySlider.start(); }); </script>

 

 The page loads, but the domready function doesn't appear to be called.  When I step through, I get an error indicating Uncaught TypeError: Object domready has no method 'addEventListener'

 

Is there another way that this needs to be referenced?  I have been looking at actionFunction but thus far unable to get a working solution.

 

Thanks in advance for any references or suggestions. 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
michaewamichaewa

Well, no joy getting it to work $ safe or otherwise.

 

The only solution I found to eliminate the conflict was to suppress the header and left nav on my apex page.  That did the trick.

 

Thanks. 

All Answers

mba75mba75

If you are using a JavaScript library in a Visualforce page, and that library defines $ as a special character, you'll need to modify your JavaScript to override this usage.

 

I use jQuery but I found this article about Mootools

 

http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/

 

 

michaewamichaewa

Thanks very much for your reply.  That makes intuitive sense, although I'm not exactly sure mechanically how to go about it.  I tried a few approaches with the simple search and replace suggested, but there are some cases I'm not sure about.

 

For instance, in the sl_slider plugin file, there are several instances similar to:

$clear(self.timer);

 Would that then become 

document.id(clear(self.timer));

 Also, when the slider is initialized there is a double $ reference:

 

var itemsHolder = $('container');var myItems = $$(itemsHolder.getElements('.item'));

 Should these two variables result in something like this:

 

var itemsHolder = document.id('container');var myItems = document.id(document.id(itemsHolder.getElements('.item')));

 

 Thanks in advance for any suggestions.

 

 

 

 

 

 

 

michaewamichaewa

Well, no joy getting it to work $ safe or otherwise.

 

The only solution I found to eliminate the conflict was to suppress the header and left nav on my apex page.  That did the trick.

 

Thanks. 

This was selected as the best answer