Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Show a message in a label and...

Posted on 2014-07-30
3
Medium Priority
?
121 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 1400 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 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 600 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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

824 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