I need Jquery with Bg Colors like this

Posted by Jayakumars under Regular Expressions on 5/25/2011 | Points: 10 | Views : 2084 | Status : [Member] [MVP] | Replies : 7

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

hi

I need Jquery with Bg Colors like this fade in and fade out both functionality in a one dive with Message pass then how to use this gloabl in my website

Mark as Answer if its helpful to you

Kumaraspcode2009@gmail.com

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: Susanthampy on: 5/25/2011 [Member] [MVP] Bronze | Points: 25

0	Hi Jayakumar, Please post your requirement clearly... Regards, Susan Jayakumars, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Jayakumars on: 5/25/2011 [Member] [MVP] Bronze | Points: 25

0	hi susan check this url i need fadein and fadeout button click event i dont want separate button i have one button when i click the button i need fadein and fadeout i need http://www.dotnetfunda.com/tutorials/jquery/effect.aspx Mark as Answer if its helpful to you Kumaraspcode2009@gmail.com Jayakumars, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Nithadeepak on: 5/25/2011 [Member] Bronze | Points: 25

0	Hi, Check out the code.... aspx <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="JQuery.js"></script> //reference to the jquery plugin <script type="text/javascript" src="JScript2.js"></script> <link rel="Stylesheet" type="text/css" href="Style.css" /> </head> <body> <form id="form1" runat="server"> <div> <div class="divFade" id="divF" > <h3><center>Example</center></h3> </div> <asp:Button text="Click" ID="btnFade" runat="server" /> </div> </form> </body> </html> JScript2.js $(document).ready(function() { $("#btnFade").click(function() { if ($("#divF").css('display') == 'none') $("#divF").fadeIn(); else $("#divF").fadeOut(); return false; }); }); or $(document).ready(function() { $("#btnFade").click(function() { $("#divF").fadeToggle(1750); return false; }); }); Style.css .divFade { margin:100px 0px 0px 0px; width:200px; height:200px; background-color:Red; } Thanks Nitha Deepak Jayakumars, if this helps please login to Mark As Answer. \| Alert Moderator

Hi,
Check out the code....
aspx

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript" src="JQuery.js"></script>  //reference to the jquery plugin

    <script type="text/javascript" src="JScript2.js"></script>

    <link rel="Stylesheet" type="text/css" href="Style.css" />

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <div class="divFade" id="divF" >

    <h3><center>Example</center></h3>   

    </div>

     <asp:Button text="Click" ID="btnFade" runat="server" />

    </div>

    </form>

</body>

</html>

JScript2.js

$(document).ready(function() {



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

    if ($("#divF").css('display') == 'none')  

$("#divF").fadeIn();

else



    $("#divF").fadeOut();

           

            return false;

       



    });

});



or 

$(document).ready(function() {



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

    $("#divF").fadeToggle(1750);            

            return false;

       

    });

});

Style.css

.divFade

   {

        margin:100px 0px 0px 0px;

        width:200px;

        height:200px;

        background-color:Red;

      

        

   }

Thanks

Nitha Deepak

Jayakumars, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Jayakumars on: 5/25/2011 [Member] [MVP] Bronze | Points: 25

0	hi Nithadeepak thanks your reply but i need when click button slowly fadeouts i need before didnot show the div tag how will do this. Mark as Answer if its helpful to you Kumaraspcode2009@gmail.com Jayakumars, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Nithadeepak on: 5/25/2011 [Member] Bronze | Points: 25

0	Hi, On page load if you don't wan't to show the div then give in css display:none; and in js $(document).ready(function() { $("#btnFade").click(function() { $("#divF").fadeToggle(2000); return false; }); }); Nitha Deepak Jayakumars, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Jayakumars on: 5/25/2011 [Member] [MVP] Bronze | Points: 25

0	hi Nitha Deepak not working this code Mark as Answer if its helpful to you Kumaraspcode2009@gmail.com Jayakumars, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Nithadeepak on: 5/25/2011 [Member] Bronze | Points: 25

0	But its working in my system. Browser IE7. You just try the first code itself. but give display none in .css file .divFade { margin:100px 0px 0px 0px; width:200px; height:200px; background-color:Red; display:none; } Nitha Deepak Jayakumars, if this helps please login to Mark As Answer. \| Alert Moderator

Latest Posts