PDA

View Full Version : Two JavaScript clash ???



M rosi
09-09-2010, 11:44 AM
Hello,
i was going to use combine two tutorial in my site. 1st one is a tooltip & other one is a newsticker.
this is the tooltip that i have used http://flowplayer.org/tools/demos/tooltip/index.htm (http://flowplayer.org/tools/demos/tooltip/index.htm)

then i integrated the the newsticker's(attachment) JavaScript also(jquery-1.3.2.min.js). but when it integrated the tooltip was not working, even just put in to web page like bellow,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>

<link rel="stylesheet" type="text/css" href="css/standalone.css"> <!-- css of tooltip -->
<script type="text/javascript" src="js/jquery.js"></script> <!-- js of tooltip -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <!-- js of newsticker -->

etc............

i have attached the problematic js also. Is this a clash ??? please can any one tell me how can I neglect this problem ???

thank you

sanduwa
09-09-2010, 03:15 PM
When you include 2 jQuery @ once, it could be the conflict.

M rosi
09-09-2010, 03:19 PM
thanx sanduwa for your response.
would you tell me why can't include two jquerys? is it impossible ??? even isn't there any single way to include two jquerys ???

jscheuer1
09-09-2010, 03:42 PM
jQuery is a library of routines. You only need one. To fix that, replace:


<link rel="stylesheet" type="text/css" href="css/standalone.css"> <!-- css of tooltip -->
<script type="text/javascript" src="js/jquery.js"></script> <!-- js of tooltip -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <!-- js of newsticker -->

with:


<link rel="stylesheet" type="text/css" href="css/standalone.css"> <!-- css of tooltip -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

If that doesn't fix it, there might be a conflict between the ticker and tip scripts. To find out, we would need a link to your page.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

M rosi
09-09-2010, 04:54 PM
Thank you for responding me jscheuer1,
it's also not working by using

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
this is the Tooltip http://shmtestforums.uphero.com/Testing/Tooltip/Tooltip.html

this is the newsticker http://shmtestforums.uphero.com/Testing/newsticker/newsticker.html

& this is the combination of there two http://shmtestforums.uphero.com/Testing/test/test.html

here you can see tooltips are working but not newsticker. please help me jscheuer1. thanx again.

jscheuer1
09-09-2010, 05:21 PM
The problem isn't as we first thought, two jQuery scripts. On the shmtestforums.uphero.com/Testing/test/test.html page, it's one jQuery script and one mootools script - a conflict between two script libraries, both of which want control of the $ variable. On that page you can fix things by changing:


<script type="text/javascript">
$(document).ready(function(){

var speed = 700;
var pause = 3500;

function newsticker()
{
last = $('ul#listticker li:last').hide().remove();
$('ul#listticker').prepend(last);
$('ul#listticker li:first').slideDown("slow");
}

interval = setInterval(newsticker, pause);
});
</script>

to (change highlighted):


<script type="text/javascript">
jQuery(function($){

var speed = 700;
var pause = 3500;

function newsticker()
{
last = $('ul#listticker li:last').hide().remove();
$('ul#listticker').prepend(last);
$('ul#listticker li:first').slideDown("slow");
}

interval = setInterval(newsticker, pause);
});
</script>

Note: The order that the scripts in the head are in is important. Fortunately you already have them in the correct order on that page.

M rosi
09-09-2010, 06:00 PM
This is an amazing work jscheuer1 :eek: thank you very much. :)
actually this is unbelievable.
but how can we know what is the order of the jquerys? is there any method to understand it?
if i want to combine a another jquery(3rd jquery) to this what should be the order? lets take an eg,
this is a jquery for rotating billboard system,

<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqFancyTransitions.1.8.min.js"></script>
</head>
<body>
<div id="slideshowHolder">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
</div>
<script type="text/javascript" src="jquery.js"></script>
</body>
so what would be the order. please jscheuer1 tell me how the order can be understand ???

however big thanx John:D

jscheuer1
09-09-2010, 08:00 PM
There are two main considerations:


jQuery is the only script library I know of that can coexist with another.


The easiest way for it to do so is to come first, do its work, then hand over control to the other library.


This depends upon another consideration - upon how well the script(s) that use jQuery are written.

I think you may or may not be missing an important point here, so it bears emphasis:

jQuery and mootools are script libraries (there are many, like dojo and prototype to name only two others). None of them do much in and of themselves other than set up a large variety of routines for accomplishing various tasks more simply than can be done with javascript alone. For some reason though, the authors of each of these libraries have chosen the variable $ to be the cornerstone of their library. And they all use it in different ways. jQuery alone (as far as I know) has several established methods to allow it and the code that uses it to do its work with $ and then hand that variable over to another library. But for this to work with any given script written for jQuery, the author of that script has to have taken advantage of at least one of these several methods I just alluded to.

Additionally, if you have an external script tag on your page to jQuery (or one to any other script library), like (in this case jQuery):


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

as long as things are arranged properly, you shouldn't need another one to jQuery. If it's another script library, you shouldn't need another one to that library. Each library only needs to, and generally only should be included once on any one page. The one exception is if for some reason you need to run two or more different versions of the jQuery library on the same page. In which case you can do so, provided the code of the scripts using each jQuery version is well written and you take the proper steps to allow each version of jQuery and the scripts that use each one control of the $ variable when they need it. Generally though any script that uses jQuery can be made to work with any version of jQuery with little or no modification. So this situation isn't as common as one might think.

Hopefully that clears some things up if only in a general sort of way.

Now, about your question - as long as the jqFancyTransitions script is well enough written visa vis taking advantage of one of the techniques that allows it to work with other libraries, you can do this (addition highlighted):


<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Combine</title>
<link rel="stylesheet" type="text/css" href="css/standalonenewsticker.css">
<link rel="stylesheet" type="text/css" href="css/standaloneTooltip.css">


<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
jQuery(function($){

var speed = 700;
var pause = 3500;

function newsticker()
{
last = $('ul#listticker li:last').hide().remove();
$('ul#listticker').prepend(last);
$('ul#listticker li:first').slideDown("slow");
}

interval = setInterval(newsticker, pause);
});
</script>
<script type="text/javascript" src="jqFancyTransitions.1.8.min.js"></script>
<script src="js/mootools.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function() {

// Create variables (in this case two arrays) representing our bubbles and pages
var myPages = $$('.page');
var myBubbles = $$('.bubble');

// Set bubbles opacity to zero so they're hidden initially and toggle visibility on for their container
myBubbles.setStyle('opacity', 0);
$('bubbleWrap').setStyle('visibility','visible')

// Add our events to the pages
myPages.each(function(el, i) {
el.set('morph', {link : 'cancel'});

el.addEvents({
'mouseenter': function() {
myBubbles[i].morph({
'opacity' : 1,
'margin-top' : '-15px'
});
},
'mouseleave' : function() {
myBubbles[i].morph({
'opacity' : 0,
'margin-top' : 0
});
}
});
});
});

</script>
</head>

Notice that the:


<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

tag for the jQuery library appears only once on the page and that both scripts that use it (newsticker, which is an on page script, and jqFancyTransitions, which is an external script) appear before the:


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

tag that brings in the mootools library.

As I say, if jqFancyTransitions is well enough written as far as the ability to coexist goes, it will work just like that and you may place:


<div id="slideshowHolder">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
</div>

anywhere in the body of the page you want this feature to appear.

One thing that troubles me is that you have after that:


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

If this is what it appears to be - another external script tag to jQuery, it can simply be skipped. If it's to another helper script (like an initialization) for the jqFancyTransitions, it will need to be kept, and hopefully it is written in such a way that it can work given all the other scripts before it on the page.

To be more specific I would need to see a working example (on a page by itself if need be) of jqFancyTransitions running this slideshow.

M rosi
09-09-2010, 10:07 PM
wow what an explanation! thank you very much.
you are encouraging me lot to learn jQuery. :D

In the last example is very tough.may it has little mistake.
http://shmtestforums.uphero.com/rotating_billboard/rotate.html

Thanx lot John.

jscheuer1
09-10-2010, 12:07 AM
Turns out this:


<body>


<div id="slideshowHolder">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>

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

Is not a link to jQuery. It's to this script:


$('#slideshowHolder').jqFancyTransitions({ position: 'curtain' });

$('#effCurtainAlternate').click( function(){
$('#slideshowHolder').jqFancyTransitions({ position: 'curtain', direction: 'alternate' });
$('#positionDyn').html('curtain');
$('#directionDyn').html('alternate');
});

$('#effFountainTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'fountain' });
$('#positionDyn').html('top');
$('#directionDyn').html('fountain');
});

$('#effRandomTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'random' });
$('#positionDyn').html('random');
$('#directionDyn').html('top');
});

$('#effLeftTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'left' });
$('#positionDyn').html('left');
$('#directionDyn').html('top');
});

$('#effRightBottom').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'bottom', direction: 'right' });
$('#positionDyn').html('right');
$('#directionDyn').html('bottom');
});

$('.eComb').click( function(){
$('#eComb').show();
$('#eEff').hide();
$('.eComb').removeClass('slideshowHolderActive');
$('.eEff').removeClass('slideshowHolderActive');
$(this).addClass('slideshowHolderActive');
});

$('.eEff').click( function(){
$('#eComb').hide();
$('#eEff').show();
$('.eEff').removeClass('slideshowHolderActive');
$('.eComb').removeClass('slideshowHolderActive');
$(this).addClass('slideshowHolderActive');
});

$('#effWave').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'wave' });
$('#effDyn').html('wave');
});

$('#effZipper').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'zipper' });
$('#effDyn').html('zipper');
});

$('#effCurtain').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'curtain' });
$('#effDyn').html('curtain');
});

Looking at everything else, this (the above script) appears to be the only place where the $ is exposed in such a way that, if another library like mootools is on the page, it won't be able to use the jQuery meaning for $. This can be fixed by adding to the above code (wrapping it in an anonymous function that defines jQuery for it locally), so that it looks like so (additions highlighted, one top, one bottom):


(function($){
$('#slideshowHolder').jqFancyTransitions({ position: 'curtain' });

$('#effCurtainAlternate').click( function(){
$('#slideshowHolder').jqFancyTransitions({ position: 'curtain', direction: 'alternate' });
$('#positionDyn').html('curtain');
$('#directionDyn').html('alternate');
});

$('#effFountainTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'fountain' });
$('#positionDyn').html('top');
$('#directionDyn').html('fountain');
});

$('#effRandomTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'random' });
$('#positionDyn').html('random');
$('#directionDyn').html('top');
});

$('#effLeftTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'left' });
$('#positionDyn').html('left');
$('#directionDyn').html('top');
});

$('#effRightBottom').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'bottom', direction: 'right' });
$('#positionDyn').html('right');
$('#directionDyn').html('bottom');
});

$('.eComb').click( function(){
$('#eComb').show();
$('#eEff').hide();
$('.eComb').removeClass('slideshowHolderActive');
$('.eEff').removeClass('slideshowHolderActive');
$(this).addClass('slideshowHolderActive');
});

$('.eEff').click( function(){
$('#eComb').hide();
$('#eEff').show();
$('.eEff').removeClass('slideshowHolderActive');
$('.eComb').removeClass('slideshowHolderActive');
$(this).addClass('slideshowHolderActive');
});

$('#effWave').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'wave' });
$('#effDyn').html('wave');
});

$('#effZipper').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'zipper' });
$('#effDyn').html('zipper');
});

$('#effCurtain').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'curtain' });
$('#effDyn').html('curtain');
});
})(jQuery);

But the page (shmtestforums.uphero.com/rotating_billboard/rotate.html) isn't using most of that. So you could use simply:


jQuery('#slideshowHolder').jqFancyTransitions({ position: 'curtain' });

Once you change the code in the file referred to by:


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

to either of the two scripts blocks above suggested for it, the instructions from my previous post as to how to arrange things in the head should work. I couldn't easily test it though because you've apparently moved/removed the resource files from the previous demo.

If you want more help getting the three working together, put up a demo like the one that was at shmtestforums.uphero.com/Testing/test/test.html that attempts to use all three scrpts.

M rosi
09-10-2010, 03:56 AM
Still there is something. oh sorry dear! I'll put it immediately.

