Jump to content

How would you do this?


heldercervantes
 Share

Recommended Posts

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?
  • Like 4
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...