Zooming over input/radio elements about anythingzoomer

[Mottie]

Hi @a-espitia!

Handling form elements isn't built-into AnythingZoomer; but you could use the zoom & unzoom callbacks to listen for changes and update the elements (demo):

Code

$(function() {
  var targets = 'select, input',
    busy = false;

  function updateEls($large, $small) {
    $large.each(function(index, el) {
      if (el.type === 'radio' || el.type == 'checkbox') {
        $small[index].checked = el.checked;
      } else {
        $small[index].value = el.value;
      }
    });
  }

  $("#zoom1").anythingZoomer({
    clone: true,
    // zoom window visible
    zoom: function(e, zoomer) {
      var $large = zoomer.$large.find(targets),
        $small = zoomer.$small.find(targets);
      // change the name attribute of the large radio buttons to
      // separate them from grouping with the small radio buttons
      $large.filter('[name="group"]').each(function(_, el) {
        el.name = 'group2';
      });

      updateEls($large, $small);
      zoomer.$large.on('change, input', targets, function() {
        updateEls($large, $small);
      })
    },

    // zoom window hidden
    unzoom: function(e, zoomer) {
      zoomer.$large.off('change');
    }

  });
});

[a-espitia]

that seemed to get me a bit closer, however when the zoom it disabled, it's preventing some/most of the input elements. here's a mockup, if I did it right...

https://jsfiddle.net/aespitia/1xhk3o4b/7/

[a-espitia]

here's another slight update. if the button is pre-selected, zoom gets rid of it. for this example, i preselected radio button 3, but it appears blank, however, when i hover over it, it's there. so, it's like it kept the selection in the large, but got rid of it in the small window

https://jsfiddle.net/aespitia/1xhk3o4b/11/

[Mottie]

In the zoom funciton, I should have switched the parameters of the updateEls function; and for some reason, the overlay is interfering with form interaction - I'll fix that in the code - so I think this demo should work now:

Code

var isMagnifyEnabled = true,
  targets = 'select, input',
  busy = false;

function updateEls($large, $small) {
  $large.each(function(index, el) {
    if (el.type === 'radio' || el.type == 'checkbox') {
      $small[index].checked = el.checked;
    } else {
      $small[index].value = el.value;
    }
  });
}

function ToggleZoom() {
  if (isMagnifyEnabled) {
    $('#zoom1').anythingZoomer('disable');
    isMagnifyEnabled = false;
  } else {
    $('#zoom1').anythingZoomer('enable');
    isMagnifyEnabled = true;
  }
}
/* 
 Demo for jQuery AnythingZoomer Plugin
 https://github.com/CSS-Tricks/AnythingZoomer
 */
$(function() {
  $("#zoom1").anythingZoomer({
    clone: true,
    overlay: false,
    // zoom window visible
    zoom: function(e, zoomer) {
      var $large = zoomer.$large.find(targets),
        $small = zoomer.$small.find(targets);
      // change the name attribute of the large radio buttons to
      // separate them from grouping with the small radio buttons
      $large.filter('[name="group"]').each(function(_, el) {
        el.name = 'group2';
      });
      updateEls($small, $large);
      zoomer.$large.on('change, input', targets, function() {
        updateEls($large, $small);
      })
    },

    initialized: function(e, zoomer) {
      isMagnifyEnabled = true;
      // overlay preventing interaction with form elements
      // TODO: fix
      zoomer.$overlay.remove();
    },

    // zoom window hidden
    unzoom: function(e, zoomer) {
      zoomer.$large.off('change');
    }

  });
});

[a-espitia]

that's awesome, i think that does cover most of it, except for the preloaded checkbox losing it's selection.

i just added checked="checked" on radio 2

https://jsfiddle.net/aespitia/1xhk3o4b/30/

[Mottie]

I moved the renaming of the groups to the init function, and re-checked the radio button because it was changed - demo

var isMagnifyEnabled = true,
  targets = 'select, input',
  busy = false;

function updateEls($large, $small) {
  $large.each(function(index, el) {
    if (el.type === 'radio' || el.type == 'checkbox') {
      $small[index].checked = el.checked;
    } else {
      $small[index].value = el.value;
    }
  });
}

function ToggleZoom() {
  if (isMagnifyEnabled) {
    $('#zoom1').anythingZoomer('disable');
    isMagnifyEnabled = false;
  } else {
    $('#zoom1').anythingZoomer('enable');
    isMagnifyEnabled = true;
  }
}
/* 
 Demo for jQuery AnythingZoomer Plugin
 https://github.com/CSS-Tricks/AnythingZoomer
 */
$(function() {
  $("#zoom1").anythingZoomer({
    clone: true,
    overlay: false,
    // zoom window visible
    zoom: function(e, zoomer) {
      var $large = zoomer.$large.find(targets),
        $small = zoomer.$small.find(targets);
      updateEls($small, $large);
      zoomer.$large.on('change, input', targets, function() {
        updateEls($large, $small);
      })
    },

    initialized: function(e, zoomer) {
      isMagnifyEnabled = true;
      // change the name attribute of the large radio buttons to
      // separate them from grouping with the small radio buttons
      zoomer.$large.find(targets).filter('[name="group"]').each(function(_, el) {
        el.name = 'group2';
      });
      zoomer.$small.find('[checked]').prop('checked', true);
      // overlay preventing interaction with form elements
      // TODO: fix
      zoomer.$overlay.remove();
    },

    // zoom window hidden
    unzoom: function(e, zoomer) {
      zoomer.$large.off('change');
    }

  });
});

[Mottie]

In the latest version, you won't need to include zoomer.$overlay.remove(); anymore.

[a-espitia]

Thank you so much for your help, this is a great library!