[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

How to put Close button on iframe.

Posted on 2012-04-01
8
Medium Priority
?
487 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

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
 
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 1000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
Suggested Courses

612 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