2014-07-10 4 views
0

임 폰갭긴 제목 스크롤 이동

동적으로이 프로젝트로드 apges를 사용하여 안드로이드 이리저리 HTML5 버전의 응용 프로그램을 작성, 그래서 헤더에 제목을 때, 제목이 장치의 폭에 맞게 손질됩니다. 필자는 div에 태그를 삽입하고 style = "white-space : normal"이라는 태그를 삽입하여 다른 솔루션을 읽었지만 또 다른 효과를 얻고 싶습니다. 필자는 제목 표시 줄에서 볼 수 있듯이

나는이 예처럼, 제목이 왼쪽으로 이동하려면 : http://academyoftumblr.tumblr.com/post/10896016175/typing-moving-title-bar

H1 태그에 그 효과를 얻을 수있는 방법이 있나요? JqMobile를 사용하여 임 BTW

+0

당신은 그 요점을 놓칩니다. 장치의 너비보다 긴 경우 자동 스크롤하도록 h1 태그를 사용합니다. –

답변

0

오버 플로워 내용에서 생략 부호를 제거하기 위해 CSS이 추가 감사드립니다.

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

이 함수는 제목이 범람했는지 확인한 다음 해당 문자를 마킹합니다. 내가 여기에 사용하고

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

천막 기능은 this answer에서 온다.

또한 h1 태그의 ID "scrollingheader"를 만들어야합니다.

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

대신 헤더 div의 자식 h1을 가져올 수 있지만 간단하게 유지하려면 ID를 추가했습니다.

는 여기 JSFiddle입니다 : http://jsfiddle.net/fussycashew/wcuxS/494/

당신의 경우를 제외하고는 페이지 크기 조정에 대한 윤곽을 애니메이션을 적용 할 경우 확인하지만, 페이지가 정말 (크기 조정해서는 안 모바일에있는 고려 수 방향 변경).

또한 선택 윤곽 애니메이션은 사용자의 필요에 맞게 약간 정리할 수 있지만 시작해야합니다.

+0

정확하게 찾고자하는 것이 었습니다. 고맙습니다. 위대한 해결책 –

+0

나는 투표 할 것이다. 그러나 낮은 평판 때문에 아직 기울어진다 –