Click to close layers

I've posted about this page on a website before but this is a slightly different issue. I have a list of words on the left that, when clicked, each triggers a popup layer. Previously the issue was that if you clicked anywhere on the layer, it closed (which is what it's supposed to do I know) but my client wasn't happy with that. So I have a transparent layer on the mouse off layer that links to a "back to top" anchor. I also linked all the text on that layer to the "back to top" anchor

Issue #1 - When I group all the text on the layer then the "back to top" anchor works fine. But I can't group it due to text is needed for SEO. So when I ungroup it, if you run your mouse over the text at the bottom of the layer, you can see spots in between the rows of words where the "back to top" isn't working. This wouldn't bother most people but my client isn't happy with that. The only other work around I can think of is to cover the entire popup layer with a transparent box. Dumb question ... if I cover text with a transparent box does that hide it from SEO? I wouldn't think so but need to be sure.

Issue #2 - If you click on the list to the left to open a popup layer ... then scroll down ... then click another item on the list to the left (without scrolling up first) it doesn't bounce you back to the top of the new popup layer. Can you think of any way to resolve this? I don't see how to link a word to a popup layer and a "back to top" anchor at the same time.

Here is a temporary folder where you can view the website. I ungrouped the text on the Office layer so you can see the difference.
http://www.casteendesign.com/bc/projects.htm


Help is greatly appreciated!

For issue #1 Select the photo and the text and Arrange > Apply Soft Group. This way the text remains editable and searchable.

I am not sure what can be done with your second question. Maybe one of the members will have a script you can use. The problem is the layer positions are fixed so when a visitor scrolls down the page the layer is showing in the same position but is no longer visible.

Very nice site design by the way. Love Duluth Trading Co., though I have to purchase from the catalog.

The second time I opened the site it said EDIT:Project select a type but the first time it didn't show at all except for what my graphic shows.

Attachment 119448

What a nice compliment gwpriester. Thank you. And thanks for the tip ... what a time saver to use the soft group function if the text is still searchable. :)

wizard509 - what you are seeing is part of the problem I believe. When you first visit the page I have some text that flies in from the right. If you are already down on the page and click on the list on the left then it doesn't bounce back up to the top so what you saw was just a piece of the text above. That's the problem .. I want a "bounce back to top" effect each time a selection on the left is clicked. Those words on the left are already triggering a popup layer. Trying to find a way that they can also trigger a bounce back to the top effect.

I was hoping someone might have a script or suggestion. Lemme see if I can get some responses here.

Not sure if I understand what the requirement is, but something similar might have been discussed in this THREAD. But unfortunately the latest example has stopped working in V12.
The example below is similar to that last example. It has a placeholder on the pop-up layers that contains some code that checks twice a second if the pop-up layer just became visible and if so scrolls to a position defined in the placeholder body code. Layer 1 scrolls to 0, layer 2 to 100 and layer 3 to 200, otherwise the placeholder code is identical.
This method has a disadvantage. It only scrolls at the first click. It doesn't recognize a second click and doesn't scroll again...

Here is s light variation that doesn't need changing the code. Just move the placeholder to where you want the pop-up layer to be scrolled.

Great solution Siran, thanks for sharing.

And here is another variant. It is a bad hack but it also scrolls at second and subsequent clicks. Works quite different from the previous examples.
Still everything is at the placeholder. You don't need to change the code, just move the placeholder around.
Works in V12, V11 and even in V10 (except for the stickies).
It requires JQuery for the smooth scrolling, so the placeholder has the name UsesJQuery attached.
The placeholder also has a name htmlclass=xpul_st01 attached. This is used to identify the object from which to calculate the scroll position.
There is a dummy body code at the placeholder (only a dot in this case). This is only required for the object to be exported at all.
The relevant part is at the placeholder head code. If you change the code, make sure to change it in exactly the same way on all layers you use it on. Otherwise Xara will duplicate the code and that will quite surely result in a mess... ;)

Acorn suggests this approach:

Quote:

---

Instead of pop-ups, I recommend:

You need a landing page with an IFRAME. Its width will be that of the Insert pages.
Placeholder Body is:
<iframe src="sub1.htm" width="100%" height="100%" frameborder="0" scrolling="no" id="panel" name="iframe_panel" ><p>Your browser does not support iframes.</p></iframe>


where sub1.htm is the filename of the first insert and where panel is the important Name to allow linking from the landing page into the IFRAME.

You need some Page Head code:
<script>function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
</script>


Finally, to link from each button, you need: javascript:loadintoIframe("panel", "sub1.htm"); - changing sub1.htm to the filename of each Insert.

The clicking of any button will open the connected Insert within the IFRAME and it always opens at the top of its sub-page.

---