Techiio-author
Started by Dixon MurrayNov 5, 2021

Open
Add/Remove elements depending of window width

0 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWES SHARE

I want to add or do away with elements depending on the display screen size. I am looking to do away with the items I don't need to be shown and append the only that I would like to see.

With this, the factors are getting eliminated but nothing's getting appended.

I am getting the anticipated result when the use of.Hide() and .Display(), but I might rather do away with them from the dom.

Does a person know a manner to clear up this?

JS:

$(window).on("resize", function () {
  var three = $('#three');
  var four = $('#four');
  var five = $('#five');
  var wrapper = $('.grid-wrapper');
  if($(window).width() < 769) {
    five.detach();
    four.detach();
    wrapper.append(three)
  }
  else if($(window).width() > 2018) {
    three.detach();
    four.detach();
    wrapper.append(five)
  }
  else {
    three.detach();
    five.detach();
    wrapper.append(four)
  }
}).resize();

0 Replies

You must be Logged in to reply
Trending Technologies
15
Software91
DevOps48
Frontend Development24
Backend Development20
Server Administration17
Linux Administration28
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance