The code is stopped working after adding the jquery-.XXmin.js in script tag

Question

i downloaded a Html5 open source memory game code i'm trying to add it some fonctionnalities but the buttons action and removeClass() ,addClass() ... methods didn't work so i remember to add the jquery.js in script tag but after that the game didn't work again . I think it's a problem with the prototype.s2.min.js. here's the code :

Html:

<!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" xml:lang="en" lang="en">
   <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>scripty2 Memory!</title>
<link href="memory.css" media="screen" rel="Stylesheet" type="text/css" />
 </head>
 <body>

<div id="field">
  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>

  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>

  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>

  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>
  <div class="card"><img src="back.png"/></div>

  <div id="score">0</div>
  <div id="tries">0</div>
</div>

<!--<div id="controls">
  <a href="#" onclick="shuffle()">shuffle cards</a><br/>
  <a href="#" onclick="shuffle(3)">shuffle cards (slowly)</a>
</div>-->

<script type="text/javascript" src="prototype.s2.min.js"></script>
 <script type="text/javascript" src="memory.js"></script>
  <script  src="js/jquery-1.6.min.js"></script> // i added this 
 </body>
 </html>

i didn't change the js and the css code . Any idea Please Thank you in advance

http://stackoverflow.com/questions/134572/jquery-prototype-conflict/136502#136502 — Ja͢ck, May 30 '12 at 08:26

score 1 · Answer 1 · answered May 30 '12 at 08:23

add it before other JS files, as they get run one by one. You need to init jquery before you use it in other js files.

<script  src="js/jquery-1.6.min.js"></script> 
<script type="text/javascript" src="prototype.s2.min.js"></script>
<script type="text/javascript" src="memory.js"></script>

score 1 · Answer 2 · answered May 30 '12 at 08:24

1

jQuery hijacks the $ function that prototype uses. Take a look at the $.noConflict() method allows you to use jQuery with other frameworks.

answered May 30 '12 at 08:24

Darin Dimitrov

1,023,142
271
3,287
2,928

i added it like that but it didn't work : – Amira Manai May 30 '12 at 09:01

The code is stopped working after adding the jquery-.XXmin.js in script tag

2 Answers2