Suppose we have given an HTML document and the task is to hide an HTML element in mobile view with the help of jQuery.
Approach:
- Initially, we are required to detect whether our system is ‘Mobile’ or not, for that window.navigator.userAgent property is used. It returns a string containing information about the name, version, and platform of the browser. So, using this string we can detect our system.
- In order to hide HTML elements hide() method is used.
- Here, in our code, we are going to hide a column of a table in the mobile view. In the desktop view of the table, we have four different columns with table headings as GFG UserHandle, Practice Problems, Coding Score, and GFG Articles.
- In the mobile view, we are going to hide the Practice Problems column by getting elements using their class names.
Implementation Code:
html
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title >GFG User Details</ title >
<!-- jQuery PLUGIN-->
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 >
|
Output:
Desktop view:
Mobile view: In the mobile view, the practice problems column is successfully now.