CODEWITHSUNDEEP
jquery
Thierry Savard Saucier
Thierry Savard Saucier

Reputation: 449

How can I swap those 2 div?

I got an empty Div called Target :

<div id="target"></div>

and a div called list :

<div id="list">
    <ul>
        <li><img id="1" src=".." /></li>
        <li><img id="2" src=".." /></li>
        <li><img id="3" src=".." /></li>
    </ul>
</div>

What I want is, on user click, get the img into div target, and adjust his size to something bigger. I can do this easy.
The troubles come where if the user clicks on another div, or another button (arrow or next button elsewhere) I want the 1st div to get back to its place, and be replaced by the new one (or the following in the list, or the 1st if its the last div who's on display).
I tried a couple of ways but my jQuery ain't yet good enough.

( before someone ask, everything is local, no server side if this changes anything )

Upvotes: 2

Views: 354

Answers (4)

Nope
Nope

Reputation: 22329

I'm not certain at all if this is the best way or even an efficient way of doing it but it seems to do what you need.

DEMO: Using cloning 

$("ul li img").on("click", function() {
    var currentImage = $(this);
    var hiddenImage = $("ul li img[hidden='hidden']");

    $("#target").html("");
    currentImage.clone().appendTo('#target');

    hiddenImage.removeAttr("hidden");
    currentImage.attr("hidden", "hidden");
});​

As per comments some of the elements could be video files. Instead of using clone() one can move the elements and leave a place-holder behind.

DEMO: Using a place-holder

$("ul li img").on("click", function() {
    var currentImage = $(this);
    var lastImage = $("#target img");
    var placeHolder = $("#last-image-position");

    lastImage.insertBefore("#last-image-position");
    $("#last-image-position").remove();

    $("<div id='last-image-position'><div>").insertBefore(currentImage);

    currentImage.appendTo('#target');
});​

Edit
Updated demos with actual images.

Upvotes: 3

The Alpha
The Alpha

Reputation: 146191

May be you want this

$(function(){
    $('#list li').on('click', 'img', function(e){
        var img=$(this);
        $('#target').html(img.clone()) .width(img.width()).height(img.height());
    });

    $('#target').on('click', function(e){
        $(this).html('').prop('title', '').width(200).height(200); // original size
    })
    .on('mouseenter', function(e){
        if($(this).html()!='') $(this).prop('title', 'Click to clear');
    })
    .on('mouseleave', function(e){
        $(this).prop('title', '');
    });            
});

DEMO.

Update: (that you asked for)

$(function(){
    $('#list li').on('click', 'img', function(e){
        if($('#target').html()!='')
        {
            $('#list ul li:empty').html($('#target').html());
        }
        var img=$(this);
        $('#target').html(img).width(img.width()).height(img.height());
    });

    $('#target').on('click', function(e){
        $('#list ul li:empty').html($('#target').html());
        $(this).html('').prop('title', '').width(200).height(200);
    })
    .on('mouseenter', function(e){
        if($(this).html()!='') $(this).prop('title', 'Click to clear');
    })
    .on('mouseleave', function(e){
        $(this).prop('title', '');
    });            
});

DEMO.

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

working demo swapping the div content: http://jsfiddle.net/BKNjB/2/

Please let me know if I am wrong. :)

behavior - there will be 2 alerts before and after, rest below ill make more sense.

Or might be this: http://jsfiddle.net/vJTyf/6/ OR Swap Images like this something to swap image everytime you will click on the image: http://jsfiddle.net/vJTyf/9/ (yes you could do it in more neater way :)

code

$(document).ready(function() {
    alert(' Before swap HTML in target is :==> ' + $('#target').html());

        var targetHtml = $('#target').html();
        var listHtml = $('#list').html();

        $('#target').html(listHtml);
        $('#list').html(targetHtml);

    alert(' After swap HTML in target is :==> ' + $('#target').html());

});​

Upvotes: 3

gdoron
gdoron

Reputation: 150253

Maybe you meant this:

$('#target').replaceWith($('#list'));

Upvotes: 2

Related Questions