We Keep Coding

How to call outside function inside animate complete function in Jquery

I have the following code in one of my websites. I have a declared function named "pressedTab(tab)".
When i try to call it inside the following animate complete function, $('#firstShow').animate({'margin-left':'-='+go+'px'}, 1000, 'linear',function() {...pressedTab(tab);} it's not working.
I know its a scope thing but can someone help me fix the code? The strange part is that this code for years it worked. The last year it's not working properly.
<script type="text/javascript">
$(document).ready(function () {
$('.tab1').click(function () {
name('tab1');
});
$('.tab2').click(function () {
name('tab2');
});
$('.tab3').click(function () {
name('tab3');
});
function name(tab) {
function pressedTab(tab) { //FUNCTION THAT I NEED HELP WITH
if (tab == 'tab1') {
$('#img-2 #folder-tab-3').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('#folder-tab-1').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexUp');
$('#folder-tab-2').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('.tab1 p').removeClass('current').addClass('current');
$('.tab2 p').removeClass('current');
$('.tab3 p').removeClass('current');
$('#tug').hide('fast');
$('#tugImages').hide('fast');
$('#vessels').show();
$('#vessels2').hide(0);
} else if (tab == 'tab2') {
$('#img-2 #folder-tab-3').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('#folder-tab-1').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('#folder-tab-2').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexUp');
$('.tab1 p').removeClass('current');
$('.tab2 p').removeClass('current').addClass('current');
$('.tab3 p').removeClass('current');
$('#tug').hide('fast');
$('#tugImages').hide('fast');
$('#vessels').hide(0);
$('#vessels2').show();
} else {
$('#img-2 #folder-tab-3').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexUp');
$('#folder-tab-1').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('#folder-tab-2').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('.tab1 p').removeClass('current');
$('.tab2 p').removeClass('current');
$('.tab3 p').removeClass('current').addClass('current');
$('#tug').show();
$('#tugImages').show();
$('#vessels').hide(0);
$('#vessels2').hide(0);
}
}
if ($('#firstShow').attr('time') == "0") {
var go = "250";
$('#firstShow').animate({
'margin-left': '-=' + go + 'px'
}, 1000, 'linear', function () {
$(this).attr('time', "1");
$('.tab1').attr('time', "1");
$('.tab2').attr('time', "1");
$('.tab3').attr('time', "1");
//Show the right folder
$('#folder-tab-1').show("fast");
$('#folder-tab-2').show("fast");
$('#img-2 > #folder-tab-3').show("fast");
//Hide the Upper of the folder
$('#img-1').hide("fast");
$('#firstShow #folder-tab-3').hide("fast");
//alert(tab);
pressedTab(tab); //FUNCTION WHERE I WOULD LIKE TO BE CALLED BUT IT'S NOT
});
} else {
pressedTab(tab);
}
}
});
</script>

Callback function in animate(...) will be call after name(tab) in context which do not have access to scope of name(tab) function, but it have access to global scope. Try to put pressedTab(tab) outside $(document).ready(...) it should work.

Passing jQuery around as a parameter

If JQuery does exist in scope will these behave in the same way?
The $ is used to constrain the scope to inside each function I guess, I'm not exactly sure why however. The second snippet is the original code, I'm attempting to add a check for jquery before it's called as in the first snippet.
First:
(function () {
if (!window.jQuery) {
alert('Error: JQuery not loaded.');
return;
}
main(jQuery);
})();
function main($, undefined) {
alert("main 1");
//do some work on $
}
Second:
(function ($) {
if (!$) {
alert('Error: JQuery not loaded.');
return;
}
alert("main 2");
//do some work on $
})(jQuery);
Third (Maybe this is slightly better?):
(function () {
if (!window.jQuery) {
alert('Error: JQuery not loaded.');
return;
}
var main = function ($, undefined) {
alert("main 3");
//do some work on $
}
main(jQuery);
})();

This is the best solution for me.
(function () {
if (!window.jQuery) {
alert('Error: JQuery not loaded.');
return;
}
var main = function ($, undefined) {
alert("main 3");
//do some work on $
}
main(jQuery);
})();

Recursive function : where am I wrong here?

Code :
isDomLoaded = $(function () {
setTimeout(function () {
if (renderFinished) {
renderSocial(fotoProssima);
} else {
isDomLoaded();
}
}, 300);
});
it says isDomLoaded is not a function

Thats because it isn't a function. It is a jQuery object.
What you need might be:
isDomLoaded = function () {
setTimeout(function () {
if (renderFinished) {
renderSocial(fotoProssima);
} else {
isDomLoaded();
}
}, 300);
};
If you want to run it when the DOM is ready then do this after you declare the function:
$(window).load(isDomLoaded);
However, I think what you really need is to get rid of the isDomLoaded function and just use the following:
$(document).ready(function(){
renderSocial(fotoProssima);
});

function isDomLoaded(){
//code
//recursive call
isDomLoaded();
}

Order function in JS

I have the following code in main.js:
(function($) {
// Code goes here
$.fn.switcher=function(opts)
{
var defaults={
btn:'.info_btn', //Класс кнопки
block:'.details_info', //Класс блока, который нужно скрыть
hideifout:false, //Если true то скроект блок когда мышь его покент
classActive:'open' //Класс который ставится активной кнопке
//classNotActive:'close'
};
var options=$.extend(defaults, opts);
this.each(
function(){
var $this=$(this);
var btn=$this.find(options.btn);
var block=$this.find(options.block);
var plaing=false;
var click=function(e){
if (e.type=='mouseleave')
{
e.stopPropagation();
}
if (plaing) return;
plaing=true;
if (block.is(':visible'))
{
block.hide('blind',function(){
btn.removeClass(options.classActive);
btn.css('z-index',0);
plaing=false;
});
} else {
btn.addClass(options.classActive);
btn.css('z-index',2);
block.show('blind',function(){
plaing=false;
});
}
}
btn.click(click);
if (options.hideifout){
block.mouseleave(click);
}
}
);
}
})(jQuery);
And js code in my aspx file:
<script type="text/javascript">
$(document).ready(function () {
$('#listInfoBlock').load('/cinema/filmlist'); // load films by default
$(".title").click(function (e) {
e.preventDefault();
loadFilmList($(this));
});
$("#buttonFindFilmByName").click(function (e) {
e.preventDefault();
loadFilmList($(this));
});
// load films by criteria
function loadFilmList(id) {
$('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"));
$(".tabs").find("a").removeClass("active");
$(id).parent().addClass("active");
};
});
</script>
The function loadFilmList fills listInfoBlock.
The problem in that function in main.js executes first and there are no div called .details_info (it will be there when loadFilmList is executed)
How can I solve this problem?
Thanks.
SOLUTION:
I rewrite like that:
function loadFilmList(id) {
$('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"), function () {
$('.infoBlock').switcher();
$('div.widgets').switcher(
{
btn: '.expand',
block: '.voice_block',
hideifout: true
// classActive:'expand'
});
});
if (id !== undefined) {
$(".tabs").find("a").removeClass("active");
$(id).parent().addClass("active");
}
};
now it's work.
Thanks Nate.

The problem is that you're declaring $.fn.switcher but aren't ever calling it anywhere. I think you need to call it in two places, in a callback function on both of your .load() AJAX calls.
$('#listInfoBlock').load('/cinema/filmlist', function() { $.fn.switcher({ }); });
and
$('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"), function() { $.fn.switcher({ }); });

jQuery custom toggle function?

I'm trying to make a custom jQuery toggle function. Right now, I have 2 separate functions, lightsOn and lightsOff. How can I combine these functions to make them toggle (so I can just link to one function)?
function lightsOn(){
$('#dim').fadeOut(500,function() {
$("#dim").remove();
});
};
function lightsOff(){
$('body').append('<div id="dim"></div>');
$('#dim').fadeIn(250);
};

function toggleLights()
{
var $dim = $('#dim');
if ($dim.length)
{
$dim.fadeOut(500, function ()
{
$dim.remove();
});
}
else
{
$dim = $('<div/>', {id: 'dim'});
$('body').append($dim);
$dim.fadeIn(250);
}
}
Demo: http://jsfiddle.net/mattball/hxL8s/

function toggleLights(){
if ($("body").has("#dim")) {
$('#dim').fadeOut(500, function() {
$("#dim").remove();
});
} else {
$('body').append('<div id="dim"></div>');
$('#dim').fadeIn(250);
}
}