Linking in jQuery Makes Other Script Not Work

Question

I am still new to script, this my be a simple question.

On the site I am building right now I have some small script functions that work great, but when I linked in jQuery for a different function the first ones stopped working. If I remove the jQuery link they work again.

Here is the functions that I have currently:

This one is the one I need jQuery for, <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

// ~~~~~~~~~~ Header Background image rotation ~~~~~~~~~~ \\
$(document).ready(function(){
var header = $('.mainheader');

var backgrounds = new Array(
    'url(img/rainbow.jpg)'
  , 'url(img/chicks_on_grass.jpg)'
  , 'url(img/cattle_on_pasture.jpg)'
  , 'url(img/csa_bundle.jpg)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 10000);

header.css('background-image', backgrounds[0]);
});

This next function still works normally

// ~~~~~~~~~~ ShowOrHide Element Onclick ~~~~~~~~~~ \\
function showOrHide(zap) {
 if (document.getElementById) {
  var abra = document.getElementById(zap).style;
  if (abra.display == "block") {
   abra.display = "none";
   } else {
   abra.display = "block";
  } 
  return false;
  } else {
  return true;
 }
}

This one does not work any more

// ~~~~~~~~~~ Form Email Hint ~~~~~~~~~~ \\
JotForm.init(function(){
  $('input_4').hint('ex: myname@example.com');
});

All three of these functions are enclosed in <script language="JavaScript"></script> tag.

Then I have a third party JavaScript link that controls some things on a form that I have on the site. <script src="http://max.jotfor.ms/min/g=jotform?3.1.1667" type="text/javascript"></script> This does not work alongside the JQuery either.

I have no idea what is going on, spent all day working on it. Any help is appreciated.

@ntgCleaner `1.11.0` is the newest stable release of the `1.x` branch... — War10ck, Feb 21 '14 at 22:03
I am not sure which Version it needs. Just thought newer would be better. — CW Design, Feb 21 '14 at 22:03
@War10ck, Oh yeah! sorry, I have been experimenting with 2.1.0. Sorry! — ntgCleaner, Feb 21 '14 at 22:07
@CWDesign No errors in your console? What is the script supposed to do? and what does it not do? And it means it's not supported or there's something better than that to use :http://stackoverflow.com/questions/2626563/leaving-out-type-text-javascript-language-javascript — ntgCleaner, Feb 21 '14 at 22:07
@CWDesign My apologies. The `language="javascript"` attribute should not be used and is deprecated in favor of `type="text/javascript"`. However, if you're validating against HTML5 both attributes can be omitted. Omitting both attributes when using XHTML 1.0 or HTML 4.01 is invalid however. — War10ck, Feb 21 '14 at 22:09

score 0 · Accepted Answer · answered Feb 21 '14 at 22:07

This is a conflict issue, refer to this page for further documentation do this:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

var $j = jQuery.noConflict();
// ~~~~~~~~~~ Header Background image rotation ~~~~~~~~~~ \\
$j(document).ready(function(){
var header = $j('.mainheader');

var backgrounds = new Array(
    'url(img/rainbow.jpg)'
  , 'url(img/chicks_on_grass.jpg)'
  , 'url(img/cattle_on_pasture.jpg)'
  , 'url(img/csa_bundle.jpg)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 10000);

header.css('background-image', backgrounds[0]);
});

// ~~~~~~~~~~ ShowOrHide Element Onclick ~~~~~~~~~~ \\
function showOrHide(zap) {
 if (document.getElementById) {
  var abra = document.getElementById(zap).style;
  if (abra.display == "block") {
   abra.display = "none";
   } else {
   abra.display = "block";
  } 
  return false;
  } else {
  return true;
 }
}
</script>

I just tried this, now the "Background Image Rotation" does not work but the rest does. — CW Design, Feb 21 '14 at 22:14
Sorry my bad, I had missed a small change that you had made. Seems to work now. — CW Design, Feb 21 '14 at 22:19
great! If you find this answer useful please consider upvoting and marking as accepted answer so it remains useful for other people users with similar issues. thanks! — isJustMe, Feb 21 '14 at 22:21

Linking in jQuery Makes Other Script Not Work

1 Answers1