CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jawn
Jawn

Reputation: 41

Set height of an element on multiples of a number?

Is there any way via jquery or javascript to make an element stretch its height to a certain set of numbers? I mean, as it accommodates more content, its height would only follow a pattern of numbers (multiples of a number).

Let's say in multiples of 100... a div's height as it extends taller would only be in this series -- 200px, 300px, 400px, etc. Hence, if it exceeds by just even 1 pixel off 200, it would automatically resize to 300.

It's hard to explain.

I need this because I made a vertically seamless pattern with torn edges and it would totally look perfect if it shows each tile completely.

I only know basic jquery and I don't have a bit of an idea on how to work this out.

My sincerest gratitude to whoever tends to my query!

Upvotes: 1

Views: 1064

Answers (3)

Matt King
Matt King

Reputation: 2166

This function will take the current height and the unit number you want it to snap to, rounding to the nearest multipleOf.

function snapHeight(height, multipleOf) {
    return multipleOf * Math.round(height / multipleOf);
}

Examples:

snapHeight(930, 100); // returns 900
snapHeight(930, 50); // returns 950
$('#element').height(snapHeight($('#element').height(), 100)); // in jQuery

Upvotes: 0

glortho
glortho

Reputation: 13198

var h = $('div').height();
$('div').height( Math.ceil(h/100) * 100 );

Upvotes: 1

user578895
user578895

Reputation:

something like:

$('element').css({ height : (0|(targetHeight + 99) / 100) * 100 });

if you want it automatic:

$(function(){
    var $elem = $('#element')
    $elem.css({ height : (0|($(elem).height() + 99) / 100) * 100 });
});

Upvotes: 1

Related Questions