CODEWITHSUNDEEP
javascript
balexander
balexander

Reputation: 24369

JavaScript Interference

Here is my <head> + <body> section:

<script type="text/javascript" src="http://www.septa.org/site/js/jquery-1.4.2.js">
<script type="text/javascript">
function insert(){
var linkElement = document.getElementById("BackButton");
var linkElementLnk = document.getElementById("BackButtonlnk");
var loc_array = document.location.href.split('/');

if (loc_array[loc_array.length-3] == "m")
{
  linkElementLnk.style.display = 'none';
}
if (loc_array[loc_array.length-3] == "maps" || loc_array[loc_array.length-2] == "stations" || loc_array[loc_array.length-3] == "stations" )
{
  linkElementLnk.style.display = 'block';
  var newT = document.createTextNode("Stations & Maps");
}
if (loc_array[loc_array.length-2] == "w" || loc_array[loc_array.length-2] == "s" || loc_array[loc_array.length-2] == "h" )
{
  linkElementLnk.style.display = 'block';
  var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length-2])));
}
else if (loc_array[loc_array.length-3] != "m")
{
  linkElementLnk.style.display = 'block';
  if (loc_array[loc_array.length-1] == "index.html" || loc_array[loc_array.length-1] == "index.shtml" || loc_array[loc_array.length-1] == "")
  {
  var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length-3])));
  }
  else
  {
  var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length-2])));
  }
}
linkElement.appendChild(newT);
}
function capWords(str){ 
   var words = str.split(" "); 
   for (var i=0 ; i < words.length ; i++){ 
      var testwd = words[i]; 
      var firLet = testwd.substr(0,1); 
      var rest = testwd.substr(1, testwd.length -1) 
      words[i] = firLet.toUpperCase() + rest 
   }
   return words;
} 
</script>
<script type="text/javascript" src="http://www.septa.org/site/js/qTip.js"></script>
<style>
div#qTip {
  padding: 3px;
  border: 1px solid #666;
  border-right-width: 2px;
  border-bottom-width: 2px;
  display: none;
  background: #1c1c1c;
  color: #FFF;
  font: bold 9px Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
  position: absolute;
  z-index: 1000;
}
</style>
</head>
<body onload="insert();">

When I have the onload="insert();" in my <body> it keeps the jQuery tool tip from working. Anyone know a way around this?

Upvotes: 1

Views: 1355

Answers (4)

Russ Cam
Russ Cam

Reputation: 125498

Perhaps some kind of race condition is occurring? It's difficult to say without seeing all the code, but why not do insert() when the document is ready, since your using jQuery already?

$(function () {
    insert();
});

In light of this answer, you could avoid this in future by doing something like

var oldLoad = window.onLoad || function(){};
window.onLoad = function() {    
    // new functionality

    oldLoad();
};

Upvotes: 0

jcubic
jcubic

Reputation: 66560

Try remove onload="insert();" and use jquery ready.

$(document).read(function() {
  insert();
});

and when you use jquery insted

var linkElement = document.getElementById("BackButton");

use

var linkElement = $('#BackButton');

insted

inkElementLnk.style.display = 'block';

use jquery

inkElementLnk.css('display', 'block');

Upvotes: 0

loxxy
loxxy

Reputation: 13151

I looked over the code at : http://www.septa.org/site/js/qTip.js The one you are including above.

Guess what I found? Jackpot!

window.onload = function () {
    tooltip.init ();
}

So when you add your own function into the body tag it overrides the tooltip function.

Upvotes: 4

Makram Saleh
Makram Saleh

Reputation: 8701

Try adding a delay before calling inside. In the below code it'll get called after half a sec:

$(document).ready(function() {
    setTimeout(insert, 500);
});

This will make sure that the tooltip init function will be called before your own code.

Upvotes: 0

Related Questions