Grouping/multiple selecting popups

[letsgofishing]

LGF, "Mission control to LGF, over."

Attachment 128470

This approach still avoids Layers.
Two simple functions to hide and toggle a Pin or a number of Pins. [toggle could be replace by show]

The code is in the Page Code body.
The triggers are JavaScript calls to the functions in the text list. A click toggle the Pin to show or to hide.
These can be even on the Pin itself; try TH2 > Pin(TH2) > click and follow the route.

Acorn

Hey Acorn - that is awesome - going to try it with a list of the actual shop names on the left (these have to be there) and see how it works on a 640px wide page.

[letsgofishing]

@Acorn
The jquery works just great - so simple...
but there's a "physical" problem - I've made the type 13pt which is far too small but I can't fit anything larger.
Also, as you'll see, there are around 50 shops and scrolling down the list would make the map disappear....

I reckon the solution is to just see list of shops to the width of the page (which would allow the text to be much bigger) - and have the pins and the map on a "pop up" layer which fills the width of the browser - this would also make the map easier to read. Then a close button which lets you see the list of shops again.

What do you reckon? And many thanks once again for your work.

BTW: If I backspace on the first line to get rid of the "1" it shifts down to the next line and so on....?

I've uploaded the page as it stands to http://www.mikekaplandesign.com/Thesen

[Acorn]

LGF, I have tweaked your design (again) to presenting the Categories all in a Xara Vertical NavBar - easier to maintain:

jQuery - Multi-Pin Display with Xara NavBar.web

The para numbering you were concerned about was just Numbered Bullets.

Acorn

[letsgofishing]

LGF, I have tweaked your design (again) to presenting the Categories all in a Xara Vertical NavBar - easier to maintain:

jQuery - Multi-Pin Display with Xara NavBar.web

The para numbering you were concerned about was just Numbered Bullets.

Acorn

Thanks Acorn - almost going round to where I started with the drop down menus, but the much cleverer Jquery for the pointers.
Guess people will just have to live with pinch and zoom

[Initiostar]

Guess people will just have to live with pinch and zoom

@LGF _ I think you can still go with Acorn's navigation menu: have the map fill the browser window and call the menu when required: https://initiostar.co.uk/demo/zMap

When you select a shop, (using Acorn's code) it shows the pin on the map. I extended the code to close the menu and see the map fill the browser window, to make it more visible - you can of course still expand the map.

Having the menu and the map in the same space, avoids the possibility that a visitor selects a shop/pin, but has to scroll to the map to see that pin. This issue and others do not become obvious until you view a site on different mobiles. Also, to make the mobile version legible on a compact mobile, the font sizes needed to increase.

I also added header anchors to the shop index categories to allow the visitor to toggle between a pin on the map and its shop index category.

The code has been extended with the menu given a class name "places" and there is a toggle on the link "List Places" that shows and hides the menu.

Should you want the menus to be permanently visible, you may need to use scrollTo to ensure the map and pins are are always in view. I also turned on Scale-to-Fit-Width (maximum 640px).

Just a thought on usability.

Gary

[Egg Bramhill]

I agree with you Gary. The site is overly large with virtually two duplicated menu's, one leading to location icons and the other leading to web links. I've been trying to combine them into a single menu whereby clicking a single menu will lead to a map with location icon from where you can click the icon to link to the webpage.

Siran supplied a great FAQ's accordian which I've messed about with to create an accordian menu with url links which saves menu space in this case.

If I get the time I might try to combine it to a single action, press the menu button to show location then press the location icon to view their website.

DEMO

[letsgofishing]

@LGF _ I think you can still go with Acorn's navigation menu: have the map fill the browser window and call the menu when required: https://initiostar.co.uk/demo/zMap

When you select a shop, (using Acorn's code) it shows the pin on the map. I extended the code to close the menu and see the map fill the browser window, to make it more visible - you can of course still expand the map.

Having the menu and the map in the same space, avoids the possibility that a visitor selects a shop/pin, but has to scroll to the map to see that pin. This issue and others do not become obvious until you view a site on different mobiles. Also, to make the mobile version legible on a compact mobile, the font sizes needed to increase.

I also added header anchors to the shop index categories to allow the visitor to toggle between a pin on the map and its shop index category.

The code has been extended with the menu given a class name "places" and there is a toggle on the link "List Places" that shows and hides the menu.

Should you want the menus to be permanently visible, you may need to use scrollTo to ensure the map and pins are are always in view. I also turned on Scale-to-Fit-Width (maximum 640px).

Just a thought on usability.

Gary

Hi Gary
I was more or less playing with this over the weekend but not knowing Jquery, couldn't crack it - I was backto popups!.....this works well!

[letsgofishing]

I agree with you Gary. The site is overly large with virtually two duplicated menu's, one leading to location icons and the other leading to web links. I've been trying to combine them into a single menu whereby clicking a single menu will lead to a map with location icon from where you can click the icon to link to the webpage.

Siran supplied a great FAQ's accordian which I've messed about with to create an accordian menu with url links which saves menu space in this case.

If I get the time I might try to combine it to a single action, press the menu button to show location then press the location icon to view their website.

DEMO

LIke the accordian menu - thanks Egg and Siran!

[Initiostar]

Hi Gary
I was more or less playing with this over the weekend but not knowing Jquery, couldn't crack it - I was back to popups!.....this works well!

@LGF the standard menu provides an easy way to manage the navigation - I am guessing in your original design you may have created a popup for every shop (since that is how I think you originally managed the pins).

If you have that structure already, you could extend it to create a 'shop window' which pops-up immediately below the map: https://initiostar.co.uk/demo/zMap/

For each javascript link in the menu, I have added its corresponding popup (shop window).

Having each pin scroll to its category heading also gives you a 'kind-of' accordion operation, as does the sticky map return button which scrolls the map back into view.

The tricky bit here is you need the internal reference for each popup - I simply created reference list to keep track off the popups.

That's me done for maps

The real test with all this of course is to view it for usability on a mobile

Gary

[Acorn]

@LGF the standard menu provides an easy way to manage the navigation - I am guessing in your original design you may have created a popup for every shop (since that is how I think you originally managed the pins).
If you have that structure already, you could extend it to create a 'shop window' which pops-up immediately below the map: https://initiostar.co.uk/demo/zMap/
For each javascript link in the menu, I have added its corresponding popup (shop window).
Having each pin scroll to its category heading also gives you a 'kind-of' accordion operation, as does the sticky map return button which scrolls the map back into view.
The tricky bit here is you need the internal reference for each popup - I simply created reference list to keep track off the popups.
That's me done for maps
The real test with all this of course is to view it for usability on a mobile
Gary

Gary, a solid effort; the Shop Front is wizard as a concept.

It can be more readily implemented (without Layers) if you just add the same ClassName as the Pin so you have Pin/Shop Front. The Shop front needs a back-link to the map to complete the journey.
I set up a simple example of this with arrows and labels but you elevated it to its proper position.

I do like the red mannequin. It needs to be pointing.
I would personally go that little further and add an Anchor to every shop listing so on clicking the Pin the page srolls to the listing and the mannequin is there pointing.

Overall, I think this is a well-rounded approach that needs to be established as a Xara 'Map / You are Here' Template.

Acorn