Reputation: 79
Being a bit of a javascript/jQuery noob, I've run into a problem that I can't find a solution for.
I have a function that grabs some parameters from the url and replaces elements. All good. I also have instances of FancyBox on the page.
It semms something in my getUrlVars function is killing FancyBox. If I load FancyBox first in the document ready, it just loads the larger pic into a new browser window, like a regular link. If I grab the URL vars and let them do their thing before loading FancyBox, the links do nothing at all.
I've tried running both in isolation and they work perfectly, until I try to run them both.
Here's the getUrlVars script...
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var salesname = getUrlVars()["agent"];
var salesname = unescape(salesname);
var vendor = getUrlVars()["vendor"];
var vendor = unescape(vendor);
var position = getUrlVars()["position"];
var position = unescape(position);
$('h1:contains("thisiswherethevendorgoes")').html( '<span class = "fade-in one"> <strong>Prepared for ' + vendor + '</strong></span>');
$("body").html($("body").html().replace(/salesname/g, salesname + ', ' + position));
});
Before or after (I've tried every permutation) I setup FancyBox...
$("a#fbs").fancybox({
'opacity' : true,
'overlayShow' : true,
'transitionIn' : 'elastic',
'easingIn' : 'easeInCirc',
'transitionOut' : 'elastic',
'easingOut' : 'easeOutCirc',
'speedIn' : 500,
'speedOut' : 250
});
Both have to run (I think?) inside $(document).ready(function() {
Any clues? Any and all suggestions much appreciated.
Upvotes: 1
Views: 392
Reputation: 30666
I see you are replacing the whole body's content. I guess this is a bit hurtful.
This plugin jQuery replaceText replaces all occurrences of a a string in the textNodes only, which won't require you to reapply all the body.
$('<body>').replaceText(/salesname/g, salesname + ', ' + position);
Note: This solution will not work if you need to replace text in html attributes though.
Nevertheless, you might maybe search for a less consuming task like replacing everything from the body element. Do you use any server-side processing, like asp.net, or such ?
d.
Upvotes: 0
Reputation: 519
Try the below syntax to avoid the conflict
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
Upvotes: 4
Reputation: 3356
This may not be an exact answer, but have done a full source compare between what your markup looks like between the three different scenarios?
Scenario A: getUrlVars (present) Scenario B: fancybox (present) Scenario C: both (present)
I know that I have had numerous issues with using fancybox and a lot of them have been due to the way that the page rendered and how I was attempting to tie fancybox to a specific object that rendered differently in the page than expected. Reviewing source/markup has generally helped me in these types of situations. Hope this helps.
Upvotes: 0