JavaScript function to handle varying screen resolutions

I'm new to JavaScript and currently working on implementing a sidebar navigation. I found a tutorial on W3Schools, but the script provided only works for full-screen desktop browsers.

<script>
function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>

As you can see, it expands the width to 250px, but for mobile responsiveness, it should expand to 70-80px.

How can I make this work for different screen resolutions?

javascript

Answer №1

Retrieve the window width of the user using window.innerWidth

function toggleSidebar() {
  if (window.innerWidth > 600) {
    document.getElementById("sidebar").style.width = "250px";
    document.getElementById("content").style.marginLeft = "250px";
  } else {
    document.getElementById("sidebar").style.width = "70px";
    document.getElementById("content").style.marginLeft = "80px";
  }
}

Answer №2

If you want to handle responsive design, you can utilize the css @media query. However, if you prefer using JavaScript, you can achieve it by checking the width of the document body with document.body.offsetWidth

function openNav() {
  if (document.body.offsetWidth < 600) {
    document.getElementById("mySidebar").style.width = "70px";
    document.getElementById("main").style.marginLeft = "70px";
  } else {
    document.getElementById("mySidebar").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
  }
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}
<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <button class="openbtn" onclick="openNav()">☰ Toggle Sidebar</button>
  <h2>Collapsed Sidebar</h2>
  <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding an external JavaScript library file to a specific component in Angular 7 is a straightforward process. Let's walk through the

As a beginner in Angular framework, I've encountered an issue while working on creating a custom HTML template using Angular version 7. My template consists of various pages like home, about, product, etc. Specifically, on the home page, I am trying t ...

javascriptangularslidy

JavaScript - Removing an Array from an Object

Can an array be removed from an object? For instance, suppose I have an object named response with an array inside it called items: var response = { success: false, items:[] }; What is the method to remove 'items' from the response object? Tha ...

javascriptjson

Eliminating redundant subdocuments in MongoDB

This particular schema represents a single document out of thousands in the database, all housed within the same collection. Document 1: { pageNumber: 0, results: [ { jobkey: "AAA", }, { jobke ...

javascriptmongodbmongoosemongodb-queryaggregation-framework

What could be causing my div to not appear when using jquery's show function?

I'm dealing with HTML code that looks like this: <div id="answerTypeSection" style="visibility: hidden"> <div class="row"> <div class="col-md-2">adfadfafasdfasdfas</div> </div> <label class="control-label"&g ...

javascriptjqueryhtmlcss

Gain access to Google Analytics without the need for page consent by utilizing JavaScript

I am currently building a dashboard with Atlasboard. My goal is to retrieve Google analytics data such as page views, and I plan to run specific queries which can be found here. Is there a method to access my Google analytics data without the consent pag ...

javascriptnode.jsgoogle-analyticsdashboardatlasboard

Enhancing performance with multiple spotlights in Three.js

Currently working on a racing game using three.js and encountering a specific issue... There are 2 cars in the game, each requiring a minimum of 4 spotlights for rear and front car lights... In addition, there is a need for lights on the road... Here is ...

javascriptperformancethree.jswebgl

AngularJS: Initiate a Bootstrap modal upon webpage loading

As I work on designing a web application using AngularJS, I aim to implement the launching of a bootstrap modal upon page load through AngularJS. Here is the structure of my modal: <div class="modal hide fade" id="myModal"> <div class="moda ...

javascriptangularjstwitter-bootstrap

JavaScript / html Error: function body missing closing curly brace

I encountered an error that I'm struggling to resolve: "SyntaxError: missing } after function body". Despite not having a function named 'body', I have attempted changing every instance of 'body' in my script. However, ...

javascripthtmlsyntax-error

steps for retrieving final outcome from forkJoin

I am currently working with an array of userIds, such as: ['jd', 'abc']. My goal is to loop through these userIds and retrieve full names using an API. Ultimately, I aim to transform the initial array into [ {userId: 'jd', nam ...

javascriptangularrxjs

Combining values from multiple sets of 'radio buttons' in React to get a total

After analyzing the following dataset: const data = [ { id: 1, category: "category1", name: "N/A", price: 0, }, { id: 2, category: "category1", name: "Cheese", ...

javascriptreactjs

Pressing the Yes button will increase the count by 1, while clicking the No button will reset it back to 0. It's just like keeping

Need Help Writing Javascript Code! I'm looking to implement a streak feature similar to Snapchat, where clicking the yes button keeps the streak intact and pressing the no button breaks it. The key aspect is that I want each user's streak to be ...

javascriptnode.jsmongodbexpressbackend

angular.js causing json data not being interpreted correctly as rows

Struggling with setting up an angular.js page to display data fetched through a http get request from a node.js server. Encountering issues with how angular is parsing the json data. Below is the index.html code snippet: <!DOCTYPE html> <html > ...

javascriptangularjsjsonnode.js

The issue with getting a token from Next-auth on the server side persists

Currently, I am working on an application using Next.js and implementing authentication with NextAuth. However, I am encountering an issue with the getToken function not working properly on the server-side. I have double-checked my callbacks configuration ...

javascriptnext.jsjwtaclnext-auth

Enhanced JavaScript Autocompletion in Integrated Development Environments

What is the inner workings of Intellisense in IDEs like Webstorm and Eclipse for JavaScript? From which source do the suggestions originate? Is it possible to tweak the code to enhance the accuracy of the suggestions? https://i.sstatic.net/ZVBB3.png ...

javascripteclipseintellij-ideaidewebstorm

Conceal the button briefly when clicked

How can I disable a button on click for a few seconds, show an image during that time, and then hide the image and display the button again? HTML: <input type="submit" value="Submit" onclick="validate();" name="myButton" id="myButton"> <img st ...

javascripthtml

The getStaticProps function in Next.js does not pass any data back to the pages

After setting up my hosted database, I encountered an issue with fetching data from it. Despite confirming that the database is running smoothly through the Swagger app, no data appears when called via API form. import React from 'react'; export ...

javascriptreactjsapinext.jsgetstaticprops

Sending image to the server with the help of JavaScript

Curious if there is a method to upload an image to the server using javascript or jQuery and then save the image path/name into a database. I am working on a Windows platform server in asp.net 1.1, revamping a web page that is 10 years old. Unfortunately, ...

javascriptjqueryasp.net.net-1.1

Iterate through the array in order to showcase or output it in PHP syntax sourced from an API

[0] => Array ( [id] => 6 [name] => Digitally Imported Psy Goatrance [country] => GB [image] => Array ( [url] => https://img.dirble.com/station/6/original.png ...

javascriptphpjson

Updating Information Within Firebase Directories

I am managing the organization of folders within Firebase Database and I want to modify the paths of certain data entries. For example: Current: Users/[IDs]/Economy/Items Desired: Economy/Users/[IDs]/Items Is there a way to achieve this? (I am using java ...

javascriptfirebase-realtime-database

Invoking a jQuery request to a C# API endpoint

I have recently embarked on a project utilizing ASP.NET MVC and JavaScript/jQuery. I am facing an issue where my API call to the controller using $.ajax function always returns a 404 error. Despite researching and trying various solutions, I continue to en ...

javascriptc#jquery