Operation Mobile

Posts about Design

jQuery Mobile UX: Add a back to top button

January 24 2012

In this post we’ll see how you can improve the user experience (UX) of your jQuery Mobile apps by adding a back to top button.

back top to demo on the iPhone

You can check out a demo of the back to top button here.

Just remember to resize your browser window so you have to scroll!

How does it improve the UX of your jQuery Mobile app?

No doubt you’ve been to a page on your mobile device where the only way to get back to the top of the page is to continuously keep swiping?

Using the jQuery Mobile scrollstart and scrollstop events we can show a back to top button whenever the user has scrolled to a position which is greater of their browsers viewport as shown in the mock up below.

back to top mock up

How to create the back to top button

The first step is to add a button element to the body and bind a click event to it.

$('body').append('<a href="" id="backToTop" data-role="button" data-icon="arrow-u" data-theme="b">Back to top</a>');
$('#backToTop').click(backToTop.click);

The click event is handled by a function which scrolls to the top of the document body element.

While we could use the jQuery Mobile silentScroll function to scroll to the top of the page, the animate function gives a nice smooth scroll.

click: function () {
    backToTop.hideBackToTopButton();
    $('html, body').animate({scrollTop: 0}, 800);
}

As we are dynamically adding an element to a jQuery Mobile page we need to call the trigger function.

$('body').trigger('create');

Next we bind the scrollstart event to a function to hide the button.

$(window).on('scrollstart', backToTop.scrollStart);

scrollStart: function () {
    $('#backToTop').hide();
}

The scrollstop event is bound to a function that checks if the Y offset is greater than the height of browsers’ viewport.

Fading the button is much smoother than just showing it.

$(window).on('scrollstop', backToTop.scrollStop);

scrollStop: function () {
    var windowHeight = $(window).height();
    if (window.pageYOffset > windowHeight) {
        $('#backToTop').fadeIn('slow');
    }
}

The final step is to hook up the code for the back to top button to the page.

$('#backToTopDemoPage').live('pageinit', function (event, ui) {
    backToTop.init();
});

For more about jQuery Mobile events check out the docs.

Styling the jQuery Mobile button

As jQuery Mobile has excellent theming support you can use a data theme HTML5 attribute to style the button.

The location of the button can be changed using CSS styles.

For example to show the button in the top left corner use the CSS

top: 0px;
left: 0px;

to show the button in the botton right corner set the CSS as below:

bottom: 0px;
right: 0px;

or a combination of both.

The complete code listing is shown below.

<!DOCTYPE html>
<html>
<head>
    <title>Back to top demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>    
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript">
        var backToTop = {
            init: function () {
                $('html, body').append('<a href="" id="backToTop" data-role="button" data-icon="arrow-u" data-theme="b">Back to top</a>');
                $('#backToTop').click(backToTop.click);
                $(window).bind('scrollstart', backToTop.scrollStart);
                $(window).bind('scrollstop', backToTop.scrollStop);
                $('body').trigger('create');
            },
            click: function () {
                $('html, body').animate({scrollTop: 0}, 800);
            },
            scrollStart: function () {
                $('#backToTop').hide();
            },
            scrollStop: function () {
                var windowHeight = $(window).height();
                if (window.pageYOffset > windowHeight) {
                    $('#backToTop').fadeIn('slow');
                }
            }
        };

        $('#backToTopDemoPage').live('pageinit', function (event, ui) {
            backToTop.init();
        });
    </script>
    <style type="text/css">
        #backToTop {
            position: fixed;
            top: 0px;
            left: 0px;
            display: none;
        }
    </style>
</head>
<body>
    <div data-role="page" id="backToTopDemoPage" data-theme="d">
        <div data-role="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</body>
</html>

In the next post we’ll be looking at how to creating a back to top jQuery Mobile plugin.

Mobile UX Tips – Don’t make users delete text in input fields

September 16 2011

Ever had to delete text in an input field before you can type in what you want to enter?

It’s a pain if you’re using a desktop browser but on a mobile or tablet browser it’s complete UX fail.

The good news is it’s an easy problem to solve.

If you’re a modern browser it probably supports the HTML5 placeholder attribute.

This allows you to show helpful text in the input field which disappears when the user focuses on it.

The HTML markup below shows how to use the placeholder attribute

<form>
    <input name="q" id="q" placeholder="Enter product name or number">
    <input type="submit" value="Search">
</form>

If your browser supports it, the text in the input field should disappear when you click or tab onto it.

So what happens if a browser doesn’t support HTML5 placeholders?

The user would just see an empty text input field (try opening this page in Internet Explorer for an example).

But this isn’t what we want.

Having text in the input field is helpful because it can help the user to understand what they can enter.

One possible workaround is to use jQuery to show and hide the ‘placeholder’ text when the user focuses on the input field.

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript">
        var searchText = 'Enter product name or number';
        $(document).ready(function() {
            $("#q").val(searchText);
            $("#q").focus(function() {
                if ($(this).val() === searchText) {
                    $(this).val('');
                }
            });
            $("#q").blur(function () {
                if ($(this).val() === '') {
                    $(this).val(searchText);
                }
            });
        });
    </script>
</head>
<body>
<form>
    <input name="q" id="q" placeholder="Enter product name or number">
    <input type="submit" value="Search">
</form>
</body>
</html>

which works like this

But using javascript to solve the issue means browsers that do support the placeholder attribute are forced to use the workaround as well…

Modernizer to the rescue

Using Modernizer we are able to detect browser features. This means we only use the jQuery workaround on browsers that don’t support the placeholder attribute.

Here’s the final code showing how to use modernizer and the jsfiddle page to try it out.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript">
        if (Modernizr.input.placeholder) {
        }
        else {
            var searchText = 'Enter product name or number';
            $(document).ready(function() {
                $("#q").val(searchText);
                $("#q").focus(function() {
                    if ($(this).val() === searchText) {
                        $(this).val('');
                    }
                });
                $("#q").blur(function () {
                    if ($(this).val() === '') {
                        $(this).val(searchText);
                    }
                });
            });
        }
    </script>
    <style type="text/css">
        body {
            padding: 10px;
        }

        #q {
            width: 280px;
        }
    </style>
</head>
<body>    
<form>
    <input name="q" id="q" placeholder="Enter product name or number">
    <input type="submit" value="Search">
</form>
</body>
</html>