Hi, I am trying to display a popup window displaying a brief description and a few small images.
There are 60 keywords on the page so 60 popups.

Should I use the I-frame and what are my other options please?

Other options are:

1. Separate popup windows described here.

2. Mouseover effects would be acceptable for just a few popups, but for 60 I think it would be too unwieldy.

Would something like this work?

Hi, yes Larry something similair to what you suggested.

I have done an example of what I want but using mouse over effects which will be no good for what I am doing.

The 'Architrave' is a text object containing many other words which will have the same effect. I was not able to use the mouse over effect within a text object.
Also the page would take ages to load using mouse over.

The popup box I have used to explain what i want may be different sizes for other keywords and may have larger pics and more text.
I do not mind if the popup is activated with mouse over or has to be clicked.

http://myweb.tiscali.co.uk/styleuk/test/architrave.html

Thanks to you both so far

I have used this script in the past and have been happy with it. It has an option to load pages via ajax, so it will not bloat your main page. But it does mean that you will need to build separate pages for all your pop-ups. You could probably put these inside a different project to keep things manageable.

I do not think mouseovers will be effective for your purposes. One slip of the mouse and your visitors will lose the pop-up. Mouse clicks would probably be better to keep the pop-up open until your visitor is done with it. This also fits in well with the above tool.

Had a quick read up and with a bit of concentration I should pull this one off

So I create a page and wack my info in there for the popup.

But will this page be indexed by google and would the page appear in search results in search engines?

Just thinking if someone opened the page from say google results it may not look to good

Thanks very much for the help

You can place a plain text file on your site called robots.txt and enter:

User-agent: *
Disallow: /page-name.html  

where page-name.html is the page you do not want searched.

You can also stop the bots from searching your SS generated /image and /geometry folders by adding:

Disallow: /image/
Disallow: /geometry/ 

I've been playing around with your idea of using an i-frame and this is what I've come up with. All the pop-up text & images reside on a page loaded in a hidden i-frame. On a mouse over, the script then gets the desired pop-up via its object name and displays it.

I haven't tried a mouse click yet, but it should be possible to activate the display via a click, then using another click on the pop-up display to close it.

Images are included with the text by making a group of everything so the script can find all the elements to be displayed.

I had a look at your i-frame example but I get 'error on page' when I click the popup links.
I am using IE7.

Here is the page I want to apply the effect to here. As you can see from the list I have quite a few brief desrcitions to do

I was think maybe I could break the catogories into different pages ie General, Kitchen, Safety and Security, External, Bathroom so thats 5 pages
If I can have the keywords from the catogries on another page I can have bookmark to take me to the description.
Just a thought

Fixed the error in my example. IE did not recognize the script function I used to get the i-frame content, so I had to fall back to another method. It now seems to work in FF, IE and Opera.

With the layout of your page, any pop-up will cover your links, so you will probably need to use mouse clicks.

skydad had something similar a while back. He wanted to use collapsing text objects for his FAQs. An example of what we came up with is here. Not sure how applicable this is to your needs. The problem with this approach is that everything needs to be loaded on the page at once. If you are interested in this method, I could try to mix both examples.

Another approach you can take is to put every pop-up onto its own page, then use a hidden i-frame with a small script that will show the frame and load the pop-up page. A click on the i-frame would hide it.

Hi Larry your first example with the i-frame would be perfect for what I need.

I have had a go with i-frames but did not seem to achieve the desired effects.

So how do I do it?

I have redone the pop-ups example. I have it now responding to an onClick() event rather than a mouse over. I also managed to fix the code so the pop-up will display next to the item that was clicked rather than being fixed to a location on the browser window.

You can download the project file (popups.ims) from here. It consists of two pages: popups (the main page) and popups2 (the pages holding the pop-up info).

As the sample project shows, you will need to add an i-frame and a code object to your page. The i-frame is used to hold the page with all your pop-up items (popups2 in the sample project). Each pop-up item must be a single group. A single text object is a group of one. But a text object and images must be grouped as a single object. I used unique names for the pop-up items (e.g., pop1, pop2, pop3, etc.) to make it easy to reference them from the script. Because of the way the script gets the pop-up item after it is loaded in the i-frame, the image CSS positioning info is lost, so images do not retain their designed position. I found it best to group the images first into a single group, then group this with the text. I also found out that when you group objects, the first selected object is the first object in the group, so there will be a difference in a group of a text object and an image object versus a group of an image object and a text object. I guess I'm trying to say the system ain't perfect yet.

