>All Tutorials 
Ajax and .NET Ajax and .NET RSS XML
Ajax and ColdFusion Ajax and ColdFusion RSS XML
Ajax and Java Ajax and Java RSS XML
Ajax and PHP Ajax and PHP RSS XML
Ajax and SOA Ajax and SOA RSS XML
Ajax Goodies Ajax Goodies RSS XML
Ajax Tool Ajax Tool RSS XML
Facebook MockAjax Facebook MockAjax RSS XML
Google Web Toolkit Google Web Toolkit RSS XML
JavaScript Framework JavaScript Framework RSS XML
Ruby on Rails Ruby on Rails RSS XML
Technique Introduction Technique Introduction RSS XML
Without XMLHttpRequest Without XMLHttpRequest RSS XML
Yahoo! UI Yahoo! UI RSS XML

DHTML ToolTips using AJAX.NET Library - method library ajaxnet data article hyperlink div element

 
Registered tutorials: 501
Registered Users: 33125



Rating: 3.79 out of 14 votes cast


  
Category: Ajax and .NET

DHTML ToolTips using AJAX.NET Library

Digg this   Post to del.icio.us

Abstract: The article shows how you can use the power of DHTML and AJAX to make cool effects with ASP.NET Server Controls. Also, it is accompanied with source code at the end which you can download and see what is going on behind the scenes.

Introduction:


   In this article I will show you how you can use the power of DHTML and AJAX to make cool effects with ASP.NET The article is also accompanied with source code at the end which you can download and see what is going on behind the scenes. I will start off with simple DHTML tooltips and later bind tool tips with the GridView control and other ASP.NET servers controls.

Displaying a Simple DHTML ToolTip:


Let's start by displaying a very simple tool tip. In this case you will have a hyperlink and when you click on the hyperlink you will see the text displayed in the div element.
Let's first make the hyperlink:
<ahref="#"onclick="SimpleToolTip()">Show Simple ToolTip</ a>

As you can notice we have set up the href property of the hyperlink to '#' which means that when you click it will not navigate to any url. The onclick event fires the SimpleToolTip method. Let's check out the SimpleToolTip method implementation:
function SimpleToolTip() 

{ 
  document.getElementById("Display").style.backgroundColor = "lightYellow"; 
  document.getElementById("Display").style.visibility = "visible"; 
  document.getElementById("Display").innerHTML = "This is a Tooltip"; 
} 

You might be wondering that what is "Display". Well, "Display" is the id of the <div> element. The only thing I am doing is changing the background color of the div element and setting its visibility to "visible" so that you will be able to see it. At the end I just set the innerHTML property to some random text so you will be able to see some thing on the screen.

Read Full Tutorial...



Reviews:

Rate and Review This Site

No reviews yet


Statistic Information About this Resource:


Total Hits: 959
Unique Hits: 868


  Daily Weekly Monthly
  Unique Total Unique Total Unique Total
Average 0 0 3.7 4.1 37 41.7
Current 0 0 0 0 0 0
Previous 0 0 0 0 20 23
Nov 29 0 0 6 7 48 52
Nov 28 0 0 0 0 49 53
Nov 27 0 0 7 9 42 48
Nov 26 0 0 0 0 59 69
Nov 25 0 0 7 7 49 57
Nov 24 0 0 0 0 0 0
Nov 23 0 0 8 9 53 60
Nov 22 0 0 9 9 50 55
Highest 6 8 18 21 59 69


Script Execution Time: 0.55939 | SQL Queries: 10 | Members: 501
Ajax Tutorial Top List - Powered by Aardvark Topsites PHP 5.1.2