SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    jquery and mootools

    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

    Code HTML4Strict:
    <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    How are you using noconflict? That should sort the problem.

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by ralph.m; Jun 10, 2011 at 06:28. Reason: fake signatur removed: please wait 90 days

  4. #4
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Limetree View Post
    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.
    This is my code

    Code PHP:
    <?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

    Code PHP:
    <?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. #5
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •