Generate Search Results INTO an iframe

[JCF1976]

I am doing some serious redesign to a web-site of mine. The height of the actual text area on each page is very limited (to about 400 pixels height and 600 pixels width). I have a search field at the bottom of my page, outside of the normal text area. I know how to point the results from the search to the right place (inside the normal text area). However, if I made no modifications, the text would blow my page apart.

I have been looking at the possibility of iframes. The results could be displayed on a separate page and brought into the iframe. But, how to co-ordinate all of this is kind of a trick. Do you have any ideas on how to do this and possibly a couple demos that you can point me to?

When I refer to an iframe, it would be something like the following:

<iframe height="418" width="540" src="search_results.htm"></iframe>

Your help on this would be tremendous. Thanks in advance.

[Ray]

Re: Generate Search Results INTO and iframe

The height of the actual text area on each page is very limited (to about 400 pixels height and 600 pixels width). I have a search field at the bottom of my page, outside of the normal text area. I know how to point the results from the search to the right place (inside the normal text area). However, if I made no modifications, the text would blow my page apart.

With some careful CSS, you should be able to restrict and limit the text content so that it would not affect the surrounding layout. You can take a look at CSS properties such as "word-wrap" and "white-space" to modify the way which line-wrapping is handled, thereby forcing the content to wrap at a certain width and not 'blow out' a table layout.

I have been looking at the possibility of iframes. The results could be displayed on a separate page and brought into the iframe. But, how to co-ordinate all of this is kind of a trick. Do you have any ideas on how to do this and possibly a couple demos that you can point me to?

An iframe works much like a frame would. You can specify it with a "name" value like

<iframe height="418" width="540" name="contentframe">

And then in your search form, you can have a target value like so:

<form method="POST" action="search.php" target="contentframe">

You can specify the target for the search form which is automatically generated by Zoom as well. This is in the "Search page" tab of the Configuration window.

For more information on using Zoom with frames, see the following FAQs:

Q. How do I use Zoom on a frames-based website?

Q. How do I make the search results open in a new window (or different frame)?

[JCF1976]

Re: Generate Search Results INTO and iframe

Ray,

Thank you for your informative reply. I'll check out those pages. In the mean time, I wanted to shoot off another quick reply / concern while I am here on your site. My site is not frames based. But, I want to have one page where an iframe will be to show the search results, and, I want to have a search filed on every page on my site. So, this is why it seems difficult to me. If I just had ONE page on my site where the search engine was, it would be easier. Recommendations? Code suggestions? Thanks!!!

Kind Regards,

James Farley

[Ray]

Personally, I would look into the aforementioned word-wrap CSS approach instead. It will be much simpler to get the search results to wrap to your required width, than to use frames (or in this case, iframes) to achieve the same result.

Here's a previous thread with some pointers on adjusting word-wrap with CSS:
http://www.wrensoft.com/forum/viewtopic.php?p=2396#2396

On the other hand, creating a search page where the content loads within an iframe is definitely possible. Just be prepared to do more fiddling when you are trying to have a search form outside the iframe, and then results inside... etc. Frames in general can get pretty messy if you are not familiar with them.

[JCF1976]

Personally, I would look into the aforementioned word-wrap CSS approach instead. It will be much simpler to get the search results to wrap to your required width, than to use frames (or in this case, iframes) to achieve the same result.

Here's a previous thread with some pointers on adjusting word-wrap with CSS:
http://www.wrensoft.com/forum/viewtopic.php?p=2396#2396

On the other hand, creating a search page where the content loads within an iframe is definitely possible. Just be prepared to do more fiddling when you are trying to have a search form outside the iframe, and then results inside... etc. Frames in general can get pretty messy if you are not familiar with them.

I agree that CSS is very powerful and I know about the wrapping. However, the length of the page is going to be too long for the text area that I am dealing with. 10 results coming back in the search result is too much even.

Okay, let's work with a scenario. A site visitor is on services.html and they are looking at different services. They decide they want to try a search. There is a search option on services.html. They enter their keywords and click the "SEARCH" button.

How do I get them from services.html to search.html that has an iframe on it and is loading search_template.html into the iframe with the results displayed.

That's the scenario that I want to work out. I don't want them to have to come to a search page that has the iframe and perform the search from there. I want them to be able to submit a search from any page on my site.

Thanks in advance for your help. It's much appreciated.

[Ray]

I agree that CSS is very powerful and I know about the wrapping. However, the length of the page is going to be too long for the text area that I am dealing with. 10 results coming back in the search result is too much even.

