All geek questions in one place

Highlight changes?

HTML:

<html>
<body>
    <textarea>Original Text</textarea>
    <button>Replace</button>
</body>
</html>

JQuery

$(function() {
 $('button').click(function () {
     $('body').html($('body').html().replace('Original','New'));
 });
});

http://jsfiddle.net/r7MgY/

Can I highlight the changes somehow with a fading yellow background?

+2
source share
5 answers

As Sarfraz says, use the jQuery color plugin. Usage is the same as jQuery's animation method. The plugin overrides the animation methods for these properties: "backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor".

Use and description of jQuery animation method can be found here: http://api.jquery.com/animate/

, - HTML, - , , replace, . :

$('#idOfMyWrapperTag').html().replace('this', 'that')

, :

$('textarea').val().replace('this', 'that');

..

+4

, - html . , squiggle - .

, div .

+3

- , ?

jquery, .

+1

Perhaps you can get around this with

$(function() {
  $('button').click(function () {
     $('body').html($('body').html().replace(/Original/g,'<span class="fade" style="opacity: 0; background-color: yellow;">New</span>'));
     $('.fade').animate({
        'opacity': 1
     }, 1000, function(){
        $(this).contents().unwrap();
     });
  });
});
+1
source

If you don't want to include another plugin, you can simply use a little jQuery code to do fading overlay:

jQuery.fn.highlight = function() {
   $(this).each(function() {
        var el = $(this);
        el.before("<div/>")
        el.prev()
            .width(el.width())
            .height(el.height())
            .css({
                "position": "absolute",
                "background-color": "#ffff99",
                "opacity": ".9"   
            })
            .fadeOut(500);
    });
}

$("#target").highlight();

Credit goes to this answer: fooobar.com/questions/61229 / ...

+1
source

Source: https://habr.com/ru/post/1746957/

More articles:


All Articles