java script function for different screen resolution

Question

I am newbie in js and working on Sidebar navigation and i read an w3school tutorial here is a script but it's only work for desktop full screen browser.

<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 expand width 250px but in order to make it responsive for mobile browser it should expand 70-80px.

How can i run it for different resolutions?

@JaredSmith i did accept it's duplicated but something you showed me is about media query which is related to style not js.btw i don't believe ,it's duplicated .correct me if i am wrong i am seriously going to step on learning js . — A Farmanbar, Aug 24 '19 at 01:24

score 2 · Answer 1 · edited Aug 24 '19 at 00:33

2

Use window.innerWidth to get the window width of the user

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

}

edited Aug 24 '19 at 00:33

ngood97

513
5
16

answered Aug 24 '19 at 00:29

Abdelillah Aissani

3,058
2
10
25

i will test please wait. – A Farmanbar Aug 24 '19 at 00:31
doesn't work why? – A Farmanbar Aug 24 '19 at 00:39
@Mr.AF my guess is that '600' px was bigger than the screen you tested with ....reduce that on the condition statement or play with browser width if you are using desktop – Abdelillah Aissani Aug 24 '19 at 00:42
i did ctrl+f12 to reside screen below 600px – A Farmanbar Aug 24 '19 at 00:44
when i post again width adjust to 70px but on open nav again adjust to 250 px – A Farmanbar Aug 24 '19 at 00:47
@Mr.AF it will only expand to 250px if the screen is larger than 600px – Abdelillah Aissani Aug 24 '19 at 00:49
is window is browser window or desktop window? :) – A Farmanbar Aug 24 '19 at 00:51
@Mr.AF the browser window or desktop window both ...so if you minimize the browser width it will be also considered as the screen width of the user – Abdelillah Aissani Aug 24 '19 at 00:53

Nidhin Joseph · Accepted Answer · 2019-08-24T00:42:37.487

You can use css @media query which is ideal for this. But, if you are specific to JS, then try below using 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>

i will test it please wait. – A Farmanbar Aug 24 '19 at 00:31 — A Farmanbar, Aug 24 '19 at 00:31
i did clear browser history also. – A Farmanbar Aug 24 '19 at 00:40 — A Farmanbar, Aug 24 '19 at 00:40
@Mr.AF have edited my code. – Nidhin Joseph Aug 24 '19 at 00:40 — Nidhin Joseph, Aug 24 '19 at 00:40

java script function for different screen resolution

2 Answers2