Hi all,
I am building an interactive site that is to be nested within another site using an scaled iframe. It needs to support Internet Explorer 9, but I am running into an issue with it. Everytime a user hovers over an icon, the tool tip is completely off. Here is an example:
I am using the tooltipster library which uses JQuery as well. Here is an example of the iframe code:
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"
content="minimum-scale=.25, maximum-scale=1.0" /><style>
.iframe{
-ms-transform: scale(0.65);
float: left;
padding:auto;
margin: -175px auto auto -325px;
}
</style><script>
(function($) {
$.fn.nodoubletapzoom = function() {
$(this).bind('touchstart', function preventZoom(e) {
var t2 = e.timeStamp
, t1 = $(this).data('lastTouch') || t2
, dt = t2 - t1
, fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click').trigger('click');
});
};
})(jQuery);
</script><script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script><script type="text/javascript"src="js/conditionizr.js"></script><script src="js/detects/chrome.js"></script><script src="js/detects/chromium.js"></script><script src="js/detects/firefox.js"></script><script src="js/detects/ie9.js"></script><script src="js/detects/ie10.js"></script><script src="js/detects/ie10touch.js"></script><script src="js/detects/ie11.js"></script><script src="js/detects/opera.js"></script><script src="js/detects/safari.js"></script><script>
conditionizr.config({
assets: '//mlabtestsite.azurewebsites.net/js/',
tests: {
'chrome': [],
'chromium': [],
'firefox': [],
'ie9': [],
'ie10': [],
'ie11': [],
'opera': [],
'safari': [],
}
});
conditionizr.on('chrome', function () {
$('.iframe').css({'margin':'-220px auto auto -200px'});
});
conditionizr.on('chromium', function () {
$('.iframe').css({'margin':'-220px auto auto -200px'});
});
conditionizr.on('firefox', function () {
$('.iframe').css({'margin':'0'});
});
conditionizr.on('ie9', function () {
$('.iframe').css({'margin':'-220px auto auto -200px'});
$('#iframe').attr('src', 'indexie9.html');
});
conditionizr.on('ie10', function () {
$('.iframe').css({'margin':'-220px auto auto -200px'});
});
conditionizr.on('ie11', function () {
$('.iframe').css({'margin':'-220px auto auto -200px'});
});
conditionizr.on('opera', function () {
$('.iframe').css({'margin':'-220px auto auto -200px'});
});
conditionizr.on('safari', function () {
$('.iframe').css({'margin':'-220px auto auto -200px'});
});</script></head><body style="margin: 0; padding: 0;"><iframe height="1080" width="1920" src="index.html" scrolling="no" seamless="seamless" frameborder="0" class="iframe" id="iframe"/></body></html>Using the -ms-zoom property creates the same result. Any help would be greatly appreciated as I am hitting a dead end.
Thanks