Run javascript within Fancybox?

[ewwatson]

Hello, any help would be a greatly appreciated. I came across this great script that customizes selects. This custom select is going into Fancybox. The select is inline within a hidden div. Fancybox calls it, and it pops up! Each are working perfect, but I can't get the custom select to work within fancybox. Common theme with me lately.I have found the solution but I can't seem to put the pieces together. Can you help me?

In a nut shell, here is what the Answer (I think) says to do...

>>>>>>>>>>>>>>>>>>>>
ok, I guess what you call 'jquery stop working on fancybox' is because
your following alert doesn't work within the fancybox:

$(".text").click(function(){
alert("clicked");
});

if you want this alert or any other jquery function to work within a
fancybox then you have to call them when you activate fancybox with
the option 'callbackOnShow'

so move your alert to your #login id (the element which opens in
fancybox) like this:

$("#login").fancybox({
'hideOnContentClick': false,
'frameWidth': 800,
'padding': 10,
'callbackOnShow': function() {
$(".text").click(function (){
alert("clicked");
});
}

});
>>>>>>>>>>>>>>>>>>

My Custom Select JS is...

$.fn.SelectCustomizer = function(){
// Select Customizer jQuery plug-in
return this.each(function(){
var obj = $(this);
var name = obj.attr('id');
var id_slc_options = name+'_options';
var id_icn_select = name+'_iconselect';
var id_holder = name+'_holder';
var custom_select = name+'_customselect';
obj.after("<div id=\""+id_slc_options+"\"> </div>");
obj.find('option').each(function(i){
$("#"+id_slc_options).append("<div id=\"" + $(this).attr("value") + "\" class=\"selectitems\"><span>" + $(this).html() + "</span></div>");
});
obj.before("<input type=\"hidden\" value =\"\" name=\"" + this.name + "\" id=\""+custom_select+"\"/><div id=\""+id_icn_select+"\">" + this.title + "</div><div id=\""+id_holder+"\"> </div>").remove();
$("#"+id_icn_select).click(function(){
$("#"+id_holder).toggle(700);
});
$("#"+id_holder).append($("#"+id_slc_options)[0]);
$("#"+id_holder+ " .selectitems").mouseover(function(){
$(this).addClass("hoverclass");
});
$("#"+id_holder+" .selectitems").mouseout(function(){
$(this).removeClass("hoverclass");
});
$("#"+id_holder+" .selectitems").click(function(){
$("#"+id_holder+" .selectedclass").removeClass("selectedclass");
$(this).addClass("selectedclass");
var thisselection = $(this).html();
$("#"+custom_select).val(this.id);
$("#"+id_icn_select).html(thisselection);
$("#"+id_holder).toggle(700)
});
});
}

$(document).ready(function() { $('#demoselect, #loginselect').SelectCustomizer();
})

And my JS that fires Fancybox is...

$(document).ready(function() {
$("a#contact").fancybox({
'frameWidth': 300,
'frameHeight': 300
});
});

[edited by: whoisgregg at 1:55 pm (utc) on Oct. 27, 2009]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] :) [/edit]

[Zipper]

Are you getting any errors? Also, try to avoid using multiple $(document).ready() calls, they tend to break operations quite often.

It will be helpful if you could post your HTML code as well.