Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / Looking for a scrollbar-type control

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

#1 July 16, 2007 4:02:44 pm

ChrisNelson
Member
Registered: June 22, 2007
Posts: 73

Looking for a scrollbar-type control

I looked at the UI and animation objects and a few more and didn't find what I'm looking for.  I need a control that lets a user specify a number in a range by dragging a slider or clicking on up and down arrows, a lot like a scrollbar (e.g., http://tinyurl.com/2jk4zr).  Does anyone know of a JavaScript widget like that?

Offline

 

#2 July 18, 2007 11:27:24 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Looking for a scrollbar-type control

Hi Chris,

Here's a demo just for you: xSpinButton smile

Perhaps I'll make a slider some other time.

Offline

 

#3 July 18, 2007 12:43:05 pm

ChrisNelson
Member
Registered: June 22, 2007
Posts: 73

Re: Looking for a scrollbar-type control

MikeFoster wrote:

Hi Chris,

Here's a demo just for you: xSpinButton smile

Perhaps I'll make a slider some other time.


Thanks.  I'll take a look.  I'm halfway through building a slider but xEnableDrag() is giving me fits.

Offline

 

#4 July 18, 2007 3:04:00 pm

ChrisNelson
Member
Registered: June 22, 2007
Posts: 73

Re: Looking for a scrollbar-type control

I hope this isn't too much code for the forums.  Here's a draft scale widget.  There are numerous problems flagged with FIXME that I would appreciate feedback on.

Use this something like:

sb = new Scale('spansb',0.75, 1.25,0.01,2,'v');
sb.appendToParent(c);
sb.set(1);


mf edit: see new code post below

Last edited by MikeFoster (August 2, 2007 12:26:49 pm)

Offline

 

#5 July 18, 2007 4:18:05 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Looking for a scrollbar-type control

Hey Chris, great work!

If you don't mind I edited your post a bit: I enclosed your js in a basic html doc and included the X files.

Now from the code menu you can 'load' it into an iframe in this page.

I don't think I have it set up right. Edit it all you want, then we can all run it right here in the forum smile

Offline

 

#6 July 19, 2007 6:35:27 am

ChrisNelson
Member
Registered: June 22, 2007
Posts: 73

Re: Looking for a scrollbar-type control

MikeFoster wrote:

Hey Chris, great work!


Thanks.

If you don't mind I edited your post a bit: I enclosed your js in a basic html doc and included the X files.


Awesome.  I didn't know you could do that.

Now from the code menu you can 'load' it into an iframe in this page.

I don't think I have it set up right. Edit it all you want, then we can all run it right here in the forum smile


I can't get that to work.  When I try to load I get a box full of JavaScript.  Maybe there's an unbalanced quote or something. <shrug>

Offline

 

#7 July 19, 2007 7:43:40 am

ChrisNelson
Member
Registered: June 22, 2007
Posts: 73

Re: Looking for a scrollbar-type control

I've refined the Scale implementation in the code block above.  Clicking in the trough works now.  I refactored a couple of things.  Pretty much all the features are there but it looks awful!  But I still can't get it to work at all in the forum.  Trying to 'load' just gives me a block of JavaScript.  I have no idea what's wrong.

Offline

 

#8 July 19, 2007 2:09:58 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Looking for a scrollbar-type control

The Load option is working for me in Opera but not IE nor FF. I changed from using xAddEventlistener to using "window.onload = function" and Load now works in IE but still not FF.

This is probably the first time I tried the Load option on a post that loads a js file.

Offline

 

#9 July 19, 2007 2:21:54 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Looking for a scrollbar-type control

I tried:

window.onload = function ()
{
  onJsLoaded()
};

function onJsLoaded()
{
  if (window.xEnableDrag2) {
    sb1 = new Scale('spansb1', 0, 100, 1, 2, 'v');
    sb1.appendToParent(xGetElementById('vScale'));
    sb1.set(33);
    sb2 = new Scale('spansb2', 0, 100, 1, 2, 'h');
    sb2.appendToParent(xGetElementById('hScale'));
    sb2.set(66);
  }
  else {
    setTimeout(onJsLoaded, 100);
  }
}


but it didn't work in FF.

Offline

 

#10 July 19, 2007 3:07:29 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Looking for a scrollbar-type control

I have a 'Load' test going here

Offline

 

#11 July 19, 2007 3:55:03 pm

ChrisNelson
Member
Registered: June 22, 2007
Posts: 73

Re: Looking for a scrollbar-type control

MikeFoster wrote:

I have a 'Load' test going here


The last message in that thread -- with my code -- shows a block of JavaScript in the iframe.  The preceding message displays a web page.

Offline

 

#12 July 20, 2007 3:35:35 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Looking for a scrollbar-type control

That post is now not a test but shows how xEnableDrag2 implements a simple scrollbar. I was previously using it as a test.

As best as I can tell, the problem in IE had something to do with the window load event being called before dynamically created script elements finished loading.

As best as I can tell, the problem in FF has to do with some kind of size limitation on the string passed to document.write. It may be affected by other factors but I found the limit to be 8300 bytes.

Offline

 

#13 July 23, 2007 8:27:21 am

ChrisNelson
Member
Registered: June 22, 2007
Posts: 73

Re: Looking for a scrollbar-type control

Damn!  That drag works flawlessly.  Mine drifts all over.  I guess I'll build up from your example to see what I have wrong.  Thanks.

Offline

 

#14 July 23, 2007 9:50:20 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Looking for a scrollbar-type control

lol

It is nothing but xEnableDrag2 and CSS wink

Suggestions:

1. Don't position the thumb according to the scale, just let it get dragged as usual. The actual scale value will be displayed and the postion of the thumb will be close enough for visual purposes.

2. Perhaps start with the source of xEnableDrag2 and customize it to make the Scale object.

smile

Offline

 

#15 July 24, 2007 1:18:08 pm

ChrisNelson
Member
Registered: June 22, 2007
Posts: 73

Re: Looking for a scrollbar-type control

OK.  I have the behavior I want but the layout sucks.

First, I had to modify xEnableDrag2  so the drag function does this:

function (el, dx, dy, ev) { 
      var x = xPageX(el) + dx; 
      var y = xPageY(el) + dy;
      var mx = ev.pageX; 
      var my = ev.pageY;
      if  (!(x < x1 || x + el.offsetWidth > x2) && !(mx < x1 || mx > x2)) {
          xLeft(el,xLeft(el)+dx); // !!! Changed line !!!
      }
      if (!(y < y1 || y + el.offsetHeight > y2) && !(my < y1 || my > y2)) {
          xTop(el,xTop(el)+dy); // !!! Changed line !!!
      }
      if (fD) fD(el, dx, dy, ev);
    },


Then I have this working:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Template</title>
<style type='text/css'>
<script type='text/javascript' src='../x/x_core.js'></script>
<script type='text/javascript' src='../x/x_event.js'></script>
<script type='text/javascript' src='../x/lib/xlinearscale.js'></script>
<script type='text/javascript' src='../x/lib/xenabledrag.js'></script>
<script type='text/javascript' src='../x/lib/xenabledrag2.js'></script>
<script type='text/javascript'>
function yEnableDrag2(id,fS,fD,fE,x1,y1,x2,y2)
{
  var b = null; 
  if (typeof x1 != 'undefined' && !x2) {
    b = xGetElementById(x1);
  }
  xEnableDrag(id,
    function (el, x, y, ev) { 
      if (b) { 
        x1 = xPageX(b);
        y1 = xPageY(b);
        x2 = x1 + b.offsetWidth;
        y2 = y1 + b.offsetHeight;
      }
      if (fS) fS(el, x, y, ev);
    },
    function (el, dx, dy, ev) { 
      var x = xPageX(el) + dx; 
      var y = xPageY(el) + dy;
      var mx = ev.pageX; 
      var my = ev.pageY;
      if  (!(x < x1 || x + el.offsetWidth > x2) && !(mx < x1 || mx > x2)) {
          xLeft(el,xLeft(el)+dx);
      }
      if (!(y < y1 || y + el.offsetHeight > y2) && !(my < y1 || my > y2)) {
          xTop(el,xTop(el)+dy);
      }
      if (fD) fD(el, dx, dy, ev);
    },
    function (el, x, y, ev) { 
      if (fE) fE(el, x, y, ev);
    }
  );
}

var Scale = function(id,from,to,res,digits,orient) {
    var leftPointer = '\u25c0';
    var rightPointer = '\u25b6';
    var upPointer = '\u25b2';
    var downPointer = '\u25bc';

    this.res = res ? res : 1;
    this.digits = digits ? digits : 2;
    
    var decPointer, incPointer;
    if (orient == 'v') {
        this.fW = xWidth;   
        this.fL = xHeight;  
        this.fP = xPageY;   
        this.eP = 'pageY';  
        this.fS = xTop;     
        decPointer = upPointer;
        incPointer = downPointer;
    }
    else {
        this.fW = xHeight; 
        this.fL = xWidth;
        this.fP = xPageX;
        this.eP = 'pageX'; 
        this.fS = xLeft; 
        decPointer = leftPointer;
        incPointer = rightPointer;
    }

    var me = this;
    
    var buttonAction = function(event) {
        var evt = new xEvent(event);
        var size = evt.shiftKey ? 'small' : 'single';
        var dir = evt.target.value == decPointer ? -1 : 1;
        var v = me.value;
        me.change(size,dir);
        evt.target.focus();
        return (v != me.value);
    };
    
    var handleButtonUp = function(event) {
        if (me.repeatTimer) {
            clearTimeout(me.repeatTimer);
            me.repeatTimer = null;
        }
        buttonAction(event);
        return false;
    };
    
    var repeatAction = function(a,event,ms) {
        if (a(event)) {
            me.repeatTimer = 
                setTimeout(function(){repeatAction(a,event,ms)},ms);
        }
    };

    var handleButtonDown = function(event) {
        me.repeatTimer = 
            setTimeout(function(){repeatAction(buttonAction,event,100)}, 
                       1000);
        return true; 
    };
    
    var handleTrough = function(event) {
        var evt = new xEvent(event);
        var position = evt[me.eP];
        if (evt.ctrlKey) {
            var offset = position - me.fP(me.trough);
            me.set(me.valueFromOffset(0,offset));
        }
        else {
            var size = evt.shiftKey ? 'large' : 'small';
            var dir;
            if (position < me.fP(me.thumb)) {
                dir = -1;
            } else if (position > me.fP(me.thumb)+me.fL(me.thumb)) {
                dir = 1;
            }
            else {
                dir = 0;
            }
            me.change(size,dir);
        }
        return false;
    };
    this.hull = document.createElement('div');
    this.hull.id = id;
    this.hull.style.background = 'red'; 

    var labelDiv = document.createElement('div');
    labelDiv.style.background = 'orange';
    
    var inputDiv = document.createElement('div');
    inputDiv.style.background = 'yellow';

    this.hull.appendChild(labelDiv);
    this.hull.appendChild(inputDiv);

    this.label = document.createElement('label');
    labelDiv.appendChild(this.label);

    var b1 = document.createElement('input');
    b1.type = 'button';
    b1.value = decPointer;
    b1.onmouseup = handleButtonUp;
    b1.onmousedown = handleButtonDown;
    inputDiv.appendChild(b1);

    this.trough = document.createElement('div');
    this.trough.onclick = handleTrough;
    this.trough.style.background = 'green'; 
    inputDiv.appendChild(this.trough);
    
    this.thumb = document.createElement('div');
    this.thumb.style.position = 'relative';
    this.thumb.style.top = 0;
    this.thumb.style.left = 0;
    this.thumb.style.background = 'blue';
    this.trough.appendChild(this.thumb);
    
    var b2 = document.createElement('input');
    b2.type = 'button';
    b2.value = incPointer;
    b2.onmouseup = handleButtonUp;
    b2.onmousedown = handleButtonDown;
    inputDiv.appendChild(b2);

    this.fL(this.trough, 150);
    this.fW(this.trough, 20);
    this.fW(this.thumb, 20);
    this.fL(this.thumb, 20);
    this.fW(inputDiv,20);

    if (orient != 'v') {
        b1.style.display = 'inline';
        this.trough.style.display = 'inline';
        b2.style.display = 'inline';
    }

    this.set(this.from);
    
    var handleDrag = function(el, dx, dy, ev) {
        var offset = me.fP(me.thumb)-me.fP(me.trough);
        me.set(me.valueFromOffset(me.fL(me.thumb),offset));
    };
    yEnableDrag2(this.thumb, null, handleDrag, null, this.trough);
};

Scale.prototype.appendToParent = function(p) {
    p.appendChild(this.hull);
};

Scale.prototype.offsetFromValue = function(max) {
    var troughMax, offset;
    troughMax = this.fL(this.trough);
    var fraction = xLinearScale(this.value,this.from,this.to,0,1);
    offset = (fraction * troughMax) - (fraction * max);
    if (offset < 0) {
        offset = 0;
    }
    else if ((offset + max) > troughMax) {
        offset = troughMax - max;
    }
    return offset;
};

Scale.prototype.valueFromOffset = function(max,offset) {
    var troughMax, thumbOffset;
    troughMax = this.fL(this.trough);
    if (offset == null) {
        offset = this.fP(this.thumb);
    }
    var fraction = offset / (troughMax - max);
    return xLinearScale(fraction,0,1,this.from,this.to);
};

Scale.prototype.updateThumb = function() {
    this.fS(this.thumb, this.offsetFromValue(this.fL(this.thumb)));
};

Scale.prototype.updateLabel = function() {
    var s = ''+this.value;
    if (this.digits != 0) {
        var l = s.length;
        var p = s.indexOf('.')+1;
        if (p == 0) {
            p = l;
            s+= '.';
        }
        for (var i = 0; i < this.digits-(l-p); ++i) {
            s += '0';
        }
    }
    this.label.innerHTML = s;
};
        
Scale.prototype.set = function(value) {
    if (value < this.from) {
        value = this.from;
    }
    else if (value > this.to) {
        value = this.to;
    }
    var f = Math.pow(10,this.digits);
    this.value = Math.round(value * f) / f;
    this.updateThumb();
    this.updateLabel();
};

Scale.prototype.get = function() {
    return this.value;
};

Scale.prototype.change = function(size,count) {
    var amount;
    if (count == 0) {
        return;
    }
    amount = count * this.res;
    
    switch (size) {
    case 'single':
        break;
    case 'small':
        amount *= 5;
        break;
    case 'large':
        amount *= 10;
        break;
    default:
        break;
    }
    this.set(this.value + amount);
};

xAddEventListener(window, 'load', init, false);

function init()
{
  var b = document.getElementsByTagName('body')[0];
   var sb;
   sb = new Scale('offsetsb',-0.25,0.25,0.01,4);
   sb.appendToParent(b);
   b.appendChild(document.createElement('br'));
   sb = new Scale('spansb',0.75, 1.25,0.001,5,'v');
   sb.appendToParent(b);
}
</script>
</head>
<body>

<h1>Scale Test</h1>

</body>
</html>


But it doesn't -- yet -- work in this page.  I don't get NaN in my local test.

Last edited by ChrisNelson (July 24, 2007 2:12:58 pm)

Offline

 

#16 July 31, 2007 7:48:28 am

ChrisNelson
Member
Registered: June 22, 2007
Posts: 73

Re: Looking for a scrollbar-type control

Hey, Mike!  Any thoughts on why I have to change the drag function to make this work?  Does the revised function work for you?

Offline

 

#17 July 31, 2007 10:56:43 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Looking for a scrollbar-type control

You shouldn't - thumb should have position:absolute and trough should have position:relative.

Where's your CSS?

Offline

 

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load