OiO.lk Blog jQuery Using window.matchMedia() to handle the different screen sizes and jQuery to update the DOM
jQuery

Using window.matchMedia() to handle the different screen sizes and jQuery to update the DOM

  • By admin
  • October 23, 2024
  • 0 Comments
  • 5 minutes read
  • 1 View
  • 3 hours ago


When I am using multiple CSS classes on JS, window.onresize isn’t working for me.

Tried different solutions on the web to solve but none worked for me.

My codes:

JS:

`window.onresize = function(event) {
    console.log(event);
  var mq = window.matchMedia('(max-width: 768px)');

  if (mq.matches) {
    $('.front-screen .overlay .container .seat .front-row .seats .legend').addClass('front-screen-mw768 overlay-mw768 container-mw768 seat-mw768 front-row-mw768 seats-mw768 legend-mw768')
  } else {
    $('.front-screen .overlay .container .seat .front-row .seats .legend').removeClass('front-screen-mw768 overlay-mw768 container-mw768 seat-mw768 front-row-mw768 seats-mw768 legend-mw768');
  }
};`

`function appendSeats(seats, rowType) {
  const row = document.querySelector(`.${rowType}`);
  for (let i = 1; i <= seats; i++) {
    const seat = document.createElement("div");
    seat.classList.add("seat");
    row.appendChild(seat);
  }
}

function selectSeats() {
  const seat = document.querySelectorAll(".seat");
  seat.forEach((item) => {
    item.addEventListener("click", () => {
      item.classList.toggle("selected");
    });
  });
}

function markRandomSeats(SEAT_RESERVED) {
  const totalSeats = document.querySelectorAll(".seat");
  const reservedSeats = getRandomSeats(totalSeats, SEAT_RESERVED);
  reservedSeats.forEach((seat) => {
    seat.classList.add("reserved");
  });
}

function getRandomSeats(seats, count) {
  const shuffledSeats = Array.from(seats).sort(() => 0.5 - Math.random());
  return shuffledSeats.slice(0, count);
}

`window.addEventListener("DOMContentLoaded", () => {
  const SEAT_RESERVED = 10;
  appendSeats(12, "first-front-row");
  appendSeats(14, "second-front-row");
  appendSeats(96, "middle-row");
  appendSeats(14, "second-last-row");
  appendSeats(12, "first-last-row");
  selectSeats();
  markRandomSeats(SEAT_RESERVED);
});`

CSS:

`

`* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
*::-webkit-scrollbar {
  display: none;
}

body {
  background-color: #121212;
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  border: 4px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  height: 550px;
  width: 650px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: scroll;
}

.front-screen {
  margin: 0 auto;
  width: 580px;
}

.screen {
  background-color: white;
  width: calc(100% - 8.5rem);
  height: 10px;
  margin: 0 auto;
  border-radius: 50% 50% 0 0;
  position: relative;
}

.overlay {
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
  margin: 0 auto;
  width: 100%;
  height: 50px;
  clip-path: polygon(4.2rem 0%, 32.1rem 0%, 100% 100%, 0 100%);
}

.seats{
    flex: 1;
    margin: 0 auto;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.front-row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.middle-row{
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 1rem;
}

.seat{
    cursor: pointer;
    background-color: rgba(255,255,255,0.1);
    height: 20px;
    width: 20px;
    border-radius: 5px;
    transition: 0.2s ease-in-out;
}

.seat.reserved{
    cursor: not-allowed;
}

.legend{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 0 auto;
}

.legend > div{
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    gap: 0.5rem;
}

.legend .seat{
    pointer-events: none;
}

.selected{
    background-color: #9195f8;
}

.reserved{
    background-color: red;
}

/* 768 breakpoint */
@media (max-width: 768px) {
  .front-screen-mw768 {
    width: 26rem;
  }
  
  .overlay-mw768 {
    height: 2rem;
    clip-path: polygon(4.2rem 0%, 21.1rem 0%, 100% 100%, 0 100%);
  }
  
  .container-mw768 {
    border: none;
    border-radius: unset;
    height: 34rem;
    width: 39rem;
  }
  
  .seat-mw768 {
    height: 1rem;
    width: 1rem;
  }
  
  .front-row-mw768 {
    gap: 1rem;
  }
  
  .seats-mw768 {
     flex: 0;
  }

  .legend-mw768 {    
    margin: 3rem auto;
  }

}

@media (max-width: 540px) {
  .front-screen {
    width: 26rem;
  }

  .overlay {
    height: 2rem;
    clip-path: polygon(4.2rem 0%, 21.1rem 0%, 100% 100%, 0 100%);
  }

  .container {
    border: none;
    border-radius: unset;
    height: 34rem;
    width: 39rem;
  }

  .seat {
    height: 1rem;
    width: 1rem;
  }

  .front-row {
    gap: 5px;
  }

  .middle-row {
    gap: 5px;
  }


  .legend {    
    margin: 3rem auto;
  }
}`

