Solved

Show a message in a label and...

Posted on 2014-07-30
3
112 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 108

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 33

Author Closing Comment

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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now