Question

I have a script that dynamically loads iframes inside a webpage. You can see the demo here: DEMO

I want to use jquery to achieve a similar rseult, but with a nice sliding effect, and external links that load the iframe in another div. Basically, I have 10 links on a page. When the link is clicked, I want the iframe window to load in the new content and apply an effect to the transition. Does anyone know of any plugins that exist for this? I am not experienced enough to write a script from scratch, so any help would be much appreciated!

Answer 1

Changed based on comments…

Given a page like

<input type="button" value="Load Frames" id="submit" name="submit" onclick="loadFrame()" />
<iframe class="frameToChange" link="http://www.apple.com" style="display: none" ></iframe>
<iframe class="frameToChange" link="http://www.google.com" style="display: none" ></iframe>

Try something like the below

function loadFrame() {
    var j$ = jQuery.noConflict();
    var frames = j$('.frameToChange');

    frames.each(function(index) {
        j$(this).slideDown('fast');
        j$(this).attr('src', j$(this).attr('link'));
    });
}