jQuery Mobile 2-page Base Fiddle

by Noah Ratcliff

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div data-role="page" id="p1">
    <div data-role="header">
        <h1 id="scrollingheader">Long Scrolling Header</h1>
    </div>
    <div data-role="content"> <a href="#p2" data-role="button">Go To Page 2</a>

    </div>
    <div data-role="footer">
        <h4>Footer</h4>
    </div>
</div>
<div data-role="page" id="p2">
    <div data-role="header" data-rel="back">
        <h1>Header Page 2</h1>
    </div>
    <div data-role="content">
        <p>This is page2</p>
    </div>
    <div data-role="footer">
        <h4>Footer</h4>
    </div>
</div>

CSS

.ui-header .ui-title {
    text-overflow: clip;
}

JavaScript

function assessSize() {
    if ($('#scrollingheader').width() < $('#textwidth').width()) {
        $('#scrollingheader').marquee();
    }
}

/*source: http://stackoverflow.com/a/10547997/1492116 */ (function ($) {
    $.fn.textWidth = function () {
        var calc = '<span style="display:none">' + $(this).text() + '</span>';
        $('body').append(calc);
        var width = $('body').find('span:last').width();
        $('body').find('span:last').remove();
        return width;
    };

    $.fn.marquee = function (args) {
        var that = $(this);
        var textWidth = that.textWidth(),
            offset = that.width(),
            width = offset,
            css = {
                'text-indent': that.css('text-indent'),
                    'overflow': that.css('overflow'),
                    'white-space': that.css('white-space')
            },
            marqueeCss = {
                'text-indent': width,
                    'overflow': 'hidden',
                    'white-space': 'nowrap'
            },
            args = $.extend(true, {
                count: -1,
                speed: 1e1,
                leftToRight: false
            }, args),
            i = 0,
            stop = textWidth * -1,
            dfd = $.Deferred();

        function go() {
            if (!that.length) return dfd.reject();
            if (width == stop) {
                i++;
                if (i == args.count) {
                    that.css(css);
                    return dfd.resolve();
                }
                if (args.leftToRight) {
                    width = textWidth * -1;
                } else {
                    width = offset;
                }
            }
            that.css('text-indent', width + 'px');
            if (args.leftToRight) {
                width++;
            } else {
                width--;
            }
            setTimeout(go, args.speed);
        };
        if (args.leftToRight) {
            width = textWidth *...