Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

iFrame Transparency Problem

Featured Replies

Hi

 

The background to this is that I have a fairly large PDF (4mb) that I'd like to display, among other content, within my webpage - but not until a link is clicked. In other words I don't want to burden casual visitors with an automatic 4mb download each time they visit this page.

 

I've worked out how to achieve this, but I'd like to make the iFrame 'invisible' until such time as the link is clicked. At present my page has a light blue background and the entire iFrame (it's quite large at 675x900) shows up white.

 

Despite all my efforts to set the 'allowtransparency' attribute to 'yes' or 'true' I'm still getting the white iFrame box appearing in both the local and online versions. I'm running on Dreamweaver CS3/IE8.

 

Any suggestions would be appreciated.

You need to add a transparent background colour to your body tag for it to work i think.

 

allowtransparency only works in Internet Explorer though.

I'm not sure if I understand properly, but from what I get, you dont' want to show something until a user clicks to show it?

 

This is a little outdated and untested (please test it first).

 

Add in <head>

var ie = (document.all) ? true : false;
function hideID(objID){
   var element = (ie) ? document.all(objID) : document.getElementById(objID);
   element.style.display="none"
}
function showID(objID){
   var element = (ie) ? document.all(objID) : document.getElementById(objID);
   element.style.display="block"
}

 

And, to show your content:

<div id="ONE" style="display:none;"></div>
<div id="TWO" style="display:none;"></div>

<button onClick="hideID('TWO');showID('ONE');">SHOW ONE</button>
<button onClick="hideID('ONE');showID('TWO');">SHOW TWO</button>

 

Sorry if it isn't what you wanted. I'm tired :)

  • Author

I done a bit more work on this ...

 

Firefox, Chrome, Opera & Safari for Windows all deal perfectly with the allowtransparency tag.

 

Microsoft have declared that from IE8 onwards they will not support this, hence my white box in their browser.

 

I couldn't get visibility: hidden to work.

 

With apologies to Thomas et al, I came up with a workaround which is a simple blank html page with the backround colour set to match my light blue. Being borderless you can't 'see' the iframe until it's filled with the PDF.

 

Sorry, but this is a needs must situation (as always). If I can compare us all to Halley's Comet with the likes of Thomas & co. as the nucleus and the rest of us newbies forming the rocky/dusty tail being dragged along in their wake!

 

It may take me some time to catch up but any pointers to resources on what we're meant to replace iframes with would be appreciated.

It may take me some time to catch up but any pointers to resources on what we're meant to replace iframes with would be appreciated.

 

As far as I am aware, there is no replacement for iframes/frames.

 

You can still use them, but it is not suggested.

 

There's always

<?php include("location.php"); ?>

, but I don't know if that would work with PDF's

  • Author

There's always

<?php include("location.php"); ?>

, but I don't know if that would work with PDF's

 

Thanks Peter - although my instincts based on past experience tell me that the minute I get to grips with PHP it will be replaced by something else as the 'preferred method'.

 

So cynical for someone so young ;)

Thanks Peter - although my instincts based on past experience tell me that the minute I get to grips with PHP it will be replaced by something else as the 'preferred method'.

 

So cynical for someone so young ;)

 

Lol. PHP isn't going anywhere any time soon.

I done a bit more work on this ...

 

Firefox, Chrome, Opera & Safari for Windows all deal perfectly with the allowtransparency tag.

 

Microsoft have declared that from IE8 onwards they will not support this, hence my white box in their browser.

 

I couldn't get visibility: hidden to work.

 

With apologies to Thomas et al, I came up with a workaround which is a simple blank html page with the backround colour set to match my light blue. Being borderless you can't 'see' the iframe until it's filled with the PDF.

 

Sorry, but this is a needs must situation (as always). If I can compare us all to Halley's Comet with the likes of Thomas & co. as the nucleus and the rest of us newbies forming the rocky/dusty tail being dragged along in their wake!

 

It may take me some time to catch up but any pointers to resources on what we're meant to replace iframes with would be appreciated.

 

 

display: none; ?

 

I haven't used frames in a decade - don't really remember how they behave. Just remember they often had to be treated specially and it'd differ from browser to browser.

 

To get up to speed to why frames aren't recommended I'd recommend reading a couple of articles that comes up when you google "webdesign frames". They will explain it much better than what I do. You can start with this one: http://www.sitepoint.com/article/frames-frame-usage-explained/

An iframe is the only way to include a pdf withing a page. This is set by limitations on the pdf reader software.

 

Whilst iframes are frowned upon, to include a pdf within a page, i think it is the only viable method.

An iframe is the only way to include a pdf withing a page. This is set by limitations on the pdf reader software.

 

Whilst iframes are frowned upon, to include a pdf within a page, i think it is the only viable method.

Question is: do you really need to embed a PDF info a web page? When you take all accessibility issues into consideration?

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.