jquery.minimap
jquery.minimap copied to clipboard
Dont shrink Content
First of all, thanks for quick reply. This is more request then issue.
I have setup new jsFiddle http://jsfiddle.net/nLauR/2/embedded/result/
Is this technically possible (in terms of performance and size) to make minimap dont shrink, but just take window height and when necessary to scroll that place.
Like sublime text
does this
I dont want to open new issue, so I'll ask it here, are you planning on moving to canvas? Coping will cause many issues (like search and event listeners with bootstrap and multiple IDs.. and many such)
To your first question, yes, it should be possible and feasible to give the minimap a fixed width and scroll it along with the window like ST2's minimap. The math and UX of it was getting away from me when I first wrote this, so I intentionally avoided it for the first release.
Canvas is the obvious solution to a lot of problems caused by HTML cloning of content, but I couldn't get the performance I wanted using canvas.
See http://codecanyon.net/item/mgminimap-jquery-minimap-plugin/full_screen_preview/5698116 for an example of a plugin that uses html2canvas to draw a page to canvas for use as a minimap - it works, but the image quality is rather low, and the delay in drawing the page element to canvas and rendering feels a bit clumsy. I think the quality and speed could be improved somewhat, but its a low priority at the moment... especially since there are other tools that already do that.
I opened a new issue (#7) to track investigating canvas alternatives...
Agreed on quality. The first thing I liked in your plugin was how clear minimap was. But I still believe better quality can be achieved. I think author of that plugin wanted to preserve minimap resizable, so he didn't try to optimize quality. (just maybe :) )
Also it stated that one (and first) its feature is: HTML5 Canvas based fast rendering
I also believe canvas is fast. And its getting faster. If you are going to clone really big website, canvas can be a huge advantage.
On the subject - I just saw that jQuery.clone does not copy its event handlers bu default http://api.jquery.com/clone/#clone-withDataAndEvents-deepWithDataAndEvents
The problem that rose is that I have many functions delegated on body and window. + Using class and ID based callbacks, so it prevents many of my functions to execute (since they become arrays and etc.)
Well I can handle that and rewrite it. but there will come others I believe. And many much problems can be easily solved with canvas
One more way described here: http://www.html5rocks.com/en/tutorials/streaming/screenshare/
Method 2: converting page to blob URL and then maybe putting it inside an iframe. Advantages:
- you preserve the style you are using now.
- even if ID are same they wont intersect since they are in different documents.
- difference between usual iframe of a page and blob url is that you wont hit server second time. Disadvantage: well, in page search still displaces two results.
maybe this solution can be also done without blob, just making an iframe from jQuery.clone() object. as http://django.is/ does this
Anyways just reporting everything I find useful, if this informations are irrelevant and not necessary just say so. I'm just very interested in this running on my website ))
Yeah, the problem isn't that jQuery.clone
is duplicating event handlers - it doesnt. The biggest problem is that it duplicates element ID's, which then breaks any handlers attached to those elements by ID (since there should never be more than one element with a given ID on a page.) There's really no way to avoid that by stripping out ID attributes, either, since elements could be styled by ID.
Canvas is fast, true, but javascript-based DOM rendering into canvas can't ever be as fast as browser-based rendering.
You bring up some good options, though... If the minimap were cloned into an iframe, then the name collision of ids wouldn't be an issue because they would be in two separate documents, and the map would also not appear in in-page search results.
The minimap on django.is is really cool and smooth, and probably the best way to go.
Actually, looking over the plugin used on that demo page - https://github.com/demux/sublime-scroll - I'm really impressed with how smooth it is and the thoughtfulness of some of the options, like the "fixed elements". Other than in-page search results being duplicated, is there anything missing from that approach?
Well, only the one I'm after - to put minimap on custom container rather than window.
Yes it smooth and and without canvas it will be small and probably better. The only thing I think - if content is changed on container, should we reconstruct the whole iframe? maybe you could provide some easy way to append and remove elements inside iframe, so developer can decide himself when they need to change content. But refresh method will be excellent too.
I went too far but this is general what minimap should handle. Also I was searching how to block iframe from searching but there seems no way for doing this.