jQuery min/max property from array of elements - javascript

Is there a simple way to find the min/max property from an array of elements in jQuery?
I constantly find myself dynamically resizing groups of elements based on the minimum and maximum counterparts. Most of the time this pertains to the width and/or height of an element but I'm sure this could be applied to any property of an element.
I usually do something like this:
var maxWidth = 0;
$('img').each(function(index){
if ($(this).width() > maxWidth)
{
maxWidth = $(this).width();
}
});
But it seems like you should be able to do something like this:
var maxWidth = $('img').max('width');
Does this functionality exist in jQuery or can someone explain how to create a basic plugin that does this?
Thanks!

Use Fast JavaScript Max/Min - John Resig
Example with three logos of google, yahoo and bing.
HTML
<img src="http://www.google.co.in/intl/en_com/images/srpr/logo1w.png" alt="Google Logo" /><br/>
<img src="http://l.yimg.com/a/i/ww/met/yahoo_logo_in_061509.png" alt="Yahoo Logo" /><br/>
<img src="http://www.bing.com/fd/s/a/h1.png" alt="Bing Logo" />
Javascript
$(document).ready(function(){
// Function to get the Max value in Array
Array.max = function( array ){
return Math.max.apply( Math, array );
};
// Function to get the Min value in Array
Array.min = function( array ){
return Math.min.apply( Math, array );
};
//updated as per Sime Vidas comment.
var widths= $('img').map(function() {
return $(this).width();
}).get();
alert("Max Width: " + Array.max(widths));
alert("Min Width: " + Array.min(widths));
});
P.S: jsfiddle here

You can use apply outside the context of OO, no need to extend the prototype:
var maxHeight = Math.max.apply( null,
$('img').map(function(){ return $(this).height(); }).get() );

I like the elegant solution posted as a .map() example in the jQuery docs on how to equalize div heights. I basically adapted it to work with widths and made a demo.
$.fn.limitWidth = function(max){
var limit = (max) ? 'max' : 'min';
return this.width( Math[limit].apply(this, $(this).map(function(i,e){
return $(e).width();
}).get() ) );
};
// Use the function above as follows
$('.max-width').limitWidth(true); // true flag means set to max
$('.min-width').limitWidth(); // no flag/false flag means set to min

Take a look at the calculation plugin, maybe it can help you with your problems.
They offer a number of math functions, like min, max and avg on DOM-elements.
Examples:
$("input[name^='min']").min();
$("input[name^='max']").max();

Rolled up as a plugin to return min-max of width and height:
// Functions to get the Min & Max value in Array
if (!Array.min) { Array.min = function( array ){return Math.min.apply( Math, array )} }
if (!Array.max) { Array.max = function( array ){return Math.max.apply( Math, array )} }
(function( $ ){ // Standard jQuery closure to hide '$' from other libraries.
// jQuery plug-in to get the min and max widths of a set of elements
$.fn.dimensionsMinMax = function(whnx) {
/*
################################################################################
Name
====
dimensionsMinMax(whnx) - jQuery plug-in to get min & max width & height
Parameters
==========
whnx - A 4-element array to receive the min and max values of the elements:
whnx[0] = minimum width;
whnx[1] = maximum width;
whnx[2] = minimum height;
whnx[3] = maximum height.
Returns
=======
this - so it can be "chained".
Example
=======
var minmax = new Array(4);
var number_of_images = $('img').dimensionsMinMax(minmax).class('abc').length;
console.log('number of images = ', number_of_images);
console.log('width range = ', minmax[0], ' to ', minmax[1]);
console.log('height range = ', minmax[2], ' to ', minmax[3]);
################################################################################
*/
var widths = new Array(this.length);
var heights = new Array(this.length);
this.each(function(i){
$this = $(this);
widths[i] = $this.width();
heights[i] = $this.height();
});
whnx[0] = Array.min( widths);
whnx[1] = Array.max( widths);
whnx[2] = Array.min(heights);
whnx[3] = Array.max(heights);
return this;
}
})( jQuery ); // End of standard jQuery closure.

I wrote a simple plugin to do exactly this - see gregbrown.co.nz/code/jquery-aggregate . With it installed, you could do:
var maxWidth = $('img').aggregate('width', 'max');

