javascript - JQuery Rotate isn't working correctly in winforms WebBrowser control -
i have small web page dynamic timer on made using jquery rotate.
it works great in chrome, firefox, , ie. problem is, wrote work inside of webbrowser control of winforms app.
when viewed through winforms app, z-layering doesn't work correctly, , spinning images seem resize spin causing them change position under overlays.
i'm trying come way still control in win-forms without resorting making bunch of images , removing sections "animate" it. has have dynamic timing, can't make gif.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jqueryrotatecompressed.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#f').fadeto(0, 0.6); var origsecs = getparameterbyname('seconds'); if (origsecs == null || origsecs == '') { origsecs = 10; } originalms = origsecs * 1000; start = +new date(); setinterval('rotate();', interval); }); var originalms = 0; var interval = 20; var start; function rotate() { var end = +new date(); var currentms = end - start; var rotation = currentms / originalms * 360; if (rotation < 361) { $('#e').rotate(rotation); if (rotation <= 180) { $('#c').rotate(rotation); } } if (rotation >= 180) { $('#c').hide(); $('#e').css('z-index', 3); if (rotation >= 360) { $('#e').hide(); } } } function getparameterbyname(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new regexp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results == null ? "" : decodeuricomponent(results[1].replace(/\+/g, " ")); } </script> </head> <body> <div style="height:209px;width:209px;position:fixed;top:0px;left:0px;"> <img id="a" src="images/lock.png" height="208px" style="position:fixed;top:0;left:0;z-index:0;" /> <img id="b" src="images/whitebot.png" height="208px" style="position:fixed;top:0;left:0;z-index:2;" /> <img id="c" src="images/bluebot.png" height="208px" style="position:fixed;top:0;left:0;z-index:3;" /> <img id="d" src="images/whitetop.png" height="208px" style="position:fixed;top:2px;left:0;z-index:4;" /> <img id="e" src="images/bluetop.png" height="208px" style="position:fixed;top:0;left:0;z-index:5;" /> <img id="f" src="images/lockoverlay.png" height="208px" style="position:fixed;top:0;left:0;z-index:6;" /> </div> </body> </html> i can think of 3 ways fix this:
find winforms control can mimic web page i've made exactly
fix javascript in way doesn't screw in winforms browser
find way make browser compatible web page
can point me 1 of these solutions?
after while of tinkering it, figured out solution. placing misbehaving images inside own div tags, performing same z-index switches on them works correctly in webbrowser control:
html change:
<body> <div style="height:209px;width:209px;position:fixed;top:0px;left:0px;"> <img id="a" src="images/lock.png" height="208px" style="position:fixed;top:0;left:0;z-index:0;" /> <img id="b" src="images/whitebot.png" height="208px" style="position:fixed;top:0;left:0;z-index:2;" /> <div style="height:208px;position:fixed;top:0px;left:0px;z-index:3;overflow:hidden;"> <img id="c" src="images/bluebot.png" height="208px" style="position:fixed;top:0;left:0;z-index:3;" /> </div> <img id="d" src="images/whitetop.png" height="208px" style="position:fixed;top:2px;left:0;z-index:4;" /> <div id="e2" style="height:208px;position:fixed;top:0px;left:0px;z-index:5;overflow:hidden;"> <img id="e" src="images/bluetop.png" height="208px" style="position:fixed;top:0;left:0;z-index:5;" /> </div> <img id="f" src="images/lockoverlay.png" height="208px" style="position:fixed;top:0;left:0;z-index:6;" /> </div> </body> javascript change:
if (rotation >= 180) { $('#c').hide(); $('#e').css('z-index', 3); $('#e2').css('z-index', 3); if (rotation >= 360) { $('#e').hide(); } }
Comments
Post a Comment