Show a message in a label and...

Posted on 2014-07-30
Last Modified: 2014-08-03
The task described below may take me days but for you it possibly takes only a few minutes. This is why I am coming to you.

There is a label on a webpage id="lblMessage"; upon click on two controls, the following function puts a message in it,

function showMsg(msgNo)
var msg1 = 'this is message 1';
var msg2 = 'this is message 2';

if msgNo==1
<add to lblMessage msg1 ;>
<add to lblMessage msg2 ;>

<the label to show the msg in a bright colored font and gradually die-out using opacity or something else>
Please make the font color and  duration editable.

Open in new window

I am working in c#

Thank you.
Question by:Mike Eghtebas
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 35

Accepted Solution

Robert Schutt earned 350 total points
ID: 40231261
I guessed you specifically don't want jQuery otherwise you might have mentioned it. It could be done more easily using that...

I've adjusted some existing code (kind of a fader plugin) to match your request, just left out the <%@ Page ... %> tag at the top because it won't match your project. If you have similar controls, you will only need the javascript anyway.

If you have a globally included javascript file in your project (or a master page), you could include the fader and the setXxx functions in there to avoid repetition if you need this on more than 1 page.

I have also put a static example online: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
    <title> EE Q_28487504 </title>
    <script type="text/javascript">

        var fader = function (opts) {
            var that = this;
   = false;
            if (opts.elementName != null && opts.elementName != '') {
                this.startFade = function () {
                    setOpacity(that.element, that.perc);
                    if (that.perc > 0) {
                        setTimeout(that.startFade, that.duration / 100);
                    } else {
               = false;
                this.element = document.getElementById(opts.elementName);
                if (this.element != null) {
                    this.initialDelay = opts.initialDelay || 5000;
                    this.duration = opts.duration || 5000;
                    this.duration = Math.ceil(this.duration / 100) * 100; // round up to multiple of 100
                    this.fontColor = opts.fontColor || 'yellow';
                    this.text = opts.text || '<em>Hello</em> <strong>world!</strong>';
                    this.perc = 100;
           = true;
                    setText(this.element, this.text, this.fontColor);
                    setOpacity(this.element, 100);
                    setTimeout(this.startFade, this.initialDelay);

        function setOpacity(elem, opacityPercentage) {
   = opacityPercentage / 100; // for most browsers  
   = 'alpha(opacity=' + opacityPercentage + ')'; // for IE (older only?)

        function setText(elem, text, colr) {
   = colr;
            elem.innerHTML = text;
            // if you don't want HTML, mind the textContent / innerText issue!

        var myFader = null, myFader2 = null;
        function showMsg(msgNo)
            var msg1 = 'this is message 1';
            var msg2 = 'this is message 2';

            if (myFader && {
                //alert('fader 1 is still active');
            } else {
                myFader = new fader({ initialDelay: 1000, duration: 1000, fontColor: 'red', elementName: 'lblMessage', text: msgNo == 1 ? msg1 : msg2 });
            if (myFader2 && {
                //alert('fader 2 is still active');
            } else {
                myFader2 = new fader({ elementName: 'lblMessage2' });

    <form id="form1" runat="server">
    Test test test
    <hr />
    label: <asp:Label ID="lblMessage" runat="server" Text="xxxxxxxxxxxxxxxxxxx"></asp:Label>
    <br />label2: <asp:Label ID="lblMessage2" runat="server" Text="xxxxxxxxxxxxxxxxxxx" BackColor="Gray" ForeColor="white"></asp:Label>
    <hr />
        <asp:Button ID="Button1" runat="server" Text="Fader 1" OnClientClick="showMsg(1); return false;" />
        <asp:Button ID="Button2" runat="server" Text="Fader 2" OnClientClick="showMsg(2); return false;" />

Open in new window

LVL 110

Assisted Solution

by:Ray Paseur
Ray Paseur earned 150 total points
ID: 40231383
Here's a general-purpose jQuery version showing how the HTML div id attribute names are connected to the style sheet elements and the jQuery selectors.

<!DOCTYPE html>

<!-- -->

<html dir="ltr" lang="en-US">
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src=""></script>
    $("#signal").click( function(){

<style type="text/css">




<title>HTML5 Page with jQuery Message Visibility</title>

<div id="signal">Click Me!</div>
<div id="finalDiv1">First Message Area</div>
<div id="finalDiv2">Second Message Area</div>


Open in new window

LVL 34

Author Closing Comment

by:Mike Eghtebas
ID: 40238290
Thank you very much.

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question