Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts

    OO Number Spinner

    Inspired by this thread. I've whipped up this code a while ago, so I have no time to make it cross-browser. Currently displays and works beautifully in IE6.
    Attached Files Attached Files
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #2
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I like it
    Last edited by swmr; 03-29-2004 at 11:30 PM.
    hmm... ?

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Thanks!
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    Regular Coder
    Join Date
    Mar 2003
    Posts
    241
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried to do the same thing a while back but failed miserable

    Nice work indeed!

    [off-topic: It's too bad the browsers don't have these controlls built-in, anyone know why?]

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I've modified the script to fix some onblur bugs and add some functionalities like the ability to specify a default value, to accept an increment of less than 1 (i.e. 0.5) and specify number of decimal places.

    I'm still trying to make it work with NS7/Moz but to no avail. I didn't do any IE proprietary methods but I think the problem lies in the onfocus handler of input and window.

    Edited. See post below before downloading the script.
    Attached Files Attached Files
    Last edited by glenngv; 03-16-2004 at 07:36 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    For those who downloaded the attachment from the above post, please remove this line which can be found at the bottom part of the page:

    <div id="db"></div>

    I used it for debugging purposes and forgot to remove when I posted it.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I've managed to make it cross-browser. Only 2 minor problems now.

    - the up/down buttons are displayed side by side in NS6+/Moz
    - when (SHIFT+)TAB is used (as opposed to mouse clicks) to focus to the previous/next element, the "spinning" on the last target field still continue.

    Tested and works in IE6, NS7.0, Moz1.0.
    Assumed to work in IE5.x, NS6.x and probably in other browsers.
    Even tested in NS4.7 and the functionality works! But of course, the control displays awfully.

    Hope someone can help me fix those 2 minor bugs.
    Attached Files Attached Files
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perhaps you should let your object put the buttons to the input fields since they will only have a use if javascript is enabled anyway.

  • #9
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, Glenn. You called, and I answer. Here's 1.7.

    - The Up/Down buttons are atop each other in both IE 6 and Foxfire 0.8. Unfortunately, nothing works in Opera 7 any more.
    - I couldn't reproduce your Shift-Tab error.
    - I changed the <input type="button">s to <button>s, with carat (^) and vee (V) as the text; Foxfire was not applying Webdings to the buttons, and all I saw was 5 and 6.
    - I added classNames to the buttons of spinUp and spinDown, for positioning and font size.
    - I added to the buttons an onclick handler to return false and prevent form submission in Foxfire. (Didn't need it until I changed them to <button>s, but oh well.)
    - I changed your currentTarget.select() and currentTarget.focus() functionality to use a CSS class that's applied dynamically, because
    - I added support for spacebar on the up/down buttons.
    - I also cleaned up all the whitespace. Why can't everybody follow MY coding style? </whine>

    Next edition should encapsulate all the focus, targeting, etc. functionality into the constructor or at least the prototype.
    Attached Files Attached Files

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Using ^ and V for up/down button text looks not good and uneven and the buttons are not aligned with the field. But I will leave the look and feel of the spinner control to the implementor of this script. That's what CSS is for. He can also make up/down arrows as background image of the button, or the buttons are images themselves, it's their call. What's important is the script within them.

    My concern with your updated script is that when the button is clicked, it does not look "pressed down". Why? I think it's important for the user (especially common users) to see the button looks like being "pressed down" while it is being held down by the mouse and cursor or while the spacebar is pressed.

    About the Tab/Shift-Tab error, try pressing Shift-Tab while the focus is on the "hour" field, then press the Up or Down button and you will see that the previously focused field "hour" still "spins". The same is true for pressing Tab. But you won't reproduce it because you don't have a field after the spinner control. The spinning error occurs because the currentTarget.field and currentTarget.spinner are not reset to null. My last resort is to instruct the implementor of this script to add

    onfocus="setTarget(null, null)"

    to the previous and next fields (according to the tabindex) of each spinner control.

    Anyway, I appreciate your updates especially the fix for the alignment of Up and Down buttons.

    Regarding the coding style, did you know that I initially used Notepad to code this script without using tabs but instead spacebar?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Originally posted by Garadon
    Perhaps you should let your object put the buttons to the input fields since they will only have a use if javascript is enabled anyway.
    You're right. Actually, I initially thought of making the buttons set to display:none by default and set it to inline programmatically. I will add that in next update.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by glenngv
    Using ^ and V for up/down button text looks not good and uneven and the buttons are not aligned with the field. But I will leave the look and feel of the spinner control to the implementor of this script. That's what CSS is for. He can also make up/down arrows as background image of the button, or the buttons are images themselves, it's their call. What's important is the script within them.
    In order to position the buttons correctly, a bit of CSS trickery was involved. I'd recommend packaging a .js and a .css for this script if you offer it for download from your site or something. I agree re: ^ and V; but it's better than seeing 5 and 6 in Gecko. As for alignment, what's wrong with this? (On the left is Foxfire 0.8, on the right is IE 6.)
    http://www.10mar2001.com/images/grabs/spinner.gif

    Originally posted by glenngv
    My concern with your updated script is that when the button is clicked, it does not look "pressed down". Why? I think it's important for the user (especially common users) to see the button looks like being "pressed down" while it is being held down by the mouse and cursor or while the spacebar is pressed.
    There's a line in the stylesheet which needs to be altered. Sorry about that: Change
    Code:
    border: 1px outset #fff;
    to
    Code:
    border-width: 1px;
    for the .spinButtonContainer button selector.

    Originally posted by glenngv
    About the Tab/Shift-Tab error, try pressing Shift-Tab while the focus is on the "hour" field, then press the Up or Down button and you will see that the previously focused field "hour" still "spins". The same is true for pressing Tab. But you won't reproduce it because you don't have a field after the spinner control. The spinning error occurs because the currentTarget.field and currentTarget.spinner are not reset to null. My last resort is to instruct the implementor of this script to add

    onfocus="setTarget(null, null)"

    to the previous and next fields (according to the tabindex) of each spinner control.
    Like I said, I can't reproduce this. Likely, I can't reproduce this because I changed the focusing behavior: now, it just looks like it selects the input text; really, it's a CSS mockup that's applied in the fakeFocus() and fakeBlur() functions. Doesn't resetTarget() take care of the setTarget(null, null)?

    Originally posted by glenngv
    Anyway, I appreciate your updates especially the fix for the alignment of Up and Down buttons.
    Actually, positioning the buttons was ridiculously tricky. There's an issue with the span that nests the buttons - it's displayed as inline, and rightfully so, which means that when its children are positioned, it no longer has any flow size. The min-width property is the only thing I can use to get the buttons to be clickable, because Gecko believes I'm clicking on the P behind the BUTTON when I'm clicking on the BUTTON. There are a couple of bugs in bugzilla which reveal this kind of behavior; unfortunately all are marked UNCONF (irmed).

    Originally posted by glenngv
    Regarding the coding style, did you know that I initially used Notepad to code this script without using tabs but instead spacebar?
    Oh, I was just kidding around. Why, though, would you work on a script of this size and breadth in Notepad? *shudder*

  • #13
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oooh! Oooh! Add this to the constructor! Super cool!

    Code:
    targetField.onkeydown = function (evt) {
        if ((evt ? evt.which : window.event.keyCode) == 38) {
            startSpin(1,me.btnId);
            return false;
        } else if ((evt ? evt.which : window.event.keyCode) == 40) {
            startSpin(0,me.btnId);
            return false;
        } else {
            return true;
        }
    };
    targetField.onkeyup = stopSpin;
    Oh yeah. I LOVE keyboard controls.

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Originally posted by Choopernickel
    In order to position the buttons correctly, a bit of CSS trickery was involved. I'd recommend packaging a .js and a .css for this script if you offer it for download from your site or something. I agree re: ^ and V; but it's better than seeing 5 and 6 in Gecko. As for alignment, what's wrong with this? (On the left is Foxfire 0.8, on the right is IE 6.)
    http://www.10mar2001.com/images/grabs/spinner.gif
    See how the buttons look like in NS7.0, Moz1.0, IE6 in the attachment.

    Originally posted by Choopernickel
    Like I said, I can't reproduce this. Likely, I can't reproduce this because I changed the focusing behavior: now, it just looks like it selects the input text; really, it's a CSS mockup that's applied in the fakeFocus() and fakeBlur() functions. Doesn't resetTarget() take care of the setTarget(null, null)?
    resetTarget is only called on document.onmousedown event. This function calls setTarget(null,null) when the mousedown target is not the Up/Down button. Therefore target field is not reset when onblur happens in the spinner control. You can't put onblur="setTarget(null, null)" to the spinner control because that would keep the control from "spinning". As I said in my previous post, my last resort is to instruct the implementor of this script to add onfocus="setTarget(null, null)" to the previous and next fields (according to the tabindex) of every spinner control.

    Personally, I don't quite like faking the focus behavior just to give functionality to the spacebar. In Windows spinner control (such as the one used Date/Time properties window), the spacebar has no functionality and the Up/Down buttons have no focus. So I want to follow that behavior. And I like the keyboard up/down arrows functionality that you added. That also follows the behavior of Window spinner controls.

    Originally posted by Choopernickel
    Oh, I was just kidding around. Why, though, would you work on a script of this size and breadth in Notepad? *shudder* [/B]
    I said I initially use notepad to create the base of the script. I used a better editor to finish the it. I used notepad because I was just trying if I can make such a script which was originally asked in the thread that I linked to in my first post. (FYI, I just use notepad when making scripts to answer problems posted here in CF). I was not really serious about it and had no inkling that it would make to "Post a Javascript" forum. Until I realized that it's becoming a cool control with robust and flexible features.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Sorry, I forgot the attachment I was talking about in my previous post.
    Attached Thumbnails Attached Thumbnails OO Number Spinner-spinner.jpg  
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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