Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Newbie: How do I best show "info" type msg to user? 1

Status
Not open for further replies.
JCHallgren

JCHallgren

Technical User
Dec 17, 2004
47
US
(So very new to JS so not sure even what to look for)

When users who meet certain (ie: referrer, user-agent, etc) criteria come to my main page on site, I would like to show them a msg similar to a pop-up but not using that function.

Is there a feature in JS that would temporarily overlay a msg box of some type and then after a few seconds, vanish?

I'd like to warn certain users that their browser is old but not deny them any access...

Or is there a better (and easy for me to understand) way to do it? Thanks!
 
Sort by date Sort by votes
here is a basic, basic, basic, basic, basic example. You can, additionally, compute where you want the box positioned using javascript. you can, of course, change the look and feel of the box as well.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">
#message {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 300px;
    color: #fff;
    background-color: #000;
    display: none;
}
</style>

<script language="javascript"><!--
function showMessage() {
    var d = document.getElementById('message');
    d.style.display = 'block';
    
    setTimeout("hideMessage()", 5000);
}

function hideMessage() {
    var d = document.getElementById('message');
    d.style.display = 'none';
}
--></script>

</head>

<body onload="showMessage();">

<div id="message">You are using blah blah browser.  It is outdated, but you can still use my awesome site.  This message will self-destruct in five seconds.</div>

</body>
</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
That even makes sense to me! I think....

As I understand it, you are flipping the status of ".display" from on to off after a time value, true?
And the message is only shown when it is on...as the default status is off, so msg text is ignored otherwise, right?

So in my case, I would not use the "onload" but instead invoke showMessage upon successful test of criteria condition, true?

I would have never found that in what I have available to me here! So THANKS MUCH!
 
Upvote 0 Downvote
you are correct. you might still want to use onload to invoke a test function, and if the browser test does not pass the criteria, then you'd call the showMessage() function.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Ok...so in the onLoad, i would "call" a separate function that does the desired tests and calls the showMsg if true..

I've done some reading but have not yet started really using CSS as I needed to get site up and running from a prior one that did not use, so this will be good intro to it.

When working in a new language, it's often hard to know what desired "things" are called, thus I had to ask as I did..You did a GREAT job of providing a suitable example!
 
Upvote 0 Downvote
Follow-up question: Is there any way to reduce the redundant style/css code created when I have more than one message text? I figured out (after some hours) how to "call" the show/hide functions from another higher level function so that code is kept minimal...but all those style tags(?) needed seem so 'bulky'!
 
Upvote 0 Downvote
As I said, it's the style block that seems most redundant..
And I had a hellofva time getting that setTimeout syntax to use a passed parameter...but I did figure it out myself!

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>

<style type="text/css">
#msg1 { position: absolute; top: 200px; left: 200px; width: 400px; height: 70px;
    color: #000000; background-color: #ffcccc; border-style: groove;
	font-weight: bold; font-style: italic; text-align: center;
    display: none;
}
#msg2 { position: absolute; top: 300px; left: 200px; width: 400px; height: 70px;
    color: #000000; background-color: #ffcc00; border-style: groove;
	font-weight: bold; font-style: italic; text-align: center;
    display: none;
}
</style>

<script language="javascript"><!--
function doMsgs() {  
// Conditional testing to be added later...
	showMsg('msg1');
	showMsg('msg2');
}

function showMsg(m) { 
    var d = document.getElementById(m);
    d.style.display = 'block';
    setTimeout("hideMsg('" + m + "');", 02500);
}
function hideMsg(m) { 
    var d = document.getElementById(m);
    d.style.display = 'none';
}
--></script>

</head>

<body onload="doMsgs();">

<div id="msg1"><h3>You are using an old browser.<BR>
  Did you know it is a security risk?</h3></div>
<div id="msg2"><h3>You are using spyware blah blah.<BR>
  Did you know it is on your system?</h3></div>

</body>
</html>
 
Upvote 0 Downvote
you can consolidate your styles considerably:

Code: 
<style type="text/css">
#msg1, #msg2 {
    position: absolute; 
    left: 200px; 
    width: 400px; 
    height: 70px;
    color: #000000; 
    border-style: groove;
    font-weight: bold; 
    font-style: italic; 
    text-align: center;
    display: none;
}

#msg1 { 
    top: 200px; 
    background-color: #ffcccc; 
}

#msg2 { 
    top: 300px; 
    background-color: #ffcc00;
}
</style>

*cLFlaVA
----------------------------
[tt]0101 is binary code for "supreme programmer of omnipotent power"[/tt] - adam0101
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
OH! Really? .. Great! The books I have did not show that option at all...the ability to list more than one #ID for common items...once again you have made code better in this household!
 
Upvote 0 Downvote
I do ask...but I also attempt to locate answers myself first...even if it takes more time...as I realize the time of folks who help us newbies out is limited and I'd rather have that time spent on those questions that I CAN'T find myself....some don't care...I do :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
943
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
386
gmmastros
gmmastros
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
700
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top