[SOLVED] iFrame Popups Buried by Main Page

[tacmed1]

Hey there all!

So I'm still kinda new with all the code stuff. Really know just enough to put free codes where they belong. But here's my thing, I have a photo gallery where I am using a code to create onMouseOver popups of the fullsize images. I have incorporated this script on a page I am using as an iFrame and this has caused my popups to become buried by my main surrounding page. I don't think this can be resolved by adjusting layers as technically the iFrame page is linked to the surrounding page.

Can I make the popups on an iFrame appear over top the parent page? If it helps, I am using Tigra Hints provided free from Soft Complex. And I am designing with the help of Dreamweaver.

Anyone have any ideas?

If I can't get my popups above the main page I may have to redesign but I don't know why we can't make this work.

[dm01]

No you can't. Why are you using an iframe? Can't you serve the content on a usual .html page?

[tacmed1]

At www.snaphappy.me under the portfolio page is why I am using an iFrame. I ensnare the whole design into one piece to prevent confusing viewers but I wanted to scroll all the images.

Do you know a better way? I am all ears. Seriously. I would redesign so the viewers can see the images. Oh and no I don't have the popups coded in yet.

[dm01]

This is going to get complicated, but this will allow your scripts to work as intended.

Make a local working copy of your web page, away from any archives you may have.

Add this to your <style>:

td.images
{overflow: scroll;}

Add class="images" to the <td> where the <iframe> is now.
Replace the <iframe> with the HTML that the <iframe> was grabbing. Namely:

<table width="800" height="600" align="center"border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="800" height="108"><table width="800" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="800" height="78"><img src="images/snapphappy_01.gif" width="800" height="78" alt="www.snapphappy.ca" longdesc="images/snapphappy_01.gif" /></td>
      </tr>
      <tr>
        <td width="800" height="30"><table width="800" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="201" height="30"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Snap Happy','','images/snapphappyRollOver_02.gif',1)"><img src="images/snapphappy_02.gif" alt="About Snap Happy" name="About Snap Happy" width="201" height="30" border="0" id="About Snap Happy" /></a></td>
            <td width="169" height="30"><a href="PickMe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Pick Snapphappy','','images/snapphappyRollOver_03.gif',1)"><img src="images/snapphappy_03.gif" alt="Pick www.snapphappy.ca" name="Pick Snapphappy" width="169" height="30" border="0" id="Pick Snapphappy" /></a></td>
            <td width="164" height="30"><img src="images/snapphappyOnPage_04.gif" width="164" height="30" alt="Portfolio" longdesc="images/snapphappyOnPage_04.gif" /></td>
            <td width="266" height="30"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Snapphappy','','images/snapphappyRollOver_05.gif',1)"><img src="images/snapphappy_05.gif" alt="Get a hold of us at www.snapphappy.ca" name="Contact Snapphappy" width="266" height="30" border="0" id="Contact Snapphappy" /></a></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td width="800" height="492" border="0" cellspacing="0" cellpadding="0"><table width="800" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="492"><table width="129" border="0" cellspacing="0" cellpadding="0">
          <tr>
            
            </tr>
        </table>
          <table width="800" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="800" height="412" background="images/PeoplePortfolio2_06.gif"><table width="800" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="283" height="412">&nbsp;</td>
                  <td width="517" height="412"><iframe width="517" height="412" src="portfolio_Frame2.html"></iframe>&nbsp;</td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td><table width="800" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="266" height="80"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Go Home!','','images/PeoplePortfolio_07.gif',1)"><img src="images/NaturePortfolio_07.gif" alt="Go Back Home!" name="Go Home!" width="266" height="80" border="0" id="Go Home!" /></a></td>
                  <td width="298" height="80"><a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Main Portfolio Page','','images/PeoplePortfolio_08.gif',1)"><img src="images/NaturePortfolio_08.gif" alt="Main Portfolio Page" name="Main Portfolio Page" width="298" height="80" border="0" id="Main Portfolio Page" /></a></td>
                  <td width="236" height="80"><a href="portfolioNaturally.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Portfolio 1','','images/Portfolio1RI_09.gif',1)"><img src="images/Portfolio1_09.gif" alt="Portfolio 1" name="Portfolio 1" width="236" height="80" border="0" id="Portfolio 1" /></a></td>
                </tr>
              </table></td>
            </tr>
          </table></td>
        </tr>
    </table>
      </table></td>
  </tr>
</table>

[tacmed1]

I'm not at my computer right now ere go I can't try this but for when I get there, you mean to enter all the HTML that composes the page withing the iFrame into the main page, yes? Obviously wouldn't enter head tags. But am I right? All image and rollover tags.

[dm01]

