CODEWITHSUNDEEP
javascriptjqueryhtmlevent-handling
Spirals Whirls
Spirals Whirls

Reputation: 553

Span is flickering on mouseenter

I have created a jsfiddle here http://jsfiddle.net/xfc7H/. here when I hover the mouse on the text resize it flickers. So that means the event is being propagated. I want this text to appear stable when I hover on it. Please if someone can resolve the issue.

the html 

         <div class="jqte_editor" >
         <img width=100px height=100px stye=" border:1px solid #eee;" src='http://appendto.com/wp-content/uploads/2013/04/training-hero.jpg'></img>
         </div>

the jquery 

     $('.jqte_editor').on('mousedown', 'span', function() {

        $("#imagecontainer").has(this).prepend("<div style='font-size:10px; position:absolute; background-color:#eee; opacity:1; width:70px; top:" + $(this).position().top + "; left:" + $(this).position().left + ";' id='imageresizer'>Width:<input type='text' style='width:25px; opacity:1.0;' id='imagewidth'></input><br> height:<input type='text' id='imageheight' style='width:25px'></input></div>");
        return false;
    });
    $('.jqte_editor').on('mouseenter', 'span', function(e) {
        e.stopPropagation();
    });
    $('.jqte_editor').on('mouseenter', 'img', function() {
        $(this).wrap("<div id='imagecontainer' style='float:left; position:relative;'></div>");
        $("#imagecontainer").prepend("<span style='position:absolute; top:0px; left:0px; background-color:#eee; color:#888;' id='spanresize'>resize</span>");
    });
    $('.jqte_editor').on('mouseleave', 'img', function() {
        $("#spanresize").remove();
        $("#imagecontainer> img").unwrap();

    });
    $('.jqte_editor').on('mousedown', 'img', function() { $("#spanresizer").remove(); $("#imageresizer").remove(); $("#imagecontainer> img").unwrap(); });
    $('.jqte_editor').on('keyup', 'input', function() {
        var imagelement = $("#imagecontainer").find('img');
        console.log(imagelement);
        var width = $("#imagewidth").val();
        var height = $("#imageheight").val();
        console.log(width);
        imagelement.attr("width", width);
        imagelement.attr("height", height);
    });

Upvotes: 1

Views: 393

Answers (2)

Kevin B
Kevin B

Reputation: 95022

Basically, when you hover over the span, you're leaving the image which results in the span being removed. When the span is removed, you're entering the image again, causing the span to be added, which again causes the image to be left, hiding the span yet again in an infinite loop which causes the flickering.

To solve this, you'll first need to create a throttle that will only remove the span if the image is left and the span isn't entered within 10 ms. To do this, create a global variable, then on image leave, store a setTimeout inside of it that removes the span. Now, on span enter, clear the timeout.

var resizeEnterTimer;
...
    .on('mouseleave', 'img', function() {
        resizeEnterTimer = setTimeout(function(){
            $("#spanresize").remove();
            $("#imagecontainer> img").unwrap();
        },10);
    })
    .on('mouseenter', 'span', function () {
        clearTimeout(resizeEnterTimer);
    })

That fixes the flickering, however now you have the issue of multiple spans being added due to the image enter event being triggered when you leave the span.

To fix that, simply remove the span and unwrap the image on mouseenter of image.

.on('mouseenter', 'img', function () {
    $("#spanresize").remove();
    $("#imagecontainer> img").unwrap();
    $(this).wrap("<div id='imagecontainer' style='float:left; position:relative;'></div>");
    $("#imagecontainer").prepend("<span style='position:absolute; top:0px; left:0px; background-color:#eee; color:#888;' id='spanresize'>resize</span>");
})

http://jsfiddle.net/xfc7H/5/

Upvotes: 2

Praveen
Praveen

Reputation: 56509

You can use event.stopImmediatePropagation() to prevent bounces.

 $('.jqte_editor').on('mousedown', 'img', function(e) {
// your code

e.stopImmediatePropagation();
});

Upvotes: 0

Related Questions