La Vida Crafty - Basic Javascript question

Looking for Glitter Boards? They now live on Supernaturale!

You are not logged in

[Register] [Login] [Help/FAQ] [Search] [Index]

Topic Basic Javascript question

By SublimeStitcher On 11/17/03
What's the code for making a new, smaller window pop open? For example, I'm updating my customer gallery. When you click on a thumnail image, I want a separate window to open with a larger detail of the thumbnail. But I don't want it to be a full-sized, new window. Anyone know how to do this? Thankles, Jenny

By khimegirl On 11/17/03

This is the short javascript that I use. It has two parts.

Put the following script in your <head> section on the page you link from. You can monkey around with the toolbars, menu bar, and scroll bar by using yes or no. You can also enter different pixel dimensions for the width and height of the window. Resizable means that your user can make the window bigger or smaller (I recommend yes).

<SCRIPT>

</SCRIPT>

Use this tag to create the link for your new window.

<P><A HREF="JavaScript:newwindow('your url goes here')">My link 1</A></P>

The following script creates a button that says "Close Window" (or course you can change that)

<form>
<p align="center">
<input type=button value="Close Window" onClick="javascript:window.close();">
</p>
</form>

I hope this works...

By Mona Mew On 11/17/03

It is a javascript thing. The code you would enter for your page link is:

<a href="javascript:location='pageA.html';window.open('pageB.html','nwname','height=h,width=w,scrollbars=yes,resizable=yes')">text</a>

pageA.html is the page you are entering the link on.
pageB.html is the new window you want to open.
nwname is the name you will be giving your new window.
h and w is where you enter the how big you want the window to be in pixels.
scrollbars=yes,resizable=yes means you want it to have a scrollbar.
text would be your clickable link. You could also put an image there.

Hope that helps! :o)

*edited to fix a boo-boo!

By SublimeStitcher On 11/17/03

Hrm. I can't get it to work. Would you mind taking a look at what I've done?

This is the construction link:
>http://www.sublimestitching.com/blapple.html

The image I'm working with is the Hula Girl, top row, far right. I put the script in the header, did the link like Mona Mew suggested, but the new window isn't showing.

I really appreciate your help!

edited to add: is there any javascript for the html page that is the new window?

By Mona Mew On 11/17/03

For the one I gave you, you don't need the stuff in the header.

As far as the coding, you are just missing a ' after resizable=yes (my fault, I forgot it in my original post, sorry!). I added it for you below:

<a href="javascript:location='blapple.html';window.open('lauren.html','Tiki Freak','height=300,width=300,scrollbars=yes,resizable=yes')"><img border="0" alt="Hula Girl" height="120" width="119" src="images/lauren.jpg"><br>
<font size="1" face="arial"><font color="666666"><i>Lauren, Columbus, OH</i></a></font>
</a>

I did a test page with your code adding the missing ' and it works fine. Let me know how it works for you. :o)

By SublimeStitcher On 11/17/03
Khime, thank you! Mona, I'm going to email you directly I'm still having problems.