Integrating to webplus x5 - problems...

[richbell77]

Hi all,

I've been working a while on a site and am now trying to add zoom search to it as the default search was not as good.

Unfortunately, due to my inexperience, I'm having real trouble in getting zoom to work on my site.

The site is currently up here

I'll break down what I've done to see if you can spot where its gone wrong!

I've copied the code
'<form method="GET" action="search.php">
<input type="text" name="zoom_query" size="10">
<input type="submit" value="Search">
</form>'

and added that to my master page. This is the search box (which I'm still going to try and change the look of...)

Then on the search results page I've got the following code:
<style type="text/css">
.highlight { background: #FFFF40; }
.searchheading { font-size: 100%; font-weight: bold; }
.summary { font-size: 80%; font-style: italic; }
.suggestion { font-size: 80%; }
.results { font-family: Arial; font-size: 80%; }
.category { color: #999999; }
.sorting { text-align: right; }

.result_title { font-size: 100%; margin-bottom: 10px; }
.description { font-size: 100%; color: #800080; }
.context { font-size: 100%; }
.infoline { font-size: 80%; font-style: normal; color: #808080;}

.zoom_searchform { font-size: 100%; }
.zoom_results_per_page { font-size: 80%; margin-left: 10px; }
.zoom_match { font-size: 80%; margin-left: 10px;}
.zoom_categories { font-size: 80%; }
.zoom_categories ul { display: inline; margin: 0px; padding: 0px;}
.zoom_categories li { display: inline; margin-left: 15px; list-style-type: none; }

.cat_summary ul { margin: 0px; padding: 0px; display: inline; }
.cat_summary li { display: inline; margin-left: 15px; list-style-type: none; }

input.zoom_button { }
input.zoom_searchbox { }

.result_image { float: left; display: block; }
.result_image img { margin: 10px; width: 80px; border: 0px; }

.result_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
.result_altblock { margin-top: 15px; margin-bottom: 15px; clear: left; }

.result_pages { font-size: 100%; }
.result_pagescount { font-size: 100%; }

.searchtime { font-size: 80%; }

.recommended
{
background: #DFFFBF;
border-top: 1px dotted #808080;
border-bottom: 1px dotted #808080;
margin-top: 15px;
margin-bottom: 15px;
}
.recommended_heading { float: right; font-weight: bold; }
.recommend_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
.recommend_title { font-size: 100%; }
.recommend_description { font-size: 100%; color: #008000; }
.recommend_infoline { font-size: 80%; font-style: normal; color: #808080;}
.recommend_image { float: left; display: block; }
.recommend_image img { margin: 10px; width: 80px; border: 0px; }
</style>'

This has been amended so the style matches the rest of the site. Up to this point it searches fine and brings the results up on the search results page.

Now, in order to enable the jump to highlight feature I have ticked the box in zoom to enable it, reindexed and re-uploaded the files to my site.

Then I've used the following code as a fragment at the top of all master pages:
'<style type="text/css">.highlight { background: #FFFF40; }</style>
<script type="text/javascript" src="highlight.js"></script>'

And then in place of the '__AddCode="MasterPageInBodyTag"'
I have added the following code:'onload="highlight();"'

I've also tried adding it to the main body tag of each page though this didnt work.

When I click through from the search results page to the matched results its no longer even highlighting that word on the page, let alone scrolling down to it. And to make it worse some odd symbols seem to have come back at the top of the published site page which I got rid of the other day by amending the site to html output --> western european.

I've pestered everyone on the serif forums about it, and they've been a great help, but thought you guys on here may spot something others have possibly missed?

Any ideas will be gratefully received!

Thanks
Rich

[Ray]

Now, in order to enable the jump to highlight feature I have ticked the box in zoom to enable it, reindexed and re-uploaded the files to my site.

Then I've used the following code as a fragment at the top of all master pages:
'<style type="text/css">.highlight { background: #FFFF40; }</style>
<script type="text/javascript" src="highlight.js"></script>'

This code implies that the "highlight.js" file is in the same folder as the page containing this code. When I looked around on your website, the file could not be found. For example, you have many pages (perhaps all) at the root folder, like so:
http://www.slick77.com/educationproducts.html

They would expect the following to exist (it doesn't and returns a page not found error):
http://www.slick77.com/highlight.js

Did you forget to upload the file from the "extras" folder? ("Tools"->"Open 'extras' folder"). Note that you can upload this to any particular folder and link to it accordingly (so you don't need multiple copies of it) which is why Zoom doesn't automatically upload it for you.

Having said that, on the page linked above, I couldn't find the following change either:

And then in place of the '__AddCode="MasterPageInBodyTag"'
I have added the following code:'onload="highlight();"'

As for this other issue:

And to make it worse some odd symbols seem to have come back at the top of the published site page which I got rid of the other day by amending the site to html output --> western european.

I didn't see this on the few pages I looked at, but it sounds like it's an UTF-8 BOM (Byte Order Mark). Just to be clear, this would not have anything to do with Zoom.

It's either been mistakenly added by the program you are using to edit the pages (if you didn't actually need it) or, if you do need a BOM because your page contains UTF-8, then your web server is configured to use the wrong charset. Here's a thread from the Serif forum about it.

[richbell77]

Thanks Roy,

I've uploaded the js file to the root now - previously it was just added to the html fragment in webplus. It can now be seen at http://www.slick77.com/highlight.js.

I've currently added the onload="highlight();" into the body tag of the page for 'online marketing' which is under the 'making money' menu - I'm trying to get it to work on one page before adding it to every page.

Basically what I do to test it is go to the home page www.slick77.com, type 'mobile' in the search box as I know this is listed half way down the page on the 'online marketing' page.

The search results page comes up fine, but when I click on the second listed result it takes me to the correct page but does not scroll down to the right bit - at the moment it scrolls about 10pixels then stops. The word 'mobile' is highlighted on this page but is quite a way down.

What is it that I'm doing wrong to not have it jump to the highlighted word?

Thanks for the advice on the BOM - I'll sort this out separately (hopefully!)

Rich

[Ray]

Had a look, and it's very odd. Every other word I try on that page, highlights and get scrolled to correctly (try replacing the zoom_highlight= parameter in the URL with "blog", or "coffee" or "godfrey", etc.) Seems like it's only not scrolling down for the word "mobile".

Thought maybe there's another instance of the word in a strange layer or invisible text, but I can't find it either.

[richbell77]

Oh right - that's good news really as I hadn't noticed it worked for other words - it's not the end of the world if it doesnt work for only one word!