Javascript problem moving images from one div to another

Ranch Hand

Posts: 276

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script type="text/javascript">
        
        function moveSelectedOptions(from,to) {
            var imgs = from.getElementsByTagName("img");
            var moveImgsArray = new Array();
            var deleteImgsArray = new Array();
            var counter = 0;
            
            for (var i=0; i < imgs.length; i++) {
                var img = imgs[i];
                var imgId = img.id;
                
                //alert("Id:" + imgId + " \n " + "Source : " + img.src + " \n " + "Height : " + img.height + " \n "  +  "Width: "  + img.width);
                
                var imgCheckboxId = imgId.substring(0, imgId.lastIndexOf("_", imgId.length));

var imgCheckbox = document.getElementById(imgCheckboxId);
                alert("imgCheckbox.checked ? " + (imgCheckbox.checked) );
                if (imgCheckbox.checked) {
                    var tmpImg = new Image();
                    tmpImg.src = img.src;
                    tmpImg.border = img.border;
                    tmpImg.height = img.height;
                    tmpImg.width = img.width;

moveImgsArray[counter] = tmpImg;

deleteImgsArray[counter] = img;
                    counter++; 
                    
                }
            }

if ((moveImgsArray.length > 0) && (deleteImgsArray.length > 0)) {
                addRemoveImages(to, true, moveImgsArray);
                addRemoveImages(from, false, deleteImgsArray);
            } else {
                alert("moveImgsArray && deleteImgsArray both are empty");
            }
            
        }
        
        /*
            addRemoveImages(div, flag)
                div is the DIV to/from which the images are to be added/removed
                flag : value true/false to indicate that whether to add/remove the images respectively
                imgsArray : the array consisting Image objects to be added/removed
        */ 
        function addRemoveImages(div, flag, imgsArray) {
            if (!div) {
                return;
            }
            
            if (imgsArray.length > 0) {
                if (flag) {
                    var imgs = div.getElementsByTagName("img");
                    if (imgs.length <= 0) {
                        div.innerHTML = "";
                    }

for (var k=0; k < imgsArray.length; k++) {
                        var img = imgsArray[k];
                        img.id = "c" + (k + 1) + "_" + (k + 1);
                        
                        // IE requires a checkbox to be made differently  
                        try {  
                              var cb = document.createElement("<input type=\"checkbox\" id=" + "c" + (k + 1) + ">");  
                              div.appendChild(cb);
                        }  
                        catch (e) {  
                              var cb = document.createElement("input");  
                              cb.type = "checkbox";  
                              cb.id = "c" + (k + 1);
                              div.appendChild(cb);
                         }

div.appendChild(img);
                        
                        imgs = div.getElementsByTagName("img");
                        var noOfImages = imgs.length;
                        if (noOfImages > 0 && ((noOfImages % 2) == 0) ) {
                            div.appendChild(document.createElement("br"));
                        }
                    }
                }
                else {
                    for (var t = imgsArray.length -1 ; t >= 0; t--) {
                        var img = imgsArray[t];
                        var imgId = img.id;
                        var imgChkBoxId = imgId.substring(0, imgId.lastIndexOf("_", imgId.length));
                        div.removeChild(document.getElementById(imgChkBoxId));
                        div.removeChild(img);
                    }
                }
            }
        }
  </script>
 </HEAD>

<BODY>

<form>
        <table border="0">
             <tbody>
                 <tr>
                     <td>
                         <div id="srcImgDiv" name="srcImgDiv" style="width:300px;height:300px;white-space: nowrap;">
                             <input type="checkbox" id="c1" name="c1" />
                             <img id="c1_1" border="no"   />
 
                             <input type="checkbox" id="c2" name="c2" />
                             <img id="c2_2" border="no"   />
                             
 
                             <input type="checkbox" id="c3" name="c3" />
                             <img id="c3_3" border="no"   />
 
                             <input type="checkbox" id="c4" name="c4" />
                             <img id="c4_4" border="no"   />
 
                             
 
                             <input type="checkbox" id="c5" name="c5" />
                             <img id="c5_5" border="no"   />
 
                         </div>
                     </td>
                     <td  >
                         <input type="button" onclick="moveSelectedOptions(document.getElementById('srcImgDiv'),document.getElementById('destImgDiv'))" value=">>" name="right"/><br/><br/>
                          <input type="button" onclick="moveSelectedOptions(document.getElementById('destImgDiv'),document.getElementById('srcImgDiv'))" value="<<" name="left"/><br/><br/>
                     </td>
                      <td>
                         <div id="destImgDiv" name="destImgDiv" style="width:300px;height:300px;white-space: nowrap;display: block">
                         <div>
                      </td>
                  </tr>
             </tbody>
         </table>
    </form>
 </BODY>
</HTML>

Above is my code to move images from one div to another.The functionality is working fine when moving the images from
"srcImgDiv" to "destImgDiv".But when trying to move images back from "destImgDiv" to "srcImgDiv" following code snippet
is found to be create the problem (written in function moveSelectedOptions(from,to))

due to which the required array is not getting populated.

Though I am checking the checkbox before the image imgCheckbox.checked is returning false.

Can anybody please pinpoint where and why the problem is occuring?

Thanks,
Jignesh

Regards,
Jignesh

The Art Of Life Is To Know When To Be Useless And When To Be Useful - CHUANG TZU

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Wouldn't you like to replace all that code with something like:

?

Life is too short to write Javascript without a library. Check out jQuery or one of the other JavaScript libraries to make such things a breeze.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

a wee bit from the empire

Clean our rivers and oceans from home

https://www.kickstarter.com/projects/paulwheaton/willow-feeders