jQuery – Blackbams Blog

Ajax (jQuery) and loops: Local variable scoping and callback functions

Blackbam — Tue, 08 Dec 2015 17:30:15 +0000

Thats a very annoying common problem I discovered – if calling Ajax within a Javascript loop the callback function will be called asynchronously. That means: All local variables in the callback function will have their future value instead the value they had when the loop was running.

Example 1 (probably unwanted results):

var types = ["boring","stupid","funny"];

for(key in types) {
    var type=types[key];

    $.ajax({url: "/?connection=get&type="+type, success: function(result){
        $('#'+type).html(result);
    }
    });
}

Result: Only #funny is populated (with the results of the last callback, no matter which ends last).

Example 2 (solution):

var types = ["boring","stupid","funny"];

for(key in types) {
    var type=types[key];

    (function(type) {
        $.ajax({url: "/?connection=get&type="+type, success: function(result){
            $('#'+type).html(result);
        }
        });
    })(type);
}

Result: The elements with ids #boring, #stupid and #funny are populated with the result of the corresponding callback.

Explanation: You have created a closure which is preserving the value of type according to the current iteration.

How to scale images responsive with jQuery

Blackbam — Sat, 15 Feb 2014 02:35:38 +0000

When coding responsive Web-Designs we usually have images in the content and in various containers with varying dimensions. In these containers, images should never be bigger than the HTML-container itself. In order to solve this problem I have developed this little script which may be helpful for some of you visitors, too. It is just required to set a jQuery selector for the container itself (to get the maximum width) and one to select all the images affected.


function scale_content_images() {

    $('#my_container img').each(function() {

            var the_image = this;
            var maxAvailableWidth = $('#my_container').width()-20; // Max width for the image
            var ratio = 0;  // Used for aspect ratio
            var width = $(this).width();    // Current image width
            var height = $(this).height();  // Current image height
            var orig_width = parseInt($(this).attr("width")); // the intended width of the image
            var orig_height = parseInt($(this).attr("height")); // the intended height of the image

            // if intended width/height not available, get original image dimensions and set these
            if(isNaN(orig_width)||isNaN(orig_height)) {
                var image = new Image();
                image.src = $(the_image).attr("src");
                orig_width = image.naturalWidth;
                orig_height= image.naturalHeight;
            }

            // Check if the current width is larger than the max
            if(orig_width>maxAvailableWidth) {
                ratio = maxAvailableWidth / width;   // get ratio for scaling image
                $(this).css("width", maxAvailableWidth); // Set new width
                $(this).css("height", height * ratio);  // Scale height based on ratio
                height = height * ratio;    // Reset height to match scaled image
                width = width * ratio;    // Reset width to match scaled image
            } else {
                $(this).css("width",orig_width);
                $(this).css("height",orig_height);
            }
        });
}

$(document).ready(function() {
      scale_content_images();
});

$(document).resize(function() {
      scale_content_images();
});

How to add social media buttons to jQuery Colorbox

Blackbam — Tue, 02 Jul 2013 13:02:03 +0000

Recently a client wanted to display social media buttons like facebook, twitter and google plus at the bottom of each image in jQuery Colorbox. As it is bad practice to change the source code of a Plugin, the following code worked well for this job.

Note: This client wanted the full URL to be liked, not the image itself – if you want to do so, you should like/recommend the attachemnt URL of the colorbox images, not the URL of the page. I will leave this up to you, to change the code in this way.

Add the following jQuery code to the footer of your page:


		jQuery(document).ready(function() { 
			var facebook = '';
			var twitter = 'Tweet';
			var google = '';
			
		    jQuery("#cboxContent").append(''+facebook+twitter+google+'
'); 
		});

CSS code

#cboxSocials {
	margin-top:-43px;
}

.cb_social_elem {
	float:left;
	margin-right:20px;
	width:120px;
}

Social Buttons Developer Links

Facebook Like

Twitter

Google+