added an HTML page to configure two iframes with different URLs, may be used to display act and series leaderboard on a single page

This commit is contained in:
Axel Uhl committed 2012-12-04 22:35:02 +01:00
1 parent e6e8f8d90f
commit 5c9f6a9181
2 files changed
+77 -2

No files matched your search

@@ -2,7 +2,7 @@
<head>
</head>
<body onload="updateIFramePositionAndSize();" style="margin:0px;" >
<form id="urlForm" action="" onsubmit="return embbedUrl(this);">
<form id="urlForm" action="" onsubmit="return embedUrl(this);">
<b>URL:</b>&nbsp;<input type="text" size="150" name="embeddedUrl"><br/>
<b>Position:</b>&nbsp;&nbsp;Left: <input type="number" size="10" value="0" name="leftPos"> Top: <input type="number" value="0" size="10" name="topPos"><br/>
<b>Size:</b>&nbsp;&nbsp;Width: <input type="number" value="1280" size="10" name="sizeWidth">Height: <input type="number" value="720" size="10" name="sizeHeight"><br/>
@@ -16,7 +16,7 @@ var frameTopPos = 0;
var frameHeight = 720;
var frameWidth = 1280;
function embbedUrl(form) {
function embedUrl(form) {
$("#urlForm").hide();
$("#leaderboard").prop('src', form.embeddedUrl.value);
frameLeftPos = parseInt(form.leftPos.value);
@@ -0,0 +1,75 @@
<html>
<head>
</head>
<body onload="updateIFramePositionAndSize();" style="margin:0px;" >
<form id="urlForm" action="" onsubmit="return embedUrl(this);">
<b>URL 1:</b>&nbsp;<input type="text" size="150" name="embeddedUrl1"><br/>
<b>URL 2:</b>&nbsp;<input type="text" size="150" name="embeddedUrl2"><br/>
<b>Position:</b>&nbsp;&nbsp;Left: <input type="number" size="10" value="0" name="leftPos"> Top: <input type="number" value="0" size="10" name="topPos"><br/>
<b>Size:</b>&nbsp;&nbsp;Width: <input type="number" value="1280" size="10" name="sizeWidth">Height: <input type="number" value="720" size="10" name="sizeHeight"><br/>
<input type="submit" value="Set">
</form>
<script lang="javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script lang="javascript">
var frameLeftPos = 0;
var frameTopPos = 0;
var frameHeight = 720;
var frameWidth = 1280;
function embedUrl(form) {
$("#urlForm").hide();
$("#leaderboard1").prop('src', form.embeddedUrl1.value);
$("#leaderboard2").prop('src', form.embeddedUrl2.value);
frameLeftPos = parseInt(form.leftPos.value);
frameTopPos = parseInt(form.topPos.value);
frameWidth = parseInt(form.sizeWidth.value);
frameHeight = parseInt(form.sizeHeight.value);
updateIFramePositionAndSize();
return false;
}
function updateIFramePositionAndSize() {
var mozDevicePixelRatio = mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 6000, 25, .0001);
$("body").css("margin-left", (frameLeftPos / mozDevicePixelRatio) +"px");
$("body").css("margin-top", (frameTopPos / mozDevicePixelRatio) +"px");
$("#leaderboard1").height(frameHeight / mozDevicePixelRatio);
$("#leaderboard1").width(frameWidth / mozDevicePixelRatio);
$("#leaderboard2").height(frameHeight / mozDevicePixelRatio);
$("#leaderboard2").width(frameWidth / mozDevicePixelRatio);
}
$(window).resize(function() {
updateIFramePositionAndSize();
});
var mediaQueryMatches = function(property, r) {
var style = document.getElementById('binarysearch');
var dummyElement = document.getElementById('dummyElement');
style.sheet.insertRule('@media (' + property + ':' + r + ') {#dummyElement ' +
'{text-decoration: underline} }', 0);
var matched = getComputedStyle(dummyElement, null).textDecoration == 'underline';
style.sheet.deleteRule(0);
return matched;
};
var mediaQueryBinarySearch = function(
property, unit, a, b, maxIter, epsilon) {
var mid = (a + b)/2;
if (maxIter == 0 || b - a < epsilon)
return mid;
if (mediaQueryMatches(property, mid + unit)) {
return mediaQueryBinarySearch(property, unit, mid, b, maxIter-1, epsilon);
} else {
return mediaQueryBinarySearch(property, unit, a, mid, maxIter-1, epsilon);
}
};
</script>
<style id=binarysearch></style>
<div style="position:fixed; bottom:0; right:0;" id="dummyElement">X</div>
<iframe id="leaderboard1" width="1000px" height="300px" frameborder="0" src="http://www.sapsailing.com"></iframe>
<iframe id="leaderboard2" width="1000px" height="300px" frameborder="0" src="http://www.sapsailing.com"></iframe>
</body>
</html>