jQuery Forum

I have a album Page, with 4 images per page, images are displayed in a container div. This container has 3 DIV's, top one is NAME of image DIV, next ones is IMAGE DIV and the 3rd one is DESC DIV

I wanna be able to Toggle/Select the Location of the NAME or DESC to be either be above or below images for all 4 images

I like example one better, but have not been able to get it to work with multiple containers

EXAMPLE ONE
this example does not use absolute position but i can only get it to work if I remove one of the Containers
http://jsfiddle.net/rudyten/ffGZk/3/

1. $('.btn1').click(function () {
       var loc = "AB";
       setLoc(loc);
   });
   $('.btn2').click(function () {
       var loc = "BA";
       setLoc(loc);
   });
   $('.btn3').click(function () {
       var loc = "AA";
       setLoc(loc);
   });
   $('.btn4').click(function () {
       var loc = "BB";
       setLoc(loc);
   });
   
   function setLoc(loc) {
       if (loc == "AB") {
           $(".image").insertAfter(".name");
           $(".desc").insertAfter(".image");
       }
   
       if (loc == "BA") {
           $(".image").insertAfter(".desc");
           $(".name").insertAfter(".image");
       }
   
       if (loc == "AA") {
           $(".desc").insertAfter(".name");
           $(".image").insertAfter(".desc");
       }
   
       if (loc == "BB") {
           $(".name").insertAfter(".image");
           $(".desc").insertAfter(".name");
       }
   }

Am Trying to Resize AFTER INITIAL
The TITLE piece is working fine
The WIDTH piece is NOT

1. $formTitle = "Hello World";
2. If ($myPage == "page1")
3.       $myWidth = 400;
4. else
5.       $myWidth = 800;
6. 
   
7.  <script type=\"text/javascript\">
8.      $(function() {
9.          $('#divId', parent.document).prev().find('.ui-dialog-title').html('$formTitle');
10.          $('#divId').dialog('option', 'width', $myWidth );              
11.      });
12.  </script>