« »

The powers jsB@nk would like to tell in this JavaScript text scroller are JavaScript OOP skills, this news scroller JavaScript script is coded in JavaScript OOP technologies with full detailed documentation/instructions.

You can create as many JavaScript web scrollers as you want with unlimited blocks of HTML; besides, you're able to change scrolling options easily, such as: speed, positions, delay time, etc for each div scroller. The script will also pause on mouseover , and resume scrolling on mouseout. Since it scrolls HTML instead of just image scrollers, you can include just about anything that can be ordinarily placed in a static HTML document: links, images, graphics, tables, backgrounds, etc.

Label: JavaScript text scroller, news scroller JavaScript, JavaScript web scroller, div scroller, image scroller, vertical scroller JavaScript, JavaScript text scrolling

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
 #scr1 div {
  visibility:hidden;
 }
 #scr1, #scr1 div.default {
   width:160px;
   height:120px;
   overflow:hidden;
   visibility:visible;
 }
 #scr1 table tr td div {
  visibility:visible;
 }

 #scr1 {
   background-color:#fff;
   margin:0px auto;
   font-size: .8em;
 }

</style>

Copy All x2

<script type="text/javascript">
// Created by: Brian Huisman | http://www.greywyvern.com/
// This script downloaded from www.JavaScriptBank.com

/* ********************************************************************
* HTML Block Scroller & Marquee JavaScript - v2.0
*  - Copyright 2008 - Licenced for free distribution under the BSDL
*  -     http://www.opensource.org/licenses/bsd-license.php
*
* Have one or more scrolling blocks of HTML anywhere on your webpages.
* The scroller will even pause on mouseover and resume on mouseout.
*
* Version 2.0
*   - Uses DOM-only methods (compatible with application/xhtml+xml)
*   - Blocks are created in the HTML page, rather than as JS variables
*   - Automatic startup on page load

***********************************************************************
*** Instructions ******************************************************
***********************************************************************
* 1. Create the container for the scroller in the body of your HTML:
*
* <div id="scr1"></div>
*
* Where "scr1" is any name you choose.  You don't have to use a <div>
* either.  You may use any block level element that can be pixel
* resized; such as a <span> element to which the display:block; CSS
* property has been applied.
*
***********************************************************************
* 2. Fill the scroller container with child <div> blocks:
*
* <div id="scr1">
*   <div class="default">
*     The contents of this block will be displayed if the browser does
*     not support the scroller.
*     It will be overwritten if the scroller is supported.
*   </div>
*   <div>Block 2</div>
*   <div>Block 3</div>
*
*   ...
*
* </div>
*
* Assign the class "default" to the first block, the one which you
* would like displayed if javascript is disabled.
*
***********************************************************************
* 3. Add the following rule(s) to your CSS stylesheet:
*
* #scr1 div {
*  visibility:hidden;
* }
* #scr1, #scr1 div.default {
*   width:160px;
*   height:120px;
*   overflow:hidden;
*   visibility:visible;
* }
* #scr1 table tr td div {
*  visibility:visible;
* }
*
* Change both "scr1" to the id you gave to the scroller container.  The
* width and height properties should match those you will use in step 4.
*
* To further style the scroller container, assign CSS properties to the
* scroller target id:
*
* #scr1 {
*   background-color:#f6f6f6;
*   margin:0px auto;
* }
*
* The script will replace each block you add to the container with a
* single-celled <table>. So to style the blocks of your scroller, you
* can style these table cells as if they were actually part of your
* document source:
*
* #scr1 table tr td {
*   padding:10px;
*   color:#ff0000;
*   text-align:center;
*   vertical-align:middle;
* }
*
***********************************************************************
* 4. Create a new scrollObject:
*
* new scrollObject("scr1", 120, 120, "up", 5000, 1.4);
*
* The arguments for this object are as follows:
*  a. - ID of the target tag (from step 1)
*  b. - Width (in pixels) of your scroller
*  c. - Height (in pixels) of your scroller
*  d. - Scroll direction: one of "up", "down", "left" or "right"
*  e. - Amount of time to pause before next scroll begins (ms)
*  f. - Slide-in speed of your scroller (1.001 up to width or height)
*
***********************************************************************
*** To add more scrollers to the same page: ***************************
***********************************************************************
* 1. Create additional containers - with different ID's - and blocks in
*    the body of your HTML
*
* <div id="scr2">
*   <div class="default"><strong>HTML is allowed too!</strong></div>
*   <div><img src="/images/mybanner.jpg" alt=""></div>
*   <div><a href="/home">And links!</a></div>
*   <div>As long as it fits within the dimensions above</div>
* </div>
*
* <div id="scr3">
*   <div class="default">Block 1</div>
*   <div>Block 2</div>
*   <div>Block 3</div>
*   <div>Block 4</div>
* </div>
*
***********************************************************************
* 2. Add the matching rules to your CSS stylesheet
*
* #scr2 div,
* #scr3 div {
*  visibility:hidden;
* }
* #scr2, #scr2 div.default {
*   width:468px;
*   height:60px;
*   overflow:hidden;
*   visibility:visible;
* }
* #scr3, #scr3 div.default {
*   width:140px;
*   height:140px;
*   overflow:hidden;
*   visibility:visible;
* }
* #scr2 table tr td div,
* #scr3 table tr td div {
*  visibility:visible;
* }
*
***********************************************************************
* 3. Create new scrollObjects for each scroller in the <script> tag:
*
* new scrollObject("scr2", 468, 60, "down", 10000, 1.2);
* new scrollObject("scr3", 140, 140, "right", 4000, 2);
*
***********************************************************************
*** End Instructions **************************************************
*************************************************** BEGIN CODE ***** */



