Home/ Questions/Q 6177027
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:12:06+00:00

I know that there are many post about hot to use jQuery with mootools,

  • 0

I know that there are many post about hot to use jQuery with mootools, but I am doing something wrong.

The original head MooTools + jQuery:

<head>
<?php css(); ?>
<meta name="viewport" content="width=device-width" />
<meta content="text/html; charset=<?php print $this->getConfig('charset'); ?>" http-equiv="content-type" />
<?php
if(($this->getConfig('log_file') != null && strlen($this->getConfig('log_file')) > 0)
    || ($this->getConfig('thumbnails') != null && $this->getConfig('thumbnails') == true && $this->mobile == false))
{ 
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.livadi.gr/ib/sources/js/mootools.js"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function() {
<?php
    if($this->logging == true)
    { 
?>
        function logFileClick(path)
        {
             $.ajax({
                    async: false,
                    type: "POST",
                    data: {log: path},
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    cache: false
                });
        }

        $("a.file").click(function(){
            logFileClick("<?php print $this->location->getDir(true, true, false, 0);?>" + $(this).html());
            return true;
        });
<?php 
    }
    if(EncodeExplorer::getConfig("thumbnails") == true && $this->mobile == false)
    {
?>
        function positionThumbnail(e) {
            xOffset = 30;
            yOffset = 10;
            $("#thumb").css("left",(e.clientX + xOffset) + "px");

            diff = 0;
            if(e.clientY + $("#thumb").height() > $(window).height())
                diff = e.clientY + $("#thumb").height() - $(window).height();

            $("#thumb").css("top",(e.pageY - yOffset - diff) + "px");
        }

        $("a.thumb").hover(function(e){
            $("#thumb").remove();
            $("body").append("<div id=\"thumb\"><img src=\"?thumb="+ $(this).attr("href") +"\" alt=\"Preview\" \/><\/div>");
            positionThumbnail(e);
            $("#thumb").fadeIn("medium");
        },
        function(){
            $("#thumb").remove();
        });

        $("a.thumb").mousemove(function(e){
            positionThumbnail(e);
            });

        $("a.thumb").click(function(e){$("#thumb").remove(); return true;});
<?php 
    }
?>
    });
//]]>                
</script>
<?php 
}
?>
<title><?php if(EncodeExplorer::getConfig('main_title') != null) print EncodeExplorer::getConfig('main_title'); ?></title>
</head>

Now I have put the jQuery.noConflict(); and replaced the $ with the jQuery. After that, MooTools is working by jQuery isn’t.

The header with some changes:

<head>
<?php css(); ?>
<meta name="viewport" content="width=device-width" />
<meta content="text/html; charset=<?php print $this->getConfig('charset'); ?>" http-equiv="content-type" />
<?php
if(($this->getConfig('log_file') != null && strlen($this->getConfig('log_file')) > 0)
    || ($this->getConfig('thumbnails') != null && $this->getConfig('thumbnails') == true && $this->mobile == false))
{ 
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.livadi.gr/ib/sources/js/mootools.js"></script>
<script type="text/javascript">
//<![CDATA[
    //no conflict jquery
    jQuery.noConflict();
    //jquery stuff

jQuery(document).ready(function() {
<?php
    if($this->logging == true)
    { 
?>
        function logFileClick(path)
        {
             jQuery.ajax({
                    async: false,
                    type: "POST",
                    data: {log: path},
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    cache: false
                });
        }

        jQuery("a.file").click(function(){
            logFileClick("<?php print $this->location->getDir(true, true, false, 0);?>" + $(this).html());
            return true;
        });
<?php 
    }
    if(EncodeExplorer::getConfig("thumbnails") == true && $this->mobile == false)
    {
?>
        function positionThumbnail(e) {
            xOffset = 30;
            yOffset = 10;
            jQuery("#thumb").css("left",(e.clientX + xOffset) + "px");

            diff = 0;
            if(e.clientY + $("#thumb").height() > $(window).height())
                diff = e.clientY + $("#thumb").height() - $(window).height();

            jQuery("#thumb").css("top",(e.pageY - yOffset - diff) + "px");
        }

        jQuery("a.thumb").hover(function(e){
            jQuery("#thumb").remove();
            jQuery("body").append("<div id=\"thumb\"><img src=\"?thumb="+ $(this).attr("href") +"\" alt=\"Preview\" \/><\/div>");
            positionThumbnail(e);
            jQuery("#thumb").fadeIn("medium");
        },
        function(){
            jQuery("#thumb").remove();
        });

        jQuery("a.thumb").mousemove(function(e){
            positionThumbnail(e);
            });

        jQuery("a.thumb").click(function(e){$("#thumb").remove(); return true;});
<?php 
    }
?>
    });
//]]>                
</script>
<?php 
}
?>
<title><?php if(EncodeExplorer::getConfig('main_title') != null) print EncodeExplorer::getConfig('main_title'); ?></title>
</head>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try 

    var j = jQuery.noConflict();

    and then use j rather than jQuery in your own calls to the lib.

    You can also encapsulate all of your own code that use jQ like this: 

    (function($){
  // all your jquery code, use $ without compunction!!

}(jQuery);
    • 0