Geek asks and answers

Replacing the two div elements? (preview while the other takes up the whole page) - EDITED: replacing DIV and IFRAME

I have an HTML page containing two div elements. I want to arrange these two so that one of them occupies the entire page, and the other appears as a small preview window in the upper right corner of the browser. when the user clicks on the preview, the contents of this DIV are exchanged with the DIV occupying the page.

Div elements are google widgets. (Annotated timeline, timeline, etc.).

EDIT: I am using the method provided by wdm to achieve the above-asked question. The problem is that I have an IFRAME that I want to swap with the DIV element. I put an iframe inside a div tag like this

  <div class="b small">
    <iframe src="http://somerandomsite.com" name="framename" id="frameid"> </iframe> 
  </div>

IFrame does not resize correctly. I suppose because CSS shaping does not work on the iframe element properly.

Any ideas on how to resize the iframe so that it resizes by click?

+3
source share
2 answers

See the demo and click on the small box. Basically, I just switch classes between two elements divthrough jQuery.

Demo: http://jsfiddle.net/wdm954/dRzaU/1/

EDIT: demo with images: http://jsfiddle.net/wdm954/dRzaU/4/

JQuery ...

$('.small').live('click', function() {
    $('.big').addClass('small').removeClass('big');
    $(this).removeClass('small').addClass('big');
});

HTML ...

<div id="wrap">
    <div class="a big"></div>
    <div class="b small"></div>
</div>

CSS (see demo)

+4
source

You can do this by having four divs - two full-size and two miniatures. Your markup might look like this:

<div id="thumb1"> ... </div>
<div id="thumb2"> ... </div>
<div id="fullsize1"> ... </div>
<div id="fullsize2"> ... </div>

javascript- . jQuery, .

$('#thumb1').click(function() {
    $(this).hide();
    $('#thumb2').show();
    $('#fullsize1').show();
    $('#fullsize2').hide();
});

$('#thumb2').click(function() {
    $('#thumb1').show();
    $(this).hide();
    $('#fullsize1').hide();
    $('#fullsize2').show();
});
+1

More articles:


All Articles