Responsive Design Using JavaScript Resize Event to Adapt Elements Based on Browser Width: A Step-by-Step Guide｜DAD UNION

In web development, responsive design has become a standard practice. However, there are dynamic element changes that cannot be achieved through CSS media queries alone. In this article, we’ll show you how to dynamically change HTML elements based on browser width using JavaScript. This technique involves detecting browser width (pixel size) and adjusting tag elements accordingly. Instead of using CSS media queries, we’ll use JavaScript’s “.resize()” and “$(window).width()” functions. This guide offers valuable information that’s easy to understand for engineers and beginners alike.

Contents

Introduction
CSS Styling to Change Tag Elements Based on Browser Width
Setting Up the HTML
Switching Elements Dynamically with JavaScript
Demo Page to Change Tag Elements Based on Browser Width (Pixel Size)
Conclusion

Introduction

In today’s world, where web pages are viewed on various devices such as smartphones and tablets, the ability to flexibly adjust page layout is crucial. While CSS media queries are effective, using JavaScript allows for more detailed, condition-specific changes. Here, we focus on techniques for displaying different content based on browser width.

CSS Styling to Change Tag Elements Based on Browser Width

First, let’s set up the basic CSS. Here, we apply a simple style to make the dynamic changes with JavaScript easier to follow.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0 30px 0;
}

.txt{
  font-size: 18px;
  text-align: center;
  color: blue;
}
.red{
  color: red;
  font-weight: bold;
  font-size: 30px;
}
</style>

Setting Up the HTML

Next, prepare the HTML with elements that will change dynamically with JavaScript. Here is a simple example that changes messages based on browser width. We’ll set up two patterns for output (class=”txt”) based on browser width.

<h1>Try resizing your browser window.<br>The text below will change when the width falls below 800px.</h1>

<div class="txt"></div>

Switching Elements Dynamically with JavaScript

This is the key part. Capture the browser resize event and write JavaScript code to display different content based on width. By using jQuery, this process becomes simpler. Load the jquery-2.2.0.min.js file. The code retrieves the browser width and outputs different HTML tags depending on whether the width is 801px or more, or 800px or less.

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sp() {
  wd = $(window).width();
  if(wd <= 800){
    $(".txt").html("<span class='red'>The browser width is now 800px or less!</span>");
  }else{
    $(".txt").html("The current browser width is 801px or more");
  }
}

$(function(){
  sp();
});

$(window).resize(function(){
  sp();
});
</script>

Demo Page to Change Tag Elements Based on Browser Width (Pixel Size)

Try out how this code works on the demo page below. By adjusting the browser width in real-time, you can see how the content changes.

Demo for Changing Tag Elements Based on Browser Width (Pixel Size)

Conclusion

In this article, we’ve shown how to dynamically change content based on browser width using JavaScript. This technique is useful as a complement to responsive design or to display special messages under certain conditions. Once you understand the basic concept, you’ll find many ways to apply this knowledge, helping you develop better websites.

* Please take responsibility if you use this code.
* Do not reuse the Google Analytics tag within the head tag.