[jQuery] Re: placing cycle plugin at root document level to use on content loaded via AJAX
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 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>';
> return inputHtml ;
> }});
> }
>
> [/code]
> On Mar 3, 7:16 pm, kevinm 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( ' > src="images/
> > ajaxLoader.gif" />' ).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
>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>';
return inputHtml ;
}
});
}
[/code]
On Mar 3, 7:16 pm, kevinm 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( '' ).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
