contenthover

contenthover

It works, but I have a two issues:

1) How to disable the overlay slides for mobile (touch) devices?

I'm currently detecting mobile devices with good success using the PHP library mobileESP .
I can also use the following Javascript: 
  1. $( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
});
if (isMobile.matches) { //adjust for mobile device }
But how can I use a boolean variable (either PHP or Javascript) to disable contenthover functionality?  Ideally, I'd like to prevent the contenthover library from loading in the header and simply keep the hidden contenthover divs hidden.  One challenge I've had trying to hide the contenthover div is that its a class, not an ID... the below code fails for that reason... can I hide a class? 
  1. var elmt = document.getElementById('contenthover');
elmt.style.display = 'none';
2) How do I optimize my code to accommodate multiple divs that need to remain identified by different selectors (t1 - tn)?
  1.     <script>
  2.     $(function(){
  3.         $('.t1').contenthover({
  4.             slide_speed:200,
  5.             slide_direction:'bottom',
  6.             overlay_background:'#666666',
  7.             overlay_height:100,
  8.             overlay_width:350
  9.         });
  10.         $('.t2').contenthover({
  11.             effect:'slide',
  12.             slide_speed:200,
  13.             slide_direction:'bottom',
  14.             overlay_background:'#666666',
  15.             overlay_height:100,
  16.             overlay_width:350
  17.         });
  18.         $('.t3').contenthover({
  19.             effect:'slide',
  20.             slide_speed:200,
  21.             slide_direction:'bottom',
  22.             overlay_background:'#666666',
  23.             overlay_height:100,
  24.             overlay_width:350
  25.         });
  26.        ...
I'm new to Javascript and unsure how to eliminate the repeated code here...  please advise.  thx.