FYI, you can lower the number of results per page returned to 5, or even 1. But as I understand it, you'd prefer to have the IFRAMEs.

How do I get them from services.html to search.html that has an iframe on it and is loading search_template.html into the iframe with the results displayed.

To achieve this, you will most likely need some extra scripting in your iframe page ("search.html" in your above example) to pass the HTTP GET parameters in the URL ("?zoom_query=test&..." etc.) to the target of your iframe (which should be "search.php" as opposed to "search_template.html").

One possibility is if your IFRAME page is actually a server-side script (eg. a PHP page). Another is by using client-side Javascript (less preferable since the client may have this disabled).

Just so you know... it would actually be alot easier if your whole site uses the same IFRAME. If your site has a consistent layout all the way around it, then it would seem to make sense that the rest of the pages can load within that IFRAME ... in which case the typical frames-based method as described earlier would apply. However, obviously this comes down to your web design decision.

[JCF1976]

I agree that CSS is very powerful and I know about the wrapping. However, the length of the page is going to be too long for the text area that I am dealing with. 10 results coming back in the search result is too much even.

FYI, you can lower the number of results per page returned to 5, or even 1. But as I understand it, you'd prefer to have the IFRAMEs.

How do I get them from services.html to search.html that has an iframe on it and is loading search_template.html into the iframe with the results displayed.

To achieve this, you will most likely need some extra scripting in your iframe page ("search.html" in your above example) to pass the HTTP GET parameters in the URL ("?zoom_query=test&..." etc.) to the target of your iframe (which should be "search.php" as opposed to "search_template.html").

One possibility is if your IFRAME page is actually a server-side script (eg. a PHP page). Another is by using client-side Javascript (less preferable since the client may have this disabled).

Just so you know... it would actually be alot easier if your whole site uses the same IFRAME. If your site has a consistent layout all the way around it, then it would seem to make sense that the rest of the pages can load within that IFRAME ... in which case the typical frames-based method as described earlier would apply. However, obviously this comes down to your web design decision.

If I went the CSS route, how would I continue to limit the results to, say 4? It is one thing to start out with 4 results, but then the user can change it with the "Results per page" drop down menu.

Also, would you be willing to go into more detail as to exactly how to set up the search with an iframe, given the details in this thread that I have already shared? A step by step explanation would be tremendous and you could add it to your manual.

[Ray]

If I went the CSS route, how would I continue to limit the results to, say 4? It is one thing to start out with 4 results, but then the user can change it with the "Results per page" drop down menu.

You can turn off the default search form and define your own HTML search form (with your choice of possible "results per page" options) as described here:
http://www.wrensoft.com/forum/viewtopic.php?p=1167#1167

Also, would you be willing to go into more detail as to exactly how to set up the search with an iframe, given the details in this thread that I have already shared? A step by step explanation would be tremendous and you could add it to your manual.

Unfortunately no, the details you require would be closer to a web development tutorial than one that is directly in regards to the generic use of Zoom. It would (and already does) depend on many factors regarding your specific website as opposed to a general usage scenario.

As explained above, a more typical example would be a site where you would have all the content pages loaded within an IFRAME, and the search form is outside the IFRAME. Then you simply need to pass the search query to the search page (which will be loaded within the IFRAME). This can be achieved with the frames-related solutions detailed above.

What you wish to do is create a single web page which wraps the search results within an IFRAME, and have search forms on your other (non-IFRAMES based) webpages send the query to the search.php script VIA your custom search page. In order to do this (and as explained above) you really need to do some custom scripting to take the search query and parameters sent via the search form on your other pages, and pass this to the search.php page to be loaded within the IFRAME. This is not a simple requirement on technical terms, despite how it may seem from a visual point of view.

I hope that you understand it is impossible for us to provide step-by-step instructions on all the possible uses of Zoom in the context of thousands of different websites and their different implementations. The latter solution I have described would require up to several hours of scripting and testing to get working (on each site), and a tutorial detailing all of this would be an ineffective dissipation at best.

If you really do need development help, we can provide custom development. Email us and we can provide you with a quote.

[JCF1976]

I have the whole search page in the iframe. The search works properly and brings up the results in the iframe. However (and I realize this is how iframes work), when you click on a link from the results, it loads a whole page into that iframe. How do I get the link to either open in a new window / tab or load in the same browser but not in the iframe?

[Ray]

See the "Result linking" option in the Configuration window, under the "Search Page" tab. You can specify here whether links should be opened in a new window, or the name of another frame.