Develop Reference

Modular way to use jQuery selectors

Is there a way to use jQuery selectors in modular way:
var logo = $('.logo', function() {
function show () {
console.log('logo has appeared');
$(this).addClass('logo-animated');
};
function hide() {
console.log('logo has been removed');
};
});
I want to be able to assign selector to variable and have some functions within it that I could be able access from outer it's scope.
NOTICE, that is pseudo code, I just drew you a picture of how I see it.
var selector = $('.someclass',
# here goes functions that I could access from outside;
);
UPDATE
var parallax = function() {
var images = ["http://localhost:8000/static/assets/images/hero-image-welcome.jpeg"];
var selector = $('.parallax-module');
var reload = function() {
console.log('reload')
};
$(selector).each(function(index) {
var image = {};
image.element = $(this);
image.height = image.element.height();
images.push(image);
$(this).css('background-image', 'url(' + images[index] + ')');
});
return {
images: images,
reload: reload()
}
}();
parallax.reload;
console.log(parallax.images[0])
// This goes without error, but isn't right;
var sParallax = $('.parallax-module');
sParallax.addClass('someClass');
// This would cause error;
parallax.addClass('someClass');
In this case I can use parallax public properties and methods, but I can't use selector (as I did in the beginning) without creating a new link to it. I know I can use public properties to access selector, but it's not the way I looking for.

You can just set the variable with your desired selector and then just add functions to that variable
var logo = $('.logo');
logo.show = function () {
console.log('logo has appeared');
$(this).addClass('logo-animated');
}
logo.hide = function () {
console.log('logo has been removed');
}
logo.show();
logo.hide();
JSFIDDLE

You can access through this:
logo.prevObject[0].show()//or hide()

I think I found the way, but it does not look right to me, it is working thought:
var parallax = function() {
var images = ["http://localhost:8000/static/assets/images/hero-image-welcome.jpeg"];
var selector = $('.parallax-module');
var reload = function() {
console.log('reload')
};
$(selector).each(function(index) {
var image = {};
image.element = $(this);
image.height = image.element.height();
images.push(image);
$(this).css('background-image', 'url(' + images[index] + ')');
});
return {
images: images,
reload: reload()
}
}().selector;
With selector reference in the end it is now valid to use parallax variable as simple link to DOM element, as well as to access functions that within it.

Src for the images does not set properly

I have some divs that has a class named class='tweetCon'
each containing 1 image and I want to check if the image source exist or not so if it is available I dont do anything but if not I will change the image source with an appropriate image my code is as follow:
$('.tweetimgcon').children('img').each(function () {
imageExists($(this).attr("src"), function (exists) {
if (exists == true) {
} else {
$(this).attr("src", "https://pbs.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png");
}
}, function () {
});
});
and also imageExists() is as follow:
function imageExists(url, callback,callback2) {
var img = new Image();
img.onload = function() { callback(true);callback2(); };
img.onerror = function() { callback(false);callback2(); };
img.src = url;
}
now the problem is that the src for the images that are not available does not set properly though when I check the src of those images by console.log it shows that they are properly set but it is not shown and when I use inspect element of chrome I can see that src is not set . Can anyone help me?

The point is $(this) doesn't point to your object, because you call $(this) inside your imgExists callback function but NOT the jQuery callback function each, so the this object doesn't point to your original img tag!
The solution should be save the object reference first, try the below:
$('.tweetimgcon').children('img').each(function () {
var _this = $(this);
imageExists($(this).attr("src"), function (exists) {
if (exists == true) {
} else {
_this.attr("src", "https://pbs.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png");
}
}, function () {
});
});

Just for a little tip for a better callback function use call.
function imageExists(url, cb, ecb) {
var img = new Image();
img.onload = function() { cb.call(img,true,url); };
img.onerror = function() { ecb.call(img,false,url); };
img.src = url;
}
I added img as the first argument and that will then be your this keyword instead of window.
Testing Bin

get id of child element when parent is clicked

