NoConflict.....two jquery-scripts RESOLVED

**Mejse78** · 04-29-2012, 10:42 PM

Thanks to jscheuer1 my Anythingslider now works.. on it's own html..

But together with the imgbubble script it doesn't work.

So I've been reading about noConflict - control over the variable $..
BUT... again.. I'm so new to this.. This is not working.. Should I do this in some of my .js allso??

This is my page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Type" content="cache" />
<meta name="robots" content="INDEX, FOLLOW" />
<meta name="keywords" content="ENTER KEYWORD" />
<meta name="description" content="ENTER DESCRIPTOPN HERE" />


<title>BLOGGEN</title>

<script type="text/javascript" src="js/slider/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/slider/slider.js"></script>
<script src="js/slider/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">

<link rel="stylesheet" href="css/slider/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider/anythingslider.css" type="text/css" media="screen" />





<!Anythingslider> 
<script type="text/javascript">

var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'];
function formatText(index, panel) {
	return slider1[index - 1] || index;
}
 

</script>

<SCRIPT type="text/javascript" src="js/topmenu/142_jquery.min.js">
/*****SCRIPT FOR BUBBLE****/</SCRIPT>
<LINK rel=stylesheet type=text/css href="css/topmenu/imgbubbles.css">
<LINK rel=stylesheet type=text/css href="css/topmenu/imgbubbles/bubbles.css">




<SCRIPT type="text/javascript" src="/MENU/imgbubbles/imgbubbles.js">
/*****SCRIPT FOR BUBBLE****/
/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</SCRIPT>
<SCRIPT type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.55}) //add bubbles effect to UL id="orbs"
})
</SCRIPT>
<SCRIPT type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$('ul#orbs_2').imgbubbles({factor:1.55}) //add bubbles effect to UL id="orbs_2"
})


</SCRIPT>



</head>



<body>
<div id="fb-root"></div>


<div id="space" class="border">
<div id="paper">
	
 
    
    <div id="banner" align=center> 
		<img src="images/layout/banner.png" />
    </div>


    <div id="menu" align="center">
		<UL id=orbs class=bubblewrap>
		<LI>
			<A href="/dw.html"><IMG alt=HJEM src="images/layout/topmenu/hjem.png"></A>
            
       	</LI>
		
        <LI>
            <A href="/om_mig.html"><IMG alt="OM MIG" src="images/layout/topmenu/ommig.png"></A>
            
		</LI>
        
        <LI>
            <A href="/galleri.html"><IMG alt=GALLERI src="images/layout/topmenu/galleri.png"></A>
            
        </LI>
        
        <LI>
            <A href="/portefolio.html"><IMG alt=PORTEFOLIO src="images/layout/topmenu/portefolio.png"></A>
            
        </LI>
        
        <LI>
            <DIV><A href="/blog.html"><IMG alt=BLOG src="images/layout/topmenu/blog.png"></A>
            </DIV>
        </LI>
		</UL>
    </div>




    
<div id="page-wrap">

<!-- AnythingSlider #1 -->
<ul id="slider1">

<li class="panel1">
<div >
<p>Denne scrollbar er simpel at bruge og kræver ikke billeder.
        <br> 
        Det er muligt at ændre på farve, skygge, længde og bredde.
        <br>
        Den kan dog være blogged i nogle browsere. (f.eks. IE). 
        <br>
        Hvis du oplever dette, må du meget gerne skrive til mig.
        <br>
        <br>
        <b>Scrollbaren benytter jQuery:</b>
        <br><a href="js/slimbox/162_jquery.min.js" target="_blank">1.6.2/jquery.min.js</a>
        <br><a href="js/scrollbar/jquery.mousewheel.min.js" target="_blank">jquery.mousewheel.min.js</a>
        <br>
        <br>        
        <h3><i><font color="#91968b"><b>Teknisk:</b>
        <br>
        Jeg har flyttet STYLE text over i min css.
        <br>
        Jeg har downloaded jquery.min.js fra adressen, så den ligger på samme server som Tegnehulen.</font></i></h3>
        </p>
        	 <div align=right > <A title="find scrollbar her" href="http://www.dynamicdrive.com/dynamicindex11/scrollc.htm" target="_blank"><IMG class=image_frame_link src="images/layout/links/dynamiccdrive2.gif"></A>                   
       	  </div>                  
       	  
