By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,787 Members | 1,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,787 IT Pros & Developers. It's quick & easy.

CSS Collapsing IFrames

P: 5
I'm trying to make a collapsable iframe - appears when the <a class="inlaid">LINK is clicked, closes when the user clicks outside the div. I have this working almost beautifully: the iframe and other text appear when the link is clicked but close when user clicks w/in the iframe (but not anywhere else in the div). Any suggestions on how to prevent the collapse when the iframe is clicked?

CSS:
Expand|Select|Wrap|Line Numbers
  1. .dashboard {
  2.     background: 888;
  3.     width:100%;
  4.     margin:0 auto;
  5.     padding:5px;
  6.     border:1px solid #008; 
  7.     min-height: 10px;
  8.     text-align: left;
  9. }
  10.  
  11. a.inlaid {
  12.     color:#FFF;
  13.     text-decoration:none;
  14.     outline-style:none;
  15. }
  16.  
  17. a.inlaid em {
  18.     display:none;
  19. }
  20.  
  21. a.inlaid:active, a.inlaid:focus {}
  22.  
  23. a.inlaid:active span, a.inlaid:focus span {
  24.     display:block;
  25.     background: #888888;
  26.     color: #FFF;
  27.  
  28. }
  29.  
  30. a.inlaid:active em, a.inlaid:focus em {
  31.     display:block; 
  32.     cursor:default;
  33.     height: 410px;
  34.     width: 100%;
  35. }
HTML Body:
Expand|Select|Wrap|Line Numbers
  1. <div class="dashboard">
  2. <p>
  3. <a class="inlaid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false">
  4. <span>Red/Yellow/Green Weather Dashboard</span>
  5. <em>
  6. <IFRAME SRC="other.html" height="400" width="100%"></IFRAME>
  7. </em>
  8. </a>
  9. </p>
  10.  
  11. </div> <!-- end of dashboard -->
  12. <br>
  13. Bottom Text
Thanks!!!!
Feb 8 '08 #1
Share this Question
Share on Google+
1 Reply


Death Slaught
100+
P: 1,137
I don't think your problem is with your HTML or CSS. Please ask in our JavaScript forum.

(\_/)
(' . ')
(")(") , Death
Feb 8 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.