| | |
| |
| |

Articles » Web Development » ASP.NET » General

Balloon Message using JavaScript & CSS in ASP.NET

Breaktherule, 14 Feb 2015 CPOL

4.83 (3 votes)

1

2

3

4

5

4.83/5 - 3 votes

μ 4.83, σa 0.93 [?]

This is a very simple way to create a balloon message... without using any plugin

Download source (RAR) - 38.6 KB

Download source (ZIP) - 39.2 KB

Introduction

Most aspects of balloons message can be controlled through the plugin...

In this tip, I will show how to create a balloon message in a simple way using JavaScript & CSS.

Using the Code

How to achieve balloon message without using any plugin:

Step A: Find coordinates of control where to show balloon message.

Step A.1: Write function to find coordinates of control like TextBox, dropdown, etc.

function getOffsetRect(elem)
{
var box = elem.getBoundingClientRect()
var body = document.body
var docElem = document.documentElement

var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0

var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft

return { top: Math.round(top), left: Math.round(left) }
}

Step A.2: Write a function to show balloon message & validate your control with the help of CSS & JavaScript.

The below function requires three parameters:

ControlID like TextBox, DropDown, etc.

SpanID -->(span tag ID) for adding a hook to a part of a balloon message

Error Message

function RequiredFieldValidation(TextBoxID, SpanID,ErrorMsg) {
var j = getOffsetRect(TextBoxID);
var Width = TextBoxID.clientWidth + 10 + j.left;
if (TextBoxID.value == "") {
SpanID.className = "ShowBubble";
SpanID.style.top = j.top + "px";
SpanID.style.left = Width + "px";
SpanID.innerHTML = ErrorMsg;
return false;
}
return true;
}

CSS-->

.ShowBubble
{
z-index: 1;
position: absolute;
margin-top: -3px;
padding: 6px 5px;
background: #ffc477;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 5px;
width: Auto;
height: Auto;
font-style:italic;
}
.HideBubble
{
display: none;
}
.ShowBubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #ffc477 transparent;
display: block;
width: 0;
z-index: 1;
left: -9px;
top: -1px;
}

If you would like to learn more about JavaScript coordinates, refer to the below link:

http://javascript.info/tutorial/coordinates

History

14th February, 2015: Initial version

License

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

Share

About the Author

Breaktherule
Software Developer (Junior)
India

No Biography provided

Comments and Discussions

0 messages have been posted for this article Visit http://www.codeproject.com/Tips/876073/Balloon-Message-using-JavaScript-CSS-in-ASP-NET to post and view comments on this article, or click here to get a print view with messages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150209.1 | Last Updated 14 Feb 2015

Article Copyright 2015 by Breaktherule
Everything else Copyright © CodeProject, 1999-2015