Forum Moderators: open

Message Too Old, No Replies

close this window

pop up window

         

susieone

10:22 am on Jul 10, 2005 (gmt 0)

10+ Year Member



As a relative newbie to javascript,I am re-vamping my site with a new look that has a CSS,I have lots of images that open with a new window, I would like the window to close either with a button or text link but I am unsure how to add it to the code below.I am making all my site fully accessible with or without js and to the W3c standards. (well trying)Also having a few problems with some pages running in firefox.

<a href="fans/fan1.jpg" onclick="window.open(this.href,this.target,'width=350,height=350');return false">&nbsp;lilac/White</p></a>

sue

Birdman

12:09 pm on Jul 10, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to Webmaster world, Susie!

The syntax to close a window is pretty straight-forward:

<button onclick="window.close()" value="Close Window" />

Cheers

susieone

1:21 pm on Jul 10, 2005 (gmt 0)

10+ Year Member



Hi thanks for the reply but I have not created a seperate function for my windows just the onclick code above.would I need to make new pages for all my images to open in new windows to be able to close them?
I have tried various ways of closing the window but they all hang up my program.

I want to the code to be inside the above is this possible.

Birdman

1:46 pm on Jul 10, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sorry, I missed the fact that you were linking directly to the image and not a web page.

It's not possible if you link directly to the image, but you won't need to create a page for each image. Just one "wrapper" page, so to say.

Hopefully you have PHP available to you. If so, here is a quick and easy script:


<html><body>
<img src="<?php print $_GET['img'];?>" /><br />
<button onclick="window.close()" value="Close Window" />
</body></html>

Let us know if it works out or if you don't have PHP. There are other methods.

Birdman

susieone

1:58 pm on Jul 10, 2005 (gmt 0)

10+ Year Member



Hi not sure if I have PHP available, let me explain a bit more.
I have my own domain site with static HTM pages. now I am updating it all so not very clever with js although I can adapt copy/paste code to suit. I am using Frontpage 2003 to create site with a bought CSS/HTML template.
So far so good but I want to enhance site with some js for user interaction to look professional. hence the new windows that pop up on link clicks not just a full page now using.

BTW will be a regular visitor hear I expect need lots of help.

Birdman

2:20 pm on Jul 10, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try this:

  1. Copy/paste the above script into a text editor (Notepad works fine)
  2. Save the file as: "img.php"
  3. Upload it to your server in the main folder (root)
  4. Open the page in your browser like this: yoursite.com/img.php?img=fans/fan1.jpg
If the image appears, then you have PHP. Let us know what happens then we'll go from there.

BTW will be a regular visitor hear I expect need lots of help.

Very good! You're in the right place for sure. I started as a newbie right here myself.

susieone

4:52 pm on Jul 10, 2005 (gmt 0)

10+ Year Member



Hi uploaded the img.php and got a redX no image. and a tiny button that when onclicked said this site is trying to close the window do iwant to close window.
so do I have PHP?

Thanks for helpig:-)

Birdman

3:04 pm on Jul 11, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi again, sorry for the delay.

The red box(X) means that it tried to display an image but it was not there. This is good because it means you have PHP, you just entered the image path wrong.

Let's say your image was here:

yoursite.com/images/img.jpg

The path would be:

/images/img.jpg

Now, all you have to do is change the links in your HTML pages to point to the new script. Be sure to use root-relative paths (ie. /this_is_root/folder/image.jpg). Here is an example:

<a href="/images/myimage.jpg" onclick="window.open('/img.php'+this.href,this.target,'width=350,height=350');return false">&nbsp;lilac/White</p></a>

Give that a run and let us know if there are any probs.

Cheers

susieone

3:28 pm on Jul 11, 2005 (gmt 0)

10+ Year Member



Hi Thanks I will give it a go. my new site has not been uploaded yet but will try it out on the existing one.

ORBiTrus

3:50 am on Jul 17, 2005 (gmt 0)

10+ Year Member



Whoops, Birdman.

It looks like you forgot one essential:

<a href="/images/myimage.jpg" onclick="window.open('/img.php?img='+this.href,this.target,'width=350,height=350');return false">&nbsp;lilac/White</a></p>

And susie, you have your </p> inside the </a>

It looks like you are using XHTML, which is good... just don't forget that as XHTML is HTML in XML, and XML is a rigid markup language, that doing so is illegal.

By that I mean, that whereas in HTML
<b><i>Text</b></i>
was the same as
<b><i>Text</i></b>

now it isn't. The first is wrong, the second is right.

If in doubt, the prettier one is always the better!

Oh, and as a side note (purely personal), I hate links which encompass trimmable spaces or punctuation.