To Change the opacity of one div on the other div?

Question

0.00/5 (No votes)

See more:

I have one form in which i have 2 divs.In div1 i have one gridview1 with one column as link and in div2 i have gridview2 and one close button.I want to accomplish that when i click on gridview1 div2 should come over the div1 and contents of div1 should be faded.and when i click on close button of div2,div2 should get invisible and div1 should faded in
Code

CSS

$(document).ready(function()
{
  $("GridView1").click(function()
    {
      $("#div1").fadeOut();
 
     });
});

$(document).ready(function()
{
  $("button").click(function()
    {
      $("#div1").fadeIn
 $("#div2").fadeOut
 ();
     });
});

by default i want div2 should be invisible
but i am not able to achieve it.what i am getting is:div2 is also shown in pageload and when i click on div1 gridview div2 is shown but contents of div1 are also shown
pls tell
regards

Posted 18-Mar-13 21:25pm

shivani 2013

Updated 18-Mar-13 21:28pm

v2

Add a Solution

Comments

vinodkumarnie 1-Apr-13 7:09am

Can you share your source code that you tried so far..?

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Dineshshp · Answer 1 · 2013-03-18T21:36:00

Solution 1

CSS

.fadediv
    {
        filter:progid:dximagetransform.microsoft.alpha(opacity=70);
    }

Posted 18-Mar-13 21:36pm

Dineshshp

Comments

shivani 2013 19-Mar-13 5:52am

not working

Shubham Choudhary · Answer 2 · 2013-03-18T21:47:00

Solution 2

Hi!!! professional
take a look of this link
http://forums.asp.net/t/1657072.aspx/1[^]

Posted 18-Mar-13 21:47pm

Shubham Choudhary

v2

Comments

shivani 2013 19-Mar-13 6:00am

it is not fulfilling what i want.i want it in page load too

rajibvomik · Answer 3 · 2013-03-19T04:01:00

CSS part

CSS

div1{display : block}
div2{display: none}

or the vice versa. make display block of that div which you want to show on first time load of the page

JavaScript

<script type="text/javascript">

$(document).ready(function()
{
  $("GridView1").click(function()
    {
      $("#div1").animate({opacity: toggle}, 'slow');
      $("#div2").animate({opacity: toggle}, 'slow');
     });
  $("GridView2").click(function()
    {
      $("#div1").animate({opacity: toggle}, 'slow');
      $("#div2").animate({opacity: toggle}, 'slow');
     });
});
</script>

To Change the opacity of one div on the other div?

3 solutions

Solution 1

Solution 2

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us