www.webdeveloper.com
Results 1 to 3 of 3

Thread: HTML INPUT element text cursor flicker with animation/scrolling

  1. #1
    Join Date
    Jul 2014
    Posts
    2

    HTML INPUT element text cursor flicker with animation/scrolling

    Hi,

    I'm having some problems with scrolling images across the screen and IE (v11) and the 'INPUT' elements.

    If I try any of the scrollers that I can find, they all seem to do the same thing.

    If you include a INPUT html element on the screen next to the scrolling images, then when you give focus to the INPUT box to type text into it, the text cursor (NOT the mouse cursor) in the box flickers crazily and sporadically, and disappears.

    This only seems to happen on IE (latest version 11). Its fine in Chrome & FF.

    I've used the scroller from this page as an example, but others I've tried do the same: http://www.dwuser.com/education/cont...mage-scroller/

    You can see it happening here:

    JSFiddle: http://jsfiddle.net/tFZ8N/4/

    I think its something to do with the timer and the .scrollLeft() method.

    I've tried to get it to work better in IE, but I just cant, I presume its a 'bug' with IE, but I wounder if anyone has a workaround or any thoughts on it?

    Note: If you mouse over the moving images while the INPUT box has focus, this stops them scrolling, and then you can see the text cursor in the INPUT box displays fine. Its only when the scrolling is in effect does it cause a problem.

    Thanks,

    Rob.

    HTML Code:
    INPUT box <input type='text'>
    
    <div id="div-scroller-container">
        <ul>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
            <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
        </ul>
    </div>
    Code:
    #div-scroller-container {
            overflow: hidden;
            position: absolute;
            left: 0;
            right: 0;
            top: 100px;
            bottom: 0;
    }
    
    #div-scroller-container ul {
            padding: 0;
            margin: 0;
            position: relative;
    }
    
    #div-scroller-container li {
            padding-right: 2px;
            margin: 0;
            list-style-type: none;
            position: absolute;
    }
    Code:
    var scroller = $('#div-scroller-container');
    var scrollerContent = scroller.children('ul');
    scrollerContent.children().clone().appendTo(scrollerContent);
    var curX = 0;
    scrollerContent.children().each(function(){
        var $this = $(this);
        $this.css('left', curX);
        curX += $this.outerWidth(true);
    });
    var fullW = curX / 2;
    var viewportW = scroller.width();
    
    // Scrolling speed management
    var controller = {curSpeed:0, fullSpeed:2};
    var $controller = $(controller);
    var tweenToNewSpeed = function(newSpeed) {
        $controller.stop(true).animate({curSpeed:newSpeed}, 600);
    };
    
    // Pause on hover
    scroller.hover(function() {
        tweenToNewSpeed(0);
    }, function(){
        tweenToNewSpeed(controller.fullSpeed);
    });
    
    // Scrolling management; start the automatical scrolling
    var doScroll = function() {
        var curX = scroller.scrollLeft();
        var newX = curX + controller.curSpeed;
        if (newX > fullW*2 - viewportW)
            newX -= fullW;
        scroller.scrollLeft(newX);
    };
    
    setInterval(doScroll, 20);
    tweenToNewSpeed(controller.fullSpeed);

  2. #2
    Join Date
    Jan 2005
    Posts
    372
    Sounds like you need to put an onFocus handler on the input element, and get it to toggle a flag that disables the scrolling.

  3. #3
    Join Date
    Jul 2014
    Posts
    2
    Hi,

    Yes, that would do it.

    Unfortunately, though, the 'real' page I'm using this on, only has 1 input field and I auto focus that field so they can start typing immediately, so it would never scroll then.

    The 'real' page is an image search page, where I have a search INPUT box in the middle of the page, with 'example' images in the scroller scrolling past underneath the input field.... looked great on Chrome.

    But.... I cant really find another way to solve it unfortunately.... or IE users will just have to live with it

    Thanks for your input..

    Rob.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles