have looked around internet, , have not been able find answer this.
i building yet custom image slider, need able handle arbitrary html in div being animated.
generally, no problem... isn't first slider created, and, in general, if require pretty slice , dice effects, use empty div content background image else. if have allow handle arbitrary html, limit effects, or fade in html content once slice-n-dice transition completed.
in case, however, need pretty effects , arbitrary html in same sliders, , @ same time.
my best idea on how convert arbitrary html image.
i couldn't find decent, client side solution anywhere... realized stuff html svg element, , can use svg background image div.
(just fyi, has handled modern browsers, can handle svg , data-urls , such)
the first part kinda easy:
arbitraryhtml = "<style>div{padding:10px;border:5px solid red;border-radius:10px;width:500px;height:175px}p{text-align:justify;}img{height:50px;float:left;border-radius:5px;margin:10px;}</style><body><div><img src='steve.png'><h1>arbitrary html</h1><p>this allows arbitrary html turned image, , image able stuffed canvas. in case, leave image image can set background image of div visually sliced apart slider.</div></body>"; var stuff = document.createelement('svg'); stuff.innerhtml = "<foreignobject>"+arbitraryhtml+"</foreignobject>"; document.body.appendchild(stuff); this works fine if want stuff directly dom... need use background image div slicing , dicing.
since have svg code, should able use data uri feed image in.
i found example on fiddle, , attempted use method on code sample above stuff svg background-image...so far, have failed so.
example:
var = document.createelement('div'); i.setattribute("style","background-image:url('data:image/svg+xml,<svg>"+stuff.innerhtml+"</svg>);'"); document.body.appendchild(i); every time, same problem; there no errors or warnings thrown chrome console, div shows empty.
using methods (the code sample above, example) console shows data uri in code div properly, still fails show background.
as part of bug testing, had both side side... actual svg element (which displayed fine), , div same code stuck background image (which not display). due this, assuming problem way casting svg data-url rather svg itself.
i haven't been playing either inline svg or data url's before this... quite possible handling data url's or svg improperly way trying use them.
not sure doing wrong, solve this.
is there better way of converting arbitrary html image missed?
or idea of how achieve on right track, implementation screwed up?
any appreciated.
i guess chrome still has webkit bug. doing should work in firefox or opera 12. note ie9/10 doesn't support foreignobject @ all, not sure 11.
