Why use javascript for the popup? Why not use a small CSS box popup
I haven't thought of it :oops:
Just tried that idea, no luck. Unless I'm missing something, the only way to make this work requires a click pseudo class which, to my knowledge, does not exist. Using hover to display the guide works until you try to follow it. As soon as you navigate your mouse to the menu, you take your pointer off the guide and it disappears. I tried using keyboard (Alt + t) on both IE7 and FF2 and the guide was visible until the options box opened (it worked on Opera 9.26 though). If you want to see what I mean, try the following (complete html page):
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.moredata {
width: 80%;
text-decoration: none;
font-weight: normal;
cursor: pointer;
}
.moredata div {
background-color : yellow;
border: black solid 1px;
color : #000;
padding: 5px;
display: none;
text-decoration : none;
height: 500px;
overflow: auto;
cursor: auto;
}
.moredata:hover div {
display: block;
}
</style>
<title>this is only a test</title>
</head>
<body>
<div class="moredata">
<p>Help?</p>
<div>
<h2> How do I enable JavaScript?</h2>
<p>The following instructions describe how to enable JavaScript in your browser. If your browser isn't listed, please consult its online help pages.</p>
<p>Internet Explorer (6.0) </p>
<ol>
<li>Select <strong>Tools</strong> from the top menu.</li>
<li>Choose <strong>Internet Options</strong>.</li>
<li>Click <strong>Security</strong>.</li>
<li>Click <strong>Custom Level</strong>.</li>
<li>Scroll down till you see section labeled <strong>Scripting</strong>.</li>
<li>Under <strong>Active Scripting</strong>, select <strong>Enable</strong> and click <strong>OK</strong>.</li>
</ol>
<p>Internet Explorer (7.0)</p>
<ol>
<li>Select <strong>Tools</strong> > <strong>Internet Options</strong>. </li>
<li>Click on the <strong>Security</strong> tab. </li>
<li>Click the <strong>Custom Level </strong>button. </li>
<li>Scroll down to the <strong>Scripting</strong> section.</li>
<li>Select <strong>Enable for Active Scripting and Scripting of Java Applets</strong>. </li>
<li>Click <strong>OK</strong>. </li>
<li>Select <strong>YES</strong> if a box appears to confirm. </li>
<li>Click <strong>OK</strong>. Close window. </li>
<li>Reload page.</li>
</ol>
<p>Mozilla Firefox (1.0) </p>
<ol>
<li>Select <strong>Tools</strong> from the top menu.</li>
<li>Choose <strong>Options</strong>.</li>
<li>Choose <strong>Web Features</strong> from the left navigation bar.</li>
<li>Select the checkbox next to <strong>Enable JavaScript</strong> and click <strong>OK</strong>.</li>
</ol>
<p>Mozilla Firefox (2.x)</p>
<ol>
<li>Open Firefox. </li>
<li>On the <strong>Tools</strong> menu, click <strong>Options</strong>. </li>
<li>Click <strong>Content</strong> in the <strong>Options</strong> list. </li>
<li>Under the <strong>Content</strong> section, check the box next to <strong>Enable JavaScript</strong>. </li>
<li>Click the <strong>Advanced</strong> button to open the <strong>Advanced JavaScript Options</strong> box. </li>
<li>Check the appropriate boxes under <strong>Allow scripts to</strong>. </li>
<li>Click <strong>OK</strong>. </li>
<li>Click <strong>OK</strong>.</li>
</ol>
<p>Apple Safari (1.0) </p>
<ol>
<li>Select <strong>Safari</strong> from the top menu.</li>
<li>Choose <strong>Preferences</strong>.</li>
<li>Choose <strong>Security</strong>.</li>
<li>Select the checkbox next to <strong>Enable JavaScript</strong>.</li>
</ol>
<p>Please keep in mind that upgrading your browser or installing new security software or security patches may affect your JavaScript settings.</p>
<p>source: http://www.google.com/support/bin/answer.py?answer=23852</p>
</div>
</div>
</body>
</html>
The whole reason I brought up that pop-up thing is to have the "guide" in a centralized location (PHP can fix this :)) to be linked to from multiple pages and updated easily while not navigating the user away from the page they are looking at.
Thanks for all the comments/suggestions, I think I'll leave this alone now. Oh, and I didn't mean to hijack the thread :sad: