Let's make the hot network questions icons clickable

Question

I would like to see the icons in the 'Hot Network Questions' right panel clickable, leading to the homepage of the site where the question comes from.

It would make it more comfortable to switch to the site when you want rather to visit it than to see that specific "hot" question.

Answer 1

Until this gets implemented you can use the following script:

/*global $:true, window:true */
(function () {
    "use strict";
    $('#hot-network-questions ul li').each(
        function () {
            var li = $(this),
                href = li.find('a').prop('href'),
                chars_to_skip = 9; // skips over https://
            li.find('div').wrap(
                $('<a></a>')
                    .prop('href', href.substr(0, href.indexOf('/', chars_to_skip)))
                    .prop('target', '_blank')
                    .css('width','auto')
            ).css('cursor', 'pointer');
        }
    );
}());

that gets easy transformed in a Tampermonkey or Greasemonkey script.

This code finds the hot network questions div on the page and iterates over the li tags. The div that holds the icon gets wrapped in an a anchor tag which gets its href from the existing anchor tag href attribute in the li but only the protocol and hostname.

html structure (simplified) before script runs

<li>
    <div title="foo" class="favicon favicon-math"></div>
    <a href="http://math.stackexchange.com/questions/1100090/">
        FooBar
    </a>
</li>

html structure after script runs

<li>
    <a href="http://math.stackexchange.com" target="_blank" style="width:auto">
        <div title="foo" class="favicon favicon-math"></div>
    </a>
    <a href="http://math.stackexchange.com/questions/1100090/">
        FooBar
    </a>
</li>