help with popup windows

Sharron · #1 06-22-2005, 07:57 AM

http://www.speedymacfab.com/test/pro...oducts-pw.html

I can't use php, even if I can figure it out, the server does not offer it at this time. This is as much as I can get to work, and it does not work like I thought it should. Didn't know I would have to make individual pages for the popups. But I can handle it, I would like to know how to get a close popup on the pop up, how to get it close maybe by itself? And how to edit what it says at the top of the pop page, instead of saying the page name could it say the product mumber or product group, ie: toolboxes, ramps and so on.

I have been working on this one small thing for hours and hours.

also it is showing me 12 errors on the page and everyone is a form lack of "action" attribute. all 12 are the zoom buttons. I would love to know how to fix that, is it simply some text I can add somewhere? I don't want errors.

webado · #2 06-22-2005, 08:16 AM

On each of the pages that get open by pop-up make sure to put a title in the head section. Right now you have nothing there.

Take as an example this page (the first pop-up I think, I forgot the name):

You modify the page by adding a script in the head section, an onLoad event handler to the body and somethign to click for people who want to close it ebfoe the time runs out.

So it will be like this:

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>This widget here</title>

<script language="javascript" type="text/javascript">
// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

var howLong = 10000;

t = null;
function closeMe(){
t = setTimeout("self.close()",howLong);
}

</script>

</head>

<body onload="closeMe();self.focus()">
<center>[img]../toolboxeimages/124_b_small.jpg[/img]

Speedymacfab Tool Boxes

Tool Box #smf-124_b

[img]../../div-images/want-it.gif[/img]</p>

Close window
</center>
</body>
</html>

Note the variable howLong in the script which is set to 10000 - that in milliseconds - so it's 10 seconds. You can set that to different values.

webado · #3 06-22-2005, 08:23 AM

Instead of using a pseudo-form for the zoom button, why don't you make a graphic zoombutton.jpg in its place and rewrite this:

Quote:

<form><input type="button" value="Zoom" onclick="javascript

opUp('tb-product-zooms/prod124_blarge.html')"></form>

as this:

Quote:

[img]zoombutton.jpg[/img]

remember to fix the width and height for the image, as I'm only guessing at it.

webado · #4 06-22-2005, 08:31 AM

One more thing: php cannot do pop-up windows anyway. You would still have to use javascript for the pop-up effect.

What php allows is to write a general script which takes file names as query strings to do somehting with. That somethign can be to open a pop-up window or an ordinary window as a new window (target="_blank").

It has just come to my attention that the almighty ultra-picky w3c might frown upon the use of target="_blank" for opening links... and in fact the javascript pop-up window is recommended - which so many paranoid people disable LOL!

I swear, this whole thing is designed to take all the fun out of webbing

Sharron · #5 06-22-2005, 03:09 PM

Thanks! This is great.

Quick question! I am almost done making all your suggestion changes, Chris. However I do not like the border around my new zoom graphic, how do I get that off there?

ps, Now I am thinking I should include in the style sheet, but that would mean I had to make one for each popup window wouldn't it! Can I do that and make it a clickable link, in a style sheet? No I don't think so, as each time it would have a different hyperlink. ? I wonder.............

Sharron · #6 06-22-2005, 04:15 PM

oh Good gosh, I have messed something up! It now pops open, but a full new page, and when I close it it shuts down the site not just the page.

what have I done?

I THINK I HAVE IT FIXED! YEAH WILL UPLOAD WHEN I AM FINISHED!

webado · #7 06-22-2005, 05:20 PM

Oh, sorry, the border around the image that you click, I should have put border="0" inside the <img ... > tag . Sorry about that.

But you've already figured that out anyway

Sharron · #8 06-22-2005, 05:32 PM

HORAY FOR CHRISTINA!

It works, gosh that was difficult. Chris don't ask me how I removed the border, cause I certainly did not know I was removing a border. I was just cutting and pasting stuff trying to get the zoom image to open in the small pop up window like the form button did.

I think I moved stuff around and tried various things, finally it worked when I deleted the form tags, and used the image thingy.

I managed to get it error and warning free also!

Thank you

Now if I can get the http:// address off the top of the pop up page and get the page title to show there instead. Can I do that?

jonra01 · #9 06-22-2005, 05:33 PM

Quote:

Originally Posted by Sharron

Now I am thinking I should include in the style sheet, but that would mean I had to make one for each popup window wouldn't it! Can I do that and make it a clickable link, in a style sheet? No I don't think so, as each time it would have a different hyperlink. ? I wonder.............

You could make a stylesheet for the zoom pages and include it on every page. Just create your styles like you normally would and then save them to a .css file that is linked to in the head section. Call it something like zoompages.css

body {
font-family: arial, verdana, sans-serif;
font-size: 0.9em;
color: #000000;
}

Create as many styles as you need for these pages and then link it like this in the <head> section right after the title.
<link href="zoompages.css" rel="stylesheet" type="text/css">

All of the zoom pages would use the same stylesheet.

John

webado · #10 06-22-2005, 06:03 PM

Sharron, the top of any window displays the text in the <title> ..</title> tag. If no text is given it displays the URL.

Remember I had this in the first reply to your post, as you'd left it blank before.

Quote:

<title>This widget here</title>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode