Click here to Skip to main content
12,898,858 members (54,226 online)
Rate this:
 
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
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web01 | 2.8.170424.1 | Last Updated 6 Mar 2013
Copyright © CodeProject, 1999-2017
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