heldercervantes Posted December 24, 2015 Author Share Posted December 24, 2015 Check this out for the marker: http://www.heldercervantes.com/experiments/ifim/marker.html Pure CSS; Minimal markup, just the marker div with inline left and top position (can be % of course) and a span surrounding the number; The main marker div is just 1x1 pixels making the position accurate; Bubble is a ::before pseudo-element; Features active state just by adding/removing css class; Used plain red and green for colors. Can this be read from the theme's colors? 4 Link to comment Share on other sites More sharing options...
kongondo Posted December 24, 2015 Share Posted December 24, 2015 (edited) Guys, these are very nice! @heldercervantes, are you able to incorporate these into your original sketch please? Edited December 24, 2015 by kongondo Link to comment Share on other sites More sharing options...
tpr Posted December 24, 2015 Share Posted December 24, 2015 @heldercervantes Your bubbles are only designed to hold 1 character, isn't that too limiting? 1 Link to comment Share on other sites More sharing options...
kongondo Posted December 24, 2015 Share Posted December 24, 2015 Three characters min+max, I think. Link to comment Share on other sites More sharing options...
heldercervantes Posted December 26, 2015 Author Share Posted December 26, 2015 I've updated it on the original link: http://heldercervantes.com/experiments/ifim/ Added a behavior for turning the last marker green when clicked/dragged, and tested one with 999 for the number. Don't think anyone will ever need more than two digits though. I'm on a mac and don't have a pc for proper cross-browser testing, so let me know if you detect any problems. EDIT: Re-uploaded file after adding a little keyboard control, complete with shift-key for 10px skips. 1 Link to comment Share on other sites More sharing options...
rick Posted December 26, 2015 Share Posted December 26, 2015 heldercervantesWorks great on linux with FF, Chrome, and Opera 1 Link to comment Share on other sites More sharing options...
heldercervantes Posted January 7, 2016 Author Share Posted January 7, 2016 @kongondo Got a preliminary version I can test drive? I'm almost done building the website and need to put something together for that section. If not, I'll just slap in there a couple of fields for x and y. Link to comment Share on other sites More sharing options...
kongondo Posted January 7, 2016 Share Posted January 7, 2016 Sorry I got delayed with other stuff + sluggish coming off the holidays ...I'll put something up tonight or tomorrow morning.... 1 Link to comment Share on other sites More sharing options...
kongondo Posted January 8, 2016 Share Posted January 8, 2016 Sorry guys...Couldn't do this earlier and could not implement the latest marker designs (callout and tear drop [gmap]). CSS gave me a lot of grief so I stopped. Would appreciate if either of you could work out if/how all three marker styles could be available but still allow marker positions to remain in place, thanks! Started a support forum here: https://processwire.com/talk/topic/11863-module-imagemarker-fieldtype-inputfield/ Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now