Solved

How to put Close button on iframe.

Posted on 2012-04-01
8
304 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

746 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

15 Experts available now in Live!

Get 1:1 Help Now