Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts

    javascript and iframe -- my two beautiful choices for HTML 5

    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

    .
    Last edited by Kevin_M_Schafer; 02-10-2012 at 04:38 AM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Kevin_M_Schafer View Post
    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.

    Quote Originally Posted by Kevin_M_Schafer View Post
    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...frame-seamless. It also exists in the W3C's HTML5 spec at http://dev.w3.org/html5/spec/Overvie...frame-seamless.

    Quote Originally Posted by Kevin_M_Schafer View Post
    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...frame-seamless and http://dev.w3.org/html5/spec/Overvie...me-frameborder.)

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

    document_1.xhtml
    Code:
    <?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.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    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.
    Last edited by Frankie; 02-10-2012 at 09:47 AM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    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”.

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by jamewhite86 View Post
    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?
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by VIPStephan View Post
    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?
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by Frankie View Post
    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-...her-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.

  • #8
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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.

    Code:
    <!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

    .
    Last edited by Kevin_M_Schafer; 02-10-2012 at 04:54 PM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    @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.

  • #10
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Frankie View Post
    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).

    Quote Originally Posted by Frankie View Post
    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:

    Code:
    <!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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    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.

  • #13
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    @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). 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.
    Last edited by Frankie; 02-11-2012 at 12:28 PM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Frankie View Post
    @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>.

    Quote Originally Posted by Frankie View Post
    Also, your modification still renders a border in IE<9.
    Yes, I suppose an object element is the way to go then.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •