[RESOLVED]How do I feed a variable to a function for a user to select show or fadeIn or slideDown to use such functions?

I want to feed a variable through to a function that will either:

div1.show("slow");

or

div1.fadeIn("slow");

or

div1.slideDown("slow")

for example, I would like to have a user do this:

divShow(‘fadeIn’);, or divShow(‘slideDown’);, or divShow(‘show’);

how do I do that?

use javascript’s literal method name approach rather than the dot notation:

   var methodName = "show";
   div1[methodName]("slow");

Hi JAYHAWKER,

Thanks for your post.

As for your problem, you could try the following sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: #0094ff;
        }
    </style>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#div1").hide();

            $("#btnshow").click(function () {
                var str = $(":checked").attr("value");
                //alert(str);
                if (str == "Show") {
                    $("#div1").show("slow");
                }
                else if (str == "FadeIn") {
                    $("#div1").fadeIn("slow");
                }
                else if (str == "SlideDown") {
                    $("#div1").slideDown("slow");
                }
                else if (str == "Hide") {
                    $("#div1").hide();
                }
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:RadioButton ID="rdb1" runat="server" GroupName="show" Checked="true" Text="Show" value="Show" />
            <asp:RadioButton ID="rdb2" runat="server" GroupName="show" Text="FadeIn" value="FadeIn" />
            <asp:RadioButton ID="rdb3" runat="server" GroupName="show" Text="SlideDown" value="SlideDown" />
            <asp:RadioButton ID="rdb4" runat="server" GroupName="show" Text="Hide" value="Hide" />
            <input id="btnshow" type="button" value="Show" />
            <br />
            <div id="div1"></div>
        </div>
    </form>
</body>
</html>

If you have any question about this issue, please post back freely.

Best Regards,

Fei Han

Leave a Reply