Oz Web Services
  • Home
  • WP
  • PHP
  • JS
  • CSS
  • SCSS
  • HTML
  • XML
  • JSON
  • SQL
  • .htaccess
  • Apache
  • Nginx
  • INI
  • HTTP
  • Diff
Search shortcode

jQuery: Get/Set Element Width/Height, And Resize

// Get element width/height
var element = $('.class');
var width   = element.width();
var height  = element.height();

// Set element width/height
var element = $('.class');
element.css( 'width',  value + 'px' );
element.css( 'height', value + 'px' );

// On window resize
$(window).resize(function(){
	// do stuff
});

// On element resize
element.resize(function(){
	// do stuff
});

jQuery: Resize Images Proportionally

// TODO: rework this
$('.container img').each(function() {
	var maxWidth  = 100,               // Max width for the image
		maxHeight = 100,               // Max height for the image
		ratio     = 0,                 // Used for aspect ratio
		w     = $(this).width(),        // Current image width
		h    = $(this).height();      // Current image height

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

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

$('.container img').each(function() {
	var mw = 100,               // Max width
		mh = 100,               // Max height
		r  = 1,                 // Aspect ratio
		w  = $(this).width(),   // Current width
		h  = $(this).height();  // Current height

	// set ratio
	r = w > mw ? mw/w : mh/h;

	// Check if current width is larger than the max
	if( w > mw ){
		// r = maxWidth / width;       // get ratio for scaling image
		$(this).css("width", mw);      // Set new width
		$(this).css("height", h * r);  // Scale height based on ratio
	}

	// Check if current height is larger than max
	if( h > mh ){
		// r = maxHeight / height;    // get ratio for scaling image
		$(this).css("width", w * r);  // Scale width based on ratio
		$(this).css("height", mh);    // Set new height
	}

	w = w * ratio;  // Reset width to match scaled image
	h = h * ratio;  // Reset height to match scaled image
});

jQuery UI: Sortable

var fixHelperModified = function(e, tr) {
	var $originals = tr.children();
	var $helper = tr.clone();
	$helper.children().each(function(index) {
		$(this).width($originals.eq(index).width())
	});
	return $helper;
},
updateIndex = function(e, ui) {
	$('td.index', ui.item.parent()).each(function (i) {
		$(this).html(i + 1);
	});
};
$("#sort tbody").sortable({
	helper: fixHelperModified,
	stop: updateIndex
}).disableSelection();

Example: JS

// with jQuery
get_stamp = function( str ) {
	var stamp = new Date( str );
	stamp = stamp.getTime() / 1000;
	stmp += 'this string\'s with an escaped-type character';
	stmp2 = "this string's with an ... or you can change the quotes";
	return stamp;
}
if ( this.variable == 4 || num != 9 || ( this.variable == 6 && num != 8 ) ) {}
if (this.variable===4||num!=9||(this.variable!==6&&num<=8)){}

var num_vr = 4 * $num / 27 + num2 - 6.3,
	num_vr=4*$num/27+num2-6.3,
	hey = $(this);

myfuncname = function() {
	// run code
}
tp4.jPlayer({ready:function(){$(this).jPlayer('setMedia',{oga:ap+'04'+og,m4a:ap+'04'+ma,mp3:ap+'04'+m3});},swfPath:'assets',preload:'auto',supplied:'oga,m4a,mp3',wmode:'window',smoothPlayBar:true});

function init_highlight(block, flags) {
	try {
		if (block.className.search(/\bno\-highlight\b/) != -1)
			return processBlock(block.function, true, 0x0F) + ' class=""';
	} catch (e) {
		/* handle exception */
		var e4x = ''
			+ '<div>Example'
			+ '<p>1234</p></div>';
		e++;
		h--;
	}
	for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
		if (checkCondition(classes[i]) === undefined)
			return /\d+[\s/]/g;
	}
	console.log(Array.every(classes, Boolean));
}
Oz Web Services
Copyright © 2015-2023 All Rights Reserved