Results 1 to 3 of 3

Thread: dynamic scrolling CSS/Java/HTML?

  1. #1
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default dynamic scrolling CSS/Java/HTML?

    I'm building a website which has a spread of content, so it requires both x and y scrolling. However, unless you have a mac laptop with gestures or a mouse with a scrolling ball, it can be frustrating to navigate. Is there any sort of CSS or Javascript that can create either auto-scrolling when the mouse reaches the edge of the screen, or some sort of click-grab-drag action?

    ///

    http://www.guppology.com

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    The link you provided doesnt show excessively wide or long content
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    Mousedown and Drag
    <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="1404" />
    <script type="text/javascript">
    /*<![CDATA[*/
    
    
    
    function zxcWS(){
     if (window.innerHeight) return [window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.scrollLeft,document.body.scrollTop];
    }
    
    function zxcScroll(){
    
     this.addevt(document,'mousedown','mse');
     this.addevt(document,'mouseup','mse');
     this.addevt(document,'mousemove','msemove');
    }
    
    zxcScroll.prototype={
    
     mse:function(e){
      this.drag=e.type=='mousedown';
      this.sx=zxcWS()[0];
      this.sy=zxcWS()[1];
      this.mx=e.clientX;
      this.my=e.clientY
      if (e.preventDefault){
       e.preventDefault();
      }
      return false;
     },
    
     msemove:function(e){
      if (this.drag==true){
       var mx=e.clientX,my=e.clientY
       window.scrollTo(this.sx-e.clientX+this.mx,this.sy-e.clientY+this.my);
       if (e.preventDefault){
        e.preventDefault();
       }
       return false;
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     }
    
    }
    
    new zxcScroll();
    /*]]>*/
    </script></body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •