Supongamos que hemos proporcionado un documento HTML y la tarea es ocultar un elemento HTML en la vista móvil con la ayuda de jQuery.
Acercarse:
- Inicialmente, estamos obligados a detectar si nuestro sistema es ‘Móvil’ o no, para eso se utiliza la propiedad window.navigator.userAgent . Devuelve una string que contiene información sobre el nombre, la versión y la plataforma del navegador. Entonces, usando esta string podemos detectar nuestro sistema.
- Para ocultar elementos HTML se utiliza el método hide() .
- Aquí, en nuestro código, vamos a ocultar una columna de una tabla en la vista móvil. En la vista de escritorio de la tabla, tenemos cuatro columnas diferentes con encabezados de tabla como GFG UserHandle, Practice Problems, Coding Score y GFG Articles.
- En la vista móvil, ocultaremos la columna Problemas de práctica al obtener elementos usando sus nombres de clase.
Código de implementación:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GFG User Details</title>
<!-- jQuery PLUGIN-->
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity=
"sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous">
</script>
<!-- CSS properties to style the page-->
<style>
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
}
h1 {
text-align: center;
color: #006600;
font-size: xx-large;
font-family: 'Gill Sans', 'Gill Sans MT',
' Calibri', 'Trebuchet MS', 'sans-serif';
}
td {
background-color: #E4F5D4;
border: 1px solid black;
}
th,
td {
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
td {
font-weight: lighter;
}
</style>
</head>
<body>
<section>
<h1>GeeksForGeeks</h1>
<!-- TABLE CONSTRUCTION-->
<table id="GFGtable">
<tr>
<!-- TABLE HEADING -->
<th class="gfgusername">GFG UserHandle</th>
<th class="gfgpp">Practice Problems</th>
<th class="gfgscores">Coding Score</th>
<th class="gfgarticles">GFG Articles</th>
</tr>
<!-- TABLE DATA -->
<tr>
<td class="gfgusername">User-1</td>
<td class="gfgpp">150</td>
<td class="gfgscores">100</td>
<td class="gfgarticles">30</td>
</tr>
<tr>
<td class="gfgusername">User-2</td>
<td class="gfgpp">100</td>
<td class="gfgscores">75</td>
<td class="gfgarticles">30</td>
</tr>
<tr>
<td class="gfgusername">User-3</td>
<td class="gfgpp">200</td>
<td class="gfgscores">50</td>
<td class="gfgarticles">10</td>
</tr>
<tr>
<td class="gfgusername">User-4</td>
<td class="gfgpp">50</td>
<td class="gfgscores">5</td>
<td class="gfgarticles">2</td>
</tr>
<tr>
<td class="gfgusername">User-5</td>
<td class="gfgpp">0</td>
<td class="gfgscores">0</td>
<td class="gfgarticles">0</td>
</tr>
</table>
</section>
<script>
// CONDITION TO DETECT SYSTEM
if (window.navigator.userAgent.indexOf("Mobile") > -1) {
// HIDING ELEMENTS
$(".gfgpp").hide();
}
</script>
</body>
</html>
Producción:
Vista de escritorio:
Vista móvil: en la vista móvil, la columna de problemas de práctica ahora es exitosa.
