Announcement

**Davidk** · 10-23-2012, 09:17 AM

Re: slider control arrow keys

Hey Brad,

I'm not sure what side-effects this is going to have on your published pages... but give it a try... it's a start...

In your Dialog, add the following functions to the Javascript functions... Replace 'RATING' with your control name.

Code:

function leftArrowPressed() {
	var newSVal = {dialog.Object}.getValue('RATING');
	newSVal = --newSVal;
	{dialog.Object}.setValue('RATING',newSVal);

}

function rightArrowPressed() {
	var newSVal = {dialog.Object}.getValue('RATING');
	newSVal = ++newSVal;
	{dialog.Object}.setValue('RATING',newSVal);
}

Next, in your a5w page, add this script after the <meta stuff, but before the <head>

Code:

<script>
document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            leftArrowPressed();
            break;
        case 39:
            rightArrowPressed();
            break;
    }
};
</script>

**[email protected]** · 10-26-2012, 03:28 PM

Re: slider control arrow keys

David apologies for the delay, David you're a genius, this works perfectly. Thank you so much.

David I recently studied javascript (www.w3schools.com - godsend, wish I'd done that a year ago) so I actually understood what your javascript code did straight away but the script in the header, you lost me, I understand the switch statement as a multi choice program but I dont really understand the rest other than you're passing the value of a function called evt into a variable called window.onkeydown. Are you able to step me through what the script does and how it works please?

For anyone else reading the thread who may be interested the other method I discovered which worked ok (Davids is better I think but I'll do both now) was to create a text input box that showed and updated the value of the slider dynamically as you move the slider, the user can also update the value in the text box which in return dynamically updates the value in the slider. I put the following code in the javascript functions

Heres what it looks like, with this example I'm capturing the weight of a freight shipment

//get the value of the slider and put it in the text input, called by the sliders onslide event
function onSlide(e,id) {
var obj = e.value;
{dialog.Object}.setValue('T1',obj);
}

//get the value from the input and use this to set the value of the slider called by onKkeyUp event of the textbox
function change()
{
var change = {dialog.Object}.getValue('T1');
var S1 = {dialog.Object}.setValue('S1',change);
}

1) Replace 'T1' with the name of your slider control
2) In the onSlide event property of the slider control you type in "onSlide" to call the onSlide() function
3) In the onKeyUp event of the text box (that I called 'T1' in my example) you click on the builder, make sure you are in text mode and type in "change()" to call the change() function.

**Davidk** · 10-26-2012, 05:08 PM

Re: slider control arrow keys

Hey Brad... glad it worked. To paraphrase slebetman from stackOverflow, event handlers must have an argument... whether it's used or not. To quote... "This is a very common idiom to get the event object from event handlers. On standards compliant browsers, the event object is passed as the first parameter to the event handler. But on IE the event object is a global variable. And for historical reasons, all global variables are members of the window object." So... if evt contains a value, then use it... OR (||) use window.event. In either case, it's assigned to the object evt, and then we can get the keycode from it.

Announcement

The Alpha Software Forum Participation Guidelines

slider control arrow keys

slider control arrow keys

Comment

Comment

Comment