Multiple Draggable iFrames, Always Have iFrame in Focus Be On Top

Question

I have 2 iFrames on my page. Both are draggable using jQuery UI. The iFrame that loads second is always the dominant one if both iFrames are dragged over the same space, ie. It covers up the first iFrame. Is there a way to set the iFrame in focus as the dominant iFrame so that if I am moving the first iFrame and drop it over the 2nd iFrame, it will cover the 2nd frame and vice versa?

HTML:

<a class = 'expandorcollapse3' href = '#'>Web Page 1</a>
<br>
<a class = 'expandorcollapse4' href = '#'>Web Page 2</a>

<div id = 'iframetest1' style = 'display: none'>
      <iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe></a></div>
<div id = 'iframetest2' style = 'display: none'>
      <iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe></a></div>

CSS:

#iframe1 {width: 600px; height: 500px; border; 1px solid black; zoom: 1.00; -moz-transform: scale(0.65); -moz-transform-orgin: 0 0;
         -o-transform: scale(0.65); -o-transform-origin: 0 0; -webkit-transform: scale(0.65); -webkit-transform-origin: 0 0;}

#iframetest1 {width: 390px; height: 325px; margin: 10px; border-style: solid; border-width: 10px;}    

#iframetest2 {width: 390px; height: 325px; margin: 10 px; border-style: solid; border-width: 10px;}

Javascript:

$(document).ready(function(){
    $(".expandorcollapse3").click(function(){
        if($("#iframetest1").is(":hidden")){
            $("#iframetest1").show("slow");
            }
        else{
            $("#iframetest1").hide("slow");
            }
        });
    });

$(document).ready(function(){
    $(".expandorcollapse4").click(function(){
        if($("#iframetest2").is(":hidden")){
            $("#iframetest2").show("slow");
            }
        else{
            $("#iframetest2").hide("slow");
            }
        });
    });

$("#iframetest1").draggable({containment: "document"});
$("#iframetest2").draggable({containment: "document"});

See jsFiddle here

You could try moving the "top" iframe to after your last iframe when it gets focus http://stackoverflow.com/questions/1363650/javascript-moving-element-in-the-dom — technosaurus, Dec 19 '12 at 21:01

score 1 · Accepted Answer · answered Dec 19 '12 at 21:44

You can specify the stack option in draggable so the current dragged element goes to the front

$("#iframetest1,#iframetest2").draggable({
    containment: "document",
    stack: 'div'
});

You can also shorten your code by using the toggle function instead of having the if/else statements

$(document).ready(function() {
    $(".expandorcollapse3").click(function() {
        $("#iframetest1").toggle('slow');
    });
    $(".expandorcollapse4").click(function() {
        $("#iframetest2").toggle('slow');
    });
});

http://jsfiddle.net/nwu4Q/

Multiple Draggable iFrames, Always Have iFrame in Focus Be On Top

1 Answers1