0

So if you visit www.mymanchesteruniverse.co.uk you will see an iphone at the bottom of the page.

The music icon should link to music.mymanchesteruniverse.co.uk.

What i need to do is resize only this link so the page shows normal size, yet scaled down to about 50% of its normal width and height while fitting in the iPhone iframe perfect. (trying to make it look like an iPhone formated page, which it is, just not fitting right here)

The code for the button/link is in this div

<div id="apDiv4" onclick="window.open('http://music.mymanchesteruniverse.co.uk', '_self', 'scale=50')"></div>

If anyone can help me modify the code (and replace my 'scale=50', as that didn't work) The whole team at MyManchesterUniverse would be very grateful.

Cheers, Nick

www.NickGarofalo.com

nick
  • 1
  • 1
  • 1

1 Answers1

2

You might be able to use the CSS Zoom property - supported in IE 5.5+, Opera, and Safari 4, and Chrome (verifed, please check before downvoting). Firefox is the only major browser that does not support Zoom (bugzilla item here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.

#iframeid {
    zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}

I used these answers in this post. And then verified it works in firefox 3.6 in your demo page.

How can I scale an entire web page with CSS? How can I scale the content of an iframe?

Community
  • 1
  • 1
Blowsie
  • 40,239
  • 15
  • 88
  • 108
  • Its not all of the links which i want to open in that window...just this one link and i cannot edit the code on that page, however i have in iframe which loads that window within where i can add some markup... – nick Dec 05 '10 at 19:06
  • do you mean the scaling was appliying to the other iframe links too? – Blowsie Dec 05 '10 at 19:08
  • if i set the #iframeid css, then every link which opens within that iframe will be scaled... is that correct? I only need this one page to be scaled in the iframe – nick Dec 05 '10 at 19:10
  • yes that is correct, you would have to different iframe with its own id for other pages, or you could use jquery to check if the iframe has a particular src... like this $("#iframe[src$='http://music.mymanchesteruniverse.co.uk']").addClass('scaled') – Blowsie Dec 06 '10 at 00:19