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");

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)
            });
        });
    })();

Show everyone my passwords

 

 Introduction

Every seen this fancy checkbox on mobile devices where you can make password fields visible? Well on a page for a desktop browser it doesn't really make sense. But hey, I'll show you how to do it anyway.

How it works

With the help of jQuery we collect all the password fields. It's just a text-input-field of type password. If we change the type from 'password' to 'text' all user input will be visible.

Requirements

jQuery

Code

    // global variable to undo what we've done
    var pwFields = undefined;

    // this function does the magic
    function togglePWFields() {
        if (!pwFields) {
            // finding all pw-fields
            pwFields = $("input[type=password]");
            $(pwFields).each(function () {
                // convert all those fields to text-fields
                $(this).attr("type", "text");
            });
        }
        else {
            $(pwFields).each(function () {
                // undo all
                $(this).attr("type", "password");
            });
            // reset stuff
            pwFields = undefined;
        }
    }

Preventing right-click

 

Introduction

Want to prevent someone copying images from your website? Well, you can't! But you can make it harder to call for the contextmenu with the mouse. Javascript can react on the event. So you can say: "Hey! Just do nothing, when someone wants to see the right-mouse-click-menu.

Required

I'll show you two versions. One requires only Javascript itself. The other one works with jQuery.

JS

window.oncontextmenu = function () {
        return false;
}

jQuery

$("*").contextmenu(function(){
        return false;
});

or

$("*").on("contextmenu", function () {
       return false;
});