Question

I’m using Backbone and have the following view:

class GT.RunManager.Views.ViolationMarker extends Backbone.View
 className: 'violation-marker'

 template: JST['app/templates/violation_marker']

 initialize: (@options) ->
   @x = @options.x
   @y = @options.y
   @location = @options.location
   @render()

 render: =>
   @$el.html @template()
   @$el.data 'location', @location
   @$el.css
     'top': @y
     'left': @x
   this

Which is called from:

class GT.RunManager.Views.FloorplanView extends Backbone.View
  className: 'floorplan-view'

  events:
   'click .violation-marker' : 'edit_location'
   'click'  : 'create_location'

 initialize: (@options) ->
   @run = @options.run
   @student = @options.student
   @floorplan = @options.run.get('floorplan')
   @locations = new GT.RunManager.Collections.Locations()
   @locations.run = @options.run
   @locations.on 'add', @set_marker
   @locations.on 'reset', @load_markers

 @run.on 'remove_location', (location) =>
   location.destroy() if location
   @load_markers()

 @locations.fetch data: { student_id: @student.id }
 @render()

render: =>
  if @floorplan
    @$el.css 'background-image', "url(data:image/png;base64,#{@floorplan.url})"
  this    

create_location: (e) =>
  @locations.create x: e.offsetX - 10, y: e.offsetY - 10, student_id: @student.id, run_id: @run.id

load_markers: =>
  @$el.find('i').remove()
  @locations.each (location) => @set_marker(location, false)

set_marker: (location, prompt = true) =>
  marker = new GT.RunManager.Views.ViolationMarker(location: location, x: location.get('x'), y: location.get('y'))
  @$el.append marker.el
  if prompt
    @run.trigger 'violations:set', location

The idea is to position an icon on the screen where the user touched it (on an iPad, for exp). It works great in Chrome and Safari, but not in Firefox, in which the icon is instead placed in the top left corner of the parent div.

Any ideas?

EDIT: This backbone view is styled with the following css:

div.violation-marker {
position: absolute;
background-color: red;
@include border-radius(6px);
padding: 4px;}

The template is just (bootstrap):

<i class="icon icon-fire icon-white"></i>

And the parent div is styled with:

.floorplan-view {
position: relative;
float: left;
margin-left: 100px;
width: 755px;
height: 755px; }      

Answer 1

Turns out the problem is that Firefox does not handle e.offsetX and e.offsetY. As soon as I changed the way I captured the location everything worked fine. Here is the Firefox-proof version of grabbing the x-coord:

x = (ev.offsetX || ev.clientX - $(ev.target).offset().left)

Thanks for all the help.