Solved

Show a message in a label and...

Posted on 2014-07-30
3
114 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 33

Author Closing Comment

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

Featured Post

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

831 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