...

View Full Version : javascript and iframe -- my two beautiful choices for HTML 5



Kevin_M_Schafer
02-10-2012, 04:35 AM
I recently bought a book at the book store about HTML 5. It said that most likely HTML 5 won't be the standard until 2022.

I've read about a "seamless" attribute for the iframe. Apparently it's unsupported at this time, so it doesn't pay to implement it into any code. Where does such an attribute as seamless exist, then, if no browsers support it?

The company that hosts my online video player finally removed the political ads from my player as it shows slide show images of the videos to play on my main page. It took some complaining, but they finally understood. The representative then said that all of their new coding for the player is HTML 5 compliant. The two choices: javascript and iframe.

Here's my beef. I don't want to rely on javascript for anything regarding functionality on my site. The other problem is I can't stand the terribleness of the iframe border. If I set its border to zero, then I get a big rubber stamp "L" on my forehead for Loser at the validator.

With iframes, it's like we all live in this village and we all want wallpaper for the inside of our houses. There's only one wallpaper manufacturer. We either live with the fact that the wallpaper rolls have an 1/8 inch margin where the design doesn't run to the edges of the paper, or we trim the rolls ourselves to get to the design and get cited with a violation of tech rights of the manufacturer.

--Kevin

.

Arbitrator
02-10-2012, 08:11 AM
It said that most likely HTML 5 won't be the standard until 2022.There isn't a fixed date. It's essentially finished when browser vendors agree on what the specs should say and implement that.


Where does such an attribute as seamless exist, then, if no browsers support it?It exists in the WHATWG HTML Living Standard spec at http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-seamless. It also exists in the W3C's HTML5 spec at http://dev.w3.org/html5/spec/Overview.html#attr-iframe-seamless.


