How to Hide an HTML Element in Mobile View using jQuery ?
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.
Please Login to comment...