Click here to Skip to main content
11,706,979 members (59,876 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery
Jquery code not working properly in any browser.. plz help



this is my code
<%@ 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
Rate this: bad
good
Please Sign up or sign in to vote.

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
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Here is solution for your problem..

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

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 165
1 OriginalGriff 125
2 chainerlt 110
3 ppolymorphe 89
4 Mika Wendelius 70
0 OriginalGriff 9,178
1 Sergey Alexandrovich Kryukov 8,512
2 CPallini 5,189
3 Maciej Los 4,766
4 Mika Wendelius 3,696


Advertise | Privacy | Mobile
Web04 | 2.8.150819.1 | Last Updated 6 Mar 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100