1
2
3
4
5
6
7
8
9

<div id="marquee_replacement" onmouseout="startit();" onmouseover="stop();">
<p class="spacer"></p>
<p>Lorem ipsum dolor sit amet consectetur enim proident in elit est. Culpa sit ad aliquip laboris sit ad tempor in dolore proident. Ut ut deserunt laboris ut exercitation sit consectetur nisi sunt incididunt. Nisi non et qui adipisicing labore tempor consequat anim id dolore. Veniam velit aliquip laborum. cillum dolor amet sed dolore laborum. in. Magna deserunt veniam anim ut deserunt est ut ut.</p>
<p>Aute enim quis duis exercitation magna cupidatat ullamco duis voluptate ullamco. Ad eu est in commodo occaecat mollit officia sit elit excepteur. Elit sint duis excepteur reprehenderit consequat cupidatat quis esse occaecat elit. Officia tempor laborum. dolore dolore nulla ea adipisicing pariatur irure deserunt. Enim ullamco mollit ut eu lorem elit ex sit cillum pariatur. Laboris laboris tempor ex ad officia eu.</p>
<p>Elit est laboris nisi nostrud incididunt exercitation qui in excepteur eiusmod. Exercitation eu occaecat mollit amet esse enim consectetur non veniam occaecat. Ea occaecat commodo dolore sunt ullamco veniam incididunt aliqua labore minim. Velit et amet nulla consectetur enim eiusmod enim ut in cupidatat. Velit do excepteur dolor sed nostrud cillum ad ea veniam sint. Culpa ex sed esse exercitation sed do in lorem ea proident. Ullamco labore.</p>
<p>Eiusmod id quis exercitation officia sit aliquip enim in in aliquip. Lorem adipisicing officia elit pariatur proident ut irure aute id dolor. Tempor cillum non dolore lorem enim in velit et pariatur consequat. Excepteur ad ex fugiat est esse dolore consectetur ut ut dolor. Mollit consequat culpa laborum. aliquip sunt nostrud dolore consequat cillum labore. Dolor officia lorem do sunt nostrud aliqua velit voluptate.</p>
<p>Eiusmod id quis exercitation officia sit aliquip enim in in aliquip. Lorem adipisicing officia elit pariatur proident ut irure aute id dolor. Tempor cillum non dolore lorem enim in velit et pariatur consequat. Excepteur ad ex fugiat est esse dolore consectetur ut ut dolor. Mollit consequat culpa laborum. aliquip sunt nostrud dolore consequat cillum labore. Dolor officia lorem do sunt nostrud aliqua velit voluptate.</p>
<p class="spacer"></p>
</div>

1
2
3
4
5
6
7
8
9
10
11

<style type="text/css">
#marquee_replacement{
 border:1px solid #000;
 width:200px;
 height:150px;
 overflow:auto;
}
#marquee_replacement p.spacer{
 height:150px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<script type="text/javascript">
// <!--
var speed = 5; // change scroll speed with this value
/**
 * Initialize the marquee, and start the marquee by calling the marquee function.
 */
function init(){
  var el = document.getElementById("marquee_replacement");
  el.style.overflow = 'hidden';
  scrollFromBottom();
}
 
var go = 0;
var timeout = '';
/**
 * This is where the scroll action happens.
 * Recursive method until stopped.
 */
function scrollFromBottom(){
  clearTimeout(timeout);
  var el = document.getElementById("marquee_replacement");
  if(el.scrollTop >= el.scrollHeight-150){
    el.scrollTop = 0;
  };
  el.scrollTop = el.scrollTop + speed;
  if(go == 0){
    timeout = setTimeout("scrollFromBottom()",50);
  };
}
 
/**
 * Set the stop variable to be true (will stop the marquee at the next pass).
 */
function stop(){
  go = 1;
}
 
/**
 * Set the stop variable to be false and call the marquee function.
 */
function startit(){
  go = 0;
  scrollFromBottom();
}
// -->
</script>

1
2
3
4
5
6
7

<div id="marquee_replacement" onmouseout="startit();" onmouseover="stop();">
<div id="start"><p class="spacer"></p>
<p>Lorem ipsum dolor sit amet consectetur enim proident in elit est. Culpa sit ad aliquip laboris sit ad tempor in dolore proident. Ut ut deserunt laboris ut exercitation sit consectetur nisi sunt incididunt. Nisi non et qui adipisicing labore tempor consequat anim id dolore. Veniam velit aliquip laborum. cillum dolor amet sed dolore laborum. in. Magna deserunt veniam anim ut deserunt est ut ut.</p>
<p>Aute enim quis duis exercitation magna cupidatat ullamco duis voluptate ullamco. Ad eu est in commodo occaecat mollit officia sit elit excepteur. Elit sint duis excepteur reprehenderit consequat cupidatat quis esse occaecat elit. Officia tempor laborum. dolore dolore nulla ea adipisicing pariatur irure deserunt. Enim ullamco mollit ut eu lorem elit ex sit cillum pariatur. Laboris laboris tempor ex ad officia eu.</p>
<p class="spacer"></p>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<style type="text/css">
#marquee_replacement{
 border:1px solid #000;
 width:1000px;
 height:20px;
 overflow:auto;
}
 
#marquee_replacement div#start p{
 padding:0;
 margin:0;
 left:0;
 width:auto;
 display:inline;
 float:left;
 white-space: nowrap;
 height:15px;
}
 
#marquee_replacement div#start p.spacer{
 width:1100px;
}
 
#marquee_replacement div#start{
 display:block;
 height:10px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

<script type="text/javascript">
// <!--
var pWidth = 0;
var speed = 5; // change scroll speed with this value
/**
 * Get a collection of all of the objects of a particular type, can pass in an object that they should be collected from.
 */
function getElementsByTagNames(list,obj) {
  if (!obj) var obj = document;
  var tagNames = list.split(',');
  var resultArray = new Array();
  for (var i=0;i<tagNames.length;i++) {
    var tags = obj.getElementsByTagName(tagNames[i]);
    for (var j=0;j<tags.length;j++) {
      resultArray.push(tags[j]);
    };
  };
  var testNode = resultArray[0];
  if(!testNode){
    return [];
  };
  if(testNode.sourceIndex){
    resultArray.sort(function(a,b){
      return a.sourceIndex - b.sourceIndex;
    });
  }else if(testNode.compareDocumentPosition){
    resultArray.sort(function(a,b){
      return 3 - (a.compareDocumentPosition(b) & 6);
    });
  };
  return resultArray;
}
 
/**
 * Initialize the marquee, and start the marquee by calling the marquee function.
 */
function init(){
  var div = document.getElementById("marquee_replacement");
  div.style.overflow = 'hidden';
  
  var ps = getElementsByTagNames('p',div);
  for(var j=0;j<ps.length;j++){
    pWidth += ps[j].offsetWidth;
  }
 
  var startdiv = document.getElementById("start");
  startdiv.style.width = pWidth+'px';
  div.scrollLeft = 0;
  setTimeout("scrollFromBottom()",50);
}
 
var go = 0;
var timeout = '';
 
/**
 * This is where the scroll action happens.
 * Recursive method until stopped.
 */
function scrollFromSide(){
  clearTimeout(timeout);
  var el = document.getElementById("marquee_replacement");
  if(el.scrollLeft >= pWidth-1000){
    el.scrollLeft = 0;
  };
  el.scrollLeft = el.scrollLeft+speed;
  if(go == 0){
    timeout = setTimeout("scrollFromSide()",50);
  };
}
 
/**
 * Set the stop variable to be true (will stop the marquee at the next pass).
 */
function stop(){
  go = 1;
  timeout = '';
}
 
/**
 * Set the stop variable to be false and call the marquee function.
 */
function startit(){
  go = 0;
  scrollFromSide();
}
// -->
</script>

1
2
3

if(el.scrollTop >= el.scrollHeight-150){
 el.scrollTop = 0;
};