Scoll text with flash scroll bar : Scroll « GUI Components « JavaScript DHTML

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » GUI Components » Scroll 
Scoll text with flash scroll bar
 
 <html>
<head>
  <title>youngpup.net: ypSimpleScroll demo</title>
  <script language="javascript">
/* =======================================================
 * ypSimpleScroll
 * 3/11/2001
 
// dhtml scrolling panel featuring scrolling in any
// direction, smooth frame-dropping animation, and a
// few other goodies.
//
// 3/25/2001
// added scrolling in any direction and initTop, initLeft
// constructor parameters - with only 1k...
//
// 3/30/2001
// fixed bug that occured when if you called scrollTo( )
// and the new position was the same as the current
// position. that was stupid.
//
// 4/02/2001
// small bug fix - on some browsers, on slow connections
// the script would not run at all. to be sure the doc
// is done loading before .load() is called, the author
// must now call the .load() method in the onload handler
// for the page.
//
// 8/22/2001
// if you tried to scroll before page was loaded it threw
// an error. this should be fixed now.
// 
//
 * http://www.youngpup.net/
//
// =======================================================
// ypSimpleScroll(  id, left, top, width, height, speed, 
//          contentWidth, initScrollLeft, 
//          initScrollTop  )
//
// last three parameters are optional.
 * ======================================================= */


// basic methods.
ypSimpleScroll.prototype.scrollNorth = function() { this.startScroll(90) }
ypSimpleScroll.prototype.scrollSouth = function() { this.startScroll(270)  }
ypSimpleScroll.prototype.scrollWest  = function() { this.startScroll(180) }
ypSimpleScroll.prototype.scrollEast  = function() { this.startScroll(0)   }


