CODEWITHSUNDEEP
javascriptjqueryweb
The Flying Dutchman
The Flying Dutchman

Reputation: 592

Making only a div visible inside an iFrame

I have an iFrame in a html page myPage.html where I am displaying another page otherPage.html. otherPage.html is a complicated page with many elements. I want to display only one div in the iFrame. All the others should remain hidden. How can I do this?

Instead of the iFrame, I tried to use the .load() function in jQuery. But for some reason, the page does not load. The otherPage.html is served from an IIS server and the page is constructed from purely Javascript. I have no idea why nothing is loading when I use the load() function.

How would I go about achieving this?

Update: Here are some clarifications: I tried to use the .load() function on myPage.html. Anyway, after fiddling around, I found the following to work: For the div that I want to show, I hide all its siblings and also hide all the siblings of its parent. The following jQuery statement seems to do this:

$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();

I have only one issue now. When I do the following:

$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();

it seems to hide everything else.

But then I want to automate it. In other words, when I load myPage.html I want it to load the contents of the iFrame. Once the iFrame contents are loaded I want to then run this script:

$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();

I cannot get this to work. I have tried these two approaches so far:

$(document).ready(function() {
    $("#myFrame").ready(function () {
        $("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
    });
});

I have also tried to use 

$("#myFrame").load(function () {

instead. But in both these cases the script does not hide the other elements. Since, the script works when I use it manually in the console, I assume that somehow it is running before all the elements are loaded. Please give me your thoughts.

Upvotes: 0

Views: 3784

Answers (3)

Lucavai
Lucavai

Reputation: 101

You say you are using the load() function. Are you using this in the parent page or the iframe page? Do you really mean to use the ready() function instead?

$(document).ready(function(){
    // some code here ...
});

Using ready() on the document will ensure that the DOM elements have completely loaded, and then will execute the code in the handler. Without more information I'm not sure I can help much with what you're trying here.

Using an iframe you should first remember that if you want only one div to be visible and all others to be hidden you must make sure that the "visible" div is not inside an "invisible" container. If the container is hidden, all children will be hidden too.

If you had a div "showme", then something like this would work:

<div id="showme">visible text</div>
<div style="display:none;">hidden text</div>

But doing it this way, everything would be hidden:

<div style="display:none;">
    hidden text
    <div id="showme">supposed to be visible, but hidden!!</div>
</div>

If you are changing the visibility, or display, of an element you can do it in the iframe page like this:

// using jQuery...
// set the display css to an empty string, defaulting to visible (not 'none')
$('#showme').css('display','');

// set other elements to be hidden...
$('#hideme1').css('display','none');
$('#hideme2').css('display','none');
$('#hideme3').css('display','none');

If you want to change the visibility of elements from the PARENT page you first access the iframe, then change the elements within it:

// using jQuery...
// get the iframe.  ps. you dont have to put the $ in front of the variable name.
// I chose to do it this way to remind myself it's a jQuery object.
var $f = $('#myiframe').contents();

// set the display css to an empty string, defaulting to visible (not 'none')
$f.find('#showme').css('display','');

// set other elements to be hidden...
$f.find('#hideme1').css('display','none');
$f.find('#hideme2').css('display','none');
$f.find('#hideme3').css('display','none');

See this article for example(s) on working with elements in a child iframe:

http://www.computerhowtoguy.com/jquery-and-iframes/

Upvotes: 1

Yograj Gupta
Yograj Gupta

Reputation: 9869

As I understood your question. You can do like this, pass div id to get displayed as hash in your otherPage.html url like you have a div with id first, you can pass first as hash

<iframe src="otherPage.html#first" />

and in otherPage.html, you can get this hash and according to that show your div, but make first all your sections hidden, using css will be easy, only add "display:none;" in css.

and try this : in otherPage.html

$(function(){
   //var divToShow = location.hash.subString(1);
   //$('#'+divToShow).show();
   var divToShow = location.hash;
   $(divToShow).show();
});

Upvotes: 0

Gapton
Gapton

Reputation: 2134

  • Hide everything within the iFrame by something like $("#myIFrame *").hide(); or you can set the css display property to none.

  • Using CSS selector, re-display only the div you want. If your div has an id this is pretty easy : $('#myDiv').show();

If the div does not have an id, see if you can give it one. If creating an id for your div is not an option, try to give its parent an id/class.

If ID is not an option you may also find selectors like :nth-child() useful.

Upvotes: 1

Related Questions