CODEWITHSUNDEEP
javascripthtmlcsshref
Birdlady9604
Birdlady9604

Reputation: 207

only load iframe when link is clicked

How can I display one iframe at a time? So I have an index webpage that has links in the nav to the iframes but I want the iframes to only display when the links are clicked? Right now they are both displaying.Is this a javascript solution? I am new to coding so if so then it might just be easier for me to not use iframes and just set up different pages and target an id.

Here is my code: http://jsfiddle.net/r2mmb/

HTML

 <header>
<div id="logo">
<img src="../../assets/images/logo.png" alt="">
</div>
<nav>
<ul>
<li><a href="iframetoursprices.html" target="toursprices">
    TOURS,PRICES &amp; STANDARD FLIGHTS</a></li>
<li><a href="#">MEET THE STAFF</a></li>
<li><a href="iframegallery.html" target="gallery">Gallery</a></li>
</ul>
</nav>
    </header>

 <div class="mainInfo">
<iframe src="iframetoursprices.html" name="toursprices"></iframe>
<iframe src="iframegallery.html" name="gallery"></iframe>
</div>

Upvotes: 0

Views: 5133

Answers (2)

David Thomas
David Thomas

Reputation: 253308

One approach I'd suggest is first hiding all the <iframe> elements with CSS:

iframe {
    display: none;
}

And creating a CSS rule, using a class, to show that element:

iframe.inUse {
    display: block;
}

With the jQuery:

// binds a click handler to all 'a' elements with a 'target' attribute:
$('a[target]').click(function(){
    // creates a reference to the clicked-link:
    var clickedEl = this;

    // gets all 'iframe' elements in the document:
    $('iframe')
        // removes the 'inUse' class from all of them:
        .removeClass('inUse')
        // filters the collection of 'iframe' elements:
        .filter(function(){
            // we keep only the 'iframe' whose 'name' attribute
            // is equal to the 'name' attribute of the clicked 'a':
            return this.name === clickedEl.target;
        // and we add the 'inUse' class to that iframe element:
        }).addClass('inUse');
});

JS Fiddle demo.

An alternative is to have only one <iframe> element on the page, hide it with the CSS:

iframe {
    display: none;
}

And load the content into that single <iframe> with the following jQuery:

$('a[target]').click(function(e){
    // prevents the default click-behaviour of the link:
    e.preventDefault();

    // finds the 'iframe' element with the name of 'showContent':
    $('iframe[name="showContent"]')
        // sets its 'src' property equal to the 'href' property of the clicked link:
        .prop('src', this.href)
        // shows the 'iframe':
        .show();
});

JS Fiddle demo.

A belated edit, to use plain JavaScript, made upon the somewhat overdue explanation that jQuery cannot be used:

function contentToIframe () {
    // getting a reference to the 'iframe' element whose 'name' attribute
    // is equal to the clicked element's 'target' attribute, using CSS
    // notation available under document.querySelector() (which returns
    // only the first element that matches the selector):
    var iframe = document.querySelector('iframe[name="' + this.target + '"]'),
        // getting a reference to the current 'display' (inline) style of
        // the 'iframe' (found above):
        curDisplay = iframe.style.display;

    // setting the 'src' property of the 'iframe' equal to the 'href'
    // of the clicked link:
    iframe.src = this.href;

    // if the 'iframe' doesn't have a set 'display' style-property, or
    // it is not set to 'block':
    if (!curDisplay || curDisplay !== 'block') {
        // we set it to 'block' to make it visible:
        iframe.style.display = 'block';
    }
}

// getting all the 'a' elements in the document that also have a 'target'
// attribute:
var links = document.querySelectorAll('a[target]');

// iterating over those link elements:
for (var i = 0, len = links.length; i < len; i++) {
    // binding an event-handler to deal with the click event,
    // which executes the function:
    links[i].addEventListener('click', contentToIframe);
}

JS Fiddle demo.

Final iteration of the above (still plain JavaScript) approach which now also allows for scrolling to the <iframe> when the link is clicked to load content:

function contentToIframe() {
    var iframe = document.querySelector('iframe[name="' + this.target + '"]'),
        curDisplay = iframe.style.display,
        // getting a reference to the current position of the 'iframe' element:
        position = iframe.getBoundingClientRect();
    iframe.src = this.href;
    if (!curDisplay || curDisplay !== 'block') {
        iframe.style.display = 'block';
        // if the 'iframe' wasn't visible it's position would have been 0,0;
        // so once we've made it visible we re-get its new (now visible)
        // coordinates:
        position = iframe.getBoundingClientRect();
    }

    // force the window to scrollTo the current position (x,y) of the 'iframe':
    window.scrollTo(position.left, position.top);
}

var links = document.querySelectorAll('a[target]');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].addEventListener('click', contentToIframe);
}

JS Fiddle demo.

References:

Upvotes: 2

Jose Paredes
Jose Paredes

Reputation: 4080

You can try adding the class .active to the iframe that you combiene

and adds the onclick event to your menu.

look at this example.

http://jsfiddle.net/r2mmb/1/

Upvotes: 0

Related Questions