I'm currently working on a website that features a resizable sidebar. I want the icons and text within the sidebar to shrink proportionally when the user resizes it. Right now, I have implemented an if statement to check if the sidebar's width falls below a certain threshold. However, I've noticed significant strain on Chrome in my Mac's Activity Monitor when continuously resizing the sidebar. Although my solution works, I'm curious if there's a more efficient approach. Here's the code snippet I'm using:
HTML:
<div id = "home_left">
<a href="#"><img src="images/image1.jpg" id = "profile_picture"/></a>
<p id = "profile_username">username</p>
<div class = "icon_container">
<a href="#"><img src="images/image2.png" class = "profile_icons"/></a>
</div>
<div class = "icon_container">
<a href="#"><img src="images/image3.png" class = "profile_icons"/></a>
</div>
<div class = "icon_container">
<a href="#"><img src="images/image4.png" class = "profile_icons"/></a>
</div>
</div>
jQuery:
$(document).ready(function(){
// Making the left sidebar resizable
$("#home_left").resizable({
handles: "e",
maxWidth: $("#home_left").width(),
minWidth: 100,
resize: function() {
//Adjusting profile picture width
$("#profile_picture").width($("#home_left").width() - 24);
//Handling username and icons appearance
if($("#home_left").width() < 200) {
$("#profile_username").addClass("hidden");
$(".icon_container").width($("#home_left").width());
}
else {
$("#profile_username").removeClass("hidden");
}
}
});
});
Fiddle: https://jsfiddle.net/mpjb19m7/
The Fiddle doesn't exhibit high CPU usage as there are no images being resized, but you can still observe increased browser strain. Is this just a jQuery UI trait or am I inefficiently handling something?