Solved

How to I create "consoles"

Posted on 1998-12-03
9
135 Views
Last Modified: 2010-04-09
First of all, some applause for the new look of Experts Exchange.  I especially like the idea of the search feature.

Now my question. How do I create those annoying little boxes which pop up when someone first enters a web site.  Usually they're about one or two inches square. You know, those boses which have little advetisements, which form a different window, and can only be gotten rid of by clicking on the "x" in the upper right corner.  

In think they'ren called consoles.

If I'm not being clear, please ask
0
Comment
Question by:Rowby Goren
  • 5
  • 4
9 Comments
 
LVL 4

Accepted Solution

by:
chewymon earned 100 total points
Comment Utility
The easiest way is to use JavaScript.  The following code will work back to IE3.x and NN3.x.  It might work in older versions, but I have not tested it.

1) Create a new HTML page and name it mypage.html
2) In the *HEAD* tag add the following JavaScript:

<SCRIPT LANGUAGE="JavaScript">

<!--  Hide from old browsers

function navbar(){
window.open("mypage.html", "myRemote","height=450,width=70,resizable=1,screenX=20,left=20,
screenY=50,top=50");
}

3) Change the height and width to the size that you want the popup to be.  The numbers are pixels.  You will have to play with it to get it the way you want it.  The screenX and left determine where it will appear measured from the left side of the browser window.  The screenY and top determine the distance from the top.
This is again in pixels.  You need both because the screen is for NN and the left and top is for IE.

4) In the *BODY* tag add:   onOpen="navbar()"

This will open the popup when the page loads.

5) In mypage.html add the following code in the *HEAD*:

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
function setTimer(){
      setTimeout ("window.focus()",3000);}
// end hiding -->
</SCRIPT>
The 3000 sets the number of milliseconds the script waits to activate the popup, in this case 3 seconds.


6) In the *BODY* tag add:

 onBlur="setTimer()"

This brings the popup back whenever something is clicked on that hides it.  The only way to get rid of the annoying puppy is to close the window by clicking on the close button.

If you want some help tweaking it let me know.


      




0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
Sorry--

4) should read:  onLoad="navbar()"
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
Thanks for the quick response, chewymoon.  

 I will accept your answer and give you your points, but will wait until tomorrow in case you want to add some commet or modifications

Rowby
(rowby@earthlink.net
0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
If you go to:

www.geocities.com/SiliconValley/Peaks/8601

Click on the site map link, you will see it in action.
The only difference is that there I chose a click instead instead of automatic load.  Other than that, the code is identical.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 4

Expert Comment

by:chewymon
Comment Utility
I just noticed that I left out the following at the end of the first code snippet.  It has been a long day.  Just add it to the end of the snippet in 2).

// end hiding -->
</SCRIPT>
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
Just so you know, I tested it in Netscape 3.0 (which I keep on my computer for testing pages, and it worked fine.

thanks.  The console looks great on your site.  I will keep thisn open until tomorrow  in case you have some additional thoughts -- then I'll give you an "EXCELLENT!"  GRADE!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
Hi, I get the following Java error in netscape communicator 4.5

JavaScript Error: http://testdomain.com/, line 13:

unterminated string literal.

    window.open("mypage.html", JavaScript Error: http://testdomain.com/, line 13:

unterminated string literal.

    window.open("mypage.html", "myRemote","height=450,width=70,resizable=1,screenX=20,left=20,

and at the bottom of the error screen is the usual

...............................^  (with the "^" under the comma of:     mypage.html",


Also, I notice that  onBlur="setTimer()"

appears as text in mypage.html  
0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
Since javascript is case sensitive it is possible that the new communicator is trying to read myRemote as an event handler like onClick.  Try renaming it myremote or anything else in lower case.  If the onBlur shows as text in your page but not in mine, my first guess would be a mistyping of a punctuation mark.  I spent one afternoon debugging a page until I noticed I had a period instead of a comma.  Secondly, in javascript you may use either single quotaion (') or double quotation (") but you must treat them like HTML tags and use the same at both ends.  When nested, then you must use different ones inside a string than are used to enclose the string.    

If the onBlur does not show as text in my page with the same browser you can check the source of my popup at:

/SiliconValley/Peaks/8601/jnavbar.html

That will allow you to view the source and check my BODY tag against yours.

Another thing you might try is that the LANGUAGE attribute usage is changing in the latest standards.  Try this:

<SCRIPT TYPE="text/js" LANGUAGE="javascript">

The browsers that understand TYPE will use it and older versions will use the LANGUAGE declaration.  Hope this helps.

If you check the web for javascript sources, you will notice that the 4.x versions of IE and NN handle it differently.  It would be nice that when a standard is accepted, all the software developers would stick to it.  Oh well.

It also occured to me that if you are not using the proper DOCTYPE, the browser might be refusing to read the newer conventions.  For me the 4.0Transitional seems to work best across platforms and browsers.
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
I'll check it out. Thanks!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

771 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

16 Experts available now in Live!

Get 1:1 Help Now