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>
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>