June 19, 2019

Make hyperlinks always act the right way.


This may come in handy:

    I find it interesting that Chrome is going to be equipped with tab stacking feature.

    Launch Chrome Canary ➜ open chrome://flags/ from address bar ➜ search for: Tab Groups ➜ set Tab Groups as Enabled).

    The aim here is of course to declutter Your workspace while browsing multiple websites - make things much more readable and spacious. All of this reminds Me of hyperlinks and that - either You are a web-designer, a blogger or a journalist - may care about Your Reader's well-organized and non-disturbed experience while spending Their time on Your website.

    So let's talk hyperlinks. For a long time now I have My "golden rule of thumb": all the links which lead to a page belonging to those links' parent website should be opened within the same window - while all the rest in the new one. This way You can make Your Guests' live easier because whenever They open a link targeting another website, it won't confuse Them by replacing the one They're viewing right now. They won't be in the need to figure out how to go back there (not everybody uses a web-browser's back button) - all things remain well-organized: the subject of Your Guest's main focus on its own tab, while all the related websites (reached through hyperlinks You've provided) on their own separate tabs.

    The thing is that in order for hyperlinks to be properly targeted You are constantly in the need of attaching a target="_blank" HTML attribute to each link. Either You do it via some WYSIWIG app (like Open Live Writer) or directly within source code of Your articles - You need to take care about this matter all the time.

    What if, however, it could be done "by itself", automatically? Imagine a mechanism which could scan all Your links, determine which ones should act which way - and apply the decision. It may sound seriously, while in fact it is surprisingly simple and comes down to the following concise code snippet:

    $('.post-body a').attr('target', '_blank');
    $('.post-body a[href*="godarksite"]').attr('target', '_top');

    What does this code mean?
    The first line set all Your hyperlinks (which are placed into articles/posts) to be opened in a new window.
    The second line picks up only those which lead to some place within Your website (since this website address is "" - I've used "godarksite" as a keyword to recognize inside links' addresses) - and set them to be opened within the same window.

    Simple as that and works like a charm :) . Enjoy!

    No comments:

    Post a Comment