Hello,

Please visit http://osdatev26.nairvijay.com  and see the block Newest Profile Pictures (second block)

This block display all new profile pictures for the selected gender. The block is defined as follows
   THe outer div is the basic one with ID as

1. <div id="newest_profpics" >
                               {include file="newest_profpics_display.tpl"}
                           </div>
   
   
   
   

THis is the one which gets updated by ajax process as the full block.
  THe inner block is defined as

1.      <div style="height:100%; width:100%;">
2.     {var page_hdr01_text="{lang mkey='newest_profpics_hdr'}"|cat:$profpicshdr02}
3.     {include file="page_hdr01.tpl"}
4.     {var linkis="profpic" }
5.     <div class="module_detail_inside">
6.         <ul id="newestprofpics_carousel" class="jcarousel-skin-tango">
7.         {foreach item="item" key=key from=$profpicsusers}
8.             <li>
9.                 <div style="padding-left:1px; padding-right:1px; width:100%;">
10.                     {if $config.newest_profpics_display=='tiny'}
11.                         {include file="smallest_profdisp.tpl"}
12.                     {else}
13.                         {include file="userresultviewsmall.tpl"}
14.                     {/if}
15.                 </div>
16.             </li>
17.         {/foreach}
18.         </ul>
19.    </div>
20. </div>

THe php program populates everything properly. THe heading portion contains the select statement for the gender which has a class 'searchselect'.

Now I am using following plugins
  Corners
  select_skin
  jcarousel.

THe rounded corners is working well albeit slight difference with the boarder pixel sizes.
THe select_skin is working in FF and Chrome after a gender is selected. But it applies the select_skin, but do not allow selection of gender after in IE8.

THe jcarousel is working in FireFox. IT loads data in Chrome but disables the PRev/Next buttons.
In IE8, it loads only first time and is not able to select.

If you can just see it, you can get the idea.

Now I have applied jquery as follows.

In the main index file I have,

1. <script type="text/javascript" src="{$DOC_ROOT}javascript/jQuery/jquery-1.4.min.js" ></script>
2. <script type="text/javascript" src="{$DOC_ROOT}javascript/jQuery/jquery.corners.min.js" ></script>
3. <script type="text/javascript" src="{$DOC_ROOT}javascript/jQuery/jquery.select_skin.js" ></script>
4. <script type="text/javascript" src="{$DOC_ROOT}javascript/jQuery/jquery.jcarousel.pack.js" ></script>
5. <!--[if lt IE 8]>
6.  <script type="text/javascript" src="{$DOC_ROOT}javascript/IE8.js" ></script>
7.  <script type="text/javascript" src="{$DOC_ROOT}javascript/ie7-squish.js"></script>
8. <![endif]-->

and applied jquery definition as

1. <script type="text/javascript">
2. $(document).ready(function(){
3.     $('.rounded').corners();
4.     $("select").select_skin();
5.     $('#newestprofpics_carousel').jcarousel({
6.            visible:4
7.           });
8.     $("#randomprof_carousel").jcarousel({
9.            visible:4
10.           });
11.     $("#newestprofiles_carousel").jcarousel({
12.            visible:4
13.           });
14.     $('#iplocation_prof_carousel').jcarousel({
15.        visible:4
16.     });
17.     $('#featuredprofiles_carousel').jcarousel({
18.        visible:4
19.     });
20.     $('#recentactiveprofiles_carousel').jcarousel({
21.        visible:4
22.     });
23. })
24. </script>

I have defined ajax loading as

1. var osDatehtt
2. function osDatehandleResponse()
3. {
4.    if (osDatehttp.readyState == 4) {
5.       if (osDatehttp.status == 200) {
6.          var response = osDatehttp.responseText;    
7.         if (response != 'undefined' && response != '') {
8.             if (response.indexOf('|||') != -1) {
9.                var update = response.split('|||');
10.                for (var i = 1; i<update.length; i++) {
11.           if (update[i] != 'undefined' && update[i] != '') {
12.                      var up2 = update[i].split('|:|');
13.                      if (up2[0] != 'undefined' && up2[0] != ''
14.                      && document.getElementById(up2[0])) {
15.                         var fld = "#"+up2[0];
16.                 $(fld).html(up2[1]);
17.             afterLoads(up2[0]);
18.              }
19.                   }
20.                }       
21.             }
22.          }
23.       }
24.    }
25. }
26. function afterLoads(sect){
27.     if (sect == 'newest_profpics') {
28.         $('#newestprofpics_carousel').jcarousel({
29.            visible:4
30.         });       
31.         $('#newest_profpics .searchselect').select_skin();
32.         $('#newest_profpics .rounded').corners();
33.     };
34. }

I have done this way as .bind and .live failed to update. THe funniest part I noticed is in Chrome, the loading function osDatehandleResponse() is being executed twice which may be effecting the prev/next keys. In Fire Fox, everything is working well. In IE8, the select_list is getting applied but stops from selecting further.

One more thing I noticed in IE8. If I change the afterLoads() function as

1. function afterLoads(sect){
2.     if (sect == 'newest_profpics') {
3.         $('#newest_profpics .searchselect').select_skin();
4.         $('#newestprofpics_carousel').jcarousel({
5.            visible:4
6.         });       
7.         $('#newest_profpics .rounded').corners();
8.     };
9. }

This gives the size error in jcarousel, but displays properly.

I really appreciate any inputs and guidance to solve this issue.

Thanks