Tooltip http://shmtestforums.uphero.com/Tooltip/Tooltip.html

newsticker http://shmtestforums.uphero.com/newsticker/newsticker.html

rotating billboard http://shmtestforums.uphero.com/rotating_billboard/rotate.html

combine all http://shmtestforums.uphero.com/test_new/combine.html

thank you so much....

jscheuer1
09-10-2010, 07:03 AM
The shmtestforums.uphero.com/test_new/combine.html file would work, except for one thing:

shmtestforums.uphero.com/test_new/jqFancyTransitions.1.8.min.js

as called from that page as:


<script type="text/javascript" src="jqFancyTransitions.1.8.min.js"></script>

is a 404 not found. If I change that tag to:


<script type="text/javascript" src="http://shmtestforums.uphero.com/rotating_billboard/jqFancyTransitions.1.8.min.js"></script>

it works like a dream. So all you need to do is make sure that all the resource files called for by the page are actually available to it.


In unrelated matters not critical to getting this to function:


You should be using the latest jQuery, replace:



<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

with:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Or host your own copy by downloading and using it (right click and 'save as'):

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js



The newsticker is constantly throwing non-fatal errors. This is no big deal, but makes it less efficient than it could be. And it has undeclared global variables that could cause problems in some browsers once it's integrated into a complex markup. It should be changed to:


<script type="text/javascript">
jQuery(function($){

var speed = 700;
var pause = 3500;
var last, interval;

function newsticker()
{
last = $('ul#listticker li').last().hide().remove();
$('ul#listticker').prepend(last);
$('ul#listticker li').first().slideDown("slow");
}

interval = setInterval(newsticker, pause);
});
</script>



The shmtestforums.uphero.com/test_new/css/standalonenewsticker.css file has a syntax error:


. . . padding:5px;
list-style:none;
}
#listticker a{
color:#000000;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bol . . .

A valid value should be put there like:


. . . padding:5px;
list-style:none;
}
#listticker a{
color:#000000;
margin-bottom: 0px;
}
#listticker .news-title{
display:block;
font-weight:bol . . .

Or the line should be removed.

M rosi
09-10-2010, 12:26 PM
i have no words to appreciate you. i can't imagine how would your brain works. nice work John :)
actually how do you know "jqFancyTransitions.1.8.min.js" is not working???
and it not works locally, when put in to online it works. why it is happening like that?
Thank you John thank you sooooooooooooooooooo much...... :D

jscheuer1
09-10-2010, 02:43 PM
Well my mind works fairly logically, at least in this area. But I have help, instincts and experience of years, and perhaps as importantly, tools. The moment I saw that the images were laid out the way they were in the demo, I suspected that one of the scripts was either missing or not firing. I used a Firefox add on called developer tools. One of its many options is to view all scripts associated with a page. I could see almost immediately that jqFancyTransitions.1.8.min.js was missing.

I can't be certain why it wasn't working for you locally, though. I'd probably have to be there. Some scripts have to be live, at least in certain browsers, to work. But I don't think these qualify for that, though one or more of them may.

M rosi
09-10-2010, 04:17 PM
thanx for your thoughts :)

M rosi
09-12-2010, 04:20 PM
Oh!!! I'm in a trouble again. this jQuery inviting me lot of problems.
i must introduce a tab for my page.
this is the tab http://shmtestforums.uphero.com/tab%20skin/skin4.htm

and this the combination of these three http://shmtestforums.uphero.com/combine_last/combine_last.html

when the introducing the

<script src="js/jquery.js" type="text/javascript"></script>
to header part, the tooltip is not working. (newsticker & tab was working.but not tooltip)

Please John help me once again. i tried this many times.(may be more that 20 times.but no success). you are the only one, who can help me.
your kindly help much needed John. :confused:
thank you.

jscheuer1
09-12-2010, 05:42 PM
Move this (highlighted):


. . . myBubbles[i].morph({
'opacity' : 0,
'margin-top' : 0
});
}
});
});
});

</script>
<script src="js/jquery.js"></script>
<style>
/* navigation */
#nav {
background:#ddd url(images/tab/h300.png);
border-bottom:0px solid #CCCCCC;
height:156px;
width:74 . . .

