Search code examples
jqueryuser-interfaceshow

JQuery UI Show -Can someone please shorten the function so that only "blind" is used?


I'm using JQuery UI.

In the case of the Show function I just need the Option "blind".

Can someone please shorten the function so that only "blind" is used?

All Select Options must go. The script should only contain the "blind" option.

var selectedEffect = Can someone please shorten the function so that only "blind" is used?

$(function() {
  // run the currently selected effect
  function runEffect() {
    // get effect type from
    var selectedEffect = $("#effectTypes").val();

    // Most effect types need no options passed by default
    var options = {};
    // some effects have required parameters
    if (selectedEffect === "scale") {
      options = {
        percent: 50
      };
    } else if (selectedEffect === "size") {
      options = {
        to: {
          width: 280,
          height: 185
        }
      };
    }

    // Run the effect
    $("#effect").show(selectedEffect, options, 500, callback);
  };

  //callback function to bring a hidden box back
  function callback() {
    setTimeout(function() {
      $("#effect:visible").removeAttr("style").fadeOut();
    }, 1000);
  };

  // Set effect from select menu value
  $("#button").on("click", function() {
    runEffect();
  });

  $("#effect").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Show</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fade">Fade</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
</select>

<button id="button" class="ui-state-default ui-corner-all">Run 
    Effect</button>


Solution

  • You can hardcode

    var selectedEffect = 'blind';
    

    or remove all other options

     $("#effectTypes")[0].length = 1;
    

    $(function() {
      $("#effectTypes")[0].length = 1;
      // run the currently selected effect
      function runEffect() {
        // get effect type from
        var selectedEffect = $("#effectTypes").val();
    
        // Most effect types need no options passed by default
        var options = {};
        // some effects have required parameters
        if (selectedEffect === "scale") {
          options = {
            percent: 50
          };
        } else if (selectedEffect === "size") {
          options = {
            to: {
              width: 280,
              height: 185
            }
          };
        }
    
        // Run the effect
        $("#effect").show(selectedEffect, options, 500, callback);
      };
    
      //callback function to bring a hidden box back
      function callback() {
        setTimeout(function() {
          $("#effect:visible").removeAttr("style").fadeOut();
        }, 1000);
      };
    
      // Set effect from select menu value
      $("#button").on("click", function() {
        runEffect();
      });
    
      $("#effect").hide();
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <div class="toggler">
      <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Show</h3>
        <p>
          Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
      </div>
    </div>
    
    <select name="effects" id="effectTypes">
      <option value="blind">Blind</option>
      <option value="bounce">Bounce</option>
      <option value="clip">Clip</option>
      <option value="drop">Drop</option>
      <option value="explode">Explode</option>
      <option value="fade">Fade</option>
      <option value="fold">Fold</option>
      <option value="highlight">Highlight</option>
      <option value="puff">Puff</option>
      <option value="pulsate">Pulsate</option>
      <option value="scale">Scale</option>
      <option value="shake">Shake</option>
      <option value="size">Size</option>
      <option value="slide">Slide</option>
    </select>
    
    <button id="button" class="ui-state-default ui-corner-all">Run 
        Effect</button>