Ask HN: Review my jQuery Plugin (jQSlickWrap) | Hacker News Reader

Ask HN: Review my jQuery Plugin (jQSlickWrap)

jwf.us

43 pointsJasonWyatt11 comments

Over the course of the past week I designed and wrote a plugin for jQuery which provides a client-side implementation of the "Sandbag" approach to getting text/content to wrap around the actual contents of a floated image (as opposed to the typical bounding box you are usually stuck with).

Open articleView on HN

Quite like the idea, and the execution seems simple enough. What I would add to your site tho, are examples of the actual examples :). Now your examples are just code, while it would be nice to see them. Either next to the code, or with tabs, or... You get the idea. Kind of how the jQuery site does it.

a great idea Jason!

It is great for dynamic images, but I would think 99% of use cases is for static image. I would appreciate feature which does the magic and enables me to render static piece of HTML+CSS for direct replacement.

This way I would be able to bake static version during development and publish it without dependency on canvas or other tricky methods.

Here is a similar tool that outputs static html/css: http://www.csstextwrap.com/

EDIT: It seems that this plugin falls back on the normal css float property, so the only downsides I see are that JS is required and there is some small bandwidth overhead of sending the script. Not very big downsides at all.

This is completely awesome. I'd like somekind of 'cache' too, so all the calculation only executes once.

Wouldn't this "pre-calculated" version work only for a certain combination of text size, line-height, element widths, and zoom settings?

A pre-calculated version is not much different (conceptually) from just creating a static image containing the image and the text.

Haven't read all the technical details, but if the idea is to "sandbag" the image, text of all sizes and fonts should be able to flow around it properly? All it does is to create shape out of divs that is a closer match to the visible pixels than a rectangle.

I think what's really cool about this is that it looks like a really helpful tool for breaking the boxy, straight-line feel of nested elements and display:block that is normally the natural state of web page design. Props.

This looks great, will be using it. If I run into anything I'll let you know. Am I safe in assuming that if canvas is not supported it just does around-the-image wrapping?

That's right, it checks for canvas before it tries to do anything. If you find any bugs or have requests, the google code page where you download it from has an issue tracker. Glad you like it!

nice, like the reflect plugin too (but it could use a spacing option for "hovering" images above the reflection)

Good idea, thanks!

Reply on news.ycombinator.com