How can I swap those 2 div?

Question

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 )

Nope · Accepted Answer · 2012-06-19T20:57:56.940

3

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.

edited Jun 19 '12 at 20:57

answered Jun 18 '12 at 23:49

Nope

22,147
7
47
72

hum ... might work. only 1 question, when you clear the the target div, the cloned image who's in it disapear completly from memory too ? ( there will be videos too in the list, its for my friend's demo website and he's doing publicities, movies, and video montage for buisiness, and I dont want the gallery to become sluggish if too many video's are browsed ) – Thierry Savard Saucier Jun 19 '12 at 00:32
@ThierrySavardSaucier: See edit for an alternative, using a place-holder instead. – Nope Jun 19 '12 at 01:17
aaa, never actually worked with this jsfiddle, its neat to test stuff ! but yea, your exemple does what I want, tx alot. Only thing is this "placeholder" text that end up appeariing on the result pane and shows in the result area under the 3rd image, and once you swap them around a little the text gets messed up, but this might be just me messing up your code, I'll try to test it on my page and see the results – Thierry Savard Saucier Jun 19 '12 at 01:37
Just delete the text between the div tags. That was only there for the demo and is not needed for the functionality. I added the use of the hidden attribute but you probably don't need that if you remove the text. – Nope Jun 19 '12 at 09:04

Tats_innit · Answer 2 · 2012-06-19T00:23:08.340

3

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());

});

edited Jun 19 '12 at 00:23

answered Jun 18 '12 at 23:56

Tats_innit

33,991
10
71
77

I don't think OP wants to swap the complete div content. I believe OP only wants to add the selected image into the target div and when clicking another image replacing the one in the target div with the new one but also placing the last selected one back into its old place in the list. Something like that. – Nope Jun 18 '12 at 23:58
@FrançoisWahl lol hmm (Buzzinga - Now I am Confused) :P OP can you please read this comments and enlighten us poor being, some confusion around? – Tats_innit Jun 19 '12 at 00:00
@Tats_innit think of it as a gallery of image. I got a list with images in them, and when a user click on one, this image goes into the target div. when the user click on another image, the 1st one goes back to the list, and the new image goes in the target div. – Thierry Savard Saucier Jun 19 '12 at 00:07
@Tats_innit my 1st try looked like your, but it give me a problem on the page load( or refresh) there is no image in the div. if I try your way, I get an error saying something about an error in the left side of the operation (the targetHtml is empty). – Thierry Savard Saucier Jun 19 '12 at 00:09
@ThierrySavardSaucier cool can you please make a closer jsfiddle and I might be able to give you hand? :) – Tats_innit Jun 19 '12 at 00:13
@ThierrySavardSaucier do you mean like this: http://jsfiddle.net/vJTyf/9/ **Now** when you will click on foo it will go to div1 and then if you click on anything it will swap? – Tats_innit Jun 19 '12 at 00:21
@Tats_innit almost, they do swap, but only once. if I click back on foo after it have swapped back into place, it wont swap again – Thierry Savard Saucier Jun 19 '12 at 01:26

score 2 · Answer 3 · answered Jun 18 '12 at 23:45

2

Maybe you meant this:

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

answered Jun 18 '12 at 23:45

gdoron

147,333
58
291
367

sorry I was editing my post, I hit tab all the time by reflex – Thierry Savard Saucier Jun 18 '12 at 23:48
1

@ThierrySavardSaucier. The first revision at least I though I understood, Now I'm blind... – gdoron Jun 18 '12 at 23:51
ok, its some kind of simple slideshow i'm trying to make, i want that if a use select an image( iamge id 1 ), he can see it bigger in the middle of the screen ( on the target div ) and if he clicks on another image(id 2) , the new image(id2) goes in target div, and the images(id 1 ) goes back into the ul . sorry if i'm not 100% clear, english isnt my main languages – Thierry Savard Saucier Jun 18 '12 at 23:57
1

@gdoron: After the last edit the question in not exactly the same any more. It is more specific to swapping selected images between the target div and the image list,... I think. – Nope Jun 18 '12 at 23:59
@FrançoisWahl got it, I want to swap images between the list and the target. I can take 1 item from the list and put it in the target div on my own, its pretty simple, but its getting this image back at its starting position that give me problems. – Thierry Savard Saucier Jun 19 '12 at 00:12

The Alpha · Answer 4 · 2012-06-19T01:44:45.570

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.

Heera , tx , this could work, but what I wants is to make the image disapear from the list once it get clicked and get into the target div. btw, can you point me to doc or info how the .on("click") stuff works ? I never saw this in school, and I see alot of advance plugging using this methods instead of .click(function(){}); — Thierry Savard Saucier, Jun 19 '12 at 01:31
Check the update, I've changed it that you asked for, thanks. — The Alpha, Jun 19 '12 at 01:45
seems to work nicely too, thanks i'll test both and see which one i'll use — Thierry Savard Saucier, Jun 19 '12 at 14:02

How can I swap those 2 div?

4 Answers4