/* *****
 * See http://www.greywyvern.com/code/js/scroller.html for the page
 * which uses the example scrollers below
 *
 */


// ***** Start scroller #1
new scrollObject("scr1", 160, 120, "up", 5000, 1.15);

// ***** Start scroller #2
new scrollObject("scr2", 468, 60, "left", 3000, 1.5);




/* ********************************************************************
 * The Mighty ScrollObject
 *   - Don't edit this if you know what's good for ya!
 *
 */
function scrollObject(main, width, height, direct, pause, speed) {
  var self = this;
  this.main = main;
  this.width = width;
  this.height = height;
  this.direct = direct;
  this.pause = pause;
  this.speed = Math.max(1.001, Math.min((direct == "up" || direct == "down") ? height : width, speed));
  this.slope = (direct == "up" || direct == "left") ? 1 : -1;
  this.prev = this.offset = 0;
  this.curr = 1;
  this.mouse = false;
  this.scroll = function() {
    this.main = document.getElementById(this.main);
    this.main.style.overflow = "hidden";
    this.main.style.position = "relative";
    this.main.style.width = this.width + "px";
    this.main.style.height = this.height + "px";
    var b = [], c;
    while (this.main.firstChild) if ((c = this.main.removeChild(this.main.firstChild)).nodeName == "DIV") b.push(c);
    for (var x = 0; x < b.length; x++) {
      var table = document.createElement('table');
          table.cellPadding = table.cellSpacing = table.border = "0";
          table.style.position = "absolute";
          table.style.left = table.style.top = "0px";
          table.style.width = table.style.height = "100%";
          table.style.overflow = table.style.visibility = "hidden";
        var tbody = document.createElement('tbody');
          var tr = document.createElement('tr');
            var td = document.createElement('td');
              while (b[x].firstChild)
                  td.appendChild(b[x].removeChild(b[x].firstChild));
              tr.appendChild(td);
            tbody.appendChild(tr);
          table.appendChild(tbody);
      this.main.appendChild(table);
    } b = c = null;
    if (this.main.childNodes.length > 1) {
      this.main.onmouseover = function() { self.mouse = true; };
      this.main.onmouseout = function() { self.mouse = false; };
      setInterval(function() {
        if (!self.offset && self.scrollLoop()) self.main.childNodes[self.curr].style.visibility = "visible";
      }, this.pause);
    } this.main.childNodes[this.prev].style.visibility = "visible";
  };
  this.scrollLoop = function() {
    if (!this.offset) {
      if (this.mouse) return false;
      this.offset = (this.direct == "up" || this.direct == "down") ? this.height : this.width;
    } else this.offset = Math.floor(this.offset / this.speed);
    if (this.direct == "up" || this.direct == "down") {
      this.main.childNodes[this.curr].style.top = (this.offset * this.slope) + "px";
      this.main.childNodes[this.prev].style.top = ((this.offset - this.height) * this.slope) + "px";
    } else {
      this.main.childNodes[this.curr].style.left = (this.offset * this.slope) + "px";
      this.main.childNodes[this.prev].style.left = ((this.offset - this.width) * this.slope) + "px";
    }
    if (!this.offset) {
      this.main.childNodes[this.prev].style.visibility = "hidden";
      this.prev = this.curr;
      if (++this.curr >= this.main.childNodes.length) this.curr = 0;
    } else setTimeout(function() { self.scrollLoop(); }, 30);
    return true;
  };
  if (window.addEventListener) {
    window.addEventListener('load', function() { self.scroll(); }, false); 
  } else if (window.attachEvent)
    window.attachEvent('onload', function() { self.scroll(); });
}
</script>

