Anchor links close popup layer problem

Have a popup problem..

I'm creating a custom mobile menu using a popup layer. I have the popup layer locked using (lock) and added a custom close button using popup:close

Now on the popup layer I have two Link to anchor links that go to anchors on the page. Clicking an anchor link on the popup layer goes to the page section fine but the popup layer remains visible blocking the content, ideally I would like the popup layer to close when clicking an anchor link.

I tried selecting Link to anchor option and using popup:close in Link to field but you can't have both at the same time.

Putting "#anchorname popup:close" in the Link to field just makes a broken link with all that text and "popup:close #anchorname" is just popup:close without the link. Would be nice if you could use it this way with anchor links but seems you can't.

Does anyone know a way of closing the popup when clicking an anchor link?

xtom, not tried but just a thought.

Can you include Open link: Same window (_top)?

Acorn

I make pop-up layer menus for all my mobile sites and all I do is untick the 'close pop-up automatically'. The pop-up closes when the visitor navigates to whatever page they've tapped on. True, you do have the ugly little cross to close manually, but it's not in your face and no one has ever mentioned it when I've sent the site out for approval and testing.

Quote:

---

Can you include Open link: Same window (_top)?

---

Hmm that makes popup disappear in the preview but not when I preview in Firefox or Chrome.

Quote:

---

I make pop-up layer menus for all my mobile sites and all I do is untick the 'close pop-up automatically'. The pop-up closes when the visitor navigates to whatever page they've tapped on. True, you do have the ugly little cross to close manually, but it's not in your face and no one has ever mentioned it when I've sent the site out for approval and testing.

---

I tried this but I don't like this default close button especially on a main nav menu. Also if you use same page anchor links it's still seems the same problem in that it won't close automatically, you still have to click either the default close button or a custom one. Not an iassue when changing pages but it is for the same page anchor links.

xtom, could you put a bare-bones text file together for all the things you are using?
I don't want to spend time building up the wrong thing.

Acorn

Experimenting with it for a while now and I think one way of doing it would be to add a query with a random string into the link so something like /?r=123#myanchor to force a page load and go to the anchor but there's no straight forward way of doing this. So for now I think I'm just going to avoid using same page anchors in the pop menu and maybe create some dedicated pages for the content instead. Don't worry about it, it's not worth a complex solution but thanks for the suggestions.

Hi Tom, perhaps this will help, it's based on a xar file created by Siran. Does it meet your requirements?

Don't think it helps Egg but thanks. It looks like that file is for navigating to anchors on other pages from a popup which I have working already but the problem I have is when a link on the popup layer goes to an anchor on the same page and making the popup close when you click the link. Being able to combine popup:close with a working link somehow would have been nice but I don't think it's possible without a lot of trouble so going to avoid it for now.

Okay Tom. Here's a single page example that links to a layer 'pop-ups' with anchors that work and remain open.

Not quite what I'm looking for. I need the anchors on the Mouse Off layer for always visible page content and the popup menu needs to close when clicking the links not remain open.

This uses some script and a name at the buttons that you want to close pop-up layers.
If you click one of the buttons at the top two pop-up layers should be opened. All other pop-ups are closed by the script.
That is not what you are after yet, but is just an oder example from another thread.
I added the same name to the links on the pop-up layers and if you click these also all pop-ups are clodes and the site scrolls down to the anchors.

That looks like what I am after Siran but I'm having difficulty getting it to work on my own menu. I've added the JS to the head section and added the class names to the About and Services buttons. The popup closes when clicking the About or Services links which is great but it no longer goes to the section on the page for some reason, if I remove the JS it goes to the section, so not sure why it's not working. I've attached a xar file of my menu maybe you can see what I'm doing wrong.

Attachment 124465

Not sure I completely understand your requirement, but if it is to link an anchor to a popup menu, that itself can redirect the viewer to another layer (same page), or another page, then this model does that and closes the popup on the redirect. It is uses Popup and MouseOver Popup layers with a standard SINGLE NavBar over those two layers on EACH page.

Where you need the anchor to show a specific popup menu, you could create a Page Specific NavBar (that can link to page layers, PDFs or whatever).

Apologies though if I have misunderstood what you want.

Gary

Somehow the click event seems to be purged by the pop-up close function when the button is stickie.
Don't really undersand why, but a workaround would be to fire our own click event.
Another workaround would be to delay the pop-up layer closing until the click has been processed, but the required delay time might depend on the browser or performance of the visitors device.

Quote:

---

Originally Posted by Initiostar

Not sure I completely understand your requirement, but if it is to link an anchor to a popup menu, that itself can redirect the viewer to another layer (same page), or another page, then this model does that and closes the popup on the redirect. It is uses Popup and MouseOver Popup layers with a standard SINGLE NavBar over those two layers on EACH page.

Where you need the anchor to show a specific popup menu, you could create a Page Specific NavBar (that can link to page layers, PDFs or whatever).

Apologies though if I have misunderstood what you want.

Gary

---

Different type of anchor Gary, but thanks for the suggestion.

Siran, that last file works but there's a bit of jerk when it scrolls to the section, not sure what's causing it and yes nit-picky I know. I'm just wondering if putting in code to scroll to the anchor might work smoother than firing the click event. Maybe it wouldn't but is it possible to test by just harcoding in the #xl_about name ? Don't worry if it's not possible or too complicated, already is a pretty complex solution for something you would think ought to be easy and what you have there now is pretty good. Thanks for the help.

Actually just a follow up observation Siran: that works really well and smooth if you keep clicking the same link and moving the page so yeah perfect. But only when you alternate between clicking the different links it causes that bit of jump when scrolling.

Acorn did a JQuery based "scroll to" some time back, and if I remember correctly I tried to simulate that effect.
I will have a look if I find some time for it and then check if it can be integrated.

Here's another approach without using anchors based on Sirans original script.

DEMO

A really nice demo Egg. :)

Does this example scroll to as expected?
It uses Xaras own function to scroll.
The code has grown a bit to work around strange behavior of IE11.
I have only tested in latest versions of IE11, Edge, Firefox and FireFox on Android.

Quote:

---

A really nice demo Egg. :)

---

Thanks Siran, it's only based on your excellent code.

Can you kindly remind my fast depleting brain cells what the use of (lock) does on a Layer, I've forgotten?

My demo uses a menu bar at the top of every page with:

Quote:

---

popup: close open "menu"

---

Is it possible to use:

Quote:

---

popup: close "about" open "services"

---

I couldn't get this to work?

Attached my demo xar.

The lock keyword is to have Xara not closing the layer automatically but without adding the default close button as far as I remember without testing.
Is the question about popup: close "about" open "services" referring to a button in your demo? I couldn't find it. As far as I can tell that should work. At least it did in my simple example.
On the page it was taken from (https://help.xara.com/article/26-und...d-web-features) the open is skipped and the close is put to the end, so in your case it would be
popup: "services" close "about"
Could you try that?

hello again Siran,

Quote:

---

... the question about popup: close "about" open "services" referring to a button in your demo? I couldn't find it.

---

Sorry, no that wasn't on my last demo, I couldn't get it to work, so I didn't include it.

As you & the link points out, the 'open' isn't required so for example the following works:

Quote:

---

popup: "menu(lock)" close "about(lock)", "services(lock)", "blog(lock)", "contact(lock)"

---

I attach a xar file that does use this method and whilst works fine it can be a pia getting it to close the un-required Layers. The use of a menu on each layer with the action:

Quote:

---

popup: close open "menu"

---

is far easier to use without needing multiple close strings. But I now know it's possible so thanks again

Quote:

---

The lock keyword is to have Xara not closing the layer automatically but without adding the default close button as far as I remember without testing.

---

Yes this indeed does exactly that ;)

Now I see the problem, the layer name has to be given including the keywords... :confused:

Curious to see if an anchor mobile menu could work with the pop-up closing: https://anchor.initiostar.co.uk. Works on my Android OK. Used a hamburger mouseover animation rather than a link to the pop-up layer with a background on the layer to keep the menu in view.

It scrolls between the anchors on a single page, but it you add additional pages to the menu, I could not get the additional pages to open at the top of page (despite using _top).

The mobile menu-page & mobile menu/mouseover mobile menu layer approaches work very well, so still trying to understand the application for anchor-driven menus? maybe a supersite with a table of content approach?

Happy to share the mobile menu models I have used so far (including the new fit to width option).

Gary

Hi Gary,

Not had time to look at your attached xar files at present but viewing your site on my iPhone it doesn't close the menu window, it remains open above the page content , I need to click it again to close the menu...

Hi Egg,

Thanks for checking; a fluke with Android maybe? I don't know it it is possible to code the action of both linking to an anchor and closing the popup simultaneously. This was as I understand the original issue?

Quote:

---

Originally Posted by siran

Does this example scroll to as expected?
It uses Xaras own function to scroll.
The code has grown a bit to work around strange behavior of IE11.
I have only tested in latest versions of IE11, Edge, Firefox and FireFox on Android.

---

I've only tested on desktop browsers but yes this seems to work really well! Nice work Siran. Looking at the js code it certainly looks like it was complicated so thanks for spending the time on it.

Quote:

---

I don't know it it is possible to code the action of both linking to an anchor and closing the popup simultaneously. This was as I understand the original issue?

---

Yup this was original issue, I've yet to try on mobile but Siran's solution in a previous post seems to do this now. Certainly not straight forward as I thought it may have been when I tried to do it initially. That's the thing I find with custom popup menus, they are always fun and interesting to do but they sometimes lead to extra complexity and difficult to solve issues. Still looking over all the demos and exmamples posted, thanks guys.

Perversely, the actions now only work in IE & Edge. My other browsers have upped sticks and left!
What does work is calling the page without referencing the Anchor and calling it again with, straight away.

---

E.g.,

Quote:

---

javascript: void(window.open("two.htm", "_top")); void(window.open("two.htm#aTwo", "_top"));

---

My solution is 5 pages with (index, one, two, three, four).htm pages filenames.
I have 5 buttons (H, 1, 2, 3, 4) on the menu(lock) layer and an H alone aligned on the MouseOff layer.

MouseOff link to layer for button:

Quote:

---

H:: menu(lock)

---

menu(lock) links for buttons:

Quote:

---

H:: index.htm
1:: javascript: void(window.open("one.htm#aOne", "_top"));
2:: javascript: void(window.open("two.htm#aTwo", "_top"));
3:: javascript: void(window.open("three.htm#aThree", "_top"));
4:: javascript: void(window.open("four.htm#aFour", "_top"));

---

An H-click opens the menu. A second returns to the index page with the menu closed. This link could be set to popup:close instead.
A (1, 2, 3, 4) click opens and scrolls to the set Anchor and closes the menu.
Re-opening the menu and clicking the link for the same page closes the menu.

Acorn
I have major Internet issues so I doubt if I can upload a file.
P.S. The very slowly uploaded file: Attachment 124483
P.P.S. sorry i have not been able to examine any of the above solutions either.