javascript - Why does calling focus() break my CSS transition? -
this html file shows 3 panel layout. css transition on "left" property gives me nice sliding effect when alter panels. works but, when alter panels, want place focus on input in new panel. can tell me why phone call focus() breaks css transition, , lands me half way between 2 panels? happens going forward. works if comment out transition, , works if delay phone call focus() timeout.
the problem occurs in chrome, ie , firefox.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>sliding bug</title> <style> #wrapper { width: 100%; height: auto; overflow: hidden; } #panelcontainer { position: relative; transition: left 1000ms ease; } .panel { float: left; } </style> </head> <body> <div id="wrapper"> <div id="panelcontainer"> <div id="panel0" class="panel" style="background-color: #888;"> panel 0 <input id="btn0" class="focussable" type="button" onclick="slide(1);" value="forward" /> </div> <div id="panel1" class="panel" style="background-color: #aaa;"> panel 1 <input id="btn1" class="focussable" type="button" onclick="slide(2);" value="forward" /> <input type="button" onclick="slide(0);" value="back" /> </div> <div id="panel2" class="panel" style="background-color: #ccc;"> panel 2 <input id="btn2" class="focussable" type="button" onclick="slide(1);" value="back" /> </div> </div> </div> <script> var panelcontainer; var panels = new array(); var numpanels; var currentpanel = 0; window.addeventlistener('load', init, false); function init() { settimeout(function () { window.scrollto(0, 1); }, 10); //hiding browser address bar in iphone/android panelcontainer = document.getelementbyid("panelcontainer"); panels = document.getelementsbyclassname("panel"); numpanels = panels.length; sizeresize(); } function sizeresize() { panelcontainer.style.width = (numpanels * window.innerwidth) + "px"; panelcontainer.style.height = window.innerheight + "px"; (var = 0; < numpanels; i++) { panels[i].style.width = window.innerwidth + "px"; panels[i].style.height = window.innerheight + "px"; } slide(); } window.onresize = sizeresize; function slide(panel) { if (panel != undefined) currentpanel = panel; panelcontainer.style.left = -(window.innerwidth * currentpanel) + "px"; if (panel >= 0) { panels[panel].getelementsbytagname("input")[0].focus();//shows problem //window.settimeout(function () { panels[panel].getelementsbytagname("input")[0].focus() }, 100);//no problem } } </script> </body> </html> javascript html5 css-transitions
No comments:
Post a Comment