Post
Ask Question

Make a Div Invisible While Scrolling Through Other Div in ASP.Net

Introduction

In my previous article I explained How to make a Div Floating while Scrolling Though the Other Div's of the Same Page.

In this article we will again make an interesting thing with a Div, this article will help you to hide or make a Div invisible while scrolling through another Div.

The Div that will become invisible will be visible in the full page but will become invisible while scrolling through a specified Div.

I made changes in the previous application, you can create a new one or can click on the link to view the previous application.

Step 1

First of all add a Div to your web form and make it's position fixed, also provide it's height, width and color so that it can be visible clearly.

 

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div runat="server" id="show" style="position:fixed; right:0px; bottom:0px; width:100px; height:100px; background-color:red;"></div>  

 

Step 2

Now if you run the application the application you will see a Div like this:

invisible Div1.jpg

You can see a Red colored Div at the right hand corner.

Currently if you scroll the page up or down it will remain visible all the time.

Step 3

I had added two more adjoining Divs to the previous main page in which two Divs were already there.

I had also made a change with the previous two Divs, I had added "Runat="Server"" to them, in my next step you will understand why I added this to them.

 

  1. <div class="div" id="Div1" runat="server">  
  2. </div>  
  3. <div class="div" id="Div2" runat="server">  
  4. </div>  
  5. <div runat="server" class="div" id="Div3">  
  6. </div>  
  7. <div class="div" id="Div4" runat="server">  
  8. </div>  

 

Step 4

As I already told you, I want to hide the Div while scrolling through the third Div so for that you need to add some coding to the Page Load Event.

 

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     Div3.Attributes.Add("onmouseover", "document.getElementById('show').style.display = 'none';");  
  4. }  

 

What this code will do is, it will change the display property of the Div to None that will hide this Div while I am scrolling through the third Div.

But now there is a problem; once this Div becomes invisible it will remain invisible even if you scroll through the other Divs.

Step 5

For removing this problem you again need to add some code to the Page Load:

 

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     Div3.Attributes.Add("onmouseover", "document.getElementById('show').style.display = 'none';");  
  4.     Div1.Attributes.Add("onmouseover", "document.getElementById('show').style.display = 'block';");  
  5.     Div2.Attributes.Add("onmouseover", "document.getElementById('show').style.display = 'block';");  
  6.     Div4.Attributes.Add("onmouseover", "document.getElementById('show').style.display = 'block';");  
  7. }  

 

Now this code will help the invisible Div to BecomeVisible again while scrolling through the remaining three Divs.

Now you can check the output.

Output

invisible Div.jpg


Similar Articles