I would like to scale an iframe on mobile safari.
I am including an iframe inside a div.
<html>
<body>
<div id="iframe_container">
<iframe src="http://jsfiddle.net/viebel/kTzDS/show" style="width:300px;height:300px;"/>
</div>
</body>
</html>
Now I am scaling the div with this code:
$(function() {
$('#iframe_container').css({
'-webkit-transform': 'scale(0.7)',
'-webkit-transform-origin': '0 0 '
});
});
On iOS/Safari, the iframe is cut (i.e. can't be entirely seen) while on desktop/chrome, the iframe is not cut.
Here is a jsfiddle page with the code: http://jsfiddle.net/viebel/tJQUH/
Just to clarify: here is a demo page that demonstrates the real problem - when opened on iPad/iPhone Safari - all the three lines should be of the same size: http://jsfiddle.net/viebel/tJQUH/show
Please advice what can I do to see the iframe on Mobile Safari completely uncut?
I have made few changes.Especially make the frame-size as 100%. Then try to scale the iframe itself.Check this out
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by viebel</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script>
$(document).ready(function()
{
//alert('hai');
$('#ifd').css({
'-webkit-transform': 'scale(1.1)',
'-webkit-transform-origin': '0 0',
'width': '100%',
'height': '100%'
});
});
</script>
</head>
<body>
<div id="iframe_container" style="width:500px;height:400px;border:1px solid black;">
<iframe src="http://jsfiddle.net/viebel/kTzDS/show" id="ifd" />
</div>
</body>
</html>
Link to jsfiddle:
http://jsfiddle.net/viebel/tJQUH/13
There's something wrong happening also on Safari Mac.
As a test, I would try to reload the iframe after changing the iframe_container CSS
var iframe = $('#iframe_container iframe');
iframe.attr('src', iframe.attr('src'));
Let me know if it's better!
You are scaling the outer div not the iframe, try scaling the iframe and it might work.
And since you did specify that the iframe should be 300px, it would be easier just set the iframe height and width to 210px since that is 70 percent of 300.
use jQuery's $(window).height() to scale the iframe and also calculate the iframe dimensions on orientation change.
Related
In JQuery Mobile 1.4 panels can be external, fixed and responsive which led me to try to create a persistent sidebar using a panel. Everything seems to work great except that the panel is closed every time a page transitions. The panel is then opened again when the new page is shown.
jsfiddle: http://jsfiddle.net/egntp/
I would like for the panel to remain on the page during page transition similar to the way persistent toolbars work.
Any ideas? I looked into the panel's beforeClose() event (http://api.jquerymobile.com/panel/#event-beforeclose) to try to prevent it from closing, but I didn't know how to proceed.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css" />
<style type="text/css">
.ui-panel-dismiss{display:none;}
#p1, #p2{margin-left:17em;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){$("#sidebar").panel();});
$(document).on("pageshow", ":jqmData(role=page)", function() {
$("#sidebar").panel("open");
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="panel" data-animate="false" data-position-fixed="true" data-swipe-close="false" id="sidebar">
<h1>sidebar</h1>
Page 1<br />
Page 2
</div>
<div id="p1" data-role="page">
My page 1
</div>
<div id="p2" data-role="page">
My page 2
</div>
</body>
</html>
I'm trying to do similar things, playing around with mild success here and there....try starting with this and see how far you can take it...
.ui-panel-closed {
width: 17em !important;
visibility: visible !important;
}
The reason this may work is because all jQuery Mobile is doing when you open or close a panel is they are modifying the css classes of the panel div. One thing they do is toggle a couple css classes, ui-panel-open and ui-panel-closed.
The above css ensures that even though they add the ui-panel-closed class to the panel div, the panel remains open.
You can do this in jQuery mobile 1.4 onwards. Just place the panel outside your page (i.e. data-role="page").
Note that external panels need to be initialized manually. So just do the following:
$(document).on( "pageshow", "[data-role='page']", function() {
$( "your_panel_selector" ).panel({ animate: true });
});
I want my div to go fullscreen.
I have a structure similar to the following and my method works when my div is outside an iframe but I can't get rid of the iframe.
html
<html>
<body>
<iframe>
<div id="contentDiv">Content</div>
</iframe>
</body>
</html>
css
.Maximized{
position: absolute;
top: 0;
left: 0;
width:100% !important;
height:100% !important;
}
When a user fullscreens the browser my content div should go fullscreen as well.
In my fullscreen-on event I do the following
$('#contentDiv').addClass('Maximized');
However the div fills the iframe and not the main window.
Is it possible to make my div go full screen just by adding classes?
No, you'll need to make the iframe go full screen as well.
As far as the contents of the iframe are concerned the iframe is the window, so going full screen inside the iframe will only make it the size of the iframe. But if you resize the iframe to be full window, then its contents can be full as well, provided you have no border, padding or margins on your iframe.
Try this code:
<iframe width="100%" height="100%" >
<div id="contentDiv">Content</div>
</iframe>
An iframe needs a src. You can't directly access the CSS of your iframe through the parent window, but that shouldn't matter in your case. Your code should look more like:
<!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' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
iframe{
height:100%; width:100%;
}
</style>
</head>
<body>
<iframe src='content.html'></iframe>
</body>
</html>
I have a mobile site, unfortunately I can't direct access to do anything on HTML, so I'm using JQuery to style its width, height etc., the problem is the site has actually 762px width(which is a normal site for PC) and I gave 320px width(for an iPhone screen), everything works well but at the time when page loads it comes from the middle of the page to fit the 320px screen size. I strongly believe that my JQuery code for width(320px, although I specified Jquery for some other elements too) is taking action after the contents loaded in the html page.
(I saw this problem on Opera mobile emulator 320x480)
So if I can able to load the JQuery first then the contents(HTML) in the page may solve the issue. You guys have any suggestions?
my script is given below..
$(document).ready(function() {
$('head').append('<meta name="viewport" content="initial-scale=1.0, width=device-width" />');
$("table.bgContent").removeAttr("width");
$("table.bgContent").attr("width","320");
$("table.cart-header").removeAttr("width");
$("table.cart-header").css("background","none");
$("table.cart-header").css("border","none");
$("table.cart-header td:first").html('<img src="images/userdir/logomobile.gif" width="320" height="79" border="0"/>');
$('head').append('<meta name="viewport" content="initial-scale=1.0, width=device-width" />');
$("table:eq(2) td.bgHeaderBarCart").html(" ");
$('table.cart-header td:nth-child(2)').css('display', 'none');
$('hr').css('width','300px');
$('td.FormTextCart').removeAttr("width");
$('.cart-header').css('height','0px');
$('.ContentAreaCart').css('padding','0px');
$('.SpanOrderCenter').css({padding : '0px', textAlign : 'left', fontWeight : 'normal', fontSize : '12px', width : '300px'});
});
Just put a wrapper <div> within your <body> tag, for example:
<html>
<head>
</head>
<body>
<div id="wrapper" style="display:none;">
</div>
</body>
</html>
then on document ready in your js file, add:
$("#wrapper").show();
I used window.scrollYMax in firefox to get the max scroll, and used window.scrollY to find how close I was to the bottom of the page so that I could load more feeds. Problem is window.scrollYMax doesn't work outside of firefox! Help!
I think that you need document.body.scrollHeight
Those properties are Firefox-specific. This page gives a good explanation of what browsers support what: http://www.quirksmode.org/dom/w3c_cssom.html.
You might be looking for:
x.scrollWidth
x.scrollHeight
The following code works great for me -
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<embed id="pdf" src="your-source-of-pdf" width="100%" height="" type='application/pdf'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#pdf').attr('height', document.body.scrollHeight);
});
</script>
</body>
</html>
I want to detect the height of the viewable area using Javascript. I have this DIV of height 550px which I want to display on the browser. However, this height might cause the vertical scrollbar to appear on some browsers (depending on how many toolbars the user has installed). In that case I want to detect that, and alert the user about it.
I tried using document.body.clientHeight but it doesnt seem to work... gives me the same height when I tried adding new toolbars and refreshed the page.
this should help you:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
Extremely easy in jQuery (and works well across different platforms):
<html>
<head>
<title>Heyo</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
alert($(window).height());
});
</script>
</body>
</html>
Documentation here
It's easy with YUI as well.
<html>
<head>
<title>Heya</title>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0b1/build/yui/yui-min.js"></script>
</head>
<body>
<script type="text/javascript">
YUI().use('node', function(Y) {
alert(Y.get(document).get('winHeight'));
});
</script>
</body>
</html>
Documentation here