07 June 2017

Highlighting text parts

 

Introduction

Ever used <Ctrl> + <F> to find something in your page? Why do you use it? Because you want to highlight your search. A small JS can do the trick as well.

Requirements

jQuery

Code

function highlight() {
        // containers to search in
        var searchInto = $("div, p, td, h1, h2, h3, h4");
        var args = arguments;
        $(searchInto).each(function () {
            // mark the items only if there is no additional html in it
            // it could destroy the layout otherwise

            if ($(this).html() == $(this).text()) {
                for (var i = 0; i < args.length; i++) {
                    var oldValue = $(this).html();
                    // making the searchstring red
                    var newValue = "<span style=\"color: red;\">" + args[i] + "</span>";
                    // replacing all
                    $(this).html(oldValue.replace(args[i], newValue, "g"));
                }
            }
        });
    }

// call it, with as many searchstring as you wish
highlight("poop", "view", "dog");

02 March 2017

Pissing-me-off moving button

 

 Introduction

Another funny script. Each time you enter a button with your mouse, the button moves to a random location making it impossible to click. Can be very annoying. But a fun idea for April's fool!

Requirements

jQuery

Code

(function jumpingButton() {
        // getting window size
        var windowsize = { height: $(window).height(), width: $(window).width() };
        // affecting all buttons
        $('button, input[type="submit"], input[type="image"]').mouseover(function () {
            $(this).offset({
                top: Math.round(Math.random() * windowsize.height),
                left: Math.round(Math.random() * windowsize.width)
            });
        });
    })();