Liquid Page – A bookmarklet to rearrange webpages

I was once again changing the design of one of my websites when I realized that it would be great if I could just move things around on a page to preview the changes – without any coding. As it turns out, there is a solution to that problem: A bookmarklet and a few lines of JavaScript did the trick. Using jQuery and its UI extension, this actually turned out to be rather simple to implement.

Drag the link (“LIQUID PAGE”) shown below to your browser’s bookmarks toolbar. You can then use it on any web page. Simply load the page and then click the link. Be aware: You cannot try the functionality out on this page by simply clicking the link (it’s in an iframe). Please also note that there is a slight delay after clicking while some Javascript (i.e. jQuery) is being loaded – just wait for the confirmation dialog.

So what can you do with this? Beyond the obvious tweaking of existing web page designs, it should not be forgotten that this may hold potential for playing tricks on unaware browser users. It is – of course – also fun to just reorder (read: destroy) a well-known page design…

Screenshots

Updates

  • 11-24-2016: Updated to latest jQuery.
  • I added a function that removes all “overflow” properties (after user confirms). Therefore everything can be moved everywhere on a page. Just be aware that you cannot test nested DIVs this way. Also, the page layout may break due to overflowing text.

Thanks

The code is based on the jQuery UI ThemeRoller bookmarklet implementation.

Source

In case you are curious, here is the JavaScript code. First the bookmarklet loader:

Then the actual JS:

  • Tip: Using the web developer toolbar to turn on block level element outlines while rearranging takes some of the guess work out of what you've got a hold of.

    • Great tip @droog! Thanks.

  • Awesome! This is perfect for previewing those "can you move this element 10px left to see what it looks like" requests without having to search through your CSS to find the style to edit.
    A nice addition would be iif you could move ul elements around as a lot of people use these for navigation etc without wrapping them in a div. Or perhaps an option to set what elements are dragable.

    • I guess it would be best to have a small dialog pop up with checkboxes that allow the user to select what is draggable. That will be the next version…
      For now, I added UL to the DIVs. Just restart the link and you'll see.