Steps for resetting a div's display after adjusting the device size

I have a code that displays horizontally on desktop screens and vertically on phones. It includes an x button (closebtn) that is only displayed on phones to close the menu bar. How can I automatically display it again after resizing the page back to desktop size?

function oty() {
  document.getElementById("tab").style.display = "none";
}
<div class="icon-bar" id="tab">
  <button class="closebtn" onclick="oty()">X</button>
  <button class="tablink">Home</button>
  <button class="tablink">News</button>
  <button class="tablink">Contact</button>
  <button class="tablink">About</button>
</div>

javascripthtmlcssresponsive-design

Answer №1

Best practice: Utilize CSS @media

Easily incorporate media queries to adjust the display of elements based on viewport size, a key aspect of implementing responsive design principles. In this scenario, sticking with CSS for styling is recommended, such as...

@media screen and (max-width: 1024px) { // Customize breakpoint size
  #tab {
    display: none;
  }
}

Avoid if possible: Using the resize event along with JavaScript

Although feasible through JavaScript, it is advisable to stick with CSS for these tasks. If necessary, here's how you can achieve it.

  1. Attach a resize event listener to the window: (e.g. 
    window.addEventListener('resize', handleResize)
    )
  2. Create a function to toggle visibility of your tab element.
  3. Consider implementing a throttle feature to prevent excessive event triggers.

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

Discovering the specific object ID that triggered an event in JavaScript

I am developing a webpage that includes JavaScript functionality. There is a specific function in the Javascript code which gets triggered by two different elements when clicked: 1. When a checkbox is clicked: $('#chkShowAll').click( functi ...

javascriptjquerydatatablegetelementbyid

CSS struggles after implementing conditional checks in return statement for an unordered list

I'm encountering a CSS issue with the header section. When I include the following code snippet in my code to display a tab based on a condition, the entire header list doesn't appear in a single horizontal line: <div> {isAdmin(user) ? ...

javascriptcssreactjs

What is the best way to create text boxes that can expand and collapse within a UIWebView?

I am looking to present text in a UIWebView with expandable or collapsible boxes that contain titles. The user should be able to tap the bar of a collapsed box to expand it. Is there a simple solution available that can be easily integrated into a local ...

javascripthtmluiwebview

What is the best way to tally a score after analyzing two spans in Javascript?

I have 3 spans where 2 contain an alphabet each. The third span is left blank for the result of comparing the first 2 spans. I need to display the result in the last span, showing a value of 1 if the two spans contain the same alphabet. Can anyone sugges ...

javascript

Efficiently transmitting WebSockets events/messages to multiple controllers in AngularJS

Incorporating AngularJs, I created a factory to manage a WebSocket connection effectively. Here is the code: .factory('WebSocketConnection', function () { var service = {}; service.callbacks = []; service.connect = func ...

javascriptangularjscallbackwebsocket

When submitting the club form, my goal is to automatically generate a club admin within the user list in activeadmin

My dashboard.rb setup looks like this: ActiveAdmin.register_page "Dashboard" do menu priority: 1, label: proc{ I18n.t("active_admin.dashboard") } content title: proc{ I18n.t("active_admin.dashboard") } do # form render 'form' # Thi ...

javascriptruby-on-railsrubyajaxactiveadmin

Flag is activated to retrieve the data from the @Input source

@Input() config= []; flag = false; I need to change the flag to true only when I receive data in the config from the @input. Where should I do this? The data in the config is delayed and I am unable to access it in ngOnInit but can get it in ngOnChanges. ...

javascriptangulartypescript

SortTable - Refresh Dropdown Filter in Header After Adding Row to Table

My tablesorter table initially displays two entries in the "License" Filter. If I dynamically add a row, the table now looks like this: I have attempted to update the table using the following commands: $('#connectionGrid2').trigger('upda ...

javascriptjquerytablesorter

Mismatch of data types in Google Visualization

I am working with Google Visualization and receiving Unix Epoch timestamps that I need to convert into an array of strings for use in Google Charts. However, I keep encountering an error: Type mismatch. Value 2017-8-25 16:23:54,2017-8-25 16:11:54,... does ...

javascriptarraysjsondatetimegoogle-visualization

JavaScript Algorithm for Pyramids

Experimenting with simple algorithms brought me to this code. I'm curious if anyone has a more concise version in JavaScript for displaying a pyramid: const max= 30; let row = 1; for (let i = 1; i < max; i += 2) { console.log(' '.r ...

javascriptalgorithm

As soon as I closed the modal, I noticed that the checked inputs reverted back to

I am using checkboxes within a modal to narrow down my search results. However, I have encountered an issue where when I check multiple checkboxes and then close the modal, the checked inputs become unchecked. Every time I open the modal, I want the check ...

javascriptangularjscheckboxangular-strapangularjs-ng-checked

toggle between utilizing the page object API and the primary Nightwatch API

Currently, I am incorporating the page object model alongside nightwatch for my testing procedures. Encountering challenges while trying to interact with an element led me to execute some jquery. However, the 'execute' command is not featured in ...

javascriptselenium-webdrivernightwatch.js

Problem with transitions not working properly in Vue.js.The issue

Experiencing an issue with the Vue.js transition feature. Check out this link for reference. When the transition enters, it works smoothly, but when transitioning out, it's not functioning properly. File: genetic.vue <transition name="slide-f ...

cssvue.jstransition

How can you switch the property of an object in VueJS?

I am currently working with an array called cars, which contains names of cars as well as a property called starred. My goal is to toggle the value of starred between true and false for each car, ensuring that only one car can have starred set to true at a ...

javascriptvue.jsvuetify.js

Image control failing to display SVG file

I am facing an issue with displaying an SVG file on the img control in angular10. When I try to use SVG, it's not showing up but it works fine when I change the file type to jpg for the same control. The img control is placed inside a nav bar. Here i ...

htmlcssangulartwitter-bootstrapsvg

Overflow is causing interference with the scrollY value

I've been attempting to retrieve the scrollY value in my React app, but it seems to be affected by overflow-related issues. Below is the code snippet I used to access the scrollY value: import React from "react"; import { useEffect, use ...

javascriptreactjsscroll

Confusion surrounding the purpose of an AngularJS controller function

After experimenting with some basic tutorials in AngularJS, I came across a discrepancy in how controllers are declared and used. For instance, in this JSFiddle link - http://jsfiddle.net/dakra/U3pVM/ - the controller is defined as a function name, which w ...

javascriptangularjs

Execute ReactJS function only if query parameters are configured

Provide an Explanation: Within the useEffect, I am retrieving products using the getProducts() function based on the provided data. The data contains search filters that can be updated by the user in real-time. For instance, the data consists of an object ...

javascriptreactjsecmascript-6next.js

Leveraging Angular2's observable stream in combination with *ngFor

Below is the code snippet I am working with: objs = [] getObjs() { let counter = 0 this.myService.getObjs() .map((obj) => { counter = counter > 5 ? 0 : counter; obj.col = counter; counter++; return view ...

javascriptangulartypescriptrxjs

"Learn how to dynamically change the color of a button in Angular after it has been clicked

Can someone assist me in changing the button color to red after it has been clicked? I am looking for guidance on how to achieve this. The current code snippet is as follows: <td> <button mat-icon-button color="primary"> <m ...

htmlangularangular6