The other problem is I can't stand the terribleness of the iframe border. If I set its border to zero, then I get a big rubber stamp "L" on my forehead for Loser at the validator.I'd guess that this is because you are using a border or frameborder attribute. The iframe element never had a border attribute defined and the frameborder attribute has been labeled as "obsolete" in HTML5 with an instruction to "use CSS instead." (See http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-seamless and http://dev.w3.org/html5/spec/Overview.html#attr-iframe-frameborder.)

The following border-removal CSS works for me in every current, major browser release:

document_1.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>Demo Document</title>
<style>
* { margin: 0; padding: 0; }
iframe { display: block; width: 1000px; height: 600px; margin: 2em auto; border: 0 none currentColor; }
</style>
</head>
<body>
<iframe src="http://www.example.com/"></iframe>
</body>
</html>

(You should be able to remove borders simply by specifying border-width: 0;, however.)

Frankie
02-10-2012, 09:40 AM
Arbitrator,

That doesn't validate: "No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type"?

And it doesn't work in IE<9.

VIPStephan
02-10-2012, 10:05 AM
I find the HTML 5 draft to be a little disappointing anyway. Rather than ressurect the iframe they should have concentrated on promoting and properly implementing the object element.

HTML 5 is just “tag soup 2.0”.

Frankie
02-10-2012, 11:59 AM
I think java scrip is best for HTML5 that why both language are used by use side.thanks
You can't do without the W3 Validator, can you? :D

Frankie
02-10-2012, 12:05 PM
I find the HTML 5 draft to be a little disappointing anyway. Rather than ressurect the iframe they should have concentrated on promoting and properly implementing the object element.
I agree with that the HTML5 validation rules should have been better thought through, but sometimes you just need an iframe. How else would you include a part of an external HTML page, other than a video? Can everything be solved with the object element?

VIPStephan
02-10-2012, 04:00 PM
Can everything be solved with the object element?

Yes, theoretically you can include text, HTML, or anything (MP3/PDF/…) with the object element, that’s what it was created for. It just happens that the only real application all the time was to embed Flash content.

The object element is a generic container and the browser/OS should handle the embedded file types according to their possibilities (e. g. use any available plugin to show/play the content). There is an old article from 2006 on http://aplus.rs/web-dev/insert-html-page-into-another-html-page/ on how to embed HTML files into another HTML file with the object element; since almost nobody is using IE 6 anymore and even IE 7 is slowly dying, I guess the problems they were discussing back then aren’t really much of an issue anymore.

Kevin_M_Schafer
02-10-2012, 04:52 PM
I put together a workaround to eliminate the border on an iframe. It basically stacks two divs on top of each other. The first being the iframe, and the second a masking border, which can be set to the color of the site background, such as the color white.

It validates. Is there a simpler way to apply a mask such as this? If there's more than one object, I suppose they would have to be labeled? I don't know much about using object 1, object 2, etc. or if that's even possible.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>iframe border mask demo</title>

<style type="text/css">

.vid {
position:absolute;
margin-left:500px;
margin-top:100px; }

object {
width:305px;
height:230px; }

.customborder {
position:absolute;
margin-left:500px;
margin-top:100px;
width: 300px;
height: 225px;
border: 5px solid #fff; }

</style>

</head>
<body>

<div class="vid"><object data="http://widget.newsinc.com/_fw/theeagleextra/toppicks_fg02899_top.html" ></object></div>
<div class="customborder"></div>

</body>
</html>


Edit: does anyone also have any idea why my css is often scattered when I post it here? There must be some formatting being carried over from my editor.

--Kevin

.

Frankie
02-10-2012, 06:08 PM
@Stephan: Thanks, I've bookmarked that page and will use the technique as soon as I stop coding for IE7.

@Kevin: I use XHTML Transitional + iframe if I have to include an external file (for the time being). With that doctype frameborder="0" does validate. The formatting that indeed is carried over comes from the underlying difference between spaces and tabs to indent text in the editor.

Kevin_M_Schafer
02-10-2012, 09:34 PM
Thanks, Frankie. Wouldn't the use of transitional on a brand new web page be the wrong use of that doctype? I thought transitional is something you throw up there to get your page to display correctly when browser support diminishes and you don't want to recode your site yet.

I don't know.

--Kevin

.

Arbitrator
02-10-2012, 09:42 PM
Arbitrator,

That doesn't validate: "No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type"?Yes, it does validate. The document is not an XHTML 1.0 Transitional document; it's an HTML5 document. The type="text/css" attribute is optional in HTML5.

Go to http://validator.w3.org/, click the "Validate by Direct Input" tab, and paste in the code I provided. Click "More Options" and change the "Doctype" option to "HTML5 (experimental)." Click "Check" and the code validates.

Unfortunately, the validator does not automatically validate as HTML5 when you don't use the <!DOCTYPE html> boilerplate DOCTYPE declaration, hence the issue. That code is not needed in XHTML since XHTML documents are always rendered in standards mode (as opposed to quirks mode).


And it doesn't work in IE<9.Yeah, that's because IE8 and lower don't support XHTML and probably don't support the CSS3 Color currentColor keyword.

I'd expect the document to work fine in older versions of IE (as HTML) with slight modifications:


<!doctype html>
<html lang="en-US">
<head>
<title>Demo Document</title>
<style>
* { margin: 0; padding: 0; }
iframe { display: block; width: 1000px; height: 600px; margin: 2em auto; border: 0 none; }
</style>
</head>
<body>
<iframe src="http://www.example.com/"></iframe>
</body>
</html>

VIPStephan
02-11-2012, 12:08 AM
Ah, by the way: Here is another article on the object element for you to bookmark (that’s the one I was originally looking for but couldn’t find it at first): http://joliclic.free.fr/html/object-tag/en/

It also has a lot of examples/test cases with different file/media types embedded.

Frankie
02-11-2012, 12:16 PM
@Kevin: it's more or less the other way around. Transitional/older doctypes are used until the coder can work with the new type and browsers can render that properly. Just make sure your code is intuitive, properly formatted, validates and is rendered in the significantly used browsers and browser versions (see here (http://gs.statcounter.com/)). That's all a customer can ask for (make separate pages for mobile phones, I'd suggest).

@Arbitrator: my pages have to validate with one click, without the customer having to do anything else. Otherwise it's no use, I'm afraid. Also, your modification still renders a border in IE<9.

@Stephan: thanks for that link, too.

Arbitrator
02-12-2012, 06:24 AM
@Arbitrator: my pages have to validate with one click, without the customer having to do anything else. Otherwise it's no use, I'm afraid.That can be accomplished with added boilerplate (in the XHTML code): <!DOCTYPE html>.


Also, your modification still renders a border in IE<9.Yes, I suppose an object element is the way to go then.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum