Solved

How to put Close button on iframe.

Posted on 2012-04-01
8
310 Views
Last Modified: 2012-04-16
How can i put on close button.
          
                         <div id="iFrameContainer" style="z-index:+1; position:absolute;left:480px; top:125px; display:none;" onmouseout="this.style.display='none'">
                          <iframe src="#" id="myFrame" width="400" height="500" frameborder="1" scrolling="auto" style="border:10">
       
         </iframe>
                        </div>

Kindly suggest.And how to fire this.style.display='none' on its click.
0
Comment
Question by:searchsanjaysharma
8 Comments
 
LVL 9

Expert Comment

by:suvmitra
ID: 37794498
A Sample copuld be:

--mydiv.htm--
<script>
function hideIFrame()
{
document.getElementById("mydiv").style.display = "none";
}
</script>

<div id='mydiv'>
<iframe src='myiframe.htm'>

</iframe>
</div>

--myiframe.htm--
<script>
function AskParentToHideMe()
{
if (typeof(parent.hideIFrame)=='function') parent.hideIFrame();
}
</script>
<input type='button' value='Hide This IFrame'
onclick=AskParentToHideMe();">
0
 
LVL 17

Expert Comment

by:selvol
ID: 37794566
Download jquery
http://jqueryui.com/download

Open the folder check it out.

See remove class in the developement folder for this part of the question
"Kindly suggest.And how to fire this.style.display='none' on its click."

Selvol
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 37794578
This works

<div id="myDiv">
   <IFRAME src="myIframe.htm"></IFRAME>
   <input type="button" value="Hide Iframe" onclick="document.getElementById('myDiv').style.display='none'">
</div>
0
 

Author Comment

by:searchsanjaysharma
ID: 37794600
Ref link is :
http://www.indiannursingcouncil.org/gfatm/testcharts/home.aspx

here there is a map and links are  there. When i click on any link. Frame gets opened.
But it goes off on mouseout.
I want the close button on frame, which get hide on its click,

This is the code for .aspx.

  <div id="iFrameContainer" style="z-index:+1; position:absolute;left:480px; top:125px; display:none;" onmouseout="this.style.display='none'">
                          <iframe src="#" id="myFrame" width="400" height="500" frameborder="1" scrolling="auto" style="border:10">
       
         </iframe>
                        </div>
                     
                       
                        <div><img src="images/india_map3.jpg" width="563" height="653" border="0" usemap="#Map">
                          <map name="Map" id="Map">
                          <area shape="rect" coords="492,251,532,263" id="e3" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details"  href="#"/>
                          <area shape="rect" coords="315,280,362,291" id="e6" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details"  href="#"/>
                          <area shape="rect" coords="371,288,426,300" id="e7" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details"  href="#"/>
                         
                          <area shape="rect" coords="428,273,461,283" id="e8" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="173,103,247,114" id="n1" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="215,148,269,157" id="n4" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="138,128,167,138" id="n5" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="179,133,229,143" id="n6" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="143,51,219,64" id="n7" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="138,167,174,178" id="n8" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="187,177,239,188" id="n9" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="222,211,281,222" id="n10" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="323,235,354,246" id="n11"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="383,186,412,196" id="ne1"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" />
                          <area shape="rect" coords="511,220,553,230" id="ne2"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" />
                          <area shape="rect" coords="464,217,495,227" id="ne3"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="426,242,474,253" id="ne4"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="467,176,546,188" id="ne5"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="251,330,310,342" id="s2"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="304,350,336,362" id="s7"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="477,282,518,293" id="s9"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="230,532,280,544" id="s12"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="113,470,164,483" id="s13"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="169,553,221,567" id="s14"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />  
                          <area shape="rect" coords="187,423,257,435" id="s16"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="76,453,101,464" id="s17"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="123,555,155,567" id="s18"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="96,217,145,229" id="w1"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="50,288,86,300" id="w2"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="112,366,168,379" id="w11"  onclick ="JavaScript:DoSomething(this.id);"title="Click For Details" href="#" />
                          <area shape="rect" coords="167,288,239,302" id="w12"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          </map>
                        </div>


code of function is

<script type="text/javascript" language="javascript">
        function DoSomething(id)
        {
            var popup = document.getElementById("iFrameContainer");
            var frame = document.getElementById("myFrame");
            if (popup != null && frame != null)
            {
                frame.src = "StateDetails.aspx?Id=" + id;
                popup.style.display= "block";
               
            }
        }
     
     
    </script>
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 20

Expert Comment

by:Proculopsis
ID: 37794632
0
 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37794767
Here is jquery code to help you with, here i am using hover method of jquery to define the generic hover functionality:-

document.ready(function()
{
$('#iFrameContainer').hover(
function()
{
$('#myFrame').show()
},
function()
{
$('#myFrame').hide()
}
)

Open in new window


here is the api reference:-
http://api.jquery.com/hover/
0
 
LVL 16

Accepted Solution

by:
Easwaran Paramasivam earned 500 total points
ID: 37795402
Why could you not use window.open method instead of using iFrame in this case? In window.open the close button (X) will be there. If you want you can have in your ASPX page as well. On click event of the close button you could call just window.close().

window.ShowModalDialog() is another option as well.
0
 

Author Closing Comment

by:searchsanjaysharma
ID: 37854397
ok
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now