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 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts

    HTML code only works in Firefox & Opera

    Challenge to anyone interested (please forgive the long explanation):

    The code below is supposed to display looping images from 4 radar sites. Note that each site is centered within its own iframe.

    I assigned each image as a background to its respective iframe. Since each image is larger than the iframe that contains it, this allows me to center the image on each radar location within the smaller iframe.

    Now the problem! This code only works like it should (i.e. displaying looping images in each iframe) in the Firefox and Opera browsers. It won't work at all in IE. In Google Chrome, it only works correctly in the upper left iframe, and has trouble even loading the images in the other iframes. And in the Safari browser, although it is able to display all the radar images, it seems that only the upper left iframe loops consistently.

    Note that I have only worked with HTML 4.01, and I am hoping SOMEONE can figure out what I need to do to get this code to work correctly in IE, Google Chrome, and Safari browsers. I did run it through a CSE HTML Validator and it looked OK.

    Thanks much. Henry
    ____________________________________________________________

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="refresh" content="120">
    </head>

    <body>

    <table width="940" border="0" cellpadding="0" cellspacing="0">
    <caption align="center">Ft. Campbell, KY upper left, Old Hickory, TN upper right, Memphis, TN lower left, and Hytop,
    AL lower right)</caption>
    <tr>
    <td>
    <iframe width="466" height="386" align="left"
    style="background-image:url('http://radar.weather.gov/ridge/lite/N0R/HPX_loop.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:-56px -57px;">
    </iframe>

    <iframe width="466" height="386" align="right"
    style="background-image:url('http://radar.weather.gov/ridge/lite/N0R/OHX_loop.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:410px -50px;">
    </iframe>
    </td>
    </tr>

    <tr>
    <td>
    <iframe width="466" height="386" align="left"
    style="background-image:url('http://radar.weather.gov/ridge/lite/N0R/NQA_loop.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:-56px 335px;">
    </iframe>

    <iframe width="466" height="386" align="right"
    style="background-image:url('http://radar.weather.gov/ridge/lite/N0R/HTX_loop.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:412px 335px;">
    </iframe>
    </td>
    </tr>
    </table>
    </body>
    </html>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You should be using div or img tags - not iframe to attach those images (div if they are irrelevant to the page and are just background decoration behind content and img if they are supposed to be part of the page content. Anyway as background it makes no difference whether the browser displays them or not.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    Quote Originally Posted by hsteiger View Post
    I assigned each image as a background to its respective iframe. Since each image is larger than the iframe that contains it, this allows me to center the image on each radar location within the smaller iframe.
    This is not proper use of an iframe element, which is supposed to be used to display content external to the current document.

    Quote Originally Posted by hsteiger View Post
    Now the problem! This code only works like it should (i.e. displaying looping images in each iframe) in the Firefox and Opera browsers. It won't work at all in IE. In Google Chrome, it only works correctly in the upper left iframe, and has trouble even loading the images in the other iframes. And in the Safari browser, although it is able to display all the radar images, it seems that only the upper left iframe loops consistently.
    Your code works for me in Firefox 19, Opera 12.1, and WIE10 out of the box. I have to use a Maximize or Restore Down command to get the images to display properly in Chrome 26; otherwise, your code works in that browser as well. I'm on a Windows machine, so I can't check your code in Safari.

    Quote Originally Posted by hsteiger View Post
    Note that I have only worked with HTML 4.01, and I am hoping SOMEONE can figure out what I need to do to get this code to work correctly in IE, Google Chrome, and Safari browsers. I did run it through a CSE HTML Validator and it looked OK.
    I was able to get a properly coded HTML5 solution working with a bit of trouble. It works in all of the aforementioned browsers, but probably not so much in older browsers:

    Code:
    <!doctype html>
    <html lang="en-US">
    	<head>
    		<title>Demo Document</title>
    		<!-- <base href="http://radar.weather.gov/ridge/lite/N0R/"> is not supported for inline SVG images in Opera 12.1. -->
    		<style>
    			* { margin: 0; }
    			/* 940px = (2px border-left-width + 466px width + 2px border-right-width) × 2 */
    			figure { width: 940px; overflow: auto; margin: 1em auto; }
    			figcaption { margin-bottom: 1em; font-weight: bolder; }
    			/* Browser Fix Explanation: WIE10 displays overflow content for inline SVG images without overflow: hidden. */
    			svg { display: block; float: left; border: 2px solid silver; overflow: hidden /* Fix for WIE10 */; }
    			svg:nth-of-type(even) { border-left: 0 none currentColor; }
    			svg:nth-of-type(n + 3) { border-top: 0 none currentColor; }
    			abbr { border: 0 none currentColor; cursor: help; }
    			abbr:hover { border-bottom: 1px dotted; background-color: yellow; color: black; }
    		</style>
    	</head>
    	<body>
    		<figure>
    			<figcaption>Clockwise from Top‐Left: <abbr title="Fort Campbell, Kentucky">Ft. Campbell, KY</abbr>, <abbr title="Old Hickory, Tennessee">Old Hickory, TN</abbr>, <abbr title="Hytop, Alabama">Hytop, AL</abbr>, and <abbr title="Memphis, Tennessee">Memphis, TN</abbr></figcaption>
    			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" width="466px" height="386px">
    				<image x="-70" y="-85" width="600px" height="550px" xlink:href="http://radar.weather.gov/ridge/lite/N0R/HPX_loop.gif"></image>
    			</svg>
    			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" width="466px" height="386px">
    				<image x="-70" y="-85" width="600px" height="550px" xlink:href="http://radar.weather.gov/ridge/lite/N0R/OHX_loop.gif"></image>
    			</svg>
    			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" width="466px" height="386px">
    				<image x="-70" y="-85" width="600px" height="550px" xlink:href="http://radar.weather.gov/ridge/lite/N0R/NQA_loop.gif"></image>
    			</svg>
    			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" width="466px" height="386px">
    				<image x="-70" y="-85" width="600px" height="550px" xlink:href="http://radar.weather.gov/ridge/lite/N0R/HTX_loop.gif"></image>
    			</svg>
    		</figure>
    	</body>
    </html>
    Last edited by Arbitrator; 03-15-2013 at 11:37 AM. Reason: I corrected several omissions in the code and fixed the caption info order.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    hsteiger (03-16-2013)

  • #4
    New Coder
    Join Date
    Mar 2013
    Location
    London
    Posts
    17
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Arbitrator View Post
    This is not proper use of an iframe element, which is supposed to be used to display content external to the current document.
    Do people still use iframes?
    Seriously, I'm curious to how they're actually meant to be used.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    Quote Originally Posted by SirPrize View Post
    Do people still use iframes?
    Seriously, I'm curious to how they're actually meant to be used.
    They're used to import third-party content that you don't control. For example, you might import a YouTube video or a Facebook chat stream as has been done at http://thinkprogress.org/economy/201...e-protections/.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Mar 2013
    Location
    United Kingdom
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have never been used iframe before but if you used div in properly than it will be worked.

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    Quote Originally Posted by andyskipper View Post
    I have never been used iframe before but if you used div in properly than it will be worked.
    Judging from your English, Andy Skipper is not your real name, is it?
    Last edited by Frankie; 03-15-2013 at 02:57 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.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Arbitrator View Post
    I'm on a Windows machine, so I can't check your code in Safari.
    Why not - Safari has been available for windows since version 3 came out.

    The only reason for still using an <iframe> tag now is IE7 which doesn't allow the border to be turned off if you do it properly using an <object> tag instead. All other browsers now support using the standard <object> tag for embedding one HTML inside another so that you no longer need to use the antiquated non-standard iframe tag for that purpose.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    Quote Originally Posted by felgall View Post
    Why not - Safari has been available for windows since version 3 came out.
    Safari on Windows is dead. Apple quietly discontinued support for it quite some time ago (May 9, 2012 per Wikipedia).

    Quote Originally Posted by felgall View Post
    The only reason for still using an <iframe> tag now is IE7 which doesn't allow the border to be turned off if you do it properly using an <object> tag instead. All other browsers now support using the standard <object> tag for embedding one HTML inside another so that you no longer need to use the antiquated non-standard iframe tag for that purpose.
    In the modern world (HTML5), an iframe element should be used to display (third-party) HTML documents because that's the element designed for that purpose.
    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
    •