HTML:

`<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2250%22 fill=%22%230058ff%22></rect><path fill=%22%23fff%22 d=%22M72.15 21.33L72.15 21.33Q74.49 22.50 74.90 25.02Q75.30 27.54 73.59 29.61L73.59 29.61Q72.42 31.23 70.58 31.41Q68.73 31.59 66.84 30.69L66.84 30.69Q64.68 29.70 62.30 29.16Q59.91 28.62 57.30 28.62L57.30 28.62Q52.44 28.62 48.62 30.15Q44.79 31.68 42.09 34.52Q39.39 37.35 38.00 41.22Q36.60 45.09 36.60 49.77L36.60 49.77Q36.60 55.26 38.18 59.31Q39.75 63.36 42.54 66.06Q45.33 68.76 49.11 70.07Q52.89 71.37 57.30 71.37L57.30 71.37Q59.73 71.37 62.16 70.92Q64.59 70.47 66.84 69.30L66.84 69.30Q68.73 68.40 70.58 68.67Q72.42 68.94 73.68 70.56L73.68 70.56Q75.48 72.81 74.99 75.20Q74.49 77.58 72.24 78.66L72.24 78.66Q69.90 79.83 67.43 80.60Q64.95 81.36 62.43 81.77Q59.91 82.17 57.30 82.17L57.30 82.17Q50.82 82.17 45.02 80.10Q39.21 78.03 34.67 73.98Q30.12 69.93 27.51 63.86Q24.90 57.78 24.90 49.77L24.90 49.77Q24.90 42.84 27.29 36.99Q29.67 31.14 34.04 26.87Q38.40 22.59 44.34 20.21Q50.28 17.82 57.30 17.82L57.30 17.82Q61.26 17.82 65.04 18.72Q68.82 19.62 72.15 21.33Z%22></path></svg>" />
<meta charset="UTF-8">
<meta http-equiv=“Pragma” content=”no-cache”>
<meta http-equiv=“Expires” content=”-1″>
<meta http-equiv=“CACHE-CONTROL” content=”NO-CACHE”>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS Stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="css/master.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic" rel="stylesheet">
    
<title>Responsive-seat-selector-UI-V2</title>
</head>

<body>
    <div class="container">
        <div class="front-screen">
            <div class="screen"></div>
            <div class="overlay"></div>
        </div>
        <div class="seats">
            <div class="front-row first-front-row">
            </div>
            <div class="front-row second-front-row"></div>
            <div class="middle-row"></div>
            <div class="front-row second-last-row"></div>
            <div class="front-row first-last-row"></div>
        </div>
        <div class="legend">
            <div>
                <div class="seat available"></div>
                <span>Available</span>
            </div>
            <div>
                <div class="seat selected"></div>
                <span>Selected</span>
            </div>
            <div>
                <div class="seat reserved"></div>
                <span>Reserved</span>
            </div>
        </div>
    </div>
</body>

<!-- Our codes -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script src="js/main.js"></script>

</html>``

Now, how to use window.matchMedia() to handle the different screen sizes and jQuery to update the DOM,
Can anyone help me with examples please?



You need to sign in to view this answers

Leave a Comment

Related Post

GPL

Free GPL WordPress Multisite Sync

October 23, 2024
javascript

Firebase Phone Authentication: FirebaseError: An internal AuthError has occurred

October 23, 2024
CSS

Stick the area of highlighted image marker of image

October 23, 2024
C++

Unexpected Behavior in C _Generic with Compound Literals

October 23, 2024
jQuery

Bootstrap Modal error: “Uncaught TypeError: Illegal invocation”

October 23, 2024
HTML

Custom styling of the text inside the input field

October 23, 2024
Exit mobile version