</div>
</li>

<li class="panel2">
<div class="quoteSlide">
<blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<br>-- Les Dawson</blockquote>
</div>
</li>

<li class="panel3">
<img src="images/slider/slide-tele-1.jpg" alt="" />
</li>

<li class="panel4">
<div class="quoteSlide">
<blockquote>Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
</div>
</li>

<li class="panel5">
<img src="images/slider/slide-tele-2.jpg" alt="" />
</li>

</ul> <!-- END AnythingSlider #2 -->


</div>







    <div id="footer">
		<p class="footer-text">Copyright by MD - Latest update april, 2012</p>
    </div>

</div>
</div>

</body>
</html>

Maybe it's the position of <link> and <script> aswell?

**jscheuer1** · 04-30-2012, 04:01 PM

noConflict is for using jQuey with another script library like MooTools or Prototype that also use $, not for using two or more scripts that use jQuery. Unless they are very poorly written or poorly implemented, they will get along just fine. Sometimes one of these jQuery scripts will already put jQuery into noConflict mode, If this is the case and other jQuery script code on the page requires the $, that can be a problem, but that's easily fixed. The noConflict directive can be removed or the code that needs the $ can be given it back.

Since your page uses stylesheets, images, etc. that aren't available just from looking at the code you posted, it might be hard to diagnose the problem without them.

However, it looks like jQuery is put on the page too late to do any good for any but the Image Bubbles script. And version 1.4.2 is way outdated, let's try 1.6.4. I also noticed some syntax/standards issues in the HTML as well as inefficiencies in the javascript code. So let's rearrange things like so and get rid of the added noConflict directives. I doubt that they're needed, they might even be causing problems:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Type" content="cache" />
<meta name="robots" content="INDEX, FOLLOW" />
<meta name="keywords" content="ENTER KEYWORD" />
<meta name="description" content="ENTER DESCRIPTOPN HERE" />


<title>BLOGGEN</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/slider/slider.js"></script>
<script src="js/slider/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">

<link rel="stylesheet" href="css/slider/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider/anythingslider.css" type="text/css" media="screen" />





<!-- Anythingslider -->
<script type="text/javascript">

var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'];
function formatText(index, panel) {
	return slider1[index - 1] || index;
}
 

</script>

<!-- /*****SCRIPT FOR BUBBLE****/ -->
<LINK rel=stylesheet type=text/css href="css/topmenu/imgbubbles.css">
<LINK rel=stylesheet type=text/css href="css/topmenu/imgbubbles/bubbles.css">




<script type="text/javascript" src="/MENU/imgbubbles/imgbubbles.js">
/*****SCRIPT FOR BUBBLE****/
/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
	$('ul#orbs').imgbubbles({factor:1.55}) //add bubbles effect to UL id="orbs"
	$('ul#orbs_2').imgbubbles({factor:1.55}) //add bubbles effect to UL id="orbs_2"
})
</script>

</head>



<body>
<div id="fb-root"></div>


<div id="space" class="border">
<div id="paper">
	
 
    
    <div id="banner" align=center> 
		<img src="images/layout/banner.png" />
    </div>


    <div id="menu" align="center">
		<UL id=orbs class=bubblewrap>
		<LI>
			<A href="/dw.html"><IMG alt=HJEM src="images/layout/topmenu/hjem.png"></A>
            
       	</LI>
		
        <LI>
            <A href="/om_mig.html"><IMG alt="OM MIG" src="images/layout/topmenu/ommig.png"></A>
            
		</LI>
        
        <LI>
            <A href="/galleri.html"><IMG alt=GALLERI src="images/layout/topmenu/galleri.png"></A>
            
        </LI>
        
        <LI>
            <A href="/portefolio.html"><IMG alt=PORTEFOLIO src="images/layout/topmenu/portefolio.png"></A>
            
        </LI>
        
        <LI>
            <DIV><A href="/blog.html"><IMG alt=BLOG src="images/layout/topmenu/blog.png"></A>
            </DIV>
        </LI>
		</UL>
    </div>




    
<div id="page-wrap">

<!-- AnythingSlider #1 -->
<ul id="slider1">

<li class="panel1">
<div >
<p>Denne scrollbar er simpel at bruge og kræver ikke billeder.
        <br> 
        Det er muligt at ændre på farve, skygge, længde og bredde.
        <br>
        Den kan dog være blogged i nogle browsere. (f.eks. IE). 
        <br>
        Hvis du oplever dette, må du meget gerne skrive til mig.
        <br>
        <br>
        <b>Scrollbaren benytter jQuery:</b>
        <br><a href="js/slimbox/162_jquery.min.js" target="_blank">1.6.2/jquery.min.js</a>
        <br><a href="js/scrollbar/jquery.mousewheel.min.js" target="_blank">jquery.mousewheel.min.js</a>
        <br>
        <br>        
        <h3><i><font color="#91968b"><b>Teknisk:</b>
        <br>
        Jeg har flyttet STYLE text over i min css.
        <br>
        Jeg har downloaded jquery.min.js fra adressen, så den ligger på samme server som Tegnehulen.</font></i></h3>
        </p>
        	 <div align=right > <A title="find scrollbar her" href="http://www.dynamicdrive.com/dynamicindex11/scrollc.htm" target="_blank"><IMG class=image_frame_link src="images/layout/links/dynamiccdrive2.gif"></A>                   
       	  </div>                  
       	  
</div>
</li>

<li class="panel2">
<div class="quoteSlide">
<blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<br>-- Les Dawson</blockquote>
</div>
</li>

<li class="panel3">
<img src="images/slider/slide-tele-1.jpg" alt="" />
</li>

<li class="panel4">
<div class="quoteSlide">
<blockquote>Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
</div>
</li>

<li class="panel5">
<img src="images/slider/slide-tele-2.jpg" alt="" />
</li>

</ul> <!-- END AnythingSlider #2 -->


</div>







    <div id="footer">
		<p class="footer-text">Copyright by MD - Latest update april, 2012</p>
    </div>

</div>
</div>

</body>
</html>

If that doesn't work, put it up on the web and give me a link to it so I can diagnose it further.

**Mejse78** · 05-01-2012, 11:01 AM

Thanks for tidying up.. I'm not entirely sure how the links and scripts should be arranged.. what the system is.

It didn't work... probably because I've been messing with things trying to fix it?

I've uploaded the page, so you can see it here:
slidertest

Again: thanks for taking your time.

**Mejse78** · 05-02-2012, 08:28 PM

Searching the net for hours, I finally found the solution.

apparently you can make a noconflict.js, where you put this code:

Code:

jQuery.noConflict();
var $j = jQuery;

And then you add this to your page:

Code:

<script type="text/javascript" src="js/noconflict.js"></script>

Easy and simple - and it works!!!!

♪♫☼

**jscheuer1** · 05-03-2012, 03:23 AM

Ah yes it does work, but since you're not using any other script libraries that need the $, you didn't need to bother with any of that.

**ashwini223** · 09-29-2012, 08:26 AM

Hi jscheuer1

This is my page www.peacockbrand.in/demo/version1
I face a problem with mootools.js and jquery.min.js ( version 1.5.1 )
When i use jquery.min.js alone and comment mootools.js, I can see vertical menu on left where sub menus opens whenhttp://www.dynamicdrive.com/forums/newreply.php?do=newreply&p=273802&noquote=1 more is clicked works fine
When i use mootools.js alone, i can see vertical scroll images onmouseover works fine

I want both jquery.min.js and mootools.js to be used and where both vertical menu on left and vertical image slider on right to work

Please help

Thread: NoConflict.....two jquery-scripts RESOLVED

Thread Tools

Search Thread

NoConflict.....two jquery-scripts RESOLVED

Hmm

Yeehaar!!!!

Bookmarks

Bookmarks

Posting Permissions