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.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Function for long press of arrow keys

    Dear code enthusiasts!

    The jQuery code i'm using is for a multi-directional slideshow (it's based on tylerpaige's tangential-ppt.)

    Navigation is done with the keyboards arrow keys.

    It's all good, except I need different actions for a long press of an arrow key.

    If anyone can help me with that, i would be greatful.

    This is the controls part of the javascript:

    Code:
    $(document).keydown(function(event) {
        switch (event.keyCode) {
            case 38: //up arrow
                index = $(cur).siblings(slide).addBack().index(cur);
                if(index > 0){
                    target = index-1;
                    cur = $(cur).siblings(slide).addBack().eq(target);
    
                    $(cur).addClass('slideRight recent').one(transitionEnd, function() {
                       $(this).addClass('visible').removeClass('slideRight recent').nextAll().removeClass('visible slideRight recent');
                    });
                    $('.recent').not(cur).removeClass('recent'); //Only most recent advance should be called "Recent"
                } else if($(cur).hasClass('jumpleft')) {
                    target = cur.attr('target-left');
                    cur = $(target);
                    $(cur).addClass('slideRight recent').one(transitionEnd, function(){ 
                        $('.visible').not(cur).removeClass('visible slideRight slideLeft recent');
                        $(this).addClass('visible').removeClass('slideRight recent');
                    }); 
                    $('.recent').not(cur).removeClass('recent');
                }
                break;
            case 37: //left arrow
                if($(cur).parent().hasClass(slideClass)){ // only ascend if the target is a slide, not the container
                    index = cur;
                    cur = cur.parent();
                    index.siblings('.content').parent().addBack().addClass('visible');
                    index.addClass('slideOut').one(transitionEnd, function() {
                        $(this).removeClass('visible slideOut').siblings().removeClass('slideOut recent visible');
                    });
                }
                break;
            case 40: //down arrow
                index = $(cur).siblings(slide).addBack().index(cur);
                if(index < $(cur).siblings(slide).length){
                    target = index+1; 
                    cur = $(cur).siblings(slide).addBack().eq(target);          
                    $(cur).addClass('slideLeft recent').one(transitionEnd, function(){ 
                        $(this).addClass('visible').removeClass('slideLeft recent').prevAll().removeClass('visible slideLeft slideRight recent');
                    }); 
                    $('.recent').not(cur).removeClass('recent');
                } else if($(cur).hasClass('jumpright')) {
                    target = cur.attr('target-right');
                    cur = $(target);
                    $(cur).addClass('slideLeft recent').one(transitionEnd, function(){ 
                        $('.visible').not(cur).removeClass('visible slideLeft slideRight recent');
                        $(this).addClass('visible').removeClass('slideLeft recent');
                    }); 
                    $('.recent').not(cur).removeClass('recent');
                }
                break;
            case 39: //right arrow
                if($(cur).children(slide).length > 0){
                    cur = $(cur).children(slide).eq(0);
                    $(cur).addClass('slideUp').one(transitionEnd, function() {
                        $(this).addClass('visible').removeClass('slideUp').parent('.visible').removeClass('visible');
                    });
                }
                break;
        }
        manageControls(cur);
    });

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    See if you can work this in:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id="head"></div>
    
    
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    var pressed = {};
    
    window.onkeydown = function(e) {
        if ( pressed[e.which] ) return;
        pressed[e.which] = e.timeStamp;
    };
    
    window.onkeyup = function(e) {
        if ( !pressed[e.which] ) return;
        var duration = ( e.timeStamp - pressed[e.which] ) / 1000;
        document.getElementById("head").innerHTML = "key is "+e.which+" pressed for "+duration+" seconds";
        pressed[e.which] = 0;
    };
    
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    What I would do is change that keydown event to keyup. Then on keydown, do what you want for the long press with a setTimeout. Then onkeyup, cancel the setTimeout.
    Code:
    var timer;
    $(document).on('keydown', function(event) {
        timer = setTimeout(function() {
    
            //do what you want for long press here
    
        }, 1000); //adjust delay as necessary
    });
    
    $(document).on('keyup', function(event) {
    
        clearTimeout(timer); //cancel long press
       
        switch (event.keyCode) {
            case 38: //up arrow
    
        ...and so on
    
    });

  • Users who have thanked glenngv for this post:

    Innuendo1231 (04-05-2014)

  • #4
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Very nice !
    Thanks, both of you for your effort.

    I used glenngv's method. The only slight problem with it is that it repeats the function until the key is released, or even 'till sometime after, creating an awkard flashing effect.
    Any idea how to keep the function from happening?

  • #5
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    \\from repeating

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Try this:
    Code:
    var timer = null;
    $(document).on('keydown', function(event) {
        if (timer === null) {
            timer = setTimeout(function() {
    
                //do what you want for long press here
    
            }, 1000); //adjust delay as necessary
        }
    });
    
    $(document).on('keyup', function(event) {
    
        clearTimeout(timer); //cancel long press
        timer = null;
       
        switch (event.keyCode) {
            case 38: //up arrow
    
        ...and so on
    
    });

  • Users who have thanked glenngv for this post:

    Innuendo1231 (04-05-2014)

  • #7
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ah, better, it doesn't repeat now, but there is another problem now:

    The keyup fucntion still happens after the long press function. It actually happened in the previous version too, but that delayed repeating I mentioned overrode it after it happened.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I didn't know that you don't want the keyup to occur after the long press. You have to have another flag for that.
    Code:
    var timer = null,
        longPress;
    
    $(document).on('keydown', function(event) {
        longPress = false;
        if (timer === null) {
            timer = setTimeout(function() {
                longPress = true;
    
                //do what you want for long press here
    
            }, 1000); //adjust delay as necessary
        }
    });
    
    $(document).on('keyup', function(event) {
       
        clearTimeout(timer); //cancel long press
        timer = null;
        
        if (!longPress) {   
            switch (event.keyCode) {
                case 38: //up arrow
    
            ...and so on
        }
    });

  • Users who have thanked glenngv for this post:

    Innuendo1231 (04-05-2014)

  • #9
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Unfortunately, that didn't solve it, keyup still occours after keydown.

    Would it help if I post the whole js code?

    Code:
    (function($){ 
        $.fn.extend({
            powerPPT: function(options) {
                var defaults = {
                    bgimgs: true,
    				controls: false,
                    loader: false,
                    origin: false,
                    slide: '.slide'
                }
                
                var options = $.extend(defaults, options);
                
                return this.each(function() {
                    var o = options,
                        transitionEnd = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd',
                        index,
                        cur,
                        save = null,
                        slide = o.slide,
                        slides = $(this).find(slide),
                        slideClass = slide.substr(1);
                        
                    if(o.origin == false){ cur = $(this).find(slide).eq(0); }
                    else { cur = $(this).find(o.origin); }
                    $(cur).addClass('visible');
                    
                    
                    $.each(slides, function() {
                         var slide = $(this).not('.text').children('.content'),
                             img = $(slide).children('img').eq(0);
                         if(img.length > 0){
                             var url = $(img).attr('src');
                             $(img).hide();
                             $(img).one('load', function(){
                                 $(slide).css("background-image", "url('"+url+"')");
                                 $(img).remove();
                             });
                         }
                    });
                    
                    var timer = null,
    					longPress;
    
    				$(document).on('keydown', function(event) {
    					longPress = false;
    					if (timer === null) {
    						timer = setTimeout(function() {
    							longPress = true;
    
    					//do what you want for long press here
    					
    					switch (event.keyCode) {
                            case 37: //left arrow
                                if($(cur).hasClass('slide')) {
                                    target = "#Cyl";
                                    cur = $(target);
                                    $(cur).addClass('slideRight recent').one(transitionEnd, function(){ 
                                        $('.visible').not(cur).removeClass('visible slideRight slideLeft recent');
                                        $(this).addClass('visible').removeClass('slideRight recent');
                                    }); 
                                    $('.recent').not(cur).removeClass('recent');
                                }
                                break;
    						case 38: //up arrow
                                if($(cur).hasClass('slide')) {
                                    target = "#mono100";
                                    cur = $(target);
                                    $(cur).addClass('slideRight recent').one(transitionEnd, function(){ 
                                        $('.visible').not(cur).removeClass('visible slideRight slideLeft recent');
                                        $(this).addClass('visible').removeClass('slideRight recent');
                                    }); 
                                    $('.recent').not(cur).removeClass('recent');
                                }
                                break;
    						case 39: //right arrow
                                if($(cur).hasClass('slide')) {
                                    target = "#VZ";
                                    cur = $(target);
                                    $(cur).addClass('slideRight recent').one(transitionEnd, function(){ 
                                        $('.visible').not(cur).removeClass('visible slideRight slideLeft recent');
                                        $(this).addClass('visible').removeClass('slideRight recent');
                                    }); 
                                    $('.recent').not(cur).removeClass('recent');
                                }
                                break;
    						case 40: //down arrow
                                if($(cur).hasClass('slide')) {
                                    target = "#Bino1a";
                                    cur = $(target);
                                    $(cur).addClass('slideRight recent').one(transitionEnd, function(){ 
                                        $('.visible').not(cur).removeClass('visible slideRight slideLeft recent');
                                        $(this).addClass('visible').removeClass('slideRight recent');
                                    }); 
                                    $('.recent').not(cur).removeClass('recent');
                                }
                                break;
    							}
    							}, 500); //adjust delay as necessary
    						}
    					});
    
    
    				$(document).on('keyup', function(event) {
       
    					clearTimeout(timer); //cancel long press
    					timer = null;
    					
    				if (!longPress) {   			   
    					switch (event.keyCode) {
                            case 38: //up arrow
                                index = $(cur).siblings(slide).addBack().index(cur);
                                if(index > 0){
                                    target = index-1;
                                    cur = $(cur).siblings(slide).addBack().eq(target);
                                    
                                    $(cur).addClass('slideRight recent').one(transitionEnd, function() {
                                       $(this).addClass('visible').removeClass('slideRight recent').nextAll().removeClass('visible slideRight recent');
                                    });
                                    $('.recent').not(cur).removeClass('recent'); //Only most recent advance should be called "Recent"
                                } else if($(cur).hasClass('jumpleft')) {
                                    target = cur.attr('target-left');
                                    cur = $(target);
                                    $(cur).addClass('slideRight recent').one(transitionEnd, function(){ 
                                        $('.visible').not(cur).removeClass('visible slideRight slideLeft recent');
                                        $(this).addClass('visible').removeClass('slideRight recent');
                                    }); 
                                    $('.recent').not(cur).removeClass('recent');
                                }
                                break;
                            case 37: //left arrow
                                if($(cur).parent().hasClass(slideClass)){ // only ascend if the target is a slide, not the container
                                    index = cur;
                                    cur = cur.parent();
                                    index.siblings('.content').parent().addBack().addClass('visible');
                                    index.addClass('slideOut').one(transitionEnd, function() {
                                        $(this).removeClass('visible slideOut').siblings().removeClass('slideOut recent visible');
                                    });
                                }
                                break;
                            case 40: //down arrow
                                index = $(cur).siblings(slide).addBack().index(cur);
                                if(index < $(cur).siblings(slide).length){
                                    target = index+1; 
                                    cur = $(cur).siblings(slide).addBack().eq(target);    		
                                    $(cur).addClass('slideLeft recent').one(transitionEnd, function(){ 
                                        $(this).addClass('visible').removeClass('slideLeft recent').prevAll().removeClass('visible slideLeft slideRight recent');
                                    }); 
                                    $('.recent').not(cur).removeClass('recent');
                                } else if($(cur).hasClass('jumpright')) {
                                    target = cur.attr('target-right');
                                    cur = $(target);
                                    $(cur).addClass('slideLeft recent').one(transitionEnd, function(){ 
                                        $('.visible').not(cur).removeClass('visible slideLeft slideRight recent');
                                        $(this).addClass('visible').removeClass('slideLeft recent');
                                    }); 
                                    $('.recent').not(cur).removeClass('recent');
                                }
                                break;
                            case 39: //right arrow
                                if($(cur).children(slide).length > 0){
                                    cur = $(cur).children(slide).eq(0);
                                    $(cur).addClass('slideUp').one(transitionEnd, function() {
                                        $(this).addClass('visible').removeClass('slideUp').parent('.visible').removeClass('visible');
                                    });
                                }
                                break;
    						}
                        }
                    });
                     
                    
                     
                });
            }
        });
    })(jQuery);

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    It would be more helpful if you post a simple page (e.g. jsfiddle) to play around with.

    Without running the code, I can only suspect that the issue is caused by multiple keydown and keyup event handlers attached to the document. There is only one longPress flag but the events are triggered multiple times for every keystroke. Why do you have to attach the same events multiple times to the document for every elements matched by the jQuery selector?

  • #11
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I couldn't get jsfiddle to show the slides, unless I change .slide's visiblity, but then of course only the last slide shows on top of all the others....
    Edit fiddle - JSFiddle

    Here's a simple 36kb zip archive though, the same thing as in jsfiddle but this way it works:

    https://www.mediafire.com/?2eqd2f0c32fkjfn

    4 x 4 slide matrix, with long press functions.

    Up arrow moves up, long press up arrow jumps to bottom, and so on with the other keys. So what happens currently is it jumps to the bottom and then moves up one slide.

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Your jsfiddle didn't work as it couldn't find the powerPPT function. This is because the default "onLoad" in the jsFiddle settings puts your script inside anonymous onload listener function causing your script to be local to that function, thus powerPPT() is unavailable outside of that function.

    Anyway, I think I've fixed your issue. Take a look at:

    Edit fiddle - JSFiddle

  • Users who have thanked glenngv for this post:

    Innuendo1231 (04-05-2014)

  • #13
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yes! It works flawlessly now.

    Thank you so much for your efforts!


  •  

    Tags for this Thread

    Posting Permissions

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