On your page using the pop-ups, the i-frame does not have to be any larger than the default size since it will be hidden. The container code object will also be hidden until activated by the link. You will need the i-frame geometry name and the container object name for the script.

The script is designed to go into a custom header. The lines at the top:

var frameName = "geo17";
var divId = "Oobj15";]  

are used to designate the i-frame name and the container object id (this is object name prefixed with the letter "O"). The script contains 3 functions: initPopup(), showPopup(), and hidePopup(). The initPopup() function is executed via a body onload() as shown in the sample project header's last line. This will hide the i-frame and container object, so you do not have to use the SiteSpinner SpecialFx Loading options to do so (this saves a few hundred bytes of code). It also sets up an onclick event for the container object so it will hide itself when clicked.

The showPopup() function is called from an onClick event from a text link. To create the link, leave the Link Type empty (blank), and set the URL to either "javascript:void(0);" or "#" (no quotes on either one). Then in the Code field, enter:

onClick="showPopup(event, 'pop1');"  

where pop1 is the object name of the pop-up object to be used with this text link. Do not alter the "event" parameter; it is used to capture the onClick event status so the script will know where the mouse was when it was clicked. This is used to position the pop-up container object next to the link. [Note: I have not figured out how to handle your 2-column text arrangement yet. The current code will always display the pop-up container to the right of the click. Maybe adding a parameter to adjust it either left or right of the click will work. I still need to experiment with this.]

The 3rd function, hidePopup() is called when the container object is clicked. One nice side effect of the script is that you do not have to close the container in order to open another pop-up. Just clicking on a new link will erase the previous container and open a new one.

I have added some CSS style codes after the script to show that you can set the background color, border, font-size, etc. for the container object. Or not. It is there if you want to play with it.

Update: The showPopup() function has now been modified with an 3rd parameter:

onClick="showPopup(event, 'pop1', 'pos');"  

where pos is 'l' or 'L' to position the pop-up to the left of the mouse click (x,y) position. If the parameter is omitted, or is 'r' or 'R', then the pop-up will be to the right of the mouse click (x,y).

Also, it has been tested in FF2, FF3, IE7, Opera9 and Safari for Windows.

This message has been edited. Last edited by: larryd,

Just off to work but as soon as I am back I will give it a go.

Thanks very much for your time and expertise

I played with the CSS for the pop-up and gave it a quasi-drop shadow effect.

I had a go with the popup. I set up the pages as per your file... I think

But I get 'error on page'

Here is my page where the popup is to be displayed. And here is the page where the popup is.

I was using your links to track down the error. After making some heavy mods to your pages, I thought I had it nailed down. But then when I reloaded your links, it now looks like it is working OK. I guess you found the error.

I did not get a chance to confirm, but the frame kept disappearing after the pop-up was loaded once. I think that you were loading the frame object with the pop-up which erased the page of pop-ups.

Hi Larry, I had a quick look to see what I had done wrong abourt 5 hours ago and I had left the blank code object out Sorry I did not tell you straight away I had fixed it I was in a rush.

But in your example the popup appears where you click on the link but my popup does not.

Also if you scroll down the page slightly then click the link the page moves back up to the top. This could be a nuisance when further down the page.

Great so far very pleased with the popup effect...
This way of creating the popups is quite easy and quick to do
Thanks Larry

Just had another read through your instructions and I am assuming I should name my popups 'pop1, pop2' etc

This is a problem as I already have objects in my website called pop1, pop2

Viewing your site, the pop-up is appearing where the mouse is clicked (used both FF and IE), so I am not seeing the problem. If it persists, can you get me a screen shot?

I am investigating why the pop-up is resetting the scroll bar position, but no luck so far. And I'm not having much luck tracking down any help via a search. Will keep investigating. In the meantime, you may want to consider realigning your menus so it all fits on a 800 pixel (or thereabout) high page so no scroll bars will appear.

Another though - what if you used a collapsible menu structure for your main headings. Clicking on a heading would open the sub-menu and make the links visible.

You do not have to use the "popX" names. I just felt it was easier to make an association between the menu link and the pop-up rather than using the obscure SiteSpinner "objXX" notation. You can use any name that suits you.