7

I am designing web page where I need to move text from left side of monitor screen to right side of screen. I have tried with <marquee> tag. It is working without any error.

My requirement is whenever text is about to disappear inside right side of web page it should start coming out from left side of page. It should not wait for all text to disappear and then start from left side.

Till now I have been doing it using <html> only. Please suggest other ways also.

John Dvorak
  • 26,799
  • 13
  • 69
  • 83
Prathamesh
  • 81
  • 5
  • @Whoever voted for it to be close. Could you explain why you think it's not a real question so the OP can improve it. – Ash Burlaczenko Oct 30 '12 at 15:25
  • Don't know who closed it but `` is a non-standard tag. It is deprecated by the W3C and not advised by them for use in any HTML documents. – Andy Oct 30 '12 at 15:28
  • 2
    possible duplicate of [Javascript Marquee to replace tags](http://stackoverflow.com/questions/337330/javascript-marquee-to-replace-marquee-tags) – Alohci Oct 30 '12 at 15:38
  • I think people go to this site because they don't have the correct answer, not a personal attack, just saying having a nonstandard tag in the question hardly warrants a question close. – VoronoiPotato Oct 30 '12 at 15:39
  • It might be possible with CSS3 transformations as well. – John Dvorak Oct 30 '12 at 15:43

1 Answers1

3

It is possible using Javascript:

Have two copies of the text being scrolled separated by the width of the container. Animate from (left copy visible) to (right copy visible), then jump back and repeat.

Something along the lines of (untested, using jQuery):

<div class="outer">
  <div class="inner">
     some text
  </div>
</div>

css:

.outer, .inner {
  width: 100%;
}
.outer {
  position: relative;
  overflow: hidden;
}
.inner {
  position: absolute;
}

js:

(function rerun(){
  var time = 10000 //ms

  $(".inner").slice(0,-1).remove()
  $i1=$(".inner")
  $i2=$i1.clone()

  $i1.css({left:0}).animate({left:"-100%"}, time)
  $i2.insertAfter($i1).css({left:"100%"}).animate({left:0}, time, rerun)
})()

This way the text should start appearing on the right side as soon as it starts disappearing on the right side. Modify the relative widths to achieve a different effect.

John Dvorak
  • 26,799
  • 13
  • 69
  • 83
  • this thing is flying way too fast, and the scroll bar for the page is constantly going crazy using it too =/ – Maslow Jan 18 '13 at 16:14
  • @Maslow scroll bar fixed with `overflow: hidden`; admittably, the default scrolling time of 600 miliseconds was a bit too short too. Thanks for noticing – John Dvorak Jan 18 '13 at 16:47