Jquery and mootools

JavaScript
1

I am working in a joomla project, joomla has mootools enabled and my code is written in jquery, the problem is that I am loading a slider, which has some conflict with mootools and when I move the slider it disappears, here is what I have


<script
type='text/javascript'
src='http://localhost/joomla16/libraries/joomla/form/fields/js/jquery-1.5.1.min.js'>
</script>
<script
type='text/javascript'
src='http://localhost/joomla16/libraries/joomla/form/fields/js/jquery-ui-1.8.13.custom.min.js'>
</script>
<style type='text/css'  media='all'>
@import 'http://localhost/joomla16/libraries/joomla/form/fields/css/dot-luv/jquery-ui-1.8.13.custom.css';
</style>
<style>
div.tlak_slider_1 { padding: 10px !important; };
</style>
<script type='text/javascript'>
function thisFunction(){
$(function() {
$( "#slider_1" ).slider({
value:9,
min: 1,
max: 16,
step: 1,
slide: function( event, ui ) {
$( "#jform_params_column_size" ).val( ui.value );
}
});
$( "#jform_params_column_size" ).val( $( "#slider_1" ).slider( "value" ) );
});
}
</script>

I found jQuery.noConflict(); but the slider still resizes

2

How are you using noconflict? That should sort the problem.

3

The correct place for the jQuery.noConflict() call would be after mootools, after jQuery, and before any other javascript code that makes use of either.

4

This is my code


<?php
defined('JPATH_BASE') or die;
jimport('joomla.html.html');
jimport('joomla.form.formfield');
JHTML::_('behavior.mootools'); 
class JFormFieldTlak extends JFormField{
protected $type = 'Tlak';
protected function getInput(){
$name = $this->element['name'];
$id = $this->element['id'];
$default = $this->element['default'];
$size = (int)$this->element['size'];
$this_counter = 0;
$measuring_type = $this->element['measuring_type'];
$pixels_16 = array ('40px', '100px', '160px', '220px', '280px', '340px', '400px', '460px', '520px', '580px', '640px', '700px', '760px', '820px', '880px', '940px');
$array_values = array (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
$measuring;
$options;
if ($measuring_type == 'pixels'){
$measuring = $pixels_16;
}
else if ($measuring_type == 'normal'){
$measuring = $array_values;
}
$selected_ = (int)$this->value;
$selected_ --;
while ($size > 0){
$options = $options . '<option value="' . $array_values[$this_counter] . '"';
if ($selected_ == $this_counter){
$options = $options . 'selected="selected" ';
}
$options = $options .  '>' . $measuring[$this_counter] . '</option>';
$this_counter ++;
$size --;
}
$this_counter = 0;
$return = '<select id="jform_params_' . $id . '" name="jform[params][' . $name . ']" default="100px" >' .  $options . '</select></br></br><p id="slider_1" ></p>';
return $return;
}
}
?>
<script 
src="http://localhost/joomla16/libraries/joomla/form/fields/js/jquery-1.5.1.min.js" 
type="text/javascript">
</script>
<script
type='text/javascript'
src='http://localhost/joomla16/libraries/joomla/form/fields/js/jquery-ui-1.8.13.custom.min.js'>
</script>
<style type='text/css'  media='all'>
@import 'http://localhost/joomla16/libraries/joomla/form/fields/css/dot-luv/jquery-ui-1.8.13.custom.css';
p#slider_1 {
overflow:visible;
z-index:1;
}
</style>
<script type='text/javascript'>
var jq = jQuery.noConflict();
jq(function() {
jq( "#slider_1" ).slider({
value:9,
min: 1,
max: 16,
step: 1,
slide: function( event, ui ) {
jq( "#jform_params_column_size" ).val( ui.value );
}
});
jq( "#jform_params_column_size" ).val( jq( "#slider_1" ).slider( "value" ) );
});
</script>

I also tried it like this


<?php
defined('JPATH_BASE') or die;
jimport('joomla.html.html');
jimport('joomla.form.formfield');
JHTML::_('behavior.mootools'); 
class JFormFieldTlak extends JFormField{
protected $type = 'Tlak';
protected function getInput(){
$name = $this->element['name'];
$id = $this->element['id'];
$default = $this->element['default'];
$size = (int)$this->element['size'];
$this_counter = 0;
$measuring_type = $this->element['measuring_type'];
$pixels_16 = array ('40px', '100px', '160px', '220px', '280px', '340px', '400px', '460px', '520px', '580px', '640px', '700px', '760px', '820px', '880px', '940px');
$array_values = array (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
$measuring;
$options;
if ($measuring_type == 'pixels'){
$measuring = $pixels_16;
}
else if ($measuring_type == 'normal'){
$measuring = $array_values;
}
$selected_ = (int)$this->value;
$selected_ --;
while ($size > 0){
$options = $options . '<option value="' . $array_values[$this_counter] . '"';
if ($selected_ == $this_counter){
$options = $options . 'selected="selected" ';
}
$options = $options .  '>' . $measuring[$this_counter] . '</option>';
$this_counter ++;
$size --;
}
$this_counter = 0;
$return = '<select id="jform_params_' . $id . '" name="jform[params][' . $name . ']" default="100px" >' .  $options . '</select></br></br><p id="slider_1" ></p>';
return $return;
}
}
?>
<script 
src="http://localhost/joomla16/libraries/joomla/form/fields/js/jquery-1.5.1.min.js" 
type="text/javascript">
</script>
<script
type='text/javascript'
src='http://localhost/joomla16/libraries/joomla/form/fields/js/jquery-ui-1.8.13.custom.min.js'>
</script>
<style type='text/css'  media='all'>
@import 'http://localhost/joomla16/libraries/joomla/form/fields/css/dot-luv/jquery-ui-1.8.13.custom.css';
p#slider_1 {
overflow:visible;
z-index:1;
}
</style>
<script type='text/javascript'>
jQuery.noConflict();
$(function() {
$( "#slider_1" ).slider({
value:9,
min: 1,
max: 16,
step: 1,
slide: function( event, ui ) {
$( "#jform_params_column_size" ).val( ui.value );
}
});
$( "#jform_params_column_size" ).val( $( "#slider_1" ).slider( "value" ) );
});
</script>
5

well, at this point I am starting to learn mootools, althoug the jquery slider seems to do a better job I think I am going to have to go the mootools way, the problem is that the mootools slider seems to get stuck sometimes