Prototype Framework Breaking Other Scripts

Question

I have a simple page that has a (non-Prototype) JavaScript pop-up for login. It has been working fine. But when I add the Prototype framework to the page the pop-up quits working.

<script type="text/javascript" src="recipes/js/prototype.js"></script>
<script type="text/javascript">
var imgnum = 1;

function nextimg() {
  /* <![CDATA[ */
  imgnum++;
  if (imgnum > 5) imgnum = 1;
  var nextimg = 'recipes/img/iphone_' + imgnum + '.png';
  var nextimg2 = 'recipes/img/iphone_' + (imgnum + 1) + '.png';
  imagepreload = new Image();
  imagepreload.src = nextimg2;
  $('iphoneimg').src=nextimg;
  /* ]]> */
} 
</script>

I have tried to move the JS include to the bottom, with no luck. Any ideas?

Also, it works fine in IE but not Firefox or Safari.

Answer 1

Prototype takes the $ function that JQuery also uses (are you using JQuery?).

See here

Answer 2

Make sure the 'iphoneimg' element exists on your page.

If firebug is not showing anything, add some alert() breakpoints to see where it silently fails.

Answer 3

After looking at the code for awhile I figured it out. My pop-up login box is using a toggle() function. So I renamed the toggle to toggle_box and the problem is now fixed.