Yes, yes of course. Everything from the first <table> to the last </table>. Don't include the </body> or </html> either, or things will get really interesting.

[tacmed1]

Okay I did what I think I was told and I still have a really long page. This code seems like it should work and the page looks fine other than being stretched right out. What else could I possibly be forgetting?

[tacmed1]

Originally Posted by dm01

Yes, yes of course. Everything from the first <table> to the last </table>. Don't include the </body> or </html> either, or things will get really interesting.

As far as I can tell there is just something blocking the td.images function from working. The layout is fine, just stretched. A lot.

Also, through the Tigra Hints code I picked up, I have a "f_downloadIMages(A_IMAGES)" for the onload tag. Can or should this be connected with MM_preloadIMAGES? What kind of a mess have we now?

[tacmed1]

Originally Posted by tacmed1

Also, through the Tigra Hints code I picked up, I have a "f_downloadIMages(A_IMAGES)" for the onload tag. Can or should this be connected with MM_preloadIMAGES? What kind of a mess have we now?

I have fixed the issue with the download tag and I have fullsize images we just have to make scroll this big cell now.

[dm01]

Did you keep the height and width attributes? Try adding them to the .images CSS:

td.images
{
overflow: scroll;
height: 517px;
width: 412px;
}

If this doesn't work, I have one more idea. I must warn you that we would be using some high-level XHTML that might not make sense to you at first. I know it didn't to me. However, I do not see any reason why the above should not work.

Do the pop-ups work now?

[tacmed1]

I must be newer than I thought. I have put the td.images function in my style heading and in a separate linked CSS sheet and it still won't work. I've tried both "<td class="images" and "<images". I know I'm doing something wrong. Is there any other troubleshooting I can do before I bother you with huge amounts of XHTML?

[tacmed1]

But yes the popups do work. Thankfully we have that.

[dm01]

I figured out what the problem is. <td> ignores restrictions on height. We can get around this by using a <div>.

Replace

td.images
{
overflow: scroll;
height: 517px; 
width: 412px;
}

with

div#images
{
overflow: scroll;
height: 412px;
width: 517px;
}

and replace

<td class="images">

with

<td><div id="images">

.

[Please note, that is id, not class.]

[The # tells the browser to look for an id, not a class.]

[tacmed1]

That was it my friend! Works great now. I don't know how to thank you... so thanks a lot.

I have learned a great deal since you've been helping me. You're a great soul.

[dm01]

You are most welcome. I am happy to be of service.

[tacmed1]

I thought I figured this out before but I was wrong. I have my pictures now popping up all over the screen and successively disappearing below the bottom of the screen border. What tag should I be looking at to adjust this or what tag typically changes the physical location of a popup to stay in the center of the page or follow the mouse. I know the X and Y values are supposed to help but it's as though something in the widget has bypassed that. Any thoughts?

[dm01]

So these pictures are in the pop-ups?

Could you update your site with the latest revisions? I can see what is going on much better if I have something to look at. Now that we know the revisions work, it is safe to do a full replacement of the old page with the new page.

You don't seem to have (x,y) declared for any of your images themselves. I don't know if there is a way to do this dynamically (such that you only have to do it once). I will have someone more knowledgeable in this area have a look, as my grasp of JavaScript is tenuous at best. (I usually understand what is going on when I look at it, but I can't code any.)

[tacmed1]

Hi there!

So yes the pictures ARE the popups. I have loaded the new pages and you'll quickly see what I'm talking about. Go into the Nature Portfolio and scroll right to the bottom to see what I mean. Your main scrollbar shrinks so you can tell the picture pops up. There are values that apparently edit the position of the "hint" in relation to the edge of the screen and the origin but I can't see that they work much. Neither does the follow attribute.

What you think?

[jamiemac2005]

Hey, dm01 asked me to take a look at this, basically the positioning functions are overworked so getting the config right is an effort[and doesn't really work].

So i rewrote a small part of the positioning of the hints. (Now they center rather than jumping about, you could get this working just using the config if you tried but it would take ages of trial and error)

It doesn't work on IE on my pc but neither did it when i saved a copy of the page to my own pc so i'm hoping it works when you try it.

Anyway i only had to rewrite code in the "tigra_hints.js" file so i've re-uploaded it in a zip file.

Get back to me on whether it works or not.

Cheers,
Jamey

[tacmed1]

Well not only does the pop up work in IE but you get this cute zoom in/out effect. Dang Firefox. They work and I am very happy. Thanks to both of you guys. If you view it, you'll see that you have to mouse off the big image and go to the next but, in my opinion, after all we've been through with this I think I'm inclined to live with it.

Thanks a lot. I know where to keep coming for help.