Question

this code

    $(document).ready(function(){
                            var wBack = $('ul li.roundabout-in-focus').height();
                            var hBack = $('ul li.roundabout-in-focus').width();
                            var lback = $('ul li.roundabout-in-focus').css('left');
                            var tback = $('ul li.roundabout-in-focus').css('top');
    });
    function close_current(){
                    $('.nInfoIE').show();
                        $('.roundabout-in-focus').find('.img').show();
                        $('.roundabout-in-focus').css({position:'absolute',height:hBack,width:wBack,left:lBack,top:tBack});
                        $('.roundabout-in-focus').find('.iframe').css({'visibility':'hidden'});
                        $('ul li').find('.iframe').addClass('esconder');

                        $('ul li iframe').each(function(){
                            var tempurl = '';
                            tempurl = $(this).attr('src');
                            $(this).attr('src',tempurl.replace('?autoplay=1', ''));
                        });
                        watching = false;
                        $('.nInfoIE').hide();
 }

prompts an error by firebug alerting that hBack is not defined, as you can see is defined on document.ready and the function is executed onClick an element…

-edit-

even tried to add var wBack ,hBack,lback,tback = 0; before document.ready and removing the single ‘var’ inside document.ready

what am i missing?

Answer 1

In one word, scope. Declare your variables outside the $(document).ready function to get them into the global scope, and then set them inside the function.

var wBack, hBack, lback, tback;
$(document).ready(function () {
    wBack = ...