Solved

Show a message in a label and...

Posted on 2014-07-30
3
115 Views
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 ;>
}
else
{
<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 asp.net c#

Thank you.
0
Comment
Question by:Mike Eghtebas
3 Comments
 
LVL 35

Accepted Solution

by:
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: http://schutt.nl/ee/Q_28487504 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> EE Q_28487504 </title>
    <script type="text/javascript">

        var fader = function (opts) {
            var that = this;
            this.active = false;
            if (opts.elementName != null && opts.elementName != '') {
                this.startFade = function () {
                    that.perc--;
                    setOpacity(that.element, that.perc);
                    if (that.perc > 0) {
                        setTimeout(that.startFade, that.duration / 100);
                    } else {
                        that.active = 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;
                    this.active = true;
                    setText(this.element, this.text, this.fontColor);
                    setOpacity(this.element, 100);
                    setTimeout(this.startFade, this.initialDelay);
                }
            }
        };

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

        function setText(elem, text, colr) {
            elem.style.color = 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 && myFader.active) {
                //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 && myFader2.active) {
                //alert('fader 2 is still active');
            } else {
                myFader2 = new fader({ elementName: 'lblMessage2' });
            }
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    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;" />
    </div>
    </form>
</body>
</html>

Open in new window

0
 
LVL 109

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.
http://iconoun.com/demo/temp_eghetbas.html

<!DOCTYPE html>

<!-- http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28487504.html -->

<html dir="ltr" lang="en-US">
<head>
<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="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#finalDiv1").hide();
    $("#finalDiv2").hide();
    $("#signal").click( function(){
        $("#finalDiv1").show("slow");
	$("#finalDiv2").show("slow");
        $("#signal").hide("1000");
    });
});
</script>

<style type="text/css">
body{
	font-family:verdana;
	background-color:black;
}

#signal{
	width:10em;
	color:orange;
	background-color:green;
}

#finalDiv1{
	width:10em;
	height:5em;
	color:yellow;
	background-color:darkgreen;
}

#finalDiv2{
	width:10em;
	height:5em;
	color:blue;
	background-color:red;
}
</style>

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

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

</body>
</html>

Open in new window

0
 
LVL 34

Author Closing Comment

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

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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

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…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

792 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