[jQuery] Re: placing cycle plugin at root document level to use on content loaded via AJAX

2009-03-03 Thread pedalpete 

From what I can tell by the code you've included, your abilities here
are much better than mine,
but I do load content via Ajax into my cycle,
What I had to do was to stop the cycle, empty, then replace and
restart.
My code looks like this
[code]
 success: function(response){
jQuery('div#popForecast').cycle('stop').empty();
jQuery('div#cyclePager').empty();
jQuery('div#popForecast').html(response);
var location=jQuery('input#searchTxt').val();
jQuery('div#popForecast span.location').html(location);


 startCycle();
  }

 function startCycle(){
  jQuery('div#popForecast').cycle({
cleartype:  1,
 timeout:  9000,
 speed: 2000,
 pager: 'div#cyclePager',
 fx: 'fade',
  pause: 1,
  sync: 0,
pauseOnPagerHover: 1,
 pagerAnchorBuilder: function(idx, slide) {
 var inputHtml='a href=#img class=inactive src=../hwImages/
inactivePager.png\/img class=active src=../hwImages/
activePager.png\/\/a';
return inputHtml ;
}
});
}
[/code]
On Mar 3, 7:16 pm, kevinm sonicd...@gmail.com wrote:
 I want to relocate my cycle plugin call from the file that is loaded
 via an AJAX call to the parent file. I know I can't just copy, but not
 sure what I need to do.

 to illustrate;

 put

 $('#fcycle').cycle({
                 fx:     'fade',
                 timeout: 0,
                 speed: 'slow' ,
                 pager: '#qm0',
                 next: '#next',
                 prev: '#prev',
                 pagerAnchorBuilder: function(idx, slide) {
             // return sel string for existing anchor
             return '#qm0 li:eq(' + (idx) + ') a';
         }

         });

 in my index.html

 then I do this to load content

 $sections.click(function(){
                 alert('test');
                 if( last != this ){ // let's avoid needless requests
                         var url = '' + this.hash.slice(1) + '.cfm';
                         $(this).html( 'div class=loadingimg src=images/
 ajaxLoader.gif //div' ).load( url, function(){
                                 this.scrollLeft = 0;//scroll back to the left
                         });
                 }
                 last = this;
                 this.blur(); // Remove the awful outline

                 return false;
         });

 and I want the cycle function to affect content that is loaded (this)

 Thanks

[jQuery] Re: placing cycle plugin at root document level to use on content loaded via AJAX

2009-03-03 Thread kevinm 

Well of course, shortly after I posted I solved the problem.

I am using livequery for stuff and reread the documentation and saw
could use with functions so I wrote this

$('#fcycle').livequery( function(){
$(this).cycle({
fx: 'fade',
timeout: 0,
speed: 'slow' ,
pager: '#qm0',
next: '#next',
prev: '#prev',
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '#qm0 li:eq(' + (idx) + ') a';
};
});
});


This works quite well. Now that said I do run into a new issue with
the pagerAnchorBuilder call.  that function does not get ran
correctly. so need to figure that out now.

On Mar 3, 11:18 pm, pedalpete p...@hearwhere.com wrote:
 From what I can tell by the code you've included, your abilities here
 are much better than mine,
 but I do load content via Ajax into my cycle,
 What I had to do was to stop the cycle, empty, then replace and
 restart.
 My code looks like this
 [code]
  success: function(response){
                 jQuery('div#popForecast').cycle('stop').empty();
                 jQuery('div#cyclePager').empty();
                 jQuery('div#popForecast').html(response);
                 var location=jQuery('input#searchTxt').val();
                 jQuery('div#popForecast span.location').html(location);

                  startCycle();
       }

          function startCycle(){
           jQuery('div#popForecast').cycle({
     cleartype:  1,
      timeout:  9000,
      speed: 2000,
      pager: 'div#cyclePager',
          fx: 'fade',
           pause:         1,
           sync: 0,
     pauseOnPagerHover: 1,
      pagerAnchorBuilder: function(idx, slide) {
      var inputHtml='a href=#img class=inactive src=../hwImages/
 inactivePager.png\/img class=active src=../hwImages/
 activePager.png\/\/a';
         return inputHtml ;
     }});
 }

 [/code]
 On Mar 3, 7:16 pm, kevinm sonicd...@gmail.com wrote:

  I want to relocate my cycle plugin call from the file that is loaded
  via an AJAX call to the parent file. I know I can't just copy, but not
  sure what I need to do.

  to illustrate;

  put

  $('#fcycle').cycle({
                  fx:     'fade',
                  timeout: 0,
                  speed: 'slow' ,
                  pager: '#qm0',
                  next: '#next',
                  prev: '#prev',
                  pagerAnchorBuilder: function(idx, slide) {
              // return sel string for existing anchor
              return '#qm0 li:eq(' + (idx) + ') a';
          }

          });

  in my index.html

  then I do this to load content

  $sections.click(function(){
                  alert('test');
                  if( last != this ){ // let's avoid needless requests
                          var url = '' + this.hash.slice(1) + '.cfm';
                          $(this).html( 'div class=loadingimg 
  src=images/
  ajaxLoader.gif //div' ).load( url, function(){
                                  this.scrollLeft = 0;//scroll back to the 
  left
                          });
                  }
                  last = this;
                  this.blur(); // Remove the awful outline

                  return false;
          });

  and I want the cycle function to affect content that is loaded (this)

  Thanks