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 Mike Lewis 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
0
0
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
173
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
181
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
229
xwb
xwb
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
68
gmmastros
gmmastros
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
133
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top