Jquery code not working properly in any browser

Question

0.00/5 (No votes)

See more:

Jquery code not working properly in any browser.. plz help

this is my code

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="faidout.aspx.cs" Inherits="faidout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
     <script language="javascript" type="text/javascript">
         $(document).ready(function () {
             $("button").click(function () {
                 $("#div1").fadeOut();
                 $("#div2").fadeOut("slow");
                 $("#div3").fadeOut(4000);
             });
         });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <button>Click on me</button>
    <br /><br />
    <div class="div1" style="background-color:Green; width:130px; height:50px;"></div><br />
    <div class="div2" style="background-color:Red; width:130px; height:50px;"></div><br />
    <div class="div3" style="background-color:Purple; width:130px; height:50px;"></div>

    </div>
    </form>
</body>
</html>

Posted 4-Mar-13 18:46pm

Sandeep90409

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-03-04T18:54:00

Solution 1

OK, at least now I can see the very first problem: you divs with id="div1", "div2" and "div3" don't have any content (inner HTML). Add, for example, some text inside those divs and try again. I don't guarantee it will work though, may be something else is wrong…

—SA

Posted 4-Mar-13 18:54pm

Sergey Alexandrovich Kryukov

vinodkumarnie · Answer 2 · 2013-03-05T19:39:00

Here is solution for your problem..

XML

<script language="javascript" type="text/javascript">
         $(document).ready(function () {
             $("button").click(function (e) {

                 $(".div1").fadeOut();
                 $(".div2").fadeOut("slow");
                 $(".div3").fadeOut(4000);
                 e.preventDefault();
             });
         });
    </script>

Mistake done in your code..

1. <button>Click on me</button> taking postback when you click it. So even id animation happens also u can't see it.. So you should avoid postback.. Code to avoid posback is below..

JavaScript

e.preventDefault(); // e is argument passing through click event..

2. You no where give id's to your division, you gave just class name.. But in your JQuery code you used id selector(#). Which works only for id's. So for class you should use class selector(.)...
So i changed your code to $(".div1"),$(".div2"),$(".div2")....

Hope you understood and got your solution...

Jquery code not working properly in any browser

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Jquery code not working properly in any browser

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us