Simple instructions for jquery noconflict please

73 Posts

weblady Reply #1, 15 years, 1 month ago

Im not a programmer and cant understand how Im supposed to use the jquery noconflict mode.
Can someone please explain it so an idiot like me can understand it.

for example I have this code from http://api.jquery.com/jQuery.noConflict/
But Ive no idea if Im supposed to replace any of this code to reflect my scripts

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

the jquery Im trying to use is
jquery-1.3.2.min.js
jquery.cycle.all.min.js

in conjunction with
homeslider.js
cufon2.js
to make a fading images banner on my website

thanks

Im running evo 1.0.4

387 Posts

whistlemaker Reply #2, 15 years, 1 month ago

I assume that you are having some kind of conflict with cufon.js and jquery since you are asking.

Personally I would either just use @font-face to display the text instead of cufon or just use image banners and thereby avoid using two js libraries.

But since you asked:
a couple caveats first - I don't/have not used cufon so I'm not sure that your problem is related to both libraries using $ as an alias.
But that is what the link you posted is about so here is what it is saying to do:
Vode from the link you provided:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

becomes

<script type="text/javascript" src="path/to/cufon.js"></script>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses cufon2.js goes here
</script>

Note the order of these lines is important.
I'm not clear what homeslider.js is so I can't say how it fits the into the picture

does this help?

73 Posts

weblady Reply #3, 15 years, 1 month ago

Thanks, this is what I get stuck on. Am I supposed to put the whole script in after the $.noConflict();
as it will add a lot of code?
Need to check if it needs to cufon.js again, its not for text its for the banner.

228 Posts

christianhanvey Reply #4, 15 years, 1 month ago

You can use the jQuery name instead of $ in your code when jquery commands are needed. You can also assign jQuery to another variable name with the noConflict method eg:

var jQ= jQuery.noConflict();

and then you can use jQ in place of the $ method eg

jQ(document).ready(function(){
   jQ.cycle();
});

This is how you can use both the jquery library and other libraries using the $ symbol as a variable reference.

73 Posts

weblady Reply #5, 15 years, 1 month ago

Thanks, I appreciate the help but I still cant get this to work.
Have tried every combination but no joy.

Ive gone through the code I am using
jquery-1.3.2.min.js
jquery.cycle.all.min.js
homeslider.js was where the code to action this is but can go on the page - see below

$(document).ready(function(){
    $('#slideshow').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 5000,
        pager:  '#slider_nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
});

In addition to this Im also working with standard javascript that comes with modx:
mootools.js
and
drop_down_menu.js

So is this how it should be as it isnt working for me.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>[*title*]</title>
<meta name="keywords" content="[*keywords*] "/>
<meta name="description" content="[*description*] "/>
  <meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<link rel="canonical" href="[(site_url)][~[*id*]~]" />
  <base href="[(site_url)]" /></base>  
  <link rel="stylesheet" href="assets/templates/express/layout.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/templates/express/modxmenu2.css" type="text/css" media="screen" /> 
  <link rel="stylesheet" href="assets/templates/express/form.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/templates/express/modx.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/templates/express/print.css" type="text/css" media="print" />
  <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
<script src="manager/media/script/mootools/mootools.js" type="text/javascript"></script>
  <script src="assets/templates/express/drop_down_menu.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/templates/express/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="assets/templates/express/jquery.cycle.all.min.js"></script>

<script type="text/javascript">   $.noConflict();   $(document).ready(function(){
    $('#slideshow').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 5000,
        pager:  '#slider_nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
//  </script> 
<script type="text/javascript" src="assets/templates/express/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="assets/templates/express/jquery.cycle.all.min.js"></script>
</head>
<body>
<div id="container">
<div class="header">
[*top-header*]
<div class="clear"></div>

   <div id="ajaxmenu"> [[Wayfinder?startId=`0` &outerTpl=`mh.OuterTpl` &innerTpl=`mh.InnerTpl` &rowTpl=`mh.RowTpl` &innerRowTpl=`mh.InnerRowTpl` &firstClass=`first` &hereClass=``]] </div>
                


</div>


<div class="clear"></div>
<div class="clear"></div>
<div class="top-content">
 <div id="left">[*left-boxes-home*]</div
<div id="slideshow">
 <div class="slider-item"><a href="bifoldingdoors.html"target="blank"><img src="assets/images/gallery/top1.jpg" alt="bi-folding doors,folding doors" width="710" height="360" border="0" 
 /></a></div>
        <div class="slider-item"><a href="patio_doors.html" target="blank"><img src="assets/images/gallery/top2.jpg" alt="sliding doors, patio doors" width="710" height="360" border="0" /></a></div>
        <div class="slider-item"><a href="bifoldingdoors.html"target="blank"><img src="assets/images/gallery/top3.jpg" alt="bifolding doors,sliding doors, patio doors,composite doors" width="710" height="360" border="0" /></a></div>
        <div class="slider-item"><a href="bifoldingdoors.html"target="blank"><img src="assets/images/gallery/top4.jpg" alt="bifolding doors,sliding doors, patio doors,composite doors"width="710" height="360" border="0" /></a></div>
        <div class="slider-item"><a href="bifoldingdoors.html"target="blank"><img src="assets/images/gallery/top5.jpg" alt="bifolding doors,sliding doors, patio doors,composite doors"width="710" height="360" border="0" /></a></div>
 </div>

</div>
[*topContent*]
</div>
</div>
 [*#content*]
<div class="clear"></div>
</div>
<div id="footer">
[*footer*]
</div>
</div>
</body>
</html>

73 Posts

weblady Reply #6, 15 years, 1 month ago

Ive just noticed that I put my links to jquery in twice, so ahve removed the bottom 2, not that it makes any difference.

Pulling my hair out with this as I need to get this done,

228 Posts

christianhanvey Reply #7, 15 years, 1 month ago

The html template that you pasted above is calling the 'noConflict' method and then still using the $ reference to jQuery - you need to change all subsequent calls to jquery using 'jQuery', not '$', if you want to use the noConflict method.

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 15 years, 1 month ago

The whole point of the noConflict() method is to change the variable that JQuery uses to refer to the 'document' from $ to a different string so that it doesn't conflict with other libraries that use $ for something else. You can either assign a string you prefer to use, or use the default of JQuery.

So instead of using $(whatever) you would use JQuery(whatever)

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

73 Posts

weblady Reply #9, 15 years, 1 month ago

thanks, do you mean like this then?

<script type="text/javascript">   JQuery.noConflict();   
JQuery(document).ready(function(){
    JQuery('#slideshow').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 5000,
        pager:  '#slider_nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
//  </script>

228 Posts

christianhanvey Reply #10, 15 years, 1 month ago

That looks correct.
I'm assuming you have tried it already and it didn't work - can you confirm?
There must be some other issue (if thats the case?)