3

http://jsfiddle.net/MeoMix/8zg2V/83/

I've got the following jsFiddle. The idea is that when a context menu item which is too long is displayed, it renders with ellipsis, but on mouseover it pans through the text.

The code in question:

//Provides helper methods for non-specific functionality.
define('helpers', [], function () {
    'use strict';

    return {
        scrollElementInsideParent: function(element, parent) {
            //  Scroll the element if its too long to read.
            $(element).mouseover(function () {

                var distanceToMove = $(this).width() - $(parent).width();

                console.log("My width and parent width:", $(this).width(), $(parent).width());

                $(this).animate({
                    marginLeft: "-" + distanceToMove + "px"
                }, {
                    //  Just a feel good value; scales as the text gets longer
                    duration: 15 * distanceToMove,
                    easing: 'linear'
                });

            }).mouseout(function () {
                $(this).stop(true).animate({ marginLeft: 0 });
            });
        }
    };

Here I log the element being scrolled upon's width as well as its parents width. The console outputs:

My width and parent width: 360 230

but this seems incorrect when looking at the metrics:

enter image description here

Why is this?

Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
  • @Ian The 's width exceeds the li element. The reports having a width of 360px. I am panning the inside of the
  • element.
    • – Sean Anderson Jul 18 '13 at 16:10
  • http://stackoverflow.com/questions/349705/total-width-of-element-including-padding-and-border-in-jquery – Chad Jul 18 '13 at 16:12
  • 1
    @SeanAnderson Maybe I'm misunderstanding again. Let me look again – Ian Jul 18 '13 at 16:12
  • @Ian you are correct: `$(this).parent().width()` returns 200 – A. Wolff Jul 18 '13 at 16:14
  • @SeanAnderson You're not an idiot. A simple overlooking. I'd expect `parent` to be a parent of `this` too, but at the same time, why would they bother passing it when you could easily use `$(this).parent()`? Maybe it's defined better in the docs (I'm too lazy too look) – Ian Jul 18 '13 at 16:16