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: