0

I have a table as follows, I am trying something complex, I need to figure out how to display the "Hi", only on desktop devices. Or in other words, hide it from mobile devices.

I have a few onClick functions thrown in there that I want to keep. for both desktop and mobile devices.

Many thanks!

      <div class="col-sm-9 noPadding">
        <div class="table-responsive">
          <table  id="table2" class="table table-bordered">
            <thead>
              <tr>
                <th class="col-xs-2">#</th>
                <th class="col-xs-2">Monday</th>
                <th class="col-xs-2">Tuesday</th>
                <th class="col-xs-2">Wednesday</th>
                <th class="col-xs-2">Thursday</th>
                <th class="col-xs-2">Friday</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="">09-10</td>
                <td class="" onclick="highlightUsers(0,0)">Hi</td>
                <td class="" onclick="highlightUsers(1,0)">Hi</td>
                <td class="" onclick="highlightUsers(2,0)">Hi</td>
                <td class="" onclick="highlightUsers(3,0)">Hi</td>
                <td class="" onclick="highlightUsers(4,0)">Hi</td>
              </tr>
              <tr>
                <td class="">10-11</td>
                <td class="" onclick="highlightUsers(0,1)">Hi</td>
                <td class="" onclick="highlightUsers(1,1)">Hi</td>
                <td class="" onclick="highlightUsers(2,1)">Hi</td>
                <td class="" onclick="highlightUsers(3,1)">Hi</td>
                <td class="" onclick="highlightUsers(4,1)">Hi</td>
              </tr>
              <tr>
                <td class="">11-12</td>
                <td class="" onclick="highlightUsers(0,2)">Hi</td>
                <td class="" onclick="highlightUsers(1,2)">Hi</td>
                <td class="" onclick="highlightUsers(2,2)">Hi</td>
                <td class="" onclick="highlightUsers(3,2)">Hi</td>
                <td class="" onclick="highlightUsers(4,2)">Hi</td>
              </tr>
              <tr>
                <td class="">12-01</td>
                <td class="" onclick="highlightUsers(0,3)">Hi</td>
                <td class="" onclick="highlightUsers(1,3)">Hi</td>
                <td class="" onclick="highlightUsers(2,3)">Hi</td>
                <td class="" onclick="highlightUsers(3,3)">Hi</td>
                <td class="" onclick="highlightUsers(4,3)">Hi</td>
              </tr>
              <tr>
                <td class="">01-02</td>
                <td class="" onclick="highlightUsers(0,4)">Hi</td>
                <td class="" onclick="highlightUsers(1,4)">Hi</td>
                <td class="" onclick="highlightUsers(2,4)">Hi</td>
                <td class="" onclick="highlightUsers(3,4)">Hi</td>
                <td class="" onclick="highlightUsers(4,4)">Hi</td>
              </tr>
              <tr>
                <td class="">02-03</td>
                <td class="" onclick="highlightUsers(0,5)">Hi</td>
                <td class="" onclick="highlightUsers(1,5)">Hi</td>
                <td class="" onclick="highlightUsers(2,5)">Hi</td>
                <td class="" onclick="highlightUsers(3,5)">Hi</td>
                <td class="" onclick="highlightUsers(4,5)">Hi</td>
              </tr>
              <tr>
                <td class="">03-04</td>
                <td class="" onclick="highlightUsers(0,6)">Hi</td>
                <td class="" onclick="highlightUsers(1,6)">Hi</td>
                <td class="" onclick="highlightUsers(2,6)">Hi</td>
                <td class="" onclick="highlightUsers(3,6)">Hi</td>
                <td class="" onclick="highlightUsers(4,6)">Hi</td>
              </tr>
              <tr>
                <td class="">04-05</td>
                <td class="" onclick="highlightUsers(0,7)">Hi</td>
                <td class="" onclick="highlightUsers(1,7)">Hi</td>
                <td class="" onclick="highlightUsers(2,7)">Hi</td>
                <td class="" onclick="highlightUsers(3,7)">Hi</td>
                <td class="" onclick="highlightUsers(4,7)">Hi</td>
              </tr>
              <tr>
                <td class="">05-06</td>
                <td class="" onclick="highlightUsers(0,8)">Hi</td>
                <td class="" onclick="highlightUsers(1,8)">Hi</td>
                <td class="" onclick="highlightUsers(2,8)">Hi</td>
                <td class="" onclick="highlightUsers(3,8)">Hi</td>
                <td class="" onclick="highlightUsers(4,8)">Hi</td>
              </tr>
              <tr>
                <td class="">06-07</td>
                <td class="" onclick="highlightUsers(0,9)">Hi</td>
                <td class="" onclick="highlightUsers(1,9)">Hi</td>
                <td class="" onclick="highlightUsers(2,9)">Hi</td>
                <td class="" onclick="highlightUsers(3,9)">Hi</td>
                <td class="" onclick="highlightUsers(4,9)">Hi</td>
              </tr>
              <tr>
                <td class="">07-08</td>
                <td class="" onclick="highlightUsers(0,10)">Hi</td>
                <td class="" onclick="highlightUsers(1,10)">Hi</td>
                <td class="" onclick="highlightUsers(2,10)">Hi</td>
                <td class="" onclick="highlightUsers(3,10)">Hi</td>
                <td class="" onclick="highlightUsers(4,10)">Hi</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive" -->
      </div><!-- col-sm-9 -->
Sof
  • 31
  • 1
  • 4
  • 1
    bootstrap has built in helper classes like "hidden-lg" use the one thats media querry only applies to anything less than desktop size. Here is a link to the documentation http://getbootstrap.com/css/#responsive-utilities-classes. Don't use jquery to do what Bootstrap already lets you do with just CSS – HisPowerLevelIsOver9000 Apr 12 '17 at 18:34
  • Possible duplicate of [What is the best way to detect a mobile device in jQuery?](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) – Bertram Gilfoyle Apr 12 '17 at 18:35
  • can you give us some feed back (comments or answers below). Can you also clarify if you want to hide text **only** ? – G-Cyrillus Apr 12 '17 at 18:54

2 Answers2

2

Since you are using Bootstrap, you can use the classes hidden-xs to hide elements in mobile devices. Example below:

<tr>
    <td class="">09-10</td>
    <td class="hidden-xs" onclick="highlightUsers(0,0)">Hi</td>
    <td class="hidden-xs" onclick="highlightUsers(1,0)">Hi</td>
    <td class="hidden-xs" onclick="highlightUsers(2,0)">Hi</td>
    <td class="hidden-xs" onclick="highlightUsers(3,0)">Hi</td>
    <td class="hidden-xs" onclick="highlightUsers(4,0)">Hi</td>
</tr>

But this will make your onclick event void since it won't be displayed.

If you want to keep the onclick event on the tds, set those td's visibility as hidden for devices with width <768px. By that those elements will just be hidden without losing the area and the onclick listener.

Yogesh Mistry
  • 1,556
  • 13
  • 18
1

You could use the following media query to target devices by screen size. Playing with the max-device-width allows you control over which devices see what, and you can use the onclick attribute (or another attribute) to target the elements that you want to hide.

@media screen and (max-device-width: 1200px) { 
    td[onclick^="highlightUsers"] {
      visibility: hidden;
    }
}
freginold
  • 3,640
  • 3
  • 11
  • 26