Tether and Media Queries

[cmalven]

What would be the ideal way to switch the placement of a Tether based on viewport size? For instance, I normally have my Tether attached to the right of a target. At smaller viewport sizes, Tether tries to switch to the other side of the target which doesn't actually work and places it outside of the viewport. It doesn't seem to be smart enough to try switching to the top or bottom of the target even if there is plenty of room available there, and I can't seem to find a way to to configure it to explicitly make this switch.

Any suggestions?

[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 );

 } );