CODEWITHSUNDEEP
javascripthtml
jbutler483
jbutler483

Reputation: 24559

How to generate an animated scrolling image effect

I am using The following snippet in order to create a scrolling textbox: 

<html>

<head>
  <style type="text/css">
    #scroll {
      position: absolute;
      white-space: nowrap;
      top: 0px;
      left: 200px;
    }
    #oScroll {
      margin: 0px;
      padding: 0px;
      position: relative;
      width: 200px;
      height: 20px;
      overflow: hidden;
    }
  </style>
  <script type="text/javascript">
    function scroll(oid, iid) {
      this.oCont = document.getElementById(oid)
      this.ele = document.getElementById(iid)
      this.width = this.ele.clientWidth;
      this.n = this.oCont.clientWidth;
      this.move = function() {
        this.ele.style.left = this.n + "px"
        this.n--
          if (this.n < (-this.width)) {
            this.n = this.oCont.clientWidth
          }
      }
    }
    var vScroll

    function setup() {
      vScroll = new scroll("oScroll", "scroll");
      setInterval("vScroll.move()", 20)
    }
    onload = function() {
      setup()
    }
  </script>
</head>

<body>
  <div id="oScroll">
    <div id="scroll">This is the scrolling text</div>
  </div>
</body>

</html>

however, I am looking to create a 'scrolling' image, and whenever I try to create an <img> tag within the 'This is the scrolling text' div, it doesn't show up on the page (at all).

I'm pretty new to javascript (ok, a complete novice) and would appreciate if anyone could inform me of a way of adding this image to this effect:

Lorry

I have been unable to find a way of creating something like this, other than creating my own gif image in photoshop/etc.

EDIT I tried using a marqee, however:

Using a Marquee

Upvotes: 0

Views: 409

Answers (2)

Turnip
Turnip

Reputation: 36642

If you want to use your existing code just alter the height of #oScroll in the CSS

<html>

<head>
  <style type="text/css">
    #scroll {
      position: absolute;
      white-space: nowrap;
      top: 0px;
      left: 200px;
    }
    #oScroll {
      margin: 0px;
      padding: 0px;
      position: relative;
      width: 200px;
      height: 200px;
      overflow: hidden;
    }
  </style>
  <script type="text/javascript">
    function scroll(oid, iid) {
      this.oCont = document.getElementById(oid)
      this.ele = document.getElementById(iid)
      this.width = this.ele.clientWidth;
      this.n = this.oCont.clientWidth;
      this.move = function() {
        this.ele.style.left = this.n + "px"
        this.n--
          if (this.n < (-this.width)) {
            this.n = this.oCont.clientWidth
          }
      }
    }
    var vScroll

    function setup() {
      vScroll = new scroll("oScroll", "scroll");
      setInterval("vScroll.move()", 20)
    }
    onload = function() {
      setup()
    }
  </script>
</head>

<body>
  <div id="oScroll">
    <div id="scroll"><img src="https://i.sstatic.net/P8i8o.png" /></div>
  </div>
</body>

</html>

Upvotes: 1

RobH
RobH

Reputation: 3612

If you want to add an image that is 128px high into your div, you also need to change the height of the containing element from 20px to 128px.

Here's your code working:

<html>

<head>
  <style type="text/css">
    #scroll {
      position: absolute;
      white-space: nowrap;
      top: 0px;
      left: 200px;
    }
    #oScroll {
      margin: 0px;
      padding: 0px;
      position: relative;
      width: 200px;
      height: 128px;
      overflow: hidden;
    }
  </style>
  <script type="text/javascript">
    function scroll(oid, iid) {
      this.oCont = document.getElementById(oid)
      this.ele = document.getElementById(iid)
      this.width = this.ele.clientWidth;
      this.n = this.oCont.clientWidth;
      this.move = function() {
        this.ele.style.left = this.n + "px"
        this.n--
          if (this.n < (-this.width)) {
            this.n = this.oCont.clientWidth
          }
      }
    }
    var vScroll

    function setup() {
      vScroll = new scroll("oScroll", "scroll");
      setInterval("vScroll.move()", 20)
    }
    onload = function() {
      setup()
    }
  </script>
</head>

<body>
  <div id="oScroll">
    <img id="scroll" src='https://i.sstatic.net/P8i8o.png' />
  </div>
</body>

</html>

Upvotes: 1

Related Questions