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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

734 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