Question

I’m running jQuery code to change a fancybox’s appearance after a user performs a particular action, however when the following code is called

$('#boxbox').fadeOut(function(){
    $(".fancybox-inner").width('590px');
    $(".fancybox-inner").height('140px');
    $('#boxbox').html(data).fadeIn();
});

only the height is changed. Everything else works as expected except the second line. How can I resize the box to 590×140?

Answer 1

By modifying the HTML of #boxbox you’re also modifying or overwriting .fancybox-inner. Try:

$('#boxbox').click(function () {
    $(".fancybox-inner").width('590px').height('140px');
    $('.fancybox-inner .text').html("I've been clicked!").fadeIn();
});

http://jsfiddle.net/sRMbV/7