// start scrolling in an arbitrary direction, with an optional arbitrary speed.
// if no speed is provided, the default speed from the constructor parameter is used.
ypSimpleScroll.prototype.startScroll = function(deg, speed) {
  if (this.loaded)
  {
    if (this.aniTimerwindow.clearTimeout(this.aniTimer)
    this.overrideScrollAngle(deg)

    this.speed    = speed ? speed : this.origSpeed
    this.lastTime = (new Date()).getTime() this.y.minRes
    this.aniTimer = window.setTimeout(this.gRef + ".scroll()"this.y.minRes)
  }
}

// kills pending calls to .scroll(), resets speed
ypSimpleScroll.prototype.endScroll = function() {
  if (this.loaded)
  {
    window.clearTimeout(this.aniTimer)
    this.aniTimer = 0;
    this.speed = this.origSpeed
  }
}

// override the current angle from startScroll() with a new angle
// this method should not be used with scrollTo() because it will
// override the angle created by the first two params to scrollTo().
ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
  if (this.loaded)
  {
    deg = deg % 360
    if (deg % 90 == 0) {
      var cos = deg == 0  : deg == 180 ? -0
      var sin = deg == 90 ? -: deg == 270 0
    else {
      var angle = deg * Math.PI / 180
      var cos   = Math.cos(angle)
      var sin   = Math.sin(angle)
      sin = -sin
    }
    this.fx = cos / (Math.abs(cos+ Math.abs(sin))
    this.fy = sin / (Math.abs(cos+ Math.abs(sin))
    this.stopH = deg == 90 || deg == 270 this.scrollLeft : deg < 90 || deg > 270 this.scrollW : 0
    this.stopV = deg == || deg == 180 this.scrollTop : deg < 180 this.scrollH
  }
}

// override the speed for the current scroll.
// should not be used with scrollTo, unless you want to 
// override the speed computed from the aniLen param of scrollTo()
ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
  if (this.loadedthis.speed = speed
}

// scroll to an arbitrary position in two dimensions over in
// an arbitrary lenth of time.
ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
  if (this.loaded)
  {
    if (stopH != this.scrollLeft || stopV != this.scrollTop) {
      if (this.aniTimerwindow.clearTimeout(this.aniTimer)
      this.lastTime = (new Date()).getTime()
      var dx = Math.abs(stopH - this.scrollLeft)
      var dy = Math.abs(stopV - this.scrollTop)
      var d = Math.sqrt(Math.pow(dx,2+ Math.pow(dy,2))
      this.fx = (stopH - this.scrollLeft(dx + dy)
      this.fy = (stopV - this.scrollTop(dx + dy)
      this.stopH = stopH
      this.stopV = stopV
      this.speed = d / aniLen * 1000
      window.setTimeout(this.gRef + ".scroll()"this.y.minRes)
    }
  }
}

// jump to an arbitrary position in two dimensions.
ypSimpleScroll.prototype.jumpTo = function(nx, ny) { 
  if (this.loaded)
  {
    nx = Math.min(Math.max(nx, 0)this.scrollW)
    ny = Math.min(Math.max(ny, 0)this.scrollH)
    this.scrollLeft = nx
    this.scrollTop = ny
    if (this.y.ns4)this.content.moveTo(-nx, -ny)
    else {
      this.content.style.left = -nx + "px"
      this.content.style.top = -ny + "px"
    }
  }
}



// =========================================================================
// =============================== private =================================
// =========================================================================

ypSimpleScroll.minRes = 10
ypSimpleScroll.ie  = document.all ? 0
ypSimpleScroll.ns4 = document.layers ? 0
ypSimpleScroll.dom = document.getElementById ? 0
ypSimpleScroll.mac = navigator.platform == "MacPPC"
ypSimpleScroll.mo5 = document.getElementById && !document.all ? 0

// recursively calls itself to animate
ypSimpleScroll.prototype.scroll = function() {
  this.aniTimer = window.setTimeout(this.gRef + ".scroll()"this.y.minRes)
  var nt = (new Date()).getTime()
  var d = Math.round((nt - this.lastTime1000 this.speed)
  if (d > 0)
  {
    var nx = d * this.fx + this.scrollLeft
    var ny = d * this.fy + this.scrollTop

    var xOut = (nx >= this.scrollLeft && nx >= this.stopH|| (nx <= this.scrollLeft && nx <= this.stopH)
    var yOut = (ny >= this.scrollTop && ny >= this.stopV)  || (ny <= this.scrollTop && ny <= this.stopV)
    //window.status = nx + " " + this.fx + " " + this.scrollLeft + " " + this.stopH + " | " + ny + " " + this.fy + " " + this.scrollTop + " " + this.stopV + " : " + d
    if (nt - this.lastTime != &&
      ((this.fx == && this.fy == 0||
       (this.fy == && xOut||
       (this.fx == && yOut||
       (this.fx != && this.fy != && xOut && yOut)))
    {
      this.jumpTo(this.stopH, this.stopV)
      this.endScroll()
    }
    else {
      this.jumpTo(nx, ny)
      this.lastTime = nt
    }
  }
}

// constructor
function ypSimpleScroll(id, left, top, width, height, speed, contentWidth, initLeft, initTop)
{
  var y = this.y = ypSimpleScroll
  if (!initLeft)     initLeft     = 0
  if (!initTop)      initTop      = 0
  if (!contentWidthcontentWidth = width

  // fix for netscape4 first-page bug.
  if (document.layers && !y.ns4history.go(0)

  if (y.ie || y.ns4 || y.dom) {
    this.loaded    = false
    this.id      = id
    this.origSpeed  = speed
    this.aniTimer  = false
    this.op      = ""
    this.lastTime  = 0
    this.clipH    = height
    this.clipW    = width
    this.scrollTop  = initTop
    this.scrollLeft  = initLeft

    // global reference to this object
    this.gRef = "ypSimpleScroll_"+id
    eval(this.gRef+"=this")

    var d = document
    d.write('<style type="text/css">')
    d.write('#' this.id + 'Container left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; height:' + height + 'px; clip:rect(' + width + ' ' + height + ' 0); overflow:hidden; }')
    d.write('#' this.id + 'Container, #' + this.id + 'Content position:absolute; }')
    d.write('#' this.id + 'Content left:' + (-initLeft'px; top:' + (-initTop'px; width:' + contentWidth + 'px}')
    d.write('</style>')
  }
}

// once the nceesary objects are present in the DOM, this gathers some info about them.
ypSimpleScroll.prototype.load = function() {
  var d, lyrId1, lyrId2

  d = document
  lyrId1 = this.id + "Container"
  lyrId2 = this.id + "Content"

  this.container  = this.y.dom ? d.getElementById(lyrId1this.y.ie ? d.all[lyrId1: d.layers[lyrId1]
  this.content  = obj2 = this.y.ns4 ? this.container.layers[lyrId2this.y.ie ? d.all[lyrId2: d.getElementById(lyrId2)
  this.docH    = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH)
  this.docW    = Math.max(this.y.ns4 ? this.content.document.width  : this.content.offsetWidth,  this.clipW)
  this.scrollH  = this.docH - this.clipH
  this.scrollW  = this.docW - this.clipW
  this.loaded    = true
  this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0)
  this.scrollTop  = Math.max(Math.min(this.scrollTop, this.scrollH),0)
  this.jumpTo(this.scrollLeft, this.scrollTop)
}

  </script>
  <script language="javascript">
    var test = new ypSimpleScroll("myScroll"20125150250100)

    function dial_DoFSCommand(command, args) { 
      if (test.loaded && command == "jumpToPercent" ) { 
        test.jumpTo(0, Math.round((test.docH-test.clipH100 * args))        
      
    }
  </script>
  <script language="vbscript">
  <!-- 
    Sub dial_FSCommand(ByVal command, ByVal args)
      call dial_DoFSCommand(command, args)
    end sub
  //-->
  </script>

  <style type="text/css">
    /* just basic text formatting - nothing special 
    @import "/_common/demo.css";*/
    
    #dialDiv {
      text-align:center;
      position:absolute;
      width:15px;
      left:170px;
      top:125px;
    }
  </style>
</head>

<body style="background-color:white;" onload="test.load()">
  <div id="dialDiv">
    <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
     codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
     WIDTH=125 HEIGHT=250 ID=dial>
     <PARAM NAME=movie VALUE="dial.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED name="dial" src="dial.swf" quality=high bgcolor=#FFFFFF  WIDTH=125 HEIGHT=250 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" swLiveConnect="true"></EMBED>
    </OBJECT>
  </div>

  <p>
    <b>Use the wheel below to control the scrollbox.</b><br />If you don't see a wheel, or the wheel doesn't seem to do anything, it means either you haven't got the <a href="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank" title="what are you waiting for? go get it!">flash 5</a> player - or you're using Mozilla, which doesn't support flash/javascript communication yet. sorry.
  </p>

  <div id="myScrollContainer">
    <div id="myScrollContent">
      Okay I know the graphics are ugly, but it's the best I could come up with quickly.<br /><br />
      Anyway, I never said I was a designer :)<br /><br />
      Point is, this demo uses an instance of <a href="http://www.youngpup.net/components/ypRing" target="_blank">ypRing</a> to control the scrolling.<br /><br />
      You could do something nicer, I'm sure.<br /><br />
      But's it's just an example of how you can make different things control ypSimpleScroll, not just little pixel triangles.<br /><br />
      Actually this stupid idea sparked a really interesting discussion between me and <a href="http://www.jesterworld.net/" target="_blank">brandon</a>, and I'm going to be diving into a much cooler scroll box idea based on it. I'm pretty excited about it. You can check out the progress <a href="http://www.youngpup.net/experiments/three.oh_news_scroller/" target="_blank">here</a>.<br /><br />
      Now, just so this thing scrolls a bit more, I'm just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I'm just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I'm just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I'm just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I'm just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I'm just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
      Now, just so this thing scrolls a bit more, I'm just gonna repeat the same damn thing over and over again to take up some space.<br /><br />
    </div>
  </div>
</body>

</html>


           
         
  
Related examples in the same category
1.Text Scroll when clicking
2.Text Scroll when mouse over
3.Scroll image and mimic a compass
4.Scroll text with custom scoll bar
5.Slide tab
6.Vertical scroll (IE)
7. Diagonal Scroller (IE)
8.Text scroll
9.jScrollPane library
10.Image slideshow 4
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.