Long title scroll in HTML5 Jquery mobile

Question

Im writing an HTML5 app fro Android using PhoneGap

This project loads dynamically the apges, so when I have the title in header, the title gets trimmed to fit the device's width. Ive read other solution by inserting tag inside a div and also the style="white-space: normal" but I want to achieve another effect.

I want the title to scroll to the left, as Ive seen in title bars, like this example: http://academyoftumblr.tumblr.com/post/10896016175/typing-moving-title-bar

Is there a way to achieve that effect in a h1 tag? Im using JqMobile btw

Thank you

You miss the point. I want the h1 tag to autoscroll if it is longer than device's width — Ariel Bustillos, Jul 10 '14 at 23:28

score 0 · Accepted Answer · edited May 23 '17 at 10:26

Add this to your CSS to remove the ellipsis from overflown content.

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

This function will check if the title is overflowing, and marquee it if so.

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

The marquee function I'm using here comes from this answer.

You'll also need to make the h1 tag's ID "scrollingheader."

<div  data-role="header" ><h1 id="scrollingheader">Long Scrolling Header</h1></div>

It is possible to instead get a child h1 of the header div, but to keep things simple I've just added the ID.

Here's a JSFiddle: http://jsfiddle.net/fussycashew/wcuxS/494/

You could check if you want to animate the marquee on page resize, but considering you are on mobile, your page shouldn't really be resizing (except in the case of change of orientation).

Also, the marquee animation could be cleaned up a bit to fit your needs, but this should get you started.

Long title scroll in HTML5 Jquery mobile

1 Answers1