Hello I have seen similar posts but none answer what I want to accomplish
I made a sample here
http://jsfiddle.net/edgardo400/R6rVJ/
What i basically want is when a click happens in the parent you get the id of the child
and store it in a variable so i can pass the variable currentID to the code below otherwise I will have to replicate this code 9 times for each id from box1 to box9
jQuery(currentID).delegate("a", "hover", function(event){
var $img = jQuery(this).parent("li").find('img');
var image = jQuery(this).attr('data-img');
jQuery('.defaultimg').stop(true, true).fadeOut();
if( event.type === 'mouseenter' ) {
if($img.length){
$img.show();
}else{
jQuery(this).parent("li").append('<img id="theImg" src="' + image + '" />');
}
}else{
if($img){
$img.hide();
}
jQuery('.defaultimg').stop(true, true).fadeIn();
}
});
});

$('#boxes').on('click', function(e) {
var currentID = e.target.id;
console.log(currentID);
......rest of code

In javascript it would be:
var a = document.getElementById('#boxes');
a.onclick = function(e){
console.log(e.target.id);
}

If you only wish to make your code working and displaying on your console the box name, you should probably set
jQuery('#boxes').bind('click', function(event) {
var currentID = jQuery(event.srcElement).attr('id');
/* rest of your code */
});
You might want to do something easier
jQuery('#boxes').children().bind('click', function() {
jQuery(this).delegate...
});
Although I'm not sure why you are doing this ...
fixed http://jsfiddle.net/nxTDA/

When is Jquery pseudo recussion finished

I use the function below to show a list of items. I want to change the function so that I can display the navigation when the pseudo recussion is finished. Is there a way to dtect when it is finished?
function fadeItem() {
$('ul li:hidden:first').fadeIn(fadeItem);
}

(update: added this first part) Loads all embed images then recursively fades everything in every half second, then does an alert (replace with the concept you commented back on)
var selector = "ul li:hidden:first";
function fadeIn($item) {
$item.fadeIn(500,function() {
var n = $(selector);
if(n.length > 0) {
fadeIn($(selector));
} else {
// add a div
alert("added a div");
}
})
}
$(document).ready(function() {
// load images first
var imgs = []; // cached
$("ul li img").each(function() {
// create a separate img tag because img is not active due do [assumed css] display:none;
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr("src");
imgs.push(cacheImage);
});
// this is a quick method, you can change window to the image nodes to optimize better
$(window).load(function() {
fadeIn($(selector));
});
});
Source: http://jsfiddle.net/MattLo/ukLaG/1/ (using a very large image to test)

See the documentation. You can pass a callback function:
function fadeItem() {
$('ul li:hidden:first').fadeIn(fadeItem, function() {
// do something
});
}

Javascript Problem with Variables

I have created a function to showing a title text in a separate div, its wotks perfectly, but a have problems with "title" attribute, so i wonna delete it after tooltipp wenn be displayed. And on mouse ou show it agaiin, but the variable tooltipptext is empty... same one an idea?
var tooltipptext;
$(".infoimg").hover(function(event) {
tooltipptext = $(this).attr("title");
showToolTip(event, tooltipptext);
$(this).attr("title", "");
return false;
});
$(".infoimg").mouseout(function() {
$("#bubble_tooltip").hide();
$(this).attr("title", tooltipptext);
return false;
});

.hover(), when passed a single functions runs it on both mouseenter and mouseleave, clering the variable because this:
tooltipptext = $(this).attr("title");
runs again after $(this).attr("title", ""); ran already. Instead pass both functions to .hover(), like this:
var tooltipptext;
$(".infoimg").hover(function() {
tooltipptext = $(this).attr("title");
showToolTip(event, tooltipptext);
$(this).attr("title", "");
}, function() {
$("#bubble_tooltip").hide();
$(this).attr("title", tooltipptext);
});
Or since you're never seeing the title attribute on hover, store it once like this:
$(".infoimg").each(function() {
var title = $(this).attr("title");
$(this).data('title', title).attr('title','');
}).hover(function() {
showToolTip(event, $.data(this, 'title'));
}, function() {
$("#bubble_tooltip").hide();
});
This has the added benefit of working on any number of images :)