Java-Script/pratice2.html at main · 26312/Java-Script · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
    <head><b><i>Welcome to JavaScript Session</i></b>
    <title>
        JavaScript Session
    </title>
    <link rel="stylesheet" href="CSS/effects.css">
    <link rel="stylesheet" href="jquery-UI/jquery-ui.css">
    <link rel="stylesheet" href="jquery-UI/jquery-ui.structure.css">
    <link rel="stylesheet" href="jquery-UI/jquery-ui.theme.css">
</head>
<body>
    <br>
    <button id="btn" name="Click Here" >Click Here</button> <br>
    <br>
    <div id="div1" title="Calender">
    </div>
    <br><br>

    <div id="div2" title="Accordion" >
        <h4>Heading_1</h4>
        <p> This is the content for first heading
        </p>

        <h4>Heading_2</h4>
        <p>This is the content for second heading
        </p>

        <h4>Heading_3</h4>
        <p>This is the content for third heading</p>
    </div>
    <br>
    <br>

    <div id="div3" title="Welcome to Audi_Logo">
        <h4>This is the audi logo</h4>
        <img src="images/audi_logo.jpg" width="300px" opacity="0.4">
    </div>

</body>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
<script>

    $(document).ready(function()
    {
        // Applying operations on the calender
        $("#div1").datepicker({

            numberofMonths:1,
            showWeek:true,
            showOtherMonth:true,
            changeMonth:true,
            changeYear:true

        });

        $("#div2").accordion({

            collapsiable:true,
            event:"click",
            animate:1000,
            heightStyle:1000,
            active:false
        });

        $("#div3").dialog({

            title:"Audi_Logo_Welcomes_You",
            resizabel:true,
            draggable:true
        });


        $("#btn").click(function()
        {

            // Getter Method
            var height = $( "#div3" ).dialog( "option", "height" );


            //Setter Method
            $( "#div3" ).dialog( "option", "resizable", false );

            //Setter Method
            $("#div1").datepicker("option","numberOfMonths",2);


            $("#div3").fadeToggle(2000);
            //  $("#div3").fadeIn(2000);
        });


    });

</script>
</html>