Tether and Media Queries about tether

[adamschwartz]

Probably the simplest, most re-usable approach is to set a window resize event handler (or use some other media-query-like detection in Javascript), and based on some condition, update the Tether options with the new attachments and call position(). If you post some code or a screenshot though, I may be able to provide more specific suggestions.

[lkraav]

I actually had to switch tethering to another target during resize, due to the way elements visibility varies according to device category.

$( document ).ready( function() {

     if ( typeof Tether === "undefined" ) {
         return;
     }

     function getTetherTarget() {
         return $( "#menu-secondary" ).is( ":visible" ) ? "#menu-secondary" : "#header";
     }

     $( window ).resize( _.debounce( function() {

         options.target = getTetherTarget();

         tetherMenuSubsidiary.setOptions( options );

         tetherMenuSubsidiary.position();

     }, 250 ) );

     var options = {
         element: "#menu-subsidiary",
         target: getTetherTarget(),
         attachment: "top left",
         targetAttachment: "bottom left",
         targetModifier: "visible",
         constraints: [{
             to: "window",
             pin: true
         }]
     };

     var tetherMenuSubsidiary = new Tether( options );

 } );