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.


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members