Not signed in (Sign In)

Not signed in

Want to take part in these discussions? Sign in if you have an account, or apply for one below

  • Sign in using OpenID

Discussion Tag Cloud

Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.

Welcome to nForum
If you want to take part in these discussions either sign in now (if you have an account), apply for one now (if you don't).

nLab > nLab Technical Matters: Link quickview/peek

Bottom of Page

1 to 1 of 1

  1.  
    • CommentRowNumber1.
    • CommentAuthorJonSlaughter
    • CommentTimeFeb 15th 2025
    I use an extension that enables one to hover over links to Wikipedia pages inside Wikipedia and see the introduction of the link. This allows one to get some idea of what the link is pointing to without clicking the link and it is quite fast(nearly instantaneous). The extension is called Wikipedia peek.

    It would be very useful to have something like this for nlab. While an extension could be written, I doubt it needs to be. Surely the site itself can support such a feature? If not maybe a site script can be used.

    I just wrote this script to give me the feature. Need greasemonkey or variant. It lets one, by using shift and then going to link(mouseenter), open up a new iframe which is draggable for that link. It is not as fast as desirable but it could be the start of adding such a feature. What would really make this useful is if a slimmed down version, a sort of summary or just the first part could be accessed much more quickly so that it loads up instantly. E.g., generate a "div" version of the page that just includes the bare bones. Then one could have the two versions, a quick ref by hover or a complete iframe using shift+hover. It may be useful as is to someone though. It might be better to switch to something like "shift+onclick" but either way.

    // ==UserScript==
    // @name nlab peek
    // @namespace http://tampermonkey.net/
    // @version 2025-02-15
    // @description try to take over the world!
    // @author You
    // @match https://ncatlab.org/nlab/show/*
    // @require https://code.jquery.com/jquery-3.4.1.slim.min.js
    // @icon https://www.google.com/s2/favicons?domain=archive.org
    // ==/UserScript==

    var origBGLinkColor = undefined
    var shiftPressed = false

    var height = 250
    $("body").first().append(
    `<div id="peekView" style="z-index: 1000; position: fixed; bottom:0px; left:0px; background-color: white; width: 100%; height: ${height}px; padding: 0px; color: white;">
    <div id="peekViewHB" style="background-color: gray; width: 100%; height: 9px; padding: 0px; color: white;"></div>
    <div id="peekViewCB" style="z-index: 1001; position: relative; background-color: black; width: 21px; height: 23px; top: 2px; left: 2px; padding: 0px; color: white;"><center>✖</center></div>
    <div id="peekViewPage" style="width: 100%; height: 100%"></div>
    </div>`)
    $("#peekView").hide()

    // Close button for peakViewPage
    $("#peekViewCB").click(function(){ $("#peekViewPage").empty(); $("#peekView").hide() })
    $('#peekViewHB').mousedown(handle_mousedown);

    if (self == top )
    {
    // Add hover ability to each nlab link
    $("a").each((i,e) => {
    var href = $(e).attr("href")
    if (href.includes("/nlab/show")) {
    //console.log(href)

    $(e).hover(function(){
    if (shiftPressed) {

    if (!origBGLinkColor) origBGLinkColor = $(this).css("background-color");
    $(this).css("background-color", "yellow");
    $("#peekView").show()

    $("#peekViewPage").empty()
    $('<iframe>', {src: href, id: 'myFrame', frameborder: 0, scrolling: 'yes', style: 'width: 100%; height: 100%'}).appendTo('#peekViewPage');
    }

    }, function(){
    $(this).css("background-color", origBGLinkColor);
    //$("#peekView").hide()

    });
    }
    })
    }

    function handle_mousedown(e){
    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).offset();

    $('#peekViewPage').css('pointer-events', 'none');

    function handle_dragging(e){
    var winHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
    var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
    $("#peekView").offset({top: top});
    $("#peekView").height(winHeight-e.clientY)
    //console.log(winHeight + " - " + e.clientY + " = " + (winHeight - e.clientY), e.screenY, e.offsetY, e.clientY, e.y)

    }

    function handle_mouseup(e){
    $('body').first()
    .off('mousemove', handle_dragging)
    .off('mouseup', handle_mouseup);
    $('#peekViewPage').css('pointer-events', 'auto');
    }

    $('body').first()
    .on('mouseup', handle_mouseup)
    .on('mousemove', handle_dragging);
    }


    $(document).keydown(function (e) { if(e.shiftKey) shiftPressed = true; })
    $(document).keyup(function(e){ if(e.originalEvent.key == "Shift") shiftPressed = false; });

1 to 1 of 1

  1.