Question

I have a jquery ui slider in place which scrolls the content of a div when moved, here’s the code:

    var paraHeight = $("#descPara").height();
    var maxScroll = paraHeight - 250;
    var activeScroll;
    if (maxScroll <= 0){

        //do nothing    

    } else {

        $("#slider2").slider({

            orientation: "vertical",
            min: 0,
            animate: true,
            max: maxScroll,
            value: maxScroll,
            slide: function(event, ui) {
                $("#descPara").stop().animate({'bottom': (-ui.value + maxScroll) + 'px'}, 1000);
            }
        });

    }

This works fine in Firefox but not in Safari/Chrome. What happens in Safari and Chrome is, the handle of the slider when the page loads is non existent until you click on the slider rail and when it does appear it cannot be dragged, hower you can still scroll by clicking along the slider rail.

This problem however is only apparent when used in the cms joomla, outside of this cms it works perfectly in all browsers. Weird.

Has anyone had any similar problems? it would be really helpful, thanks.

Answer 1

Joomla often includes mootools as a way of helping you along withs some simple javascript stuff. One of the big issues with this is that when using jQuery the $ alias is reserved for mootools instead of jQuery. Here are a few solutions.

Option 1:

If you know you still need mootools, modify your code calling jQuery to use the jQuery() function instead of $(). Like so:

var paraHeight = jQuery("#descPara").height();
...
jQuery("#slider2").slider({
    orientation: "vertical",
    min: 0,
    animate: true,
    max: maxScroll,
    value: maxScroll,
    slide: function(event, ui) {
        jQuery("#descPara").stop().animate({'bottom': (-ui.value + maxScroll) + 'px'}, 1000);
    }
});

Option 2:

Just get rid of mootools. This is a fix in PHP. You can use it to keep mootools from getting output to the web page (and subsequently from interfering with your jQuery.):

<?php
$user =& JFactory::getUser();
if ($user->get('guest') == 1) {
    $headers = $this->getHeadData();
    $headers['scripts'] = array();
    $this->setHeadData($headers); 
}
?>