Skip to content

Instantly share code, notes, and snippets.

@eirenik0

eirenik0/frame2.html

Last active April 2, 2020 13:36
Show Gist options
  • Save eirenik0/886d1cf7131ed22edc516af2da4373ab to your computer and use it in GitHub Desktop.
Save eirenik0/886d1cf7131ed22edc516af2da4373ab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
frame2.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cross SDK test</title>
<style>
div {
font-family: "Arial", sans-serif;
line-height: 18px;
}
*::-webkit-scrollbar {
width: 15px;
height: 15px;
background: lightgray;
}
*::-webkit-scrollbar-thumb {
background: gray;
}
</style>
</head>
<body>
<div id="inner-frame-div" style="width: 300px; height: 180px; overflow: hidden; border: 2px solid black;">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
</div>
<iframe name="frame1-1" src="./frame3.html" style="position: relative; left: 50px;" width="450" height="350"></iframe>
<br>
<br>
</body>
</html>
Raw
frame3.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*::-webkit-scrollbar {
width: 15px;
height: 15px;
background: lightgray;
}
*::-webkit-scrollbar-thumb {
background: gray;
}
</style>
</head>
<body style="background:yellow;">
<img src="./green_minions-800x500.jpg">
</body>
</html>
Raw
longframe.html
<!DOCTYPE html>
<html>
<head>
<style>
html {
background: linear-gradient(to bottom, #7aef22 0%,#3bd8d8 33%, #4152ca 66%, #e967f9 100%);
}
td {
margin: 2em;
}
tr {
border-bottom: 1px solid gray;
}
</style>
</head>
<body>
<table>
</table>
<template id="row-template">
<tr>
<td></td>
<td><img src="minions-800x500.jpg" width="100px" style="opacity:0.7;"/></td>
<td>Lorem ipsum dolor sit amet</td>
<td>Sed ut perspiciatis unde omnis iste natus</td>
</tr>
</template>
<script>
var strings=[
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"Donec condimentum lacus nec efficitur aliquet.",
"Suspendisse ac purus at sem aliquet efficitur.",
"Pellentesque convallis felis eu sapien sagittis interdum.",
"Donec at nunc semper, volutpat quam et, pharetra metus.",
"Nulla vel dolor vehicula, rhoncus est eu, ornare odio.",
"Sed commodo sem sed nisl pellentesque placerat.",
"Aliquam vel mi nec sem feugiat fermentum.",
"Mauris pellentesque purus sed odio tempus maximus.",
"Duis nec justo rhoncus purus aliquet finibus sit amet quis nibh.",
"Praesent sed magna a erat maximus ultricies.",
"Curabitur vel erat at arcu sagittis consectetur vel id diam.",
"Vivamus in ligula pellentesque, ultrices tellus at, mollis nulla.",
"Nunc iaculis risus in sapien euismod ornare.",
"Nulla sit amet elit ut mi fermentum ullamcorper ut et orci.",
"Mauris sed nisi sed leo posuere laoreet ac iaculis ipsum.",
"Nunc ut eros ullamcorper, ullamcorper lacus id, cursus ex.",
"Praesent egestas nunc condimentum lacinia rutrum."
];
var table = document.querySelector("table");
var rowTemplate = document.querySelector("#row-template");
var l = strings.length;
for (var i=0;i<300;++i){
var newRow = document.importNode(rowTemplate.content, true);
var cells = newRow.querySelectorAll("td");
cells[0].textContent = "#" + (i+1);
cells[2].textContent = strings[(i*2+0)%l];
cells[3].textContent = strings[(i*2+1)%l];
table.appendChild(newRow);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment