Html Question posted in
Some basic documentation can be found here.

Html – Make sure that the entire line containing the file name is clickable, not just the text

I have a problem with my html that i use for mod_autoindex, the problem is i want the entire line in the row name when we put our cursor it’s clickable. But there what happend i need to select the the name of the file and click for going into the subdirectory. Here what’s looking like my html file :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index of /</title>
    <style>



        body {
            font-family: Arial, sans-serif;
            background: url('hide') no-repeat center center fixed;
            background-size: cover;
            margin: 0;
            padding: 10;
        }

        .container {
            backdrop-filter: blur(80px); /* Blurs the background behind the container */
            -webkit-backdrop-filter: blur(80px); /* For Safari */
            margin: 0 auto;
            padding: 20px;
            width: 80%;
            max-width: 1000px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            overflow: hidden; /* Ensure content does not overflow */
        }

tr td:first-of-type {
  padding-left: 10px;
  padding-right: 10px;
}

th {
  text-align: left;
  font-size: .75em;
  padding-right: 20px;
}

tr.indexhead{
  border-bottom: 2px solid #999;
}

.odd {
  background-color: rgb(244, 244, 244);
}
@media (prefers-color-scheme: dark) {
  .odd {
    background-color: rgb(50, 50, 50);
  }
  tr {
  outline: 0;
  border: 0;
}

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 15px;
            border: 0px solid #ddd;
            text-overflow: ellipsis; /* Add ellipsis for overflowing text */
            overflow: hidden;
            white-space: nowrap;
        }


th + th {
  width: 65%;
}

        th {
            background-color: ##00ffb3;
        }

        a {
            text-decoration: none;
            color: #ffffff;
        }

                tr {
            transition: background-color 0.3s ease; /* Smooth transition for background-color change */
        }

                tr:hover {
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background on hover */
            cursor: pointer; /* Change cursor to pointer on hover */
           }

        a:hover {
            text-decoration: underline;
        }

        /* Media Queries for Mobile Devices */
        @media only screen and (max-width: 600px) {
            .container {
                width: 95%;
                padding: 10px;
            }

            th, td {
                padding: 10px;
                white-space: normal; /* Allow wrapping of text */
                text-align: left; /* Align text to left for better readability */
                overflow-wrap: break-word; /* Break long words */
            }

            h1 {
                font-size: 1.5em;
            }

            p {
                font-size: 1em;
            }
            img.round {
                border-radius: 50%;


            }
        }
    </style>
    <script>
        function isMobile() {
            return window.matchMedia("only screen and (max-width: 760px)").matches;
        }

        window.onload = function() {
            if (isMobile()) {
                document.body.style.fontSize = '16px';
                document.querySelector('.container').style.width = '95%';
                document.querySelector('.container').style.padding = '10px';
                var cells = document.querySelectorAll('td, th');
                for (var i = 0; i < cells.length; i++) {
                    cells[i].style.whiteSpace = 'normal';
                    cells[i].style.textAlign = 'left';
                    cells[i].style.overflowWrap = 'break-word';
                }
            }
                        var backgroundImages = [
                'hide',
                'hide',
                'hide',
                'hide'
            ];
              // Récupérer l'index actuel de localStorage ou initialiser à 0
            var currentIndex = parseInt(localStorage.getItem('backgroundImageIndex')) || 0;

            // Appliquer l'image actuelle comme fond du body
            document.body.style.backgroundImage = 'url(' + backgroundImages[currentIndex] + ')';

            // Incrémenter l'index pour la prochaine fois
            currentIndex = (currentIndex + 1) % backgroundImages.length;

            // Stocker le nouvel index dans localStorage
            localStorage.setItem('backgroundImageIndex', currentIndex);
              var rows = document.querySelectorAll('tr[data-href]');
            rows.forEach(function(row) {
                row.addEventListener('click', function() {
                    window.location.href = row.getAttribute('data-href');

                                var text = row.getElementsByTagName('td')[1].textContent.toLowerCase();
            var val = _input.value.toLowerCase();

        };

    </script>
</head>
<body>
    <div class="container">
        <img
            src="hide" class="round">

I tried to directly put an href but not realy helped it

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here when i put my cursor and i try to click it's redirect to nothing

    And there it's will redirect me

    What i want it's when my cursor is in the name section like in the screenshot i will can go to the directory and not put my cursor into the text.


  2. 0

    You can bind the click event to the row and once the user clicks on a specific row then redirect the user to the specific link associated with that specific row which the user clicked via window.location.href.

    Refer the code below:

    window.onload = function() {
  var rows = document.querySelectorAll('tr[data-href]');
  rows.forEach(function(row) {
    row.addEventListener('click', function() {
      var url = row.getAttribute('data-href');
      if (url) {
        window.location.href = url; // go to link from here
        alert("Redirecting row specific URL")
      }
    });
  });
};
    body {
  font-family: Arial, sans-serif;
  background: url('hide') no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding: 10;
}

.container {
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  /* For Safari */
  margin: 0 auto;
  padding: 20px;
  width: 80%;
  max-width: 1000px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  overflow: hidden;
}

tr td:first-of-type {
  padding-left: 10px;
  padding-right: 10px;
}

th {
  text-align: left;
  font-size: .75em;
  padding-right: 20px;
}

tr.indexhead {
  border-bottom: 2px solid #999;
}

.odd {
  background-color: rgb(244, 244, 244);
}

@media (prefers-color-scheme: dark) {
  .odd {
    background-color: rgb(50, 50, 50);
  }
  tr {
    outline: 0;
    border: 0;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th,
  td {
    padding: 15px;
    border: 0px solid #ddd;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  th+th {
    width: 65%;
  }
  th {
    background-color: ##00ffb3;
  }
  a {
    text-decoration: none;
    color: #ffffff;
  }
  tr {
    transition: background-color 0.3s ease;
  }
  tr:hover {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  a:hover {
    text-decoration: underline;
  }
  @media only screen and (max-width: 600px) {
    .container {
      width: 95%;
      padding: 10px;
    }
    th,
    td {
      padding: 10px;
      white-space: normal;
      text-align: left;
      overflow-wrap: break-word;
    }
    h1 {
      font-size: 1.5em;
    }
    p {
      font-size: 1em;
    }
    img.round {
      border-radius: 50%;
    }
  }
    <html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="container">
    <table>
      <tr data-href="path_to_file1">
        <td>File 1</td>
      </tr>
      <tr data-href="path_to_file2">
        <td>File 2</td>
      </tr>
    </table>
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search