to before mootools:


. . . ul#listticker li:last').hide().remove();
$('ul#listticker').prepend(last);
$('ul#listticker li:first').slideDown("slow");
}

interval = setInterval(newsticker, pause);
});
</script>
<script src="js/jquery.js"></script>

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

<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function() {

// Create variables (in this case two arrays) representing our bubbles and pages
var myPage . . .

M rosi
09-12-2010, 06:15 PM
:mad: ah! i can't imagine how i missed that change. may be still i can't understand which is the order and specially still i can't understand the way of executing in side the jQuerys(jQuerys code)

you are very kind.thank you very much John. :)

pidjopew
03-23-2011, 07:13 PM
Hi everyone, sorry for reviving this thread but I saw some interesting stuff which might help me out with my problem.

I am using three javascript files for my website, of which one appears to be blocking the other two, which just don't work.

The javascript file blocking the other two is for ZeroClipboard, a function that allows for copying certain text through Flash.

The other two files are jquery files (jquery.cycle.all.min.js and jquery-1.2.6.min.js).

Thing is, the ZeroClipboard file starts as follows:

// Simple Set Clipboard System
// Author: Joseph Huckaby

var ZeroClipboard = {

version: "1.0.7",
clients: {}, // registered upload clients on page, indexed by id
moviePath: 'ZeroClipboard.swf', // URL to movie
nextId: 1, // ID of next movie


$: function(thingy) {
// simple DOM lookup utility function
if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);
if (!thingy.addClass) {...

As you can see, the dollar sign is defined without a jquery purpose. Could it be that this is what is blocking the other files? And if so, how do I fix it? Thanks!

P.

jscheuer1
03-24-2011, 02:35 AM
Yes pidjopew. That takes over the use of the $ variable. What you need to do to fix it is prevent that from creating a conflict. You could change all the $ in that script to $2, that might do it. Or, if the jQuery script can run in no conflict mode, all you may need to do is to put jQuery into no conflict mode. There are other possibilities.

To be more specific, I would have to see the page.

pidjopew
03-24-2011, 11:19 AM
Hi John! thank you very much for replying.

I tried to replace everything in ZeroClipboard.js with "$2", but it doesn't appear to work. Moreover I don't know how the no conflict mode in Jquery works :rolleyes:

I have attached the aforementioned file so you can check it. If I'm correct there are only four instances where the "$" is actually used, so the problem seems more like a categorical definition problem caused by the use of the dollar symbol which clashes with Jquery...Do you think it is possible to replace the dollar sign altogether, say a euro sign? :D anyway, thanks again!

Note: file attached is the original version.

jscheuer1
03-24-2011, 04:53 PM
Please post a link to a page on your site that contains the problematic code so we can check it out.

pidjopew
03-24-2011, 10:36 PM
Hi John, sorry about that.
The web page of interest is located in a secured forum, so I have attached the code to this message. Don't mind the content ;)

jscheuer1
03-25-2011, 01:26 AM
I still can't be sure without seeing the page. But it looks like, if in addition to changing all the $ to $2 in the ZeroClipboard.js script you also change the ones in this script on the page (additions red):


<script language="JavaScript">
var clip = null;

function $2(id) { return document.getElementById(id); }

function init() {
clip = new ZeroClipboard.Client();
clip.addEventListener('load', my_load);
clip.addEventListener('mouseOver', my_mouse_over);
clip.addEventListener('complete', my_complete);

clip.glue( 'd_clip_button' );
}

function my_load(client) {
debugstr("Flash movie loaded and ready.");
}

function my_mouse_over(client) {
// we can cheat a little here -- update the text on mouse over
clip.setText( $2('fe_text','fe_text2').value );
}

function my_complete(client, text) {
debugstr("Copied text to clipboard: " + text );
}

function debugstr(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
$2('d_debug').appendChild(p);
}
</script>

That might do it. But there could still be other problems, or a better way to deal with it.

I really need to see the page live to be sure.

pidjopew
03-25-2011, 08:29 AM
Sir, I owe you one! That worked! :cool:
Thank you for your time. May we meet again in the future ;)