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 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2004
    Location
    Perthshire
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Iframe problem in Mozilla

    Help is required to make a page work in Mozilla, its fine in I.E. I actually have three problems with it, all Iframe related. If you first of all open the page in I.E., then click on ‘Large image 1’, this will call in the iframe which contains the details of the three problems. Help with any of them would be good. I’ve uploaded the page so you can see it in action, but have not included the images, for ease.

    Go to http://www.salmonfly.co.uk/test2.htm to view the page.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Is there any chance you could upload the images so that we can just test it? 'cause I don't think that it is working in IE, I think the page is loading behind the images even in IE.

    Also do you want to be able to see the images underneith the iframe? or does it not matter?
    Last edited by Badman3k; 02-02-2005 at 05:10 PM.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Okay the following script will make the iframe come to the front and the other layers behind it disappear.

    Code:
    <script>
    
    function show() {
    document.getElementById('hiddenframe').style.display='block';
    document.getElementById('linksLyr').style.display='none';
    document.getElementById('wn').style.display='none';
    }
    function hide() {
    document.getElementById('hiddenframe').style.display='none';
    document.getElementById('linksLyr').style.display='block';
    document.getElementById('wn').style.display='block';
    }
    
    </script>
    Hope this helps

    I'll start work on the other problems now, and post the solutions to them...if i find them lol

    Edit: How are the relative pages named? i.e. is the page Large Image 1 supposed to show called page1.htm and then for Image 2 it's page2.htm?
    Also I ain't sure that I'm gonna be able to make it 'remember' the scroll position of the iframe, depends on how the pages are named and then called.
    Last edited by Badman3k; 02-02-2005 at 05:30 PM.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Okay this will solve all the problems. I've basically extended the show function since the last time.

    You'll need to modify a few things to make it work properly.
    1) pagesrc needs to be in the correct format. I've assumed it to be pagex.htm where x is the image number.
    2) In order to call the show function from your images, you'll have to use:
    ... onClick="show(this);" ...
    3) You'll need to make sure that all your alt tags are correct for the Large images.

    Code:
    <script>
    function show(what) {
    // Okay we've been passed the img tag and attributes that we clicked on.
    // The pages are name page + the image number + .htm
    // So firstly we'll take the Alt text and split it up, by the spaces.
    // This will mean that the last array element will be the number of the image.
    
    altdetails = what.alt.split(" ");
    pagenum = altdetails[altdetails.length-1];
    
    // Now that we have the page number we can build up the src which we'll apply
    // to the hidden iframe.
    // This means you only require one layer and one iframe, as we'll be just
    // changing the src, thus giving the effect required.
    // This method also means that we always show the new pages at the top of the
    // page, and IE isn't going to 'remember' where it had been scrolled to
    // previously.
    
    pagesrc = "page" + pagenum + ".htm";
    
    document.getElementById('hif').src = pagesrc;
    
    // Now that we've changed the src of the iframe, we can continue to show it
    // but we must remember to hide the other layers, so that the iframe is always
    // infront.
    
    document.getElementById('hiddenframe').style.display='block';
    document.getElementById('linksLyr').style.display='none';
    document.getElementById('wn').style.display='none';
    
    }
    
    function hide() {
    
    // We need to hide the iframe but show the other layers.
    
    document.getElementById('hiddenframe').style.display='none';
    document.getElementById('linksLyr').style.display='block';
    document.getElementById('wn').style.display='block';
    
    }
    </script>
    If you have any problems using the code, just reply and I'll help you out
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #5
    New Coder
    Join Date
    Mar 2004
    Location
    Perthshire
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Badman3k

    Thanks for posting the piece of code, I'll try it later this evening.
    I'll also upload all the images this evening so you can see the page fully working. The iframe should sit on top of the images and does so on my machine using I.E.5, however I spent the afternoon at the library surfing the net trying to find solutions to the problem, and when I viewed the page on their machine with XP, the iframe was appearing behind the images as it does in Mozilla. I only need this page to work in I.E and Mozilla, I am planning to use a browser detect script up at the home page to advise people what browser they will need to view the site in its entirety.
    Thanks again

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Well I've tested it and it works with IE, Firefox, Mozilla and Opera (that's all on a Win XP system). I don't know how it'd work on a MAC, but I can't see that it'd be much different.

    Let me know whether it does what you want it to do
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #7
    New Coder
    Join Date
    Mar 2004
    Location
    Perthshire
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Badman3k

    I've just noticed your Edit under the first piece of code. In answer to this: 'Large Image1' calls in the iframe which should contain page1.htm. 'Large image2' would call in the iframe which should contain page2.htm, etc, etc. Each of the 24 large images open the iframe, each having their own page.

    I see you've just posted a second piece of code, looks good, I'll try it soon.

  • #8
    New Coder
    Join Date
    Mar 2004
    Location
    Perthshire
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Badman3k

    I've not been able to get the code to work on the page, not your fault but mine, I'm still a bit of a beginner at this. I must be omitting something when I make the changes.
    I've stripped the page down, (removed the navigation etc).
    Would you be kind enough to add your code and make the necessary changes then post it back up?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Reel gallery page 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Reel gallery page 1</title>
    <style type="text/css">
    @import "glide-grid1.css";
    </style>
    <script src="dw_glidescroll.js" language="JavaScript" type="text/javascript">
    </script>
    <script type="text/javascript">

    var wndo = [];

    // Necessary to avoid errors before page loaded
    function dw_glideScrollTo(num, x, y) {
    if ( wndo[num] && wndo[num].glideScrollTo ) wndo[num].glideScrollTo(x,y);
    }

    function initScrollLayer() {
    // hide loading gif
    var load_lyr = document.getElementById? document.getElementById("loading"): document.all? document.all["loading"]: null;
    if (load_lyr) load_lyr.style.visibility = "hidden";

    // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll,
    // if horizontal scrolling, id of element containing scrolling content (table?)
    wndo[0] = new dw_scrollLayer('wn', 'lyr1', 'imgTbl');
    }
    </script>


    <!--BELOW IS THE CURRENT SCRIPT FOR THE IFRAME-->

    <script language="JavaScript">
    function show() {
    document.getElementById('hiddenframe').style.display='block';
    }
    function hide() {
    document.getElementById('hiddenframe').style.display='none';
    }
    </script>


    <link href="aa.css" rel="stylesheet" type="text/css">

    </head>

    <body onload="initScrollLayer()" bgcolor="#00a5c6" leftmargin="0" topmargin="3" marginwidth="0" marginheight="3">

    <table width="760" height="373" align="center" border="1" FRAME=vsides;above cellpadding="0" cellspacing="0"

    bordercolor="#000000">
    <tr>
    <td width="760" height="400" bgcolor="#FFFFFF">



    <div id="hold">
    <div id="wn">

    <!-- scrolling layer here -->
    <div id="lyr1" class="content">
    <table id="imgTbl" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="images/215x1.jpg" style="cursor: pointer; cursor: hand;"

    width="215" height="215" onclick="show()" alt="Large image 1"></td>

    <!--CLICKING ON 'LARGE IMAGE 1' CALLS UP THE IFRAME CONTAINING page1.htm-->

    <td><img src="images/215y.jpg" style="cursor: pointer; cursor:hand;"
    width="215" height="215" onclick="show()" alt="Large image 2"></td>

    <!--AFTER CLICKING ON 'SMALL IMAGE 2' THEN CLICKING ON 'LARGE IMAGE 2', CALLS
    UP THE IFRAME CONTAINING page2.htm-->

    </tr>
    <tr>
    <td><img src="images/215g.jpg" style="cursor: pointer; cursor:hand;"
    width="215" height="215" onclick="show()" alt="Large image 3"></td>

    <!--AFTER CLICKING ON 'SMALL IMAGE 3' THEN CLICKING ON 'LARGE IMAGE 3', CALLS
    UP THE IFRAME CONTAINING page3.htm-->

    <td><img src="images/215h.jpg" style="cursor: pointer; cursor:hand;"
    width="215" height="215" onclick="show()" alt="Large image 4"></td>

    <!--AFTER CLICKING ON 'SMALL IMAGE 4' THEN CLICKING ON 'LARGE IMAGE 4', CALLS
    UP THE IFRAME CONTAINING page4.htm-->

    </tr>
    </table>

    </div>

    </div> <!-- end wn -->



    <!--
    I AM NOT SURE IF THE FOLLOWING BIT WITHIN THE DIV IS OK,
    PART OF IT HAS THE BUTTON WHICH APPEARS WHEN THE IFRAME APPEARS (AS IS MEANT TO BE)
    AND WHEN CLICKING ON THE BUTTON, BOTH THE BUTTON AND IFRAME DISSAPEAR (AS IS MEANT TO BE)
    THIS IS ALSO THE BIT WHICH CONFUSED ME, AS TO HOW TO CALL UP page2.htm, page3.htm AND page4.htm, ETC.
    -->



    <div id="hiddenframe" name="new1" style="display:none; z-index: 1;">
    <iframe src="page1.htm" style="position: absolute; left: 10px; top: 10px; width: 735px; height: 330px;"></iframe>
    <a onclick="hide()" style="cursor: pointer; cursor:hand;"><img src="button.jpg" width="138" height="20" style="position:
    absolute; left: -2px; top: 351px;"></a>
    </div>




    <div id="linksLyr">
    <table id="lnks" border="0" cellpadding="5" cellspacing="0">
    <tr>
    <!-- dw_glideScrollTo arguments: wndo number, destination on x, y axes,
    (optional, not included here) duration of glide
    Height and width of images and table cells determine location to glide to -->


    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,0); return false">
    <img src="images/55x1.jpg" height="55" width="55" border="0" alt="Small image 1"></a></td>
    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,378,0); return false">
    <img src="images/55y.jpg" height="55" width="55" border="0" alt="Small image 2"></a></td>
    </tr>
    <tr>
    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,215); return false">
    <img src="images/55g.jpg" height="55" width="55" border="0" alt="Small image 3"></a></td>
    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,378,215); return false">
    <img src="images/55h.jpg" height="55" width="55" border="0" alt="Small image 4"></a></td>
    </tr>
    </table>
    </div>

    </div><!-- end hold -->


    </td>
    </tr>
    </table>

    </td>
    </tr>
    </table>
    </body>
    </html>

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    That's not a problem, I'm happy to help

    Okay you'll find below the page you posted with the script implemented correctly. I've highlighted the things that I've changed (they're in red).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Reel gallery page 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Reel gallery page 1</title>
    <style type="text/css">
    @import "glide-grid1.css";
    </style>
    <script src="dw_glidescroll.js" language="JavaScript" type="text/javascript">
    </script>
    <script type="text/javascript">
    
    var wndo = [];
    
    // Necessary to avoid errors before page loaded
    function dw_glideScrollTo(num, x, y) {
    if ( wndo[num] && wndo[num].glideScrollTo ) wndo[num].glideScrollTo(x,y);
    }
    
    function initScrollLayer() {
    // hide loading gif
    var load_lyr = document.getElementById? document.getElementById("loading"): document.all? document.all["loading"]: null;
    if (load_lyr) load_lyr.style.visibility = "hidden";
    
    // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll,
    // if horizontal scrolling, id of element containing scrolling content (table?)
    wndo[0] = new dw_scrollLayer('wn', 'lyr1', 'imgTbl');
    }
    </script>
    
    
    <!--BELOW IS THE CURRENT SCRIPT FOR THE IFRAME-->
    
    <script>
    function show(what) {
    // Okay we've been passed the img tag and attributes that we clicked on.
    // The pages are name page + the image number + .htm
    // So firstly we'll take the Alt text and split it up, by the spaces.
    // This will mean that the last array element will be the number of the image.
    
    altdetails = what.alt.split(" ");
    pagenum = altdetails[altdetails.length-1];
    
    // Now that we have the page number we can build up the src which we'll apply
    // to the hidden iframe.
    // This means you only require one layer and one iframe, as we'll be just
    // changing the src, thus giving the effect required.
    // This method also means that we always show the new pages at the top of the
    // page, and IE isn't going to 'remember' where it had been scrolled to
    // previously.
    
    pagesrc = "page" + pagenum + ".htm";
    
    document.getElementById('hif').src = pagesrc;
    
    // Now that we've changed the src of the iframe, we can continue to show it
    // but we must remember to hide the other layers, so that the iframe is always
    // infront.
    
    document.getElementById('hiddenframe').style.display='block';
    document.getElementById('linksLyr').style.display='none';
    document.getElementById('wn').style.display='none';
    
    }
    
    function hide() {
    
    // We need to hide the iframe but show the other layers.
    
    document.getElementById('hiddenframe').style.display='none';
    document.getElementById('linksLyr').style.display='block';
    document.getElementById('wn').style.display='block';
    
    }
    </script>
    
    
    <link href="aa.css" rel="stylesheet" type="text/css">
    
    </head>
    
    <body onload="initScrollLayer()" bgcolor="#00a5c6" leftmargin="0" topmargin="3" marginwidth="0" marginheight="3">
    
    <table width="760" height="373" align="center" border="1" FRAME=vsides;above cellpadding="0" cellspacing="0"
    
    bordercolor="#000000">
    <tr>
    <td width="760" height="400" bgcolor="#FFFFFF">
    
    
    
    <div id="hold">
    <div id="wn">
    
    <!-- scrolling layer here -->
    <div id="lyr1" class="content">
    <table id="imgTbl" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="images/215x1.jpg" style="cursor: pointer; cursor: hand;"
    
    width="215" height="215" onclick="show(this)" alt="Large image 1"></td>
    
    <!--CLICKING ON 'LARGE IMAGE 1' CALLS UP THE IFRAME CONTAINING page1.htm-->
    
    <td><img src="images/215y.jpg" style="cursor: pointer; cursor:hand;"
    width="215" height="215" onclick="show(this)" alt="Large image 2"></td>
    
    <!--AFTER CLICKING ON 'SMALL IMAGE 2' THEN CLICKING ON 'LARGE IMAGE 2', CALLS
    UP THE IFRAME CONTAINING page2.htm-->
    
    </tr>
    <tr>
    <td><img src="images/215g.jpg" style="cursor: pointer; cursor:hand;"
    width="215" height="215" onclick="show(this)" alt="Large image 3"></td>
    
    <!--AFTER CLICKING ON 'SMALL IMAGE 3' THEN CLICKING ON 'LARGE IMAGE 3', CALLS
    UP THE IFRAME CONTAINING page3.htm-->
    
    <td><img src="images/215h.jpg" style="cursor: pointer; cursor:hand;"
    width="215" height="215" onclick="show(this)" alt="Large image 4"></td>
    
    <!--AFTER CLICKING ON 'SMALL IMAGE 4' THEN CLICKING ON 'LARGE IMAGE 4', CALLS
    UP THE IFRAME CONTAINING page4.htm-->
    
    </tr>
    </table>
    
    </div>
    
    </div> <!-- end wn -->
    
    
    
    <!--
    I AM NOT SURE IF THE FOLLOWING BIT WITHIN THE DIV IS OK,
    PART OF IT HAS THE BUTTON WHICH APPEARS WHEN THE IFRAME APPEARS (AS IS MEANT TO BE)
    AND WHEN CLICKING ON THE BUTTON, BOTH THE BUTTON AND IFRAME DISSAPEAR (AS IS MEANT TO BE)
    THIS IS ALSO THE BIT WHICH CONFUSED ME, AS TO HOW TO CALL UP page2.htm, page3.htm AND page4.htm, ETC.
    -->
    
    
    
    <div id="hiddenframe" name="new1" style="display:none; z-index: 1;">
    <iframe id="hif" src="page1.htm" style="position: absolute; left: 10px; top: 10px; width: 735px; height: 330px;"></iframe>
    <a onclick="hide()" style="cursor: pointer; cursor:hand;"><img src="button.jpg" width="138" height="20" style="position:
    absolute; left: -2px; top: 351px;"></a>
    </div>
    
    
    
    
    <div id="linksLyr">
    <table id="lnks" border="0" cellpadding="5" cellspacing="0">
    <tr>
    <!-- dw_glideScrollTo arguments: wndo number, destination on x, y axes,
    (optional, not included here) duration of glide
    Height and width of images and table cells determine location to glide to -->
    
    
    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,0); return false">
    <img src="images/55x1.jpg" height="55" width="55" border="0" alt="Small image 1"></a></td>
    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,378,0); return false">
    <img src="images/55y.jpg" height="55" width="55" border="0" alt="Small image 2"></a></td>
    </tr>
    <tr>
    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,215); return false">
    <img src="images/55g.jpg" height="55" width="55" border="0" alt="Small image 3"></a></td>
    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,378,215); return false">
    <img src="images/55h.jpg" height="55" width="55" border="0" alt="Small image 4"></a></td>
    </tr>
    </table>
    </div>
    
    </div><!-- end hold -->
    
    
    </td>
    </tr>
    </table>
    
    </td>
    </tr>
    </table>
    </body>
    </html>
    I noticed in the page you posted that you asked how the script works. Well how it works is fairly simple. Every time you click an image you send the function show the img object. This means that you can get/edit anything to do with that particular image. So what the show script firstly does is gets the text that you've set as the ALT text for the image.
    We know that you've used the alt text effectively by calling them Large Image X (where x is an integer that increments). Thankfully you've put a space before it.
    We take the alt text and then split it up at every space, and store the different parts as an array of text snippets, i.e. array[0] = "Large", array[1] = "Image", array[2] = "X".
    So now we get the number X from the array, and then create the src for the iframe (that's the pagesrc = "page" + pagenum + ".htm"; which will return pageX.htm).
    Now for the handy bit. Before we show the Iframe, we change the page that is loaded into it by changing the src to the one we've just created.
    This means that when we show the iframe, the page being displayed is the correct one. It also means that regardless of whether that page had just been visited it will still start at the top and not half way down the page.
    The hide function just rehides the iframe and shows the old layers.

    Wow, that was a description and a half lol If it still doesn't make sense let me know and i'll try and explain better
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #10
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    --> JavaScript
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #11
    New Coder
    Join Date
    Mar 2004
    Location
    Perthshire
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Richard

    The page now works perfectly. You've done a sterling job. I tried for two weeks to make that page work, you managed it in a day! and got it to work in all the main browsers. I'm very envious of your Javascript skills. Can't thank you enough.

    Campbell


  •  

    Posting Permissions

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