Welcome to WebmasterWorld Guest from 54.159.165.175

Forum Moderators: open

Run javascript within Fancybox?

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

5+ Year Member



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]

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

10+ Year Member



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.

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month