Joey's Bookmarklet (Development) Page

Introduction

What is a Bookmarklet?

A Bookmarklet is similar to a Bookmark,
but instead of sending you to a different page,
it will perform an action on the current page!
Bookmarklets use JavaScript and the DOM to do useful things.

  • You can click on the bookmarklets below to try them out. (Reload the page if things go wrong!)
  • To copy a bookmarklet so you can use it later, drag the link to your Bookmarks Toolbar, or right-click to bookmark it.
  • Bookmarklets begin with with the javascript: namespace, instead of the usual http:// or https:// or ftp:// URL protocols. The void operator or a function wrapper is commonly used to prevent the browser from operating on the return value.

    This Page

    Known bugs and TODOs are shown in orange, changes and added features in green.

    This page contains bookmarklets which I have developed, and is sometimes in an unstable state.
    (It was last updated .)
    Stable versions may be found in CVS, if I have broken the current copy.
    I wrote these bookmarklets when I was starting off in Javascript, so some of the code is poor quality! More recently I have been writing userscripts...

    Related Pages

  • Joey's Konqueror 5 Minitools/Bookmarklets with embedded Bookmarklet Builder.
  • Joey' Greasemonkey/Chrome userscripts wrapped up as bookmarklets
  • Some inspiration for scripts was drawn from the collection at Jesse's Bookmarklets Site at squarefree.com.
  • We should salvage whatever Bookmarklets were previously available on jsquickmark.com.
  • Page Bookmarklets

    Note: You can use this bookmarklet on any web page. Just drag or copy it into your browser's Bookmarks, then run it any time when you are surfing.

  • Enable Page Folding   <-- Click Here!
  • Makes parts of the page collapsable and expandable, for easier navigation through large (tree-structured) pages.

  • Currently collapses BLOCKQUOTEs, ULs and TABLEs. Are there other tags it could collapse? (Check the code, it's easy to add extra tags.)
  • Shouldn' it be collapsing all the text after each bookmarklet on this page? (They are in blockquotes.) Is it missing them because they contain so little, or because we have done the parent and lost track of the child?
  • Bug: At the moment this tool only works well if the element we fold up has a short text-heading appearing just before it. Not all pages are like this, so we need to adapt the algorithm to work over a wider range of pages.
  • Todo: We could even create blocks to compress where there was no structure. E.g. create a block between two HR tags, provided the text content in between is large. Or in fact squash any blocks containing text, if the text is >=15% of the parent's text.
  • Note: Loads external script.
  • Focus
  • Lets you select a part of the page, and throws away the rest! But has undo. :)

  • Todo: Oh dear I just tried it on this page, and the restore brought everything back in reverse order!
  • Note: Loads external script.
  • Toggle CSS
  • Stolen from squarefree.

  • No globals
  • Trim to Search String
  • Adds a search filter bar at the top of the page. Hides all parts of the page except those matching your search expression.

  • Pretty damn slow in Mozilla. Not too bad in Konqueror though. The reason is that I set all child nodes to display:none, in case we don't set the parent node. But if we do, all those sets on the children were a wasted effort. Improve the algorithm!
  • Added a nice unpleasant green style, and Close and Clear buttons.
  • Bug: Sometimes we are wanting to select certain rows from a table, but this implementation hides the other cells in the row, even if one cell matches.
  • Todo: The search expression is too simple, at the moment we perform an exact case-sensitive match. We should allow multi-word search, and exclusion with '-'.
  • Todo: Add options: case-sensitive, search HTML (rather than text), keep neighbours to depth/distance N.
  • This idea was moved to XPath Tester: Allow trimming by XPath expression. This can be very useful to extract precise elements of the page (e.g. Headings), or just to test an XPath. If we display results in a small window (not the doc itself), user can click on each to jump to that part of the page! So user just needs to find an XPath matching the headings, then he has built an index/contents navigation-assisting sidebar.
  • Note: Loads external script.
  • Here is a Tiny XPath Tester I found on stackoverflow (homepage.
  • Nuke next item clicked
  • Waits for user click, and hides whatever element they clicked on from the page.

  • Todo: Actually destroy the element! This is more like a Zap script, setting style.display='none'.
  • Todo: Add two icons to the page, one to turn off the bookmarklet, another to undo deletes (restore deleted elements from the Trash).
  • Todo: Add info about what was destroyed (e.g. display its XPath in the statusbar, or in Trash list).
  • Todo: The element we want to destroy might not have any exposed surface to click on, e.g. a FORM. Maybe we can fatten out invisible/zero-size elements. (E.g. mark each with a '.'s and give info on mouseover?)
  • Just the Links
  • Displays a list of all the links in the page.

    (This works badly on this page because the hrefs are poorly formatted, but on most pages it works fine!)

  • Just the Images
  • Displays a list of all the images in the page.

  • Faviconize External Links
  • Adds the favicon of the host server next to every external link on the page.

    I was recommended to consider also host/favicon.png but I saw none of these so stuck with .ico.

  • Kill All Fonts
  • Removes all HTML and CSS font settings from the DOM, so your browser will use its default font set.

  • Bug: Sometimes it fails to clear all of the styles. I think these might be css files included by script tags whos rules do not appear in document.styleSheets.
  • Todo: Convert known faces to sensible choice. E.g. if the document specifies a fixed-width font we recognise, then convert the font to our favourite fixed-width font, and not a serif font. (TT and PRE tags should work fine already.)
  • Move Things Around version 0.2
  • Allows you to move parts of the page around.

  • Re-run the bookmarklet to stop it. Elements made moveable will remain moveable, and un-clickable.
  • When testing from this page, the script cannot be easily disabled if you have not first Bookmarkleted it!
  • Done: Made moved elements sit relative to the page, not floating relative to the window.
  • Todo: Reset border properly when done.
  • Todo: To make selection of the correct container easier for the user, we should highlight or change the border of the element about to be selected, like Highlight Structure does. We should reset the changed style property afterwards.
  • Isn't there some sort of "nowrap" or "float" option that will stop things overlapping?
  • Note: Loads external script.
  • Navigation Bookmarklets

  • Close Other Frame ]

    \n'; var oldHTML = document.documentElement.innerHTML; oldHTML = header + oldHTML + scriptText; /*if (i<=0) { alert('Failed to find the body tag!'); return; } if (oldHTML.indexOf(scriptText) < 0) { alert('Insert failed.'); return; } document.write(oldHTML); return;*/ document.write('Previewing '+document.title+'\n'); document.write('\n'); document.write('\n'); document.write('\n'); document.write('\n'); document.close(); window.frames[0].document.write(oldHTML); window.frames[0].document.close(); window.frames[1].document.write('<BODY>Hover over links on the left to see a preview here.</BODY>'); window.frames[1].document.close(); })();">Split Preview version 0.90
  • Splits the page, placing the current page on the left, and a preview window on the right. The user can hover over a link to see its preview. Great for quickly browsing search results.

    I have found myself often using the Focus bookmarklet to select the block of interesting links before using SplitPreview, but Focus could use some work.

  • Note: This Bookmarklet does not work well on this page, because the links on this page are mostly bookmarklets, so do not point at pages we could preview. At least the first and last links on the page should work for you.
  • There are now two close buttons available to the user, one for each frame.
  • Todo:

  • Open the first link automatically. I tried this and realised it's not always desirable. Google results' first link is GoogleMaps with a big flash-app.
  • Thin frame across the top of the two panes, containing all the buttons+options, including Next/Previous buttons.
  • Maybe also a squish/unsquish button for the sidebar (temporarily almost-maximize preview frame)?
  • Also might be nice to have 'MoveRightFrameToLeft' and also a back button for that feature. This would describe a sort of history-tree-browsing way or surfing, somewhat similar to the early Gnome2 file-chooser.
  • Consider an alternative approach: forget the left frame, just have a thin top frame with all the links from the page presented as tabs, which open in the mainframe below. We could even do this without frames, just a table and an IFrame (or a hidden stack/cache of IFrames).
  • Bug/Feature: By quickly clicking on a link then moving away, it is possible to leave the highlight behind on an earlier link.
  • Bug: If you click e.g. a "Next" link in the side-pane, that frame will navigate but you will lose the bookmarklet's functionality. We might require a userscript to overcome this.
  • Some pages break out of frames. I don't know how to prevent this.
  • Remove the hover? Fix the sticky-hover bug?
  • Target Links and Forms at New Window
  • Use this if you want the browser to open a new window when you click on a link or button. (E.g. you want to use the search form, but you don't want to leave the current page.)
    Some browsers now do this automatically if you Ctrl-click on the submit button.

  • Target Links and Forms at This Window
  • Use this if you want the browser to stay in the current window when you click on a link or button.

  • Google for Pages that Link to This (pops up in a new tab/window)
  • Finds other pages on the web which link to this page.

  • Search This Site with Google
  • Uses Google to search this site for the currently selected text (or all pages if you haven't selected anything).

  • Check Site Reputation (Opens in new tab/window)
  • Stay safe online! Use this bookmarklet to check whether the current website is good or bad! It will open the myWOT service in a new tab/window.

    I think of these ones as toolbar buttons. (You can even give them a monochrome "icon" in Firefox if you copy a Unicode character from somewhere.)

  • [Go Up]
  • Some browsers no longer provide this as a default button!

  • When we run out of path, we could reduce the domain.
  • [Go Back] (to referrer)
  • Magic Back button. If you have opened a link in a new tab or window, the tab will not have a Back button, but sometimes the document.referrer is set to the page you clicked from, so you can use this button just once, to go 'back' to the page which we were linked from.

  • Actually causes a forward navigation action. Works only once. To avoid confusion, we could use document.location.replace() which would prevent creating confusing history.
  • [Clone]* - Opens a new window/tab with the current page.
  • (Revisit)
  • Navigates to the current page. Acts like the normal browser Refresh/Reload button but less likely to reload cached files.

  • When the location contains an anchor (# char) browsers interpret this as a scroll request, not a load request. So in the presence of # the bookmarklet fall back to document.location.reload().
  • In recent versions of Firefox, Reload will retain form input values, whilst Revisit will reset them.
  • Lookup This Page on Delicious * (Popup, Notes)
  • Sometimes the page will not have been bookmarked by anyone, in which case you could lookup the website homepage with...

  • Lookup This Site on Delicious * (Popup, Notes)
  • Web-Developer Bookmarklets

  • Show Form Data
  • Quick Javascript Console
  • My own dodgy console. With handy inspect() function. Now auto-loads JQuery.

  • Closes on Escape key.
  • Added user convenience functions inspect(obj) (shortcut i:obj), loadScript(url) and addStyle(cssString).
  • Beware: Inspection now runs automatically when you type a . at the end of any expression.
  • Added runtime option QuickConsole.showKeyEvents.
  • Done: Close button is in the right place now.
  • Done: Lots of expansion and bloat, including command-line history (still a couple of bugs to iron out there).
  • Added shortcuts c: to evaluate CoffeeScript and C: to show just the JS translation.
  • Testing: It would be groovy if both boxes worked the same, on the other. So you can choose which box to edit in depending if you have big code producing little output, or little code producing big output.
  • The Javascript Shell on SquareFree provides Tab-completion!
  • Todo: Improve looks. Move towards an IDE style (e.g. Firebug Lite) by integrate with XPathTester, JSInspector and HighlightStructure. Steal good bits from SquareFree's Console.
  • Intercept console.log()?
  • I somewhat regret having made the CS script lazy-loading, since it forced me to replace lots of nice return r;s with callback(r);s, increasing the complexity of the code. (We could have returned, but squeezed in a callback also, in the case where it is needed.)
  • The . shortcut occasionally activates when we don't want it to (e.g. in document.location = myObj.somePro oh damn). To avoid this, do not fire until user pauses typing.
  • In the case of document.body.appendChild(document.createElement('div')). then style. we often want to re-use the result from the first evaluation (although it may occasionally be undesirable - we could possibly break an object's state although it appears we are making a fresh one). Doing this properly may be beyond the scope of a bookmarklet; really we would need need an expression/statement parser and evaluator in order to re-use sub-expressions.
  • XPath Tester
  • Loads a little XPath testing tool which will show you the results of your xpath query.

  • Note: Loads external script xpath_tester.js
  • That script may also loads xpath.js XPathResult shim if required, needed by Konqueror 3.5.
  • See also: ajaxslt
  • Quick and easy DOM inspectors.

    Early scripts, need improvement.

  • Highlight Structure - Live Updates (Extra Info)
  • Colours the background of every element in the document according to its path.

    Displays the XPath of the focused element as a popup (sets title attribute).

    Useful when using Nuke, to find the element you really need to kill. Todo: Include Highlight Structure in Nuke automatically.

  • More useful for developers: as well as showing the XPath, we now also show the attributes of the element in its title/popup.
  • Added tag and attributes to title. Too bad the newlines don't work in the fox.
  • Added limited CSS info to title.
  • Issue: Cannot toggle off!
  • The current "webdeveloper" version is psychedelic but informative. We might want to make a friendlier few-colour version, for common browsing usage. Example usage: The structure of this page (and some others on the web), whilst tree-like, is not immediately intuitive. However if we were to set the background of all level 1 DIVs to green, and level 2 DIVs to blue, and level 3 BLOCKQUOTES to orange, etc., the page might be easier to navigate.
  • Can be sluggish to run on the heavier DOMs, due to poor event capturing.
  • It acts on every element you move the mouse over, which can be a lot. It could take a break while you move, if it doesn't highlight newly entered elements, it won't have to unhighlight them on the way out.
  • Part of the problem is that a mouselistener is added to every element in the DOM, when we should just capture using the body element.
  • Adapt the colour generator to produce pastels only.
  • Todo: Colouring all things of the same depth/path with the same colour is informative, but sometimes two neighbouring elements merge together and cannot be distinguished. Recommend slightly altering brightness/saturation (not hue) for neighbouring elements.
  • Depth: number of parent-nodes with non-zero clientWidth x Height, and larger area than children. Depth should rotate around the hues in e.g. 6 or 9 steps.
  • Rather than use the browser"s default popup for title tag when hovering over elements, we could use our own custom popup. This could give 2 advantages: 1) we could make newlines work in Mozilla; 2) By keeping the popup ever-present, the user can easily see when the XPath switches by a little or a lot. The XPath in Konqueror's statusbar almost does this, but when hovering over a link it gets hidden.
  • Highlight Structure - Live Updates (Less Info)
  • Highlight Structure - All In One Go
  • A modified version which does all the colouring in one go.

  • Highlight Structure - Sober
  • Fewer colours (same tags have the same colour, no matter the depth), but still too much contrast.

    Bookmarklets under Construction

    These are Bookmarklets I am still working on. They may or may not work.

  • Collapse | '; /* Safer but slower: */ var getback = document.location; /* Faster but messy on various sites: var getback = 'javascript:top.document.write(top.frames[0].document.documentElement.innerHTML);'; */ var header = '

    [ ' + toggler + ' Restore | Close ]

    \n'; var oldHTML = document.documentElement.innerHTML; oldHTML = '
    \n' + header + oldHTML + '
    \n' + scriptText; /*if (i<=0) { alert('Failed to find the body tag!'); return; } if (oldHTML.indexOf(scriptText) < 0) { alert('Insert failed.'); return; } document.write(oldHTML); return;*/ document.write('Previewing '+document.title+'\n'); document.write('\n'); document.write('\n'); document.write('\n'); document.write('\n'); document.close(); window.frames[0].document.write(oldHTML); window.frames[0].document.close(); window.frames[1].document.write('<BODY>Hover over links on the left to see a preview here.</BODY>'); window.frames[1].document.close(); window.frames[0].document.getElementById('header').style.position = 'absolute'; window.frames[0].document.getElementById('header').style.top = '5px'; window.frames[0].document.getElementById('header').style.right = '8px'; /* window.frames[0].document.getElementById('header').style.setAttribute('z-index',100); */ window.frames[0].document.getElementById('leftRow').style.width = '2px'; /*window.frames[0].document.getElementById('leftRow').style.height = '100%2525';*/ window.frames[0].document.getElementById('leftRow').style.height = top.window.innerHeight - 24; })();">Split Preview version 0.89 DEV - Toggle
  • Splits the page, placing the current page on the left, and a preview window on the right. The user can hover over a link to see its preview.

  • This version provides a 'Togglebar' to flatten/unflatten the sidebar.
  • It's working quite OK in Firefox, but a bit messily in Konqueror.
  • The ToggleBar should change height if the user resizes the window.
  • Widen Tables etc.
  • Releases some CSS and HTML width constraints, so fixed-width pages will expand horizontally to fill your screen.

    It is quite hard to construct an algorithm that will work on a wide range of pages. It is easy to destroy CSS that was preventing overlapping for example. I don't know enough about the different ways CSS is used to really attempt this properly. My primitive attempt remains here until I find a better one!

  • Done: Apart from tables, there are divs with fixed width, controlled by their css style. e.g. <div style="width: 710px;">
  • Seems we must check all the CSS styles, not only those associated with elements.
  • Current implementation only works on widths which have been given specified width between 500 and 1024px.
  • We don't yet detect width="90%" - we see that as 90px and skip it.
  • Set css widths to "auto" rather than "100%".
  • Deal with elements that are too thin because they have a large margin or padding css setting.
  • Bah CSS smells. Some pages I just can't fix without manual tweaking. Setting all widths to 'auto' will sometimes cause things to not fit well together.
  • Consider: Maybe better to set table/cell/row widths to "" (aka auto) rather than "100%".
  • Todo: Fine if you have a big browser. But the Bookmarklet should also make an effort to help, if your screen size is small.
  • Load Powerbar
  • My monstrous old web test environment, almost working through a bookmarklet!

  • Note: Loads external script.
  • Inline Preview - an alternative approach if you didn't like Split Preview.
  • Adds a 'preview' to each link, to open it 'inline' in an IFrame.

  • Alternatively to clicking, show popup preview on hover.
  • Very initial implementation (PoC).
  • Friendly Preview
  • Turn this page into a drop-down.
  • Generates a Bookmarklet which when invoked later offers a drop down menu of:

  • Opening the original page.
  • All the links on the original page. (Maybe those links were bookmarklets ^^. Optional: generate menu in tree, according to page.)
  • In other words, I intend to run this script on my Minitools (collected bookmarklets) page, to generate a bookmarklet which contains all of them in a menu. :)
  • Maybe it isn't an immediate drop-down menu, but it sits as an icon until clicked.

    If the user wants to keep it alive, we will need to keep our functions safe in a different frame. But in that case all the bookmarks will need to be retargetted at the relevant frame.

  • Inject GrimeApe (Userscript Proxy not working)
  • ...

  • Wordify (Generate Tag Cloud)
  • ...

    Wanted / TODO

    I introduced a different loading technique for all the external loading scripts that don't auto-init, so that they work with Konqueror. (Such scripts are more powerful since they can be loaded as libraries, although it's not essential: we could create scripts which call their own init() function.) Some of these bookmarklets would be smaller/neater without the Konqueror support. The compatibility of my loading technique has not been tested on other browsers.

  • Auto Highlight
  • Checks document.location AND document.referrer and if the CGI contains a search expression, assume this is a result page, and highlight the search terms.

    TODO: Userscript that does: if target of link is an image, on mouseover, load image in popup iframe

    MakeABookmarkletFromTheSearchFormOnThisPage ^^

    To help page investigation, colour every element (a bit like XPathGrabber does). And when we mouseover an element, show which one it is in the StatusBar (e.g. show it's XPath, since colour won't be possible in the StatusBar)p.

    Something similar to Preview Links in FloatingFrame, but instead split the window into two frames, put the current page in the left frame, and make all its links open the page in the right frame (when clicked, or hovered). It would be desirable to allow the split to be resized by the user. Also, be able to close the sideframe, or close the main frame.

    If I am viewing a page which is the result of a Google search, I may decide that the page is useless, and want to view another result. It would be great if the page could have a little icon added, which on hover would show the other search results, and let me switch to one of them. We may be able to use Referrer to determine if this page was obtained from a search-results page. (Although actually, we could consider 'any' page as a 'list-of-links', we don't have to restrict this feature to search-result pages only.)

    Invisibly preload links when I mouseover them

    Sometimes I am reading a page but I know where I am likely to go next. If I can preload that page then when I do follow the link, it will load fast when I do click.

    Zoom To. Using a selection border like Firebug, let the user pick a block of the image. Move this block to the top of the document, and move everything else in the document into a hidden block, until Zoom Out is clicked. This would be an ideal way to throw away parts of the page we don't want, before using Split Preview.

    StripSearch. Hides all elements except those containing the search text. Ideal for tables. OK this was implemented as Trim to Search String above, but it's NOT great for tables!

    BatchNuke (aka BatchSelect*-1): User is given text box to enter an XPath. (He can get xpath hints by mouseover the document.) As he types the XPath, elements of the page are hidden, until he finds the XPath he wants. Then he hits enter, they are permanently hidden/destroyed, and he can enter another XPath if he wishes.

  • Done: JavascriptConsole: Konqueror does not accept javascript: commands in the location bar. How can I run little snippets of javascript on the page? This Bookmarklet should popup a floating IFrame with a textarea where the user can edit and execute Javascript, and close it when finished. For debugging but also for power-processing of pages. (We may wish to append/include external .js files.)
  • Bookmarklets and Framesets do not mix well. Most Bookmarklets will try to target the frameset document rather than the child frame we are trying to focus on. It would be nice to have a generic solution to this.

    Add Kill Column to Sort Table.

    Show Web 2.0: Show which elements have special events such as mouseOver etc. In fact expose all elements with out-of-the-usual properties. Limit to: javascript, css, URLs, other, ...

    Some of these bookmarklets are setting events on every element in the DOM in order to capture them (and then having to do tricks to only capture the top event fired!). I believe using addEventListener() should allow us to capture all events, and the element on which each event occurred on.

    I generated hex by hand in the Highlight Structure bookmarklets. But I could have used: number.toString(16).

    We would like to be able to select whether a Bookmarklet will open a new window, or popup an iframe in the existing page, or just go straight to the page. This would require abstracting bookmarklets which produce a destination URL. It could be a pre-processing done by Javascript before we grab the bookmarklet.

    For pages with too few anchor elements: A Bookmarklet which when run generates a new Bookmarklet. The new Bookmarklet, when run in future, will navigate to the original page at the original scrollpoint! This page uses a short user scroll to find the neccessary element.

    Older Versions

  • \n'); document.write('\n'); document.write('\n'); /*document.close();*/ var scriptText = ' var linkNode,lastLoaded,lastbgcol; function doGet() { if (linkNode && linkNode != lastLoaded) { if (lastLoaded) { lastLoaded.style.backgroundColor = lastbgcol; lastLoaded.parentNode.style.backgroundColor = lastbgcol; } lastLoaded = linkNode; lastbgcol = linkNode.style.backgroundColor; linkNode.style.backgroundColor="#ffff44"; linkNode.parentNode.style.backgroundColor="#ffffbb"; top.window.frames[1].location = linkNode.href; } } function eventHandler(evt) { linkNode = evt.currentTarget; setTimeout("doGet();",700); } function clearLinkNode() { linkNode = null; } for (var i=0;i'+scriptText+'\n' + oldHTML.substring(i); if (oldHTML.indexOf(scriptText) <= 0) { alert('Insert failed.'); } window.frames[0].document.write(oldHTML); window.frames[0].document.close(); window.frames[1].document.write('<BODY>Hover over links on the left to see a preview here.</BODY>'); window.frames[1].document.close(); document.close(); })();">Split Preview 0.87
  • Now highlighting the link which is being previewed.
  • \n'); document.write('\n'); document.write('\n'); /*document.close();*/ var scriptText = ' var linkNode,lastLoaded; function doGet() { if (linkNode && linkNode != lastLoaded) { /*var rightFrame = top.document.getElementById("previewFrame");*/ /*top.window.frames[1].document.documentElement.innerHTML = ... ;*/ top.window.frames[1].document.write("<BODY>Loading "+linkNode.href+"...</BODY>"); /** Writing to the frame above causes the line below to fail in Konqueror. **/ /** One fix might be to embed some javascript inside the body we just posted, to redirect the frame/page/doc. **/ /*top.window.frames[1].src = linkNode.href;*/ /** Oh this saves Konqueror :) **/ top.window.frames[1].location = linkNode.href; lastLoaded = linkNode; } } function eventHandler(evt) { linkNode = evt.currentTarget; setTimeout("doGet();",700); } function clearLinkNode() { setTimeout(""); linkNode = null; } for (var i=0;i'+scriptText+'\n' + oldHTML.substring(i); if (oldHTML.indexOf(scriptText) <= 0) { alert('Insert failed.'); } /*alert('Final HTML = '+oldHTML.substring(i-40,i+60));*/ window.frames[0].document.write(oldHTML); window.frames[0].document.close(); window.frames[1].document.write('<BODY>Hover over links on the left to see a preview here.</BODY>'); window.frames[1].document.close(); document.close(); })();">Split Preview 0.86
  • Added loading page (nice for feedback, annoying afterwards).
  • I set links to open in the right frame when clicked, rather than leaving the frameset or opening a new window, although hover is usually sufficient anyway.
  • \n'); document.write('\n'); document.write('\n'); /*document.close();*/ var scriptText = ' var linkNode,lastLoaded; function doGet() { if (linkNode && linkNode != lastLoaded) { top.document.getElementById("previewFrame").src = linkNode.href; lastLoaded = linkNode; } } function eventHandler(evt) { linkNode = evt.currentTarget; setTimeout("doGet();",700); } function clearLinkNode() { setTimeout(""); linkNode = null; } for (var i=0;i'+scriptText+'\n' + oldHTML.substring(i); if (oldHTML.indexOf(scriptText) <= 0) { alert('Insert failed.'); } /*alert('Final HTML = '+oldHTML.substring(i-40,i+60));*/ window.frames[0].document.write(oldHTML); window.frames[0].document.close(); window.frames[1].document.write('<BODY>Hover over links on the left to see a preview here.</BODY>'); window.frames[1].document.close(); document.close(); })();">Split Preview 0.85 - Good!
  • In this version only, links from the left pane open in a new tab/window when clicked.
  • \n'); document.write('\n'); document.write('\n'); /*document.close();*/ var scriptText = ' var linkNode,lastLoaded; function doGet() { if (linkNode && linkNode != lastLoaded) { top.document.getElementById("previewFrame").src = linkNode.href; /*document.getElementById("previewlink").href = linkNode.href; document.getElementById("previewlink").innerHTML = linkNode.text; */ lastLoaded = linkNode; linkNode.text = "WHEEE"; /*alert("doGet called with linkNode = "+linkNode);*/ } } function eventHandler(evt) { linkNode = evt.currentTarget; setTimeout("doGet();",1000); } function clearLinkNode() { linkNode = null; } for (var i=0;i'+scriptText+'\n');*/ /*window.frames[0].document.open();*/ /** Prepending
     makes the text TT! **/
    			/*oldHTML = oldHTML.replace(/"/g,%27%26quot;%27);*/
    			/*
    			oldHTML = oldHTML.replace(/%3C.BODY%3E/i,'<HEAD>\n<SCRIPT type="text/javascript">'+scriptText+'</SCRIPT>\n');
    			*/
    			var i = oldHTML.lastIndexOf('%3C/body%3E');
    			if (i<=0) i = oldHTML.lastIndexOf('%3C/BODY%3E');
    			if (i<=0) { alert('Failed to find the body tag!'); }
    			oldHTML = oldHTML.substring(0,i) + '\n' + oldHTML.substring(i);
    			if (oldHTML.indexOf(scriptText) <= 0) { alert('Insert failed.'); }
    			/*alert('Final HTML = '+oldHTML.substring(i-40,i+60));*/
    			window.frames[0].document.write(oldHTML);
    			window.frames[0].document.close();
    			window.frames[1].document.write('<BODY>Hover over links on the left to see a preview here.</BODY>');
    			window.frames[1].document.close();
    			document.close();
    		})();">Split Preview 0.8
  • In this version, clicking on a link causes it to open in the current tab, leaving the frameset.
  • The only good thing about the initial IFrame implementations, is that we don't have to rebuild the DOM, we can successfully move the existing page inside the table. The disadvantage is they they suck. The sidebar needs a scrollbar too, but I couldn't successfully add the document into an IFrame.

    The TABLE methods might not suck so terribly if we used CSS 'overflow: scroll;'.

    Close ]\n'; /* cheap and dirty close - should be right aligned, maybe a button with value X. */ d2.appendChild(f); r.appendChild(d1); r.appendChild(d2); t.appendChild(r); document.appendChild(t); document.doGet = doGet; })();">Split Preview Prototype 0.4 - Poor

    Instead of a floating IFrame, we split the view left/right and put the two panes inside a table.

  • Done: Using only onmouseover for hover detection is too sensitive. We should also check: 1) user has hovered over the link for some time, and 2) the link being hovered on is not already loading!
  • Done: Add Close button, to remove the floatingframe, and remove all the onmouseover events we added.
  • Popup Preview Prototype 0.3 - Poor

    Pops up a floating IFrame, where target pages are displayed when we hover over links on the current page.

  • Bug: When invoked on Google result pages, the IFrame's floating style does not work properly - it sits at the bottom of the page.
  • Bug: It frequently covers up the links we want to hover over!
  • Comments / Feedback