I'm trying to create an iframe to simulate an iphone screen but i'm having problems to make font size be proportional to iframe size ( height x width ). I've put 320x480 just for tests.
Anyone have an idea how can i do this trick?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="text/javascript">
function makeIframe() {
var content = "<!DOCTYPE html><html lang='en'><head><meta name=" +
+ "'viewport' content='width=320, height=480, initial-scale=0.5,"
+ "maximum-scale=0.5," +
" minimum-scale=0.5, user-scalable=no' /></head><body>" +
"<h1>Test</h1></body></html>";
alert('content >> ' + content);
var iframe = document.createElement("iframe");
// iphone 4
iframe.height = 480;
iframe.width = 320;
document.body.appendChild(iframe);
iframe.contentWindow.document.open('text/htmlreplace');
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();
alert('2');
}
</script>
</head>
<body>
<div id="body"></div>
<input type="button" onclick="makeIframe()" value="Make" />
</body>
</html>
Maybe you could try to use em in your body tag:
<body style='font-size: 0.2em'>
then all the font-size inside body tag would be small.
JS Fiddle link: http://jsfiddle.net/nq0hdxae/
Related
How do I append multiple x3d elements in javascript via loop? Seems like x3d can be appended successfully, but the elements below it only show up for the first x3d.
Thank you for the help in advance!
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://x3dom.org/download/dev/x3dom-full.js"></script>
<script src="d3.v5.min.js"></script>
<script src="d3-x3dom-axis.min.js"></script>
<link rel="stylesheet" href="https://x3dom.org/download/dev/x3dom.css" />
</head>
<body>
<script>
var width = 800, height = 400;
var years= ['2017','2018','2019','2020','2021','2022'];
var clusters= [3,4,5,6,7,8,9,10];
for(year of years){
for(cluster of clusters){
id = year+'-'+cluster
var x3d = d3.select("body").append("x3d")
.attr('id',id)
.attr("width", width + 'px')
.attr("height", height +'px' )
}
}
</script>
</body>
DOM screenshot
I've got following HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
var w = window.screen.width;
var h = window.screen.height;
var s = "Width: " + w + "px<br/>Height: " + h + "px";
document.body.innerHTML = s;
</script>
</body>
</html>
Using Pixel 2 with Chrome gives me result:
Width: 412px
Height: 732px
And with Firefox, I got result:
Width: 414px
Height: 688px
Why the result are not the same? It looks to me that Firefox has not correct dimensions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Coupon Page</title>
<script type="text/javascript">
function printCoupon() {
var timeout = 1000;
self.focus();
window.print();
setTimeout("self.close()", timeout);;
self.focus();
}
</script>
</head>
<body onload="printCoupon();">
<p><img src="https://nebula.phx3.secureserver.net/2247f0de910e14f95483f60fdae499a0?
AccessKeyId=8BBF3308EC59517C0B34&disposition=0&alloworigin=1" originalattribute="src" originalpath="coupon.jpg" width="585" height="250">
</p>
</body>
</html>
I've searched for html coding to print webpage image only when image (w585 w250), actual size of image, or a related button is clicked. I found coding that works perfectly yet prints my image really out of focus. The coding you show addresses this by stating focus and such, I've worked on this for near a month without success, Please help
You can try media queries in css to print the image.
Check naturalWidth and naturalHeight and compare with image width and height so if they match then print page.
function printCoupon() {
var timeout = 1000;
var naturalWidth = $('#img')[0].naturalWidth;
var naturalHeight = $('#img')[0].naturalHeight;
var width = $('#img').width()
var height = $('#img').height();
if (naturalWidth == width && naturalHeight == height) {
self.focus();
window.print();
setTimeout("self.close()", timeout);;
self.focus();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body onload="printCoupon();">
<p><img id="img" src="https://nebula.phx3.secureserver.net/2247f0de910e14f95483f60fdae499a0?
AccessKeyId=8BBF3308EC59517C0B34&disposition=0&alloworigin=1" originalattribute="src" originalpath="coupon.jpg" width="585" height="250">
</p>
I'm trying to figure out WATIR.
Here is a situation. I want to monitor ads in few websites, but scraping them is not easy task because they are in iframe, then there is another iframe links which is generated with javascript. Only then comes the page which I would like to get.
Here is the code in main page:
<iframe width="300" height="250" scrolling="no" frameborder="0"
id="adbottomleft" src="/ad/left1" name="adbottomleft"></iframe>
Here is what the iframe says:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
background-color: black;
margin:0;
padding:0;
}</style>
</head>
<body>
<!-- Rubicon Project Tag -->
<!-- Site: MangaReader Zone: ROS_BTF_LEFT Size: Medium Rectangle -->
<div id="adfooter" style="width:300px;height:250px;"></div>
<script language="JavaScript" type="text/javascript">
function tl(){
var loaded = 0;
try {
loaded = parent.document['adver'];
} catch(e) { loaded = 0; }
if (loaded != 1) {
setTimeout(tl, 25);
} else {
var dest = document.getElementById('adfooter');
var lframe = document.createElement('iframe');
lframe.setAttribute('id','adbleft');
lframe.setAttribute('width','300');
lframe.setAttribute('height','250');
lframe.setAttribute('scrolling','no');
lframe.setAttribute('frameborder', '0');
lframe.setAttribute('src', 'http://ad.mangareader.net/btleft1');
dest.appendChild(lframe);
}
}
(function (){
tl();
}());
</script>
</body>
</html>
It does generate another iframe which looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
</head>
<body>
<!-- Rubicon Project Tag -->
<!-- Site: MangaReader Zone: ROS_BTF_LEFT Size: Medium Rectangle -->
<script language="JavaScript" type="text/javascript">
var cb = Math.random();
var d = document;
var iframe = "&fr=" + (window != top);
var ref = "";
try {
if (window != top) {
ref = "&rf="+escape(d.referrer);
}
} catch (ignore) { }
d.write("<iframe id='25504.15' name='25504.15' src='' framespacing='0' frameborder='no' scrolling='no' align='middle' width='300' height='250' marginheight='0' marginwidth='0'></iframe>");
d.getElementById('25504.15').src='http://optimized-by.rubiconproject.com/a/8240/13310/25504-15.html?cb='+cb+ref;
</script>
</body>
</html>
Only then comes the final page which I'm interested to scrape.
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css"> body {margin:0px; padding:0px;} </style>
<script type="text/javascript">
rubicon_cb = Math.random(); rubicon_rurl = document.referrer; if(top.location==document.location){rubicon_rurl = document.location;} rubicon_rurl = escape(rubicon_rurl);
window.rubicon_ad = "3260765" + "." + "js";
window.rubicon_creative = "3299047" + "." + "js";
</script>
</head>
<body>
<img src="http://assets.rubiconproject.com/campaigns/100/91/16/5/1325630095ap_300.jpg" border="0" alt="AnimePremium.net" /><script defer="defer" type="text/javascript">
{
if (Math.floor(Math.random()*100) < 1)
{
var url;
var iframe = (window != top);
url = "http://tap.rubiconproject.com/stats/iframes?pc=8240/13310&ptc=25504&upn="+iframe;
setTimeout(function(){ new Image().src = url }, 1000);
}
}
</script>
<script>var _comscore = _comscore || []; _comscore.push({ c1: "8", c2: "6135404", c3: "28", c4: "13310", c10: "3299047" }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })();</script><DIV STYLE="height:0px; width:0px; overflow:hidden"><IFRAME SRC="http://tap2-cdn.rubiconproject.com/partner/scripts/rubicon/emily.html?rtb_ext=1&pc=8240/13310&geo=eu" FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="0" HEIGHT="0" style="height:0px; width:0px"></IFRAME></DIV>
</body>
</html>
Impossible task?
here is what I'm doing.
irb
require "watir-webdriver"
browser = Watir::Browser.new :ff
browser.goto "mangareader.net"
browser.frame(:id, "adbottomleft").html - Works!
If I want to get one more layer down I get error
irb
require "watir-webdriver"
browser = Watir::Browser.new :ff
browser.goto "mangareader.net"
browser.frame(:id, "adbottomleft").frame(:id, "adleft").html -> Don't work.
Element belongs to a different frame than the current one - switch to it's containing frame to use it.
What should I change in the 2nd code to make it read the next iframe?
I have been searching for days. Started with selenium then htmunit with c# then tried mechanize with python, but couldn't achieve wanted results.
I keep jumping. I finally thought that I will be able to achieve what I wanted with WATIR.
I need some help to get this done. Any tips?
The ID of the frame created by the script is "adbleft" not "adleft" that might be your problem
browser.frame(:id => "adbottomleft").frame(:id => "adbleft").html
If the id of the final frame is not static, you might have to select it by index
browser.frame(:id => "adbottomleft").frame(:id => "adbleft").frame(:index => 0)
I want to put 3 parallel divs in html. div middle should be the width of 960px and center of the page, div left and div right will be both site of the div middle,the page min-width will be 1024px, when the browser's width is more than 1024px,div left and div right maybe width (100%-960px)/2 the overflow-x is hidden. When the browser's width is equal and less than 1024, div left and div right maybe width 32px ((1024-960)/2=32px), overflow-x is scroll(the page width show 1024px. I use this code,but it can not adjust the width unless refresh the page. How to do dynamic adjustment width and overflow-x?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head>
<body>
<style>
*{padding:0;margin:0;}
#box {min-width:1024px; _width:960px;}
#left {width:32px;float:left;background-color:blue;}
#middle {width:960px;float:left;background-color:red;}
#right {width:32px;float:left;background-color:green;}
</style>
<script>
$(document).ready(function() {
var width = document.body.clientWidth;
if(width>1024){
$('#box').css({
width:width + 'px'
});
$('#left').css({
width:(width-1024)/2+32 + 'px'
});
$('#right').css({
width:(width-1024)/2+32 + 'px'
});
}
});
</script>
<div id="box">
<div id="left">1</div>
<div id="middle">2</div>
<div id="right">3</div>
</div>
</div>
</body>
</html>
Try:
<script>
$(document).ready(function() {
var width = document.body.clientWidth;
windowResize(width);
$(window).resize(function() {
windowResize(width);
});
});
function windowResize(width) {
if(width>1024){
$('#box').css({
width:width + 'px'
});
$('#left').css({
width:(width-1024)/2+32 + 'px'
});
$('#right').css({
width:(width-1024)/2+32 + 'px'
});
}
}
</script>
You can do this by binding some javascript code to the resize event:
http://api.jquery.com/resize/