The following code sorts the .dataCard elements by the data-cardNumber attribute's values and then appends them in the order to #main.
How can I append them to the #left or #right?
How I want it to decide between #left or #right is to measure the height of both #left and #right and compare them.
If #left is taller / longer then append to #right, if #right is taller / longer then append to #left, and if they are both the same height then append to #left.
var m = $('#main .dataCard').sort(function(a, b){
return $(a).data('cardnumber') - $(b).data('cardnumber');
}).appendTo('#main');
I would greatly appreciate any and all help in achieving this sorting into one column or the other based on height.
Thanks in Advance!
}
fiddle Demo
var left = $('#left'), //cache selector
right = $('#right'), //cache selector
append_to_div;
if (left.height() < right.height()) { //compare height
append_to_div = right;
} else {
var append_to_div = left;
}
var x = $('#main .dataCard').sort(function (a, b) {
return $(a).data('cardnumber') - $(b).data('cardnumber');
});
append_to_div.html(x); //html will add new list of items where as append will add items top previous elements
Updated after OP's comment
Updated fiddle Demo
var left = $('#left'),
right = $('#right'),
l = [],
r = [];
var x = $('#main .dataCard').sort(function (a, b) {
return $(a).data('cardnumber') - $(b).data('cardnumber');
});
for (var i = 0; i < left.children().length; i++) {
l.push(x[i]);
}
for (var i = left.children().length; i < left.children().length + right.children().length; i++) {
r.push(x[i]);
}
left.html(l);
right.html(r);
Shorter and better version of above code
Updated fiddle Demo
var left = $('#left'),
right = $('#right'),
arr = [];
var x = $('#main .dataCard').sort(function (a, b) {
return $(a).data('cardnumber') - $(b).data('cardnumber');
});
arr = $.makeArray(x);
left.html(arr.slice(0, left.children().length));
right.html(arr.slice(left.children().length));
While iterating through your .dataCard's you can do something like this to check the height and append the .dataCard accordingly.
var x = $('#main .dataCard').sort(function (a, b) {
return $(a).data('cardnumber') - $(b).data('cardnumber');
});
for(var i = 0; i < x.length;i++){
if($('#left').height() <= $('#right').height()){
$('#left').append(x[i]);
}
else
$('#right').append(x[i]);
});
http://jsfiddle.net/trevordowdle/p9q6h/2/
just check for the height of left and right everytime and compare.
var toAppend,
$left = $("#left"),
$right = $("#right");
$left.height() > $right.height() ? toAppend = $right : toAppend = $left;
Use the toAppend variable now.
Related
I have a list with many li
I'd like to add a class to each li only when I scroll to that specific li
The issue is the class is added to every li once I scroll to only 1 of them
$(window).scroll(function(e) {
var y = $(document).scrollTop();
var h = $(window).height();
var t = $('li.product');
var length = t.length;
for(var i=1;i <= length;){
var number = 'li.product:nth-child('+i+')';
if(y + h > $(number).position().top){
$(number).addClass("animate__animated animate__fadeInDown");
}
i++;
}});
Thanks in Advance
I couldn't find what's wrong with your code so I made another version of your code. You can find it at https://codepen.io/beneji/pen/RwLQLVV.
The code uses .each instead of a for loop which is a better fit in this case.
You can adjust this code to your particular case.
$(window).scroll(function(){
const scrolling_position = $(window).scrollTop()
const window_height = $(window).height()
$("li.product").each(function(){
const product_position = $(this).position().top
if(product_position <= scrolling_position + window_height)
$(this).addClass("animate__animated animate__fadeInDown") // replace this by whatever class you want
});
})
Consider the following.
$(window).scroll(function(e) {
var y = $(document).scrollTop();
var h = $(window).height();
var t = $('li.product');
t.each(function(i, el) {
if ((y + h) > $(el).position().top) {
$(el).addClass("animate__animated animate__fadeInDown");
}
});
});
This is untested as you did not provide a Minimal, Reproducible Example.
Using .each() we can iterate each of the elements. i is the Index and el is the Element itself.
Any ideas what I am doing wrong here? I have tried adding within the each as well but ended up being like 415px in height which was incorrect as only 2 lines of text so should be around 40px.
As you will see it creates the H3 heading in the each, but what I need to do after the the each is complete is find the highest heading so I can then set the height of all the others.
$(document).ready(function() {
// rebuild product options display
$('.rebuild_options .ty-product-options .ty-product-options__item').each(function(i, obj) {
var option_title = $(this).find('.ty-product-options__item-label').text().replace(":", "");
var option_html = $(this).find('.ty-product-options__item-label span a').attr('title');
var $option_content = $(option_html);
var option_html_text = $option_content[0].innerHTML;
var option_html_img = $option_content[1].innerHTML;
$(this).find('.ty-product-options__box').hide();
$(this).find('.ty-product-options__item-label').addClass('input-text cm-hint');
$(this).find('.ty-product-options__item-label').attr('title',option_html_text);
$(this).find('.ty-product-options__item-label').html(option_html_img);
$(this).find('.ty-product-options__item-label').prepend('<i class="option-status-icon ty-icon-star-empty"></i>');
$(this).find('.ty-product-options__item-label').prepend("<h3 class='option-heading'>"+option_title+"</h3>");
});
var maxHeight = 0;
$('.ty-product-options__item-label h3').each(function(i, obj) {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
$(this).height(maxHeight);
});
});
$('.ty-product-options__item-label h3').each(function(i, obj) {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
}).height(maxHeight);
You should assign the height to all h3's after calculating max by chaining it after the each function.
The current way is providing invalid output.
This is the object i'm trying to sort through
please check it
$('.childboxes').each(function () {
var divs = $(this);
var divID = $(this).attr('id');
var position = divs.position();
var left = position.left;
var top = position.top;
AllDivsCoor.push({ "id": divID, "leftcoor": left, "topcoor": top });
});
AllDivsCoor.sort('leftcoor');
You've to write a own sort function like this:
function compareCoords(a, b) {
if (a.leftcoor < b.leftcoor) return -1;
if (a.leftcoor > b.leftcoor) return 1;
return 0;
}
AllDivsCoor.sort(compareCoords);
DEMO: JSFiddle
Further informations about sort()
I need to make jquery fill all the rows in a layout as the first row in the fiddle
not sure if I explained well enough but the fiddle should clear out what I want.
first five divs have width changed a bit to make sure the row is filled, but I can't make the rest of rows fill the container
basically I want to justify all the divs by increasing their widths
http://jsfiddle.net/SG9Vx/
so far I have this function, modified from here: jQuery Find number of items per row in floated li's:
var lisInRow = 0;
$('#posts div').each(function() {
if($(this).prev().length > 0) {
if($(this).position().top != $(this).prev().position().top) return false;
lisInRow++;
$(this).addClass("row1");
}
else {
lisInRow++;
$(this).addClass("row1");
}
});
var itemNumber = $(".row1").length
var widthRow = 0;
$('.row1').each(function() {
widthRow += $(this).outerWidth( true );
});
var widthContainer = $("#posts").width();
var remaining = widthContainer - widthRow;
leftMargin = Math.floor(remaining / itemNumber);
$(".row1").each(function(){
var addedwidth = $(this).width() + leftMargin;
$(this).width(addedwidth);
});
What I do for the first row is calculate what's left of the container, divide it by number of items on the row, and add the result to the width of each item on the row.
If I understood what you're trying to do, I made some small changes to the code
var lisInRow = 0;
var lisInRow2 = 0;
var row = 0;
$('div div').each(function() {
if($(this).prev().length > 0) {
if($(this).position().top != $(this).prev().position().top) row++;
lisInRow++;
$(this).addClass("row"+row);
//console.log($(this).prev().length)
}
else {
lisInRow++;
$(this).addClass("row0");
}
});
for(var i=0;i<=row;i++){
var itemNumber = $(".row"+i).length
console.log(row);
var widthRow = 0;
$(".row"+i).each(function() {
widthRow += $(this).outerWidth( true );
});
var widthContainer = $("#posts").width();
var remaining = widthContainer - widthRow;
leftMargin = Math.floor(remaining / itemNumber);
$(".row"+i).each(function(){
var addedwidth = $(this).width() + leftMargin;
$(this).width(addedwidth);
$(this).find("img").width(addedwidth);
});
}
Here you have it:
http://jsfiddle.net/SG9Vx/3/
Here's a simplified version of what I think you're trying to achieve:
var lisInRow = 0;
$('div div').each(function() {
if($(this).prev().length > 0) {
if($(this).position().top != $(this).prev().position().top){
lisInRow++;
}
$(this).addClass("row" + lisInRow);
}
});
Fiddle: http://jsfiddle.net/568mP/
I have made a quick Jsbin: http://jsbin.com/ujabew/edit#javascript,html,live
What i'm trying to achieve is to find out which is the largest <section> out of the 3 from the link. So what i'd like is to, after the loop runs, is to have var width set to the largest possible number that any of the widths could be.
Code in progress posted in link
Here:
var maxWidth = Math.max.apply( null, $( elems ).map( function () {
return $( this ).outerWidth( true );
}).get() );
Live demo: http://jsfiddle.net/rM4UG/
Fleshing out Marc B's comment, using Math.max():
$(document).ready(function(){
var maxWidth = 0;
$('.content ul li').each(function(){
var itemWidth = $(this).outerWidth(true);
maxWidth = Math.max(maxWidth, itemWidth)
});
});
I believe you want to look into the underscore library. Specifically, the max method
$(document).ready(function(){
var maxWidth = 0;
$('section').each(function(){
w = $(this).outerWidth(true);
if ( w > maxWidth)
maxWidth = w;
});
});
Change the .each() loop to this:
var thisWidth = $(this).outerWidth(true);
if (thisWidth > width) {
width = thisWidth;
}
I have just written a function regarding this. I thought it might help others. (jQuery)
$.fn.largerWidth = function () { //function(p)
// where 'p' can be clientWidth or offsetWidth
// or anything else related to width or height
var s = this,m;
for (var i = 0; i < s.length; i++) {
var w = s[i].offsetWidth; // s[i][p];
(!m || w > m) ? (m = w) : null
}
return m;
}
This was my idea:
$(document).ready(function () {
var elements = $(".content ul li");
var count = elements.length - 1;
var width = [];
elements.each(function (n) {
width.push($(this).outerWidth(true));
if (count == n) {
width = Math.max.apply(Math, width);
}
});
});
I added the count of the number of elements and then runs the Math.max to get the largest number when each loop is done.