Unique Pop-up window help

@ccoderJul 31.2006 — #You might want to consider a hidden floating div. I use them for Help 'pop ups'. Here is some code that I ripped from one of my pages (with the actual help text).

Click the Help button to display the pop up. You can drag it around using the title bar. Close it by clicking the 'X'. If you click the Help button, you will see that the pop up is where you left it the last time.

I believe I originally got the basics for this code from The JavaScript Source. As I recall, I had to fix a bug in it and I added all of the style elements.

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;style type="text/css"&gt;
 &lt;!--
 #help {
 float: right
 }
 .closer {
 cursor: pointer
 }
 div#helpText {
 padding: 5px
 }
 div#helpWin {
 padding: 0px;
 margin: 0px;
 width: 280px;
 height: 325px;
 background-color: #FFFFFF;
 border: 1px;
 border-style: solid;
 border-color: black;
 left: 100px;
 top: 200px;
 position: absolute; 
 visibility: hidden
 }
 div#titlebar {
 height: 15px;
 width: 280px;
 background-color: #CC6699;
 text-align: right;
 font-size: 10px;
 font-family: verdana, helvetica, sans-serif;
 margin: 0px;
 cursor: move
 }
 div#title {
 float: left;
 padding-left: 5px
 }
 span#x {
 border: 1px;
 border-style: solid;
 border-color: black
 }
 input.btn {
 font-size: 11px;
 font-family: verdana, Helvetica, sans-serif
 }
 span.tBold {
 font-weight: bold
 }
 --&gt;
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 var isIE = document.all;
 var isNN = !document.all &amp;&amp; document.getElementById;
 var engaged = false;
 var offsetX = 0;
 var offsetY = 0;
 var whichTag, whichLayer, whichElem;
 
 <i>    </i>document.onmousedown = ddInit;
 <i>    </i>document.onmouseup = Function('ddEnabled = false');
 
 <i>    </i>// ---------------------------------------------------------------------------------------------
 
 <i>    </i>function dd(e)
 <i>    </i> {
 <i>    </i>  // drag&amp;drop the help window
 <i>    </i>  if (!ddEnabled)
 <i>    </i>     return;
 
 <i>    </i>  whichLayer.style.left = isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
 <i>    </i>  whichLayer.style.top = isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
 
 <i>    </i>  return false; 
 
 <i>    </i> } // end of dd
 
 <i>    </i>// ---------------------------------------------------------------------------------------------
 
 <i>    </i>function ddInit(e)
 <i>    </i> {
 <i>    </i>  // setup drag&amp;drop for the help window
 <i>    </i>  whichTag = isIE ? 'BODY' : 'HTML';
 <i>    </i>  whichLayer = isIE ? document.all.helpWin : document.getElementById('helpWin'); 
 <i>    </i>  whichElem = isIE ? event.srcElement : e.target; 
 <i>    </i>  while (whichElem.id != 'titlebar' &amp;&amp; whichElem.tagName != whichTag)
 <i>    </i>        whichElem = isIE ? whichElem.parentElement : whichElem.parentNode;
 
 <i>    </i>  if (whichElem.id == 'titlebar')
 <i>    </i>     {
 <i>    </i>      offsetx = isIE ? event.clientX : e.clientX;
 <i>    </i>      offsety = isIE ? event.clientY : e.clientY;
 <i>    </i>      nowX = parseInt(whichLayer.currentStyle.left);
 <i>    </i>      nowY = parseInt(whichLayer.currentStyle.top);
 <i>    </i>      ddEnabled = true;
 <i>    </i>      document.onmousemove = dd;
 <i>    </i>     }
 <i>    </i> } // end of ddInit
 
 <i>    </i>// ---------------------------------------------------------------------------------------------
 
 <i>    </i>function hideHelp()
 <i>    </i> {
 <i>    </i>  // hide the help text
 
 <i>    </i>  document.getElementById('helpWin').style.visibility = "hidden";
 
 <i>    </i>  return;
 
 <i>    </i> } // end of hideHelp
 
 <i>    </i>// ---------------------------------------------------------------------------------------------
 
 <i>    </i>function showHelp()
 <i>    </i> {
 <i>    </i>  // display the help text
 
 <i>    </i>  document.getElementById('helpWin').style.visibility = "visible";
 
 <i>    </i>  return;
 
 <i>    </i> } // end of showHelp
 
 --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;input type="button" id="help" class="btn" VALUE="Help" onclick="showHelp();"&gt; 
 &lt;div id='helpWin'&gt;
 &lt;div id='titlebar'&gt;
 &lt;div id='title'&gt;Help&lt;/div&gt;
 Close
 &lt;span id='x' class='closer' onclick='hideHelp();'&gt;X&lt;/span&gt;
 &lt;/div&gt;
 &lt;div id='helpText'&gt;
 &lt;div style="text-align:center"&gt;&lt;span class="tBold"&gt;RECOMMENDATIONS&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;
 &lt;span class="tBold"&gt;Steps to enter or update the text.&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;
 &lt;p&gt;
 &lt;ol&gt;
 &lt;li&gt;Select a system from the &lt;span class="tBold"&gt;System&lt;/span&gt; list.&lt;/li&gt;
 &lt;li&gt;Select the Year and Month from the &lt;span class="tBold"&gt;Date&lt;/span&gt; lists.&lt;/li&gt;
 &lt;li&gt;Select &lt;span class="tBold"&gt;Add New Text&lt;/span&gt; or &lt;span class="tBold"&gt;Update Old Text&lt;/span&gt;.&lt;/li&gt;
 &lt;li&gt; Click &lt;span class="tBold"&gt;Okay&lt;/span&gt;.&lt;/li&gt;
 &lt;ul&gt;
 &lt;li&gt; &lt;span class="tBold"&gt;Add New Text&lt;/span&gt; is the initial default setting.  When selected, clicking &lt;span class="tBold"&gt;Okay&lt;/span&gt;
 simply clears the text area and initializes some button properties.&lt;/li&gt;
 &lt;li&gt; &lt;span class="tBold"&gt;Update Old Text&lt;/span&gt; will retrieve existing text for the selected System and Date and display
 it in the text area when the &lt;span class="tBold"&gt;Okay&lt;/span&gt; button is clicked.&lt;/li&gt;
 &lt;/ul&gt;
 &lt;li&gt; Enter new text or modify the existing text.&lt;/li&gt;
 &lt;li&gt; Click the &lt;span class="tBold"&gt;Submit&lt;/span&gt; button.&lt;/li&gt;
 &lt;/ol&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@databaseguy33authorAug 02.2006 — #That didn't help in any way...

@konithomimoAug 02.2006 — #onclick="window.open('http://www.yahoo.com','');window.open('http://www.google.com','');window.location.href='results.html';"

@databaseguy33authorAug 02.2006 — #onclick="window.open('http://www.yahoo.com','');window.open('http://www.google.com','');window.location.href='results.html';"[/QUOTE]

I put that code in, and the windows didn't pop up. I included the < > at each end as well.

take a look at my source code for:

http://users.nexopia.com/uploads/1678/1678889/nexopiaIQtest.html

And tell me where I should put the code.

Thanks.

@databaseguy33authorAug 02.2006 — #Does anyone know how??

@konithomimoAug 02.2006 — #It wored for me

&lt;html&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;input type="button" onclick="window.open('http://www.yahoo.com','');window.open('http://www.google.com','');window.location.href='results.html';"&gt;&lt;/form&gt;&lt;/body&gt;
 &lt;/html&gt;

If need be though you can remove the two instance of ,''

ALso, you could put it into a function.

Either way, it works . . . just make sure that you don't have a popup blocker.

Unique Pop-up window help

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Unique Pop-up window help

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