You can use native "sort" function to have more control over which elements are compared
Array.prototype.deepMax = function(comparator){
if(typeof comparator === 'function'){
var sorted = this.slice(0).sort(comparator);
return sorted[sort.length - 1];
}
return Math.max.apply(Math, this);
};
and you can call it like
var maxWidth = $('img').deepMax(function(a, b){
//-1 if a < b; +1 otherwise
return $(a).width() - $(b).width();
});
OR
you can use _.max of Underscore which is can be implemented like...
Array.prototype.max = function(iterator){
if(!iterator && obj[0] === +obj[0])
return Math.max.apply(Math, this);
var result = -Infinity, lastComputed = -Infinity;
this.forEach(function(value, index){
var computed = iterator ? iterator(value, index, this) : value;
computed > lastComputed && (result = value, lastComputed = computed);
});
return result;
};
var maxWidth = $('img').max(function(val){ return $(val).width();});

The Plugins/Authoring page actually has an example for determining the tallest element.
It's basically what you have here, just rolled into a plugin for easy access. Maybe you could appropriate it for your uses.

Related

for loop variable expressions mathematical manipulating

I'm writing a program in JS and im feeling i'm repeating code, which is not good. I'm trying to avoid an if then else block that has two similar for loop and re-write it without an if then else using just one for loop.
Consider this: minimum has value 0. maximum has value 10. if new_value is less than old_value i wanna execute a for loop from minimum to new_value, else i wanna execute it from maximum DOWNto new_value
Lets see it in action, lets say javascript (language-agnostic answers are welcome and upvoted -but will not grant you an extra cookie)
var minimum = 0;
var maximum = 10;
var old_value = 5;
/* var new_value = taken from user input whatever ... */
if(new_value<old_value)
{
for(i=minimum;i<new_value;i++)
{
// whatever
}
}
else
{
for(i=maximum;i>new_value;i--)
{
// whatever
}
}
I have a feeling these two for loops are similar enough to be written as one in a mathematical approach maybe. Have tried a bit using absolute values Math.abs() Math.max.apply() but had no luck.
I don't want to set other helping variables using if then else to give appropriate values.
So, whats the question: I'm wondering if this can be rewritten in one for ... loop without being nested in an if then else.
A complete solution using built-in js functions will grant you an extra cookie.
Edit: Didn't see your original thing about not using the if/else with variables. Why not do something like this then? Just go from 0 to 10, using that value or 10 minus that value depending on the conditional.
for(var j = 0; j <= 10; j++) {
var i = new_value < old_value ? j : 10 - j;
// whatever
}
Assign your min, max and increment as variables, define them based on your if condition and then use them in the for loop:
var old_value = 5, start, end, inc;
if(new_value<old_value) {
start = 0;
end = 10;
inc = 1;
} else {
start = 10;
end = 0;
inc = -1;
}
for( i = start;i >= start && i <= end; i += inc) {
// whatever
}
You could abuse of the ternary operator just for fun:
var minimum = 0;
var maximum = 10;
var old_value = 5;
var new_value = 7;
/* var new_value = taken from user input whatever ... */
var check =(new_value<old_value);
var foo1 = function () { console.log("foo1") }
var foo2 = function () { console.log("foo2") }
for(i=check?minimum:maximum;
check?(i<new_value):(i>new_value);
check?i++:i--)
{
check?foo1():foo2();
}
Does the second loop have to iterate in reverse? If not you can simply use
var i0 = new_value<old_value ? minimum : new_value+1;
var i1 = new_value<old_value ? new_value : maximum+1;
for(i=i0;i<i1;++i)
{
//whatever
}
Edit: In the light of your comment, if you can be sure that you're dealing with integers you can use
var i0 = new_value<old_value ? minimum : maximum;
var d = new_value<old_value ? 1 : -1;
for(i=i0;i!=new_value;i+=d)
{
//whatever
}
If not
var i0 = new_value<old_value ? minimum : maximum;
var d = new_value<old_value ? 1 : -1;
for(i=i0;d*i<d*new_value;i+=d)
{
//whatever
}
I did it!
With this +(old_value>new_value) instead of getting true/false i am getting 1/0. I am using the 1 and 0 as multipliers to emulate the if then else functionality.
lets assume
var minimum = 0;
var maximum = 10;
var old_value = 5;
for(expression1;expression2;expression3)
For expression1:
if new value is bigger than old value then we need minimum
if new value is smaller than old value then we need maximum
I am multiplying be zero the maximum depending the above conditions with (maximum*(+(old_value>new_value)))
I am multiplying by zero the minimum depending the above conditions with (minimum*(+(old_value<new_value))
by adding these two the sum is what i am supposed to get! (maximum*(+(old_value>new_value)))+(minimum*(+(old_value<new_value)))
This will give minimum if new_value > old value and maximum if new_value < old_value
For expression2:
while i!=new_value; simple. (we just have to be sure the maximum is bigger than new_value and minimum is smaller than new_value or we have an endless loop.)
For expression3:
if new value is bigger than old value then we need i=i +1
if new value is smaller than old value then we need i=i -1
this
(+(old_value<new_value)+1)+(-1*(+(old_value>new_value)+1))
will give either 2+-1=1 or 1+(-2)=-1 so we simply use it in expression3 as
i=i+(+(old_value<new_value)+1)+(-1*(+(old_value>new_value)+1))
complete code:
http://jsfiddle.net/eBLat/
var minimum = 0;
var maximum = 10;
var old_value = 5;
var new_value = 3; // change this value
// if new value is bigger than old value then for loop from maximum downto new_value (dont include new value)
// if new value is smaller than old value then for loop from minimum upto new_value (dont include new value)
for(i=(maximum*(+(old_value>new_value)))+(minimum*(+(old_value<new_value)));i!=new_value;i=i+(+(old_value<new_value)+1)+(-1*(+(old_value>new_value)+1)) )
{
alert("Iteration:"+i);
}
Another question would be if this is actually better than just write two for in a if then else ... anyway i had fun. And i got the cookie :D :D
Hope someone will find useful in some way the fact that +true gives 1 and +false gives 0 in javascript

How to do this specific task by a function using jQuery?

I am working on this vertical scrolling gallery.
Now I cannot work it out but I need to make this code less verbose.
the code I've been writing is to repetative.
this is the code
var target1 = $("#myImg1").offset().top;
var target2 = $("#myImg2").offset().top;
if ($(window).scrollTop() >= target1 - 150
&& $(window).scrollTop() <= target1 + 150) {
showBgOnTop('#firstImage','#secondImage');
}
if ($(window).scrollTop() >= target2 - 150
&& $(window).scrollTop() <= target2 + 150) {
showBgOnTop('#secondImage','#firstImage');
}
Can I use some kind of function here to shorten the code.
Like an array.
please tell me what i am doing wrong here.
thanks.
Explanation
It seems like you have a jQuery object as your target that's linked to two images and you'd like to have multiple instances of this, say at least 2.
So my solution is to have an array of objects with this format
var array = [
{target: ['image1', 'image2']}
]
target being the target element id and the value being an array of the ids of the associated images.
Now all the user has to do is keep on adding new objects to the array in the format shown above.
Solution
// Put the target object id as keys and the array of the linked/associated elements as values
var arrs = [
{'#myImg1': ['#firstImage', '#secondImage']},
{'#myImg2': ['#secondImage', '#firstImage']},
{'#myImg3': ['...', '...']} // keep adding new items as object here
],
$windowScrollTop = $(window).scrollTop(); // cache window scroll function
// loop through the array here
$.each(arrs, function (idx, obj) {
for (id in obj) {
var $el = $(id), // cache the target element here
args = obj[id],
img1 = args[0].toString(),
img2 = args[1].toString();
if ($windowScrollTop >= $el - 150 && $windowScrollTop <= $el + 150) {
showBgOnTop(img1, img2);
}
}
});
Well, this actually is a jQuery function.
The only thing you can do to lessen the code is to use
$(window).scrollTop()
as a variable:
var windowScrollTop = $(window).scrollTop();
Remaining part is a condition, you cannot use conditions are variables.
How about this:
function show(image1id, image2id) {
var target1 = $(image1id).offset().top;
var target2 = $(image2id).offset().top;
if (($(window).scrollTop() >= target2 - 150) &&
$(window).scrollTop() <= target2 + 150)) {
showBgOnTop(image1id, image2id);
}
}
show('#firstImage','#secondImage');
show('#secondImage','#firstImage');