Copy All x2

<div id="scr1">

<div class="default"><i>The JavaScript Bank</i> is an excellent JavaScript resource.</div>
<div><b>Want some recognition for your scripts?</b><br><a href="http://javascriptbank.com/submit/">Submit them to us</a> and they can be featured on JavaScript Source!</div>
<div>Three times a week we add a new script or tutorial to our archives.</div>

</div>

Comment (6)
Write

by write my essay, 17/03/2011 05:03 PM
Thanks Reply

Good, really good site about html. Your blog is very useful, I think I would follow you in future. Thanks

by Cao Phong, 17/03/2011 08:03 PM
Reply

oh no, don't need to wait till tomorrow, follow me on <url="http://www.twitter.com/js_bank">twitter</url> & <url="http://www.facebook.com/jsbank">facebook</url> NOW for free

by son0nline, 22/03/2011 09:03 AM
thank Reply

thank
how to display more news?

by Cao Phong, 22/03/2011 02:03 PM
can you explain? @ son0nline Reply

I don't understand what you're wanting? you're wanting to show more than 1 item in the same time? or setup more than 1 scoller? or what?

by son0nline, 25/03/2011 01:03 AM
yes @ Cao Phong Reply

yes I want to show more than 1 item in the same time.

like: news 1, news 2, news 3,
and then: news 2, news 3, news 4,

by Cao Phong, 25/03/2011 06:03 PM
@ son0nline Reply

hi

really the core-JavaScript of this code designed for showing 1 item per session; it doesn't have any setting to show more 1 item

so I think you should try another alternations on jsB@nk; or you can use jQuery+vTicker; I'm using this for <url="http://www.danhngon.info">DanhNgon.info</url> and I see it's so good >

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

14/03/2011
Brian Huisman [more]
9,913
6
31
0
12.38 KBytes

Powerful JavaScript OOP for HTML Scroller - Language: English

4/5 31 votes / 9,913 previews / 6 comment 14/03/2011 The powers jsB@nk would like to tell in this JavaScript text scroller are JavaS...Powerful JavaScript OOP for HTML Scroller - Powerful JavaScript OOP for HTML Scroller - Language: English

beheogioivo zerokenda[2] Killer.VnGeneral babe1907 RAO247.VN xx3004 Cao Phong[7]