Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Run javascript within Fancybox?

2:38 am on Oct 26, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 23, 2007
votes: 0

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:


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:

'hideOnContentClick': false,
'frameWidth': 800,
'padding': 10,
'callbackOnShow': function() {
$(".text").click(function (){


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>");
$("#"+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_holder+ " .selectitems").mouseover(function(){
$("#"+id_holder+" .selectitems").mouseout(function(){
$("#"+id_holder+" .selectitems").click(function(){
$("#"+id_holder+" .selectedclass").removeClass("selectedclass");
var thisselection = $(this).html();

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

And my JS that fires Fancybox is...

$(document).ready(function() {
'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]

7:40 pm on Oct 26, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:June 3, 2004
votes: 0

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.