return biggest/highest object from jquery elements

Howdey!
Let's take a look at the following jQuery function:
$.fn.getMax = function() {
return this.height(Math.max.apply(this, $(this).map(function(i, e) {
return $(e).height();
}).get()));
};
It returns and sets the heighest height for all selectors. But what is, if you want to return the object (not the height) with the heighest value?
So if you call the function like this:
$(selector).getMax().css({backgroundColor: "indigo"});
...how the element with the heighest height gets the backgroundColor?
UPDATE
I've managed it now with $.makeArray, as Amareswar said it.
$.fn.getMax = function(prop) {
var max = $.makeArray($(this)).sort(function(a, b) {
return (parseInt($(b).css(prop), 10) || 1) - (parseInt($(a).css(prop), 10) || 1);
}).shift();
return $(max);
};
Cheers!
Try this:
$.fn.getMax = function() {
/* create array of heights*/
var heights = $(this).map(function(i, e) {
return $(e).height();
}).get();
/* get max height*/
var max = Math.max.apply(this, heights);
/* get index of max in array*/
var pos = $.inArray(max, heights)
/* return element with proper index*/
return this.eq(pos);
};
DEMO: http://jsfiddle.net/tTuE7/
EDIT : assumes you only want one element returned

Random Number with javascript or jquery

I am trying to make a script to pick random number between two numbers . but it picks same number sometimes. i donot want to repeat same number until array is finished .
Here is my code
$(document).ready(function () {
abc();
test = array();
function abc() {
res = randomXToY(1, 10, 0);
$('#img' + res).fadeTo(1200, 1);
//$(this).addClass('activeImg');
//});
setTimeout(function () {
removeClassImg(res)
}, 3000);
}
function removeClassImg(res) {
$('#img' + res).fadeTo(1200, 0.1);
//$('#img' + res).removeClass('activeImg');
abc();
}
function randomXToY(minVal, maxVal, floatVal) {
var randVal = minVal + (Math.random() * (maxVal - minVal));
return typeof floatVal == 'undefined' ? Math.round(randVal) : randVal.toFixed(floatVal);
}
});
Does Anybody have idea about this ...
You'll have to maintain a list of numbers that have already been generated, and check against this list. Re-generate a new number if you find a dupe.
If you do not want the random numbers repeating themselves you have to keep track of the some way.
If you have the range you are dealing with is relatively small, you can create an array with all possible results and simply randomly pick out of it.
function Randomizer(minVal, maxVal, floatVal){
var possible_results = []; // for larger arrays you can build this using a loop of course
var randomization_array = [];
var count = minVal;
var incrementor = floatVal || 1; // set the distance between possible values (if floatVal equals 0 we round to 1)
while (count <= maxVal) {
possible_results.push(count);
count += incrementor;
}
this.run = function(){
// if randomization_array is empty set posssible results into it
randomization_array = randomization_array.length ? randomization_array : $.merge(randomization_array, possible_results);
// pick a random element within the array
var rand = Math.floor(Math.random()*randomization_array.length);
// return the relevant element
return randomization_array.splice(rand,1)[0];
}
}
and in order to use it (it creates a specialized object for each possible range):
rand = new Randomizer(1,10,0);
rand.run();
note that this approach does not work well for very large ranges

How to create multiples of line-height in javascript?

I am still new to Javascript and JQuery. I have written a small function I run from document-ready. Its purpose is to set the height of a div as a multiple of line-heights:
function setLoginLinksHeight(numOfLines) {
var ll = hash(LOGIN_LINKS);
$(ll).css('line-height','130%');
var lh = $(ll).css('line-height');
var nh = lh * numOfLines; // Issue here
$(ll).height(nh);
}
From FireBug, the line-height I retrieve is 15.5833px. When I multiply it by 2 (for example), nh is set to NaN. I saw in this question that the retrieved value can have any format (%, px, etc...). This is scary!
How can I convert the returned value into a number of pixels without units into order to be able to create multiples of it? Is there a library/function available for this in Javascript or JQuery? What is the recommended practice in this case? Thanks.
EDIT
I have developed a small unit splitter following mblase75's solution:
function splitUnit(e) {
var eUnit = '';
var eValue;
if( e && ( length = e.search( /px/ ) ) ) {
eUnit = 'px';
eValue = e.substr( 0, length );
} else if ( e && ( length = e.search( /em/ ) ) ) {
eUnit = 'em';
eValue = e.substr( 0, length );
} else {
eValue = e;
}
return new Array( eValue, eUnit );
}
Change to:
var lh = parseFloat($(ll).css('line-height'));
Of course, this doesn't guarantee that you'll be getting a number of pixels, just that you'll be getting a number. To extract the units separately, add:
var lhunits = $(ll).css('line-height').match(/\D+$/)[0];
// gets first element of array
...and then combine the calculation with the old units:
var nh = (lh*numOfLines) + lhunits;
var test = "15.83333px";
alert(parseFloat(test));
Just tried this in jsFiddle. Worked as expected and returned the value without pixels

Categories

Resources