Craig
Craig

Reputation: 79

javascript function disabling and/or conflicting with fancybox

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

Answers (3)

Didier Ghys
Didier Ghys

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

Srivathsan
Srivathsan

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

Bill Blankenship
Bill Blankenship

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

Related Questions