Zoom content in an iframe

By Smith

05 Jan 2017 06:07 English 6 Replies

Hi,

I want to be able to start with a zoom of 150% or 200% for the content of an iframe, any ideas how this can be achieved:

css:

#my-div
{
    width    : 360px;
    height   : 360px;
    overflow : visible;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -260px;
    left     : -25px;
    width    : 540px;
    height   : 840px;
}

html:

Responses

6 Replies

André Reus

05 Jan 2017 19:22

hi~

I made it scrollable and give a predefined height, width. It works for me like this,

index.html

<div class="" id="main">
    <div class=>
		<iframe src="http://www.bom.gov.au/products/IDR664.loop.shtml" id="my-iframe" scrolling="yes" height="360" width="360" ></iframe>
	</div>
</div>

Css

#iframe {
    zoom: 0.75;
}

Output:

Reply to this post
Mark as answer
- Report
- Edit
- Delete

Smith André Reus

09 Jan 2017 03:48

Hi,

Sorry it has taken a while to get back to you thanks.

Unfortunately on the Gear S3 there is no zoom, only pan around, I want the animated map part of the page ONLY to load into an iframe or directly on the page NOT the whole page.

Is it possible to get the above to work?

What about another approach to load the whole page and pick out the DIV that is for the animated map only and load this DIV in a DIV on the page?

It would be appreciated if you could help get this to work.

Cheers

Reply to this post
Mark as answer
- Report
- Edit
- Delete

Smith

09 Jan 2017 05:20

Hi,

The following is the best I have so far but it does not zoom properly:

#iframe {
zoom: 3;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Wearable basic template generated by Samsung Wearable Web IDE"/>

<title>Tizen Wearable Web IDE - Tizen Wearable - Tizen Wearable basic Application</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/main.js"></script>

</head>

Can you get it to zoom properly?