CODEWITHSUNDEEP
c#javascriptasp.net
Sefa
Sefa

Reputation: 8992

Using JavaScript with asp.net pages

I have probably very simple question.

I have copied that code to my asp.net web application project but i couln't minimize the box.

Is there anything special i should do to use javascript with asp.net projects?

I tried the code tree times.

  1. Put script code in to head block
  2. Put script code to just before div starts
  3. Put script code to just before form tag closes

Javascript code

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    $("#box").slideToggle();
});

html code

<div id="widnow">
    <div id="title_bar"> Basic information
        <div id="button"><img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
    </div>
    <div id="box">
    </div>
</div>

css code 

#widnow{
    width:400px;
    border:solid 1px;
}

#title_bar{
    background: #FEFEFE;
    height: 25px;
    width: 100%;
}
#button{
    border:solid 1px;
    width: 25px;
    height: 23px;
    float:right;
    cursor:pointer;
}
#box{
    height: 250px;
    background: #DFDFDF;
}

Upvotes: 0

Views: 81

Answers (2)

iJade
iJade

Reputation: 23791

Most probably you are missing the jquery file ....try this

<html>
<head runat="server">
    <title></title>
    <style>
        #widnow
        {
            width: 400px;
            border: solid 1px;
        }

        #title_bar
        {
            background: #FEFEFE;
            height: 25px;
            width: 100%;
        }
        #button
        {
            border: solid 1px;
            width: 25px;
            height: 23px;
            float: right;
            cursor: pointer;
        }
        #box
        {
            height: 250px;
            background: #DFDFDF;
        }
    </style>
    <script src="Scripts/jquery-1.10.1.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $("#button").click(function () {
                if ($(this).html() == "-") {
                    $(this).html("+");
                }
                else {
                    $(this).html("-");
                }
                $("#box").slideToggle();
            });
        });
    </script>
</head>
<body>
    <div id="widnow">
        <div id="title_bar">
            Basic information
            <div id="button">
                <img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
        </div>
        <div id="box">
        </div>
    </div>
</body>
</html>

Upvotes: 1

Hossain Muctadir
Hossain Muctadir

Reputation: 3626

I am assuming you are missing reference to jquery. Replacing your script part with this will solve the problem if that is the case. 

<script src="code.jquery.com/jquery-1.10.2.min.js"></script>
// or use any version of jquery library..in your fiddle you used 1.7.2..Try the same instead..
<script>
$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    $("#box").slideToggle();
});
</script>

Upvotes: 2

Related Questions