PDA

View Full Version : DHTML pop-up window script



egghead2000
06-23-2007, 06:01 PM
http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm

I want to create a pop-up window with contact info that can be accessed via hyperlinks and FLASH buttons.

Being a novice, I am really confused about the script for the window and where to place it.
The web site I am planning on doing this to is: www.computingservicesok.com

Thanks in advance
Jim

thetestingsite
06-23-2007, 06:59 PM
Not sure what you are really confused about, but I think this is what you might be looking for.

Basically, you want to have the DHTML window pop up when someone clicks a link (let's call it "Contact Info"). To do this, simply use the following code as a basis.



<a href="#" onClick="contactWin=dhtmlwindow.open('contactInfo', 'iframe', 'contact.php', 'Contact Information', 'width=650px,height=400px,left=300px,top=100px,resize=0,scrolling=1'); return false">Contact Info</a>


Not sure how to do it in flash, but pretty sure someone else on the forums can help you there.

Hope this helps.

egghead2000
06-23-2007, 09:34 PM
I'm confused about what script goes in the header and what text goes in the body for starters. Sometimes the script on DD is easy to follow for us beginers, but this wasn't for me.

thetestingsite
06-23-2007, 09:36 PM
In that case, then have a look at the Developer's View (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlwindow_dev.htm). That will show you where everything goes in your HTML document.

Hope this helps.

egghead2000
06-23-2007, 09:41 PM
Yep!! I'm prety stupid........THANKS!!!!!

egghead2000
06-24-2007, 12:27 AM
I thought I understood, but I don't.

Here's a test page I created with a "contact us" on it. How do I tie "contact us" to a pop up window? I need the HEADER and BODY Info also.

http://www.computingservicesok.com/contact_us.htm

here is a page that will have the info on it.

http://www.computingservicesok.com/info_page.htm

Thanks

Medyman
06-24-2007, 01:03 AM
Just add this, instead of "contact us"


<a href="#" onClick="ajaxwin=dhtmlwindow.open('contactus', 'contact', info_page.htm', 'Contact Us', 'width=650px,height=400px,left=300px,top=100px,resize=0,scrolling=1'); return false">Contact Us</a>

alexjewell
06-24-2007, 01:50 AM
Annnd, to clear up some of your confusion - there's more in-depth scripts you can put in the <head>, but for this it really isn't necessary. Just use what Medyman gave you.

egghead2000
06-24-2007, 02:14 AM
I'm more stupid than I thought:
I added the code Medyman gave me and nothing happened. Here's html for the test page. Where do I add the code?

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>contact us</title>







</head>

<body>


<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr>
<td width="350"></td>
<td width="350"></td>
</tr>
<tr>
<td width="350"></td>
<td width="350">

contact us

</tr>
</table>
</center>
</div>

</body>

</html>

I'm sorry for being so dumb

thetestingsite
06-24-2007, 04:35 AM
Try this:



<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>contact us</title>

<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />

<script type="text/javascript" src="windowfiles/dhtmlwindow.js">

/***********************************************
* DHTML Window Widget- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>

<body>


<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr>
<td width="350"></td>
<td width="350"></td>
</tr>
<tr>
<td width="350"></td>
<td width="350">

<a href="#" onClick="ajaxwin=dhtmlwindow.open('contactus', 'contact', info_page.htm', 'Contact Us', 'width=650px,height=400px,left=300px,top=100px,resize=0,scrolling=1'); return false">Contact Us</a>

</tr>
</table>
</center>
</div>

</body>
</html>


Hope this helps.

egghead2000
06-24-2007, 03:33 PM
Nope!!! now this is what the published page looks like:


<html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>contact us</title> <link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" /> <script type="text/javascript" src="windowfiles/dhtmlwindow.js"> /*********************************************** * DHTML Window Widget- Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for legal use. * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> </head> <body> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="750"> <tr> <td width="350"></td> <td width="350"></td> </tr> <tr> <td width="350"></td> <td width="350"> <a href="#" onClick="ajaxwin=dhtmlwindow.open('contactus', 'contact', info_page.htm', 'Contact Us', 'width=650px,height=400px,left=300px,top=100px,resize=0,scrolling=1'); return false">Contact Us</a> </tr> </table> </center> </div> </body> </html>

thetestingsite
06-24-2007, 03:41 PM
Ok, instead of using Frontpage, try using Notepad and copy the code I posted in my previous post. Or; in Frontpage, use the Source Code view instead of design view.

egghead2000
06-24-2007, 05:04 PM
Thanks for the tip of posting to notepad first, saves me a lot of converting.

BUT the pop up window isn't opening

jscheuer1
06-24-2007, 05:15 PM
Here's some boiler plate on FP that may help:


Well, you might be able to configure FP so as to allow you to insert code like this without it mangling it so much. Read the manual or Google for help on that. Another alternative, and what I recommend in all cases like this, is to get your page looking like you want using FP but without any scripts. Save a copy of that somewhere to work on later if the need arises. Next open the page in notepad or simple text and add the scripts in according to the installation instructions, including any customization you've added. Never load this version of the page into FP ever again. To preview it locally, use the browser. To upload it, use FTP (preferred) or your host's online uploading tool.

Here is trick I ran across* that should stop FP from changing scripts but, since I do not use FP, I haven't tested it:

In a text editor open the page whose code you wish to preserve.

At the beginning of the section of code you wish to prevent FrontPage from modifying, add the following line of code:


<!--webbot bot="HTMLMarkup" startspan -->

At the end of the code section, add the following line of code:


<!--webbot bot="HTMLMarkup" endspan -->

Save the changes to the file. The next time the file is opened in FrontPage, FrontPage will not attempt to alter the code between the two HTMLMarkup tags. You still need to put the script into the page with a text editor.

*Posted in these forums by usace-lrc and perhaps others.

thetestingsite
06-24-2007, 05:45 PM
Thanks for the tip of posting to notepad first, saves me a lot of converting.

BUT the pop up window isn't opening

Are you sure that you downloaded the files from dd? You need to download the css file, js file, as well as the images that correspond to the windows (unless you make your own images). Anyways; after doing that and it still doesn't work, post a link to your test page and we will check it out to see what is going on with it.

Hope this helps.

egghead2000
06-24-2007, 10:09 PM
No, I just copy/paste your code.

thetestingsite
06-24-2007, 10:15 PM
In that case, download this file:

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlwindow.zip

and upload the extracted files to your server. From there, look at demo.htm for a more in-depth look at how to get this script working on your site.

Hope this helps.

egghead2000
06-24-2007, 10:20 PM
Here is a link to my test page:

http://www.computingservicesok.com/contact_us.htm

thetestingsite
06-24-2007, 10:29 PM
Well, looking at the test page, the syntax is correct to get the script working as long as you download the following files and place them in a new folder called "windowfiles" (without the quotes).

windowfiles/dhtmlwindow.css (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/windowfiles/dhtmlwindow.css)
windowfiles/dhtmlwindow.js (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/windowfiles/dhtmlwindow.js)
windowfiles/close.gif (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/windowfiles/close.gif)
windowfiles/min.gif (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/windowfiles/min.gif)
windowfiles/resize.gif (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/windowfiles/resize.gif)
windowfiles/restore.gif (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/windowfiles/restore.gif)

Hope this helps.

egghead2000
06-25-2007, 03:36 PM
Thank you VERY MUCH