@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
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
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
@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/zMapGuess people will just have to live with pinch and zoom
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
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
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
@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
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Bookmarks