Rangy selection issue in iPad with iframes
HTML
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-core.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-cssclassapplier.js"></script>
<p>Test this text with Rangy Text selection</p>
<button>Highlight Selected Text</button>
<div id="generateFormDiv" style="display:none"><iframe height="200" class='myMask' width="100%" id="additionalFeaturesFrame" frameborder="0" src='/CobaltBlueDW/zHR8s' onload="checkIframeLoaded(this)" onreadystatechange="checkIframeLoaded(this)" style="display:none" scrolling="yes"></iframe></div>
CSS
p { padding: 30px; }
chucknorris { border: 2px solid red; }
.myMask{
width: 316px;
-webkit-overflow-scrolling: touch;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -webkit-box;
overflow: auto;
}
JavaScript
$(function() {
$('button').bind('click touchstart', function() {
var cssClassApplierModule = rangy.modules.CssClassApplier;
var wrapper = rangy.createCssClassApplier(null, { elementTagName: "chucknorris" });
wrapper.toggleSelection(window);
});
});
checkIframeLoaded(null);
function checkIframeLoaded(obj) {
alert('called');
document.getElementById("generateFormDiv").style.display = "block";
var iframe = document.getElementById("additionalFeaturesFrame");
var iframeDoc = null;
var iframeState = null;
iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeState = iframeDoc.readyState;
iframe.style.display = "block";
}