Post
Ask Question

AJAX Control Toolkit Tutorial: AlwaysVisibleControl- Part Four

Today, we will discuss about AJAX Control Toolkit AlwaysVisibleControl. This control as the name suggest floats over the background as the page scrolls up or down depending on the direction specified. This control pins into the page and it can move with the page while scrolling it is useful for the purpose of ads related to websites, social media icons, widgets and lot of useful ways to do it depending on your scenario you can use it everywhere you want.

There is a setting for control that extends to already asp.net control and it has offset vertically and horizontally where it is placed on the page from top left to bottom right. As it is extender and it works with some Target asp.net Control  it must be supplied in TargetControlID="Idofcontrol” and it cannot be null.

Following errors occur if you did not add tagetcontrolID property.



OR if you have supplied the target control id against property but control is not added.



Let’s first add code of the control to the page. 

  1. <div id="ajaxcontroltoolkitplaceholder">  
  2.   
  3. <ajaxToolkit:AlwaysVisibleControlExtender ID="avce" runat="server"  
  4.   
  5. TargetControlID="socialmediaicons"  
  6.   
  7. VerticalSide="Bottom"  
  8.   
  9. VerticalOffset="10"  
  10.   
  11. HorizontalSide="Right"  
  12.   
  13. HorizontalOffset="10"  
  14.   
  15. ScrollEffectDuration=".1" />  
  16.   
  17. </div>   

I have usd the asp.net panel control as a target of always visible control. 

  1. <asp:Panel ID="socialmediaicons" runat="server">  
  2.   
  3. <img src="Images/facebook-letter-logo.png" alt="Facebook" width="50"/>  
  4.   
  5. <img src="Images/linkedin-logo.png" alt="LinkedIn" width="50"/>  
  6.   
  7. <img src="Images/reddit-alien-head-logo.png" alt="Reddit" width="50"/>  
  8.   
  9. <img src="Images/twitter-letter-logo.png" alt="Twitter" width="50"/>  
  10.   
  11. <img src="Images/youtube-logo.png" alt="Youtube" width="50"/>  
  12.   
  13. </asp:Panel>   

Now let’s see its initial output.



As we screen to the content it floats over the background and initially we have to set it to vertical Bottom and Horizontally Right with offset margins of 10px from both sides.

Now let’s discuss its properties in detail.

Properties

  • TargetControlID

    It is the id of asp.net control which used with this property to always make visible. In our case it is used like this in extender TargetControlID="socialmediaicons".

  • HorizontalOffset

    It is the distance from the horizontal side of the browser in pixels of the same side of the target control. The default value is 0 Pixels. It is the horizontal margin of the target control. You can customize it as you can.



  • HorizontalSide

    It is the horizontal edge of the browser and its value can be either Left, Center or Right. Its value can be used to anchor the target control. The default value is Left.



  • Left



  • Center



  • Right



  • VerticalOffset

    It is the distance from the vertical side of the browser in pixels of the same side of the target control. The default value is 0 Pixels. It is the vertical margin of the target control. You can customize it as you can.



  • VerticalSide

    It is the vertical edge of the browser and its value can be either Bottom, Middle or Top. Its value can be used to anchor the target control. The default value is Top.



  • Top



  • Middle



  • Bottom



  • ScrollEffectDuration

    Length in seconds of the scrolling effect to last when the target control is repositioned. The default is .1 second.

  • UseAnimation

    Whether or not to animate the element into position. The default is false. It can animate from left to right if positon set to right and elsewhere it is applied it will have animate it from some position to another to add animate effect.

See this in action


Similar Articles