OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter FIREXDF OFF
  • Start date Start date
F

FIREXDF OFF

Guest
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 :

Code:
<!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

<p>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 :</p>
<pre><code><!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.style.whiteSpace = 'normal';
cells.style.textAlign = 'left';
cells.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">

</code></pre>
<p>I tried to directly put an href but not realy helped it</p>
 

Latest posts

Top