javascript:(()=>{const PICK="__float_pick_active__",CSS="__float_pin_css__";if(window[PICK]?.cancel){window[PICK].cancel();return}document.getElementById(CSS)?.remove();const style=document.createElement("style");style.id=CSS;style.textContent=`.__float_pin_panel{position:fixed;top:20px;right:20px;width:520px;height:360px;min-width:220px;min-height:120px;z-index:2147483647;background:#111;color:#fff;border:1px solid #555;box-shadow:0 10px 40px #000b;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}.__float_pin_bar{height:32px;flex:0 0 32px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;cursor:move;background:#222;color:#fff;border-bottom:1px solid #444;font:13px system-ui,sans-serif;user-select:none}.__float_pin_title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.__float_pin_buttons{display:flex;gap:4px;align-items:center;flex:0 0 auto}.__float_pin_btn{border:0;background:transparent;color:#fff;font:13px system-ui,sans-serif;cursor:pointer;line-height:1;padding:4px 7px;border-radius:5px}.__float_pin_btn:hover{background:#ffffff24}.__float_pin_close{font-size:18px;padding:2px 7px}.__float_pin_body{flex:1;overflow:auto;background:#111;color:#fff;padding:8px 12px 12px 12px}.__float_pin_body.__float_pin_force_dark,.__float_pin_body.__float_pin_force_dark *:not(a):not(a *):not(img):not(video):not(canvas):not(svg):not(path){background-color:transparent!important;color:#fff!important;border-color:#777!important}.__float_pin_body.__float_pin_force_dark input,.__float_pin_body.__float_pin_force_dark textarea,.__float_pin_body.__float_pin_force_dark select,.__float_pin_body.__float_pin_force_dark button{background:#222!important;color:#fff!important;border-color:#777!important}.__float_pin_body.__float_pin_invert{filter:invert(1) hue-rotate(180deg);background:#fff;color:#000}.__float_pin_hover{outline:2px solid red!important;outline-offset:2px!important}.__float_pin_grip{position:absolute;z-index:3;background:transparent}.__float_pin_grip:hover{background:#ffffff18}.__float_pin_grip_l{left:0;top:32px;bottom:12px;width:8px;cursor:ew-resize}.__float_pin_grip_r{right:0;top:32px;bottom:12px;width:8px;cursor:ew-resize}.__float_pin_grip_b{left:12px;right:12px;bottom:0;height:8px;cursor:ns-resize}.__float_pin_grip_bl{left:0;bottom:0;width:14px;height:14px;cursor:nesw-resize}.__float_pin_grip_br{right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize}`;document.documentElement.appendChild(style);let last=null,lastOutline="";const cancel=()=>{document.removeEventListener("mouseover",onPickHover,true);document.removeEventListener("click",onPickClick,true);document.removeEventListener("keydown",onPickKey,true);if(last){last.style.outline=lastOutline;last.classList.remove("__float_pin_hover")}delete window[PICK]},onPickHover=ev=>{const target=ev.target;if(target.closest?.(".__float_pin_panel"))return;if(last&&last!==target){last.style.outline=lastOutline;last.classList.remove("__float_pin_hover")}last=target;lastOutline=target.style.outline;target.classList.add("__float_pin_hover")},onPickKey=ev=>{if(ev.key==="Escape")cancel()},onPickClick=ev=>{const el=ev.target;if(el.closest?.(".__float_pin_panel"))return;ev.preventDefault();ev.stopPropagation();cancel();pinElement(el)};window[PICK]={cancel};document.addEventListener("mouseover",onPickHover,true);document.addEventListener("click",onPickClick,true);document.addEventListener("keydown",onPickKey,true);const secs=value=>{if(value==null)return null;const text=String(value).trim();if(/^\d+$/.test(text))return Number(text);const match=text.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?$/i);if(!match||!(match[1]||match[2]||match[3]))return null;return Number(match[1]||0)*3600+Number(match[2]||0)*60+Number(match[3]||0)},colonSecs=value=>{const text=String(value||"").trim();if(!/^\d{1,2}(?::\d{2}){1,2}$/.test(text))return null;const parts=text.split(":").map(Number);return parts.length===2?parts[0]*60+parts[1]:parts[0]*3600+parts[1]*60+parts[2]},isYouTubePage=()=>/(^|\.)youtube\.com$|(^|\.)youtu\.be$/.test(location.hostname),seekVideo=seconds=>{const player=document.querySelector("#movie_player");if(player&&typeof player.seekTo==="function"){player.seekTo(seconds,true);player.playVideo?.();return true}const video=document.querySelector("video");if(video){video.currentTime=seconds;video.play?.().catch?.(()=>{});return true}return false},handleYouTubeTimestampClick=ev=>{if(!isYouTubePage())return;const link=ev.target.closest?.("a[href]");if(!link)return;let url;try{url=new URL(link.href,location.href)}catch{return}const seconds=secs(url.searchParams.get("t"))??secs(url.searchParams.get("start"))??secs(url.searchParams.get("time_continue"))??colonSecs(link.textContent);if(seconds==null)return;const currentVideoID=new URL(location.href).searchParams.get("v");let targetVideoID=url.searchParams.get("v");if(url.hostname==="youtu.be"&&!targetVideoID)targetVideoID=url.pathname.slice(1);if(targetVideoID&¤tVideoID&&targetVideoID!==currentVideoID)return;if(seekVideo(seconds)){ev.preventDefault();ev.stopPropagation()}};function pinElement(el){if(!el||el===document.body||el===document.documentElement)return;const placeholder=document.createComment("float-pin-placeholder");el.parentNode.insertBefore(placeholder,el);el.classList.remove("__float_pin_hover");el.style.outline=lastOutline||"";const panel=document.createElement("div"),bar=document.createElement("div"),title=document.createElement("div"),buttons=document.createElement("div"),dark=document.createElement("button"),invert=document.createElement("button"),close=document.createElement("button"),body=document.createElement("div");panel.className="__float_pin_panel";bar.className="__float_pin_bar";title.className="__float_pin_title";buttons.className="__float_pin_buttons";dark.className="__float_pin_btn";invert.className="__float_pin_btn";close.className="__float_pin_btn __float_pin_close";body.className="__float_pin_body __float_pin_force_dark";title.textContent="Pinned: "+el.tagName.toLowerCase()+(el.id?"#"+el.id:"")+(typeof el.className==="string"&&el.className.trim()?"."+el.className.trim().split(/\s+/).slice(0,2).join("."):"");dark.textContent="Aa";dark.title="Toggle forced dark text";invert.textContent="◐";invert.title="Toggle inverted colors";close.textContent="×";close.title="Close and restore";buttons.append(dark,invert,close);bar.append(title,buttons);body.appendChild(el);panel.append(bar,body);document.body.appendChild(panel);body.addEventListener("click",handleYouTubeTimestampClick,true);for(const dir of["l","r","b","bl","br"]){const grip=document.createElement("div");grip.className="__float_pin_grip __float_pin_grip_"+dir;grip.dataset.dir=dir;grip.addEventListener("pointerdown",resizeStart);panel.appendChild(grip)}dark.onclick=ev=>{ev.stopPropagation();body.classList.toggle("__float_pin_force_dark")};invert.onclick=ev=>{ev.stopPropagation();body.classList.toggle("__float_pin_invert")};close.onclick=ev=>{ev.stopPropagation();placeholder.parentNode?.insertBefore(el,placeholder);placeholder.remove();panel.remove()};let dragging=false,startX=0,startY=0,startLeft=0,startTop=0,oldSelect="";const stopDrag=ev=>{dragging=false;document.body.style.userSelect=oldSelect;try{bar.releasePointerCapture(ev.pointerId)}catch{}};bar.addEventListener("pointerdown",ev=>{if(ev.target.closest("button"))return;dragging=true;const rect=panel.getBoundingClientRect();startX=ev.clientX;startY=ev.clientY;startLeft=rect.left;startTop=rect.top;panel.style.left=startLeft+"px";panel.style.top=startTop+"px";panel.style.right="auto";panel.style.bottom="auto";oldSelect=document.body.style.userSelect;document.body.style.userSelect="none";bar.setPointerCapture(ev.pointerId)});bar.addEventListener("pointermove",ev=>{if(!dragging)return;const nextLeft=startLeft+ev.clientX-startX,nextTop=startTop+ev.clientY-startY;panel.style.left=Math.min(Math.max(0,nextLeft),innerWidth-60)+"px";panel.style.top=Math.min(Math.max(0,nextTop),innerHeight-40)+"px"});bar.addEventListener("pointerup",stopDrag);bar.addEventListener("pointercancel",stopDrag);function resizeStart(ev){ev.preventDefault();ev.stopPropagation();const grip=ev.currentTarget,dir=grip.dataset.dir,rect=panel.getBoundingClientRect(),startResizeX=ev.clientX,startResizeY=ev.clientY,initialLeft=rect.left,initialTop=rect.top,initialWidth=rect.width,initialHeight=rect.height,minWidth=220,minHeight=120;oldSelect=document.body.style.userSelect;document.body.style.userSelect="none";panel.style.left=initialLeft+"px";panel.style.top=initialTop+"px";panel.style.right="auto";panel.style.bottom="auto";grip.setPointerCapture(ev.pointerId);const resizeMove=moveEv=>{const dx=moveEv.clientX-startResizeX,dy=moveEv.clientY-startResizeY;let left=initialLeft,width=initialWidth,height=initialHeight;if(dir.includes("l")){width=Math.max(minWidth,initialWidth-dx);left=initialLeft+(initialWidth-width)}if(dir.includes("r"))width=Math.max(minWidth,initialWidth+dx);if(dir.includes("b"))height=Math.max(minHeight,initialHeight+dy);panel.style.left=Math.max(0,left)+"px";panel.style.width=width+"px";panel.style.height=height+"px"},resizeEnd=endEv=>{document.body.style.userSelect=oldSelect;grip.removeEventListener("pointermove",resizeMove);grip.removeEventListener("pointerup",resizeEnd);grip.removeEventListener("pointercancel",resizeEnd);try{grip.releasePointerCapture(endEv.pointerId)}catch{}};grip.addEventListener("pointermove",resizeMove);grip.addEventListener("pointerup",resizeEnd);grip.addEventListener("pointercancel",resizeEnd)}}})();This bookmarklet lets you pick any visible element on a web page and turn it into a movable, resizable floating panel inside the same page. It is useful for keeping part of a page visible while scrolling elsewhere, for example YouTube comments, transcripts, documentation sections, tables, sidebars, forms, or reference text.
After clicking the bookmarklet, the page enters element-picking mode. As you move the mouse over the page, the currently targeted element is highlighted. Clicking an element moves it into a floating panel with a title bar. Pressing Esc while picking cancels selection. Running the bookmarklet again while selection mode is active also cancels it.
The floating panel can be dragged by its title bar and resized using custom resize handles on the left edge, right edge, bottom edge, bottom-left corner, and bottom-right corner. It does not rely on the browser’s native CSS resize handle, so resizing behavior is consistent across the supported edges.
The panel uses a dark theme by default, with a dark background and light text. It includes toolbar buttons for toggling forced readable dark styling, toggling inverted colors, and closing the panel. Link colors are intentionally preserved in forced dark mode so that links keep their original styling where possible.
Unlike a screenshot or cloned copy, the bookmarklet moves the real DOM element into the floating panel. This means forms, buttons, links, scrollable content, and many interactive page elements can continue working. When the panel is closed, the element is restored to its original position in the page using a temporary placeholder.
The script also includes special handling for YouTube timestamp links. Since moving YouTube comments, descriptions, or transcript sections outside their original component tree can break YouTube’s normal timestamp behavior, the bookmarklet intercepts timestamp clicks inside the pinned panel. It detects timestamp URLs using t=, start=, or time_continue=, as well as visible colon-style timestamps such as 1:23, 12:34, or 1:02:03. When a timestamp is clicked, it manually seeks the current YouTube video using YouTube’s player API when available, falling back to the page’s <video> element.
Technically, the bookmarklet works by injecting a small CSS block into the current page, adding temporary event listeners for element selection, wrapping the selected element in a fixed-position panel, and attaching pointer handlers for dragging and resizing. It cleans up picker event listeners when selection is cancelled or completed. It does not install anything permanently and does not modify the website outside the current page session. Reloading the page removes the floating panel and all injected behavior.
- Pick any page element visually
- Move the real element into a floating in-page panel
- Drag the panel by its title bar
- Resize from the left, right, bottom, bottom-left, and bottom-right edges
- Close the panel and restore the element to its original place
- Dark panel styling by default
- Optional forced readable dark mode
- Optional color inversion mode
- Preserves link colors in forced dark mode
- Supports YouTube timestamp seeking from pinned content
- Handles
t=,start=,time_continue=, and visible colon-style timestamps - Cancels selection with
Escor by running the bookmarklet again - Runs as a bookmarklet, no extension required
Because the selected element is moved in the DOM, some complex websites may behave differently if their JavaScript expects the element to remain inside its original parent component. This is especially common on heavily client-rendered sites. YouTube timestamp behavior is handled manually, but other site-specific delegated event handlers may still need custom patches.
The panel position and size are not currently saved. Reloading the page resets everything. The bookmarklet only affects the current page tab and must be run again when needed.