jQuery and Mootools conflict -
i know there many post hot use jquery mootools, doing 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 have put jquery.noconflict(); , replaced $ jquery. after that, mootools working jquery isn't.
the header 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>
try
var j = jquery.noconflict(); and use j rather jquery in own calls lib.
you can encapsulate of own code use jq this:
(function($){ // jquery code, use $ without compunction!! }(jquery);
Comments
Post a Comment