making layer visible

@webtekieJan 07.2004

Hi guys,

I have three html pages: 1,2,3 ~~[b]~~(1 is main page, 2 and 3 are layers inside 1 with <iframe>s in them)[/b]. 1 calls 2 and 2 calls 3. I have a layer on page 1 that needs to be made visible from page 3. If I use:

[code=php] function showHide(id,vis) { window.parent.document.getElementById(id).style.visibility=vis; }

showHide(‘screen’,’visible’); [/code]

layer visiblity is not being set. I guess because 3’s parent is 2 and 2 does not have layer that 3 calls.

Any suggestions?

thanks,
webtekie

to post a comment

JavaScript

7 Comments(s) _↴

@pnajJan 07.2004 — #I think your problem is the IFRAME inside the layer. I don't think you can apply 'visibility' to them ... they are always 'on top'.

I think (don't know) that it's to do with the fact that IFRAMES are essentially windows and there are security issues involved in hiding them.

Best solution is probably not to use IFRAMES in the layers.

@webtekieauthorJan 08.2004 — #thanks pnaj,

Actually I do use <iframe> in my main pages inside a layer, and making layer visible/hidden works fine. The problem that I have is calling a layer on a main page that a page that is being called by main page is calling. I know it's a little bit confusing, but that's what I need.

thanks,

webtekie

@pnajJan 08.2004 — #I was surprised ... I remember trying something like this before and having trouble with IFRAMES/visibility ... but maybe the trouble was with older browsers.

It would be helpful to see a skeleton version of the page.

@webtekieauthorJan 08.2004 — #here you go:

[code=php]
 <div id="passwordLayer"
 style="position:absolute;
 width:536px;
 height:300px;
 left: 260px;
 top: 125;
 
   background-color: #ffffff;
   z-index: 1;
   padding: 0px 0px 0px 0px;
   border-style: solid;
   border-color: #000000;
   border-width: 2px;
   text-align:   right;
   visibility:hidden"
   class="pswd">
   <table cellspacing="0" cellpadding="0" width="536" border="0">
  <tr>
   <td align="right" bgcolor="#ffffff" valign="top">
   <a href="#" onClick="toggleLayers()" class="close">
   <img src="generic_images/closeWindow.gif" border="0">
   </a>
   <img src="generic_images/px_gray.gif" width="1" height="1">
   </td>
   </tr>
   </table>
   <!--<a href="#" onClick="toggleLayers()" class="close">close window</a>-->
   <iframe name="helpiframe"
   frameborder="0"
   src=""
   width="535"
   height="91%"
   style="scrollbar-base-color: #663366; 
   scrollbar-face-color: #99CCCC; 
   scrollbar-track-color: #996699; 
   scrollbar-arrow-color: #330033;
   scrollbar-highlight-color: #FFFFFF; 
   scrollbar-3dlight-color: #CCCCCC; 
   scrollbar-shadow-color: #663366;
   scrollbar-darkshadow-color: #000000;"
   align="center">
   </div>
 [/code]

and calling functions

[code=php]
 function toggleLayers(){
 showHide('passwordLayer','hidden');
 showHide('floatframe','visible');
 }
 [/code]

So on same main page I have helpscreen layer:

[code=php]
 <div id="helpscreen"
 style="position:absolute;
 width:536px;
 height:300px;
 left: 260px;
 top: 125;
 
   background-color: #ffffff;
   z-index: 1;
   padding: 0px 0px 0px 0px;
   border-style: solid;
   border-color: #000000;
   border-width: 2px;
   text-align:   right;
   visibility:hidden"
   class="pswd">
   sdvcsdvsdv
   <iframe name="hsFrame"
   frameborder="0"
   src=""
   width="536"
   height="300"
   align="middle">
   </iframe>
 </div>
 [/code]

and I want to call helpscreen layer to be visible from a page that main page calls. Not sure how to do it though.

The way I am setting src property of an <iframe> is like this:

[code=php]
 document.all.helpiframe.src="menuSearch2.jsp?searchStr=" + str;
 [/code]

So from a third page I thought I could call layer on the main page like this:

[code=php]
 window.parent.document.all.hsFrame.src=" + url;
 [/code]

But as I said, it does not work :mad:

@pnajJan 08.2004 — #I'll have think and post back later.

@webtekieauthorJan 08.2004 — #ok, thanks!

@pnajJan 10.2004 — #Hi webtekie.

Ok, I'm not 100% what's causing the problem but I think it's probably to do with the way you're defining the <a>'s that act as the buttons.

Because you're using the onclick event, you're having to put href="#" and I think it's re-loading the page that the anchor's on as well as doing the javascript in the 'onclick'. But, for some reason, it's loading the top level page in !!!

One way to solve this is not to use the onclick, but use href instead ...

href="javascript: ... "

--------------------------------------------
But, I'd try to things in a slightly different way. What I normally do is: the 'home' page is always loaded (whether or not it's iframe is visible) so put all the functions

that show/hide/change src/etc layers/iframes/etc in the head of this page (home).

Then [B]wherever[/B] you are calling the functions from, you can use the reference window.top to access these functions

I've attached a zip of three files, iframes.html, content1.html

and content2.html.

iframes.html is the page to look at first, the two others start by being the default src of two iframes on the page.

Let me know how you get on!

Paul.

[upl-file uuid=9c0b9c69-e023-4398-bce8-6b7195407d9f size=1kB]iframes.zip[/upl-file]

Also in #JavaScript _↴

write more more inputs Loading a Random Image variable problem

Success!

Help @webtekie spread the word by sharing this article on Twitter...

Tweet This

making layer visible

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

making layer visible

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