Các mẫu code giải quyết Toggle class thẻ div hoặc chèn vào vị trí khác dựa vào window load và resize màn hình với jquery, angular và react

1. Xem ẩn hiện khi window resize và load.

window.addEventListener("load", onLoadLayout);
function onLoadLayout(){
	onResizeLayout();
	window.addEventListener("resize", onResizeLayout);
}

function onResizeLayout(){
	var windowSize =  $(window).width(); 
	console.log(windowSize)
	if (windowSize <= 1900) {
		//$('#search').hide();
	}
	else{
		//$('#search').show();
	}  
}

2. Thêm class và remove class khi window resize và load.

	 window.addEventListener("load", onLoadLayout);
	 function onLoadLayout(){
		 onResizeLayout();
		 window.addEventListener("resize", onResizeLayout);
	 }
	 
	 function onResizeLayout(){
		var windowSize =  $(window).width(); 
		var widthContent = $("#content").width();
		console.log(widthContent)
		$("#content").removeClass('xs sm md lg');
		if (windowSize < 768) {
			$("#content").addClass('xs');
		}
		else if (windowSize > 768 && windowSize < 992) {
			$("#content").addClass('sm');
		}
		else if (windowSize  > 992 && windowSize < 1200) {
			$("#content").addClass('md');
		}
		else if (windowSize > 1200) {
			$("#content").addClass('lg');
		}
	 }

3. Chỉ định thẻ di chuyển đến vị trí khác khi window resize và load.

function moveButtonFooter(){
	var windowSize =  $(window).width(); 
	console.log(windowSize)
	if (windowSize <= 767) {
		$('.footer-btn').appendTo('#content');
	}
	else{
		$('.footer-btn').appendTo('#footer');
	}  
}

// Call the function when the document is ready
$(document).ready(function () {
	moveButtonFooter();

  // Update the button position on window resize
  $(window).resize(function () {
    moveButtonFooter();
  });
});

4. Resize và Window load với Angular Typescript

Step 1: Angular 16: thêm đoạn mã này vào component bạn dùng.

 size991: boolean = false;

  @HostListener('window:resize', ['$event'])
  onResize() {
    //  alert(window.screen.availWidth);
    //  alert(window.screen.availHeight);
     if(window.innerWidth < 991) {

      this.size991 = true
         // now based on the screen size you want to check 
         // enable the variable and make it true
         // based on it, you can enable the class in template
     } else{
      this.size991 = false
     }
  }

Step 2: thêm selector điều kiện vào đoạn mã html. Ý nghĩa: nếu màn hình nhỏ hơn 991px, thì sẽ thêm class collapse và ngược lại remove nó.

***** add to html ***********
<div class="card-body" [ngClass]="size991 ? 'collapse' : ''">......</div>

4. Resize và Window load với jquery lấy chiều cao của box,…

Step 1: copy đoạn mã jquery này vào file bạn mong muốn. Mình đang ví dụ lấy thẻ li và thẻ div với class .crd-border

		// Function to set equal height
		function setEqualHeight() {
			// Reset heights to auto before recalculating
			$('.analyTop6-fix li, .analyTop4 li .crd-border').height('auto');

			var maxHeight = Math.max.apply(null, $('.analyTop6-fix li, .analyTop4 li .crd-border').map(function () {
				return $(this).height();
			}).get());

			// Set equal height for all elements
			$('.analyTop6-fix li, .analyTop4 li .crd-border').height(maxHeight);
		}
		// Set equal height after window load and a short delay
		$(window).on('load', function () {
			setTimeout(function () {
				setEqualHeight();
			}, 100); // Adjust the delay if needed
		});

		// Set equal height on window resize
		$(window).on('resize', function () {
			setEqualHeight();
		});

Step 2: Test thử khi trình duyệt load và resize. Bạn sẽ thấy kích thước thay đổi. Click chuột phải vào box chỉ định/ kiểm tra/resize indow.

Lúc đầu
Sau khi resize window
Đã đăng trong Angular, Code Snippets, Javascript, React.