[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

How to put Close button on iframe.

Posted on 2012-04-01
8
Medium Priority
?
358 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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'…
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

656 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