[jQuery] Re: Cycle Plugin Killing me
If you sort your indentation you could spot these things a lot easier!
Try this:
$(document).ready(
function() {
$('#birds').click(
function() {
$('#birds').cycle('fade');
}
);
}
);
Writing it all on one line just makes it a total swine to spot missing
braces...
On Aug 21, 6:37 am, Aaron Heimlich [EMAIL PROTECTED] wrote:
Firebug sez:
missing } after function
bodyhttp://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Line 16
I think that code should be:
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
});
Instead of
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
On 8/21/07, Mitch [EMAIL PROTECTED] wrote:
Im having a heck of a time getting the Cycle plugin to work.
Cycle is athttp://www.malsup.com/jquery/cycle/and appears to be the
best slide show out there.
Here is my incredibly simple jQuery program:
http://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Can anyone see what I have missed?
Thanks
Mitch
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]://aheimlich.freepgs.com
[jQuery] Re: Cycle Plugin Killing me
I got it to work, thank you guys, as you can see here (wait a few
seconds for the fade to occur).
http://www.whatbird.com/wwwroot/Components/cycle%20demo.html
However I cant get the special effects to work. For example this link,
which uses
$('#birds').cycle( {fx: 'scrollDown'} );
should do a scroll down:
http://www.whatbird.com/wwwroot/Components/cycle%20demo2.html
Instead nothing happens. And Firebug says there are no style rules,
but the rules are there as you can see.
Thanks for your help
On Aug 20, 10:37 pm, Aaron Heimlich [EMAIL PROTECTED]
wrote:
Firebug sez:
missing } after function
bodyhttp://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Line 16
I think that code should be:
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
});
Instead of
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
On 8/21/07, Mitch [EMAIL PROTECTED] wrote:
Im having a heck of a time getting the Cycle plugin to work.
Cycle is athttp://www.malsup.com/jquery/cycle/and appears to be the
best slide show out there.
Here is my incredibly simple jQuery program:
http://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Can anyone see what I have missed?
Thanks
Mitch
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]://aheimlich.freepgs.com- Hide quoted text -
- Show quoted text -
[jQuery] Re: Cycle Plugin Killing me
Im going to do this from now on, its a really good idea. I wish there
was some kind of program that could scan the jQuery and correct braces
or at least tell you where they are wrong.
On Aug 21, 3:17 am, [EMAIL PROTECTED] wrote:
If you sort your indentation you could spot these things a lot easier!
Try this:
$(document).ready(
function() {
$('#birds').click(
function() {
$('#birds').cycle('fade');
}
);
}
);
Writing it all on one line just makes it a total swine to spot missing
braces...
On Aug 21, 6:37 am, Aaron Heimlich [EMAIL PROTECTED] wrote:
Firebug sez:
missing } after function
bodyhttp://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Line 16
I think that code should be:
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
});
Instead of
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
On 8/21/07, Mitch [EMAIL PROTECTED] wrote:
Im having a heck of a time getting the Cycle plugin to work.
Cycle is athttp://www.malsup.com/jquery/cycle/andappears to be the
best slide show out there.
Here is my incredibly simple jQuery program:
http://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Can anyone see what I have missed?
Thanks
Mitch
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]://aheimlich.freepgs.com- Hide quoted text -
- Show quoted text -
[jQuery] Re: Cycle Plugin Killing me
Mitch,
Firebug picked up the missing bracket as soon as I loaded the original
page. Are you running FF with Firebug? If not, its definitely a lifesaver.
Rey
Mitch wrote:
Im going to do this from now on, its a really good idea. I wish there
was some kind of program that could scan the jQuery and correct braces
or at least tell you where they are wrong.
On Aug 21, 3:17 am, [EMAIL PROTECTED] wrote:
If you sort your indentation you could spot these things a lot easier!
Try this:
$(document).ready(
function() {
$('#birds').click(
function() {
$('#birds').cycle('fade');
}
);
}
);
Writing it all on one line just makes it a total swine to spot missing
braces...
On Aug 21, 6:37 am, Aaron Heimlich [EMAIL PROTECTED] wrote:
Firebug sez:
missing } after function
bodyhttp://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Line 16
I think that code should be:
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
});
Instead of
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
On 8/21/07, Mitch [EMAIL PROTECTED] wrote:
Im having a heck of a time getting the Cycle plugin to work.
Cycle is athttp://www.malsup.com/jquery/cycle/andappears to be the
best slide show out there.
Here is my incredibly simple jQuery program:
http://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Can anyone see what I have missed?
Thanks
Mitch
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]://aheimlich.freepgs.com- Hide quoted text -
- Show quoted text -
[jQuery] Re: Cycle Plugin Killing me
On Aug 21, 4:14 pm, Mitch [EMAIL PROTECTED] wrote: Im going to do this from now on, its a really good idea. I wish there was some kind of program that could scan the jQuery and correct braces or at least tell you where they are wrong. Almost every modern text editor can do this for you. To name just a small number of them: xemacs emacs vi vim kate kwrite ... there are certainly some for Windows which can do this, too. (Xemacs runs on Windows but has a pretty high learning curve.)
[jQuery] Re: Cycle Plugin Killing me
Mitch,
I've just fixed a bug in the scroll transitions. v1.8 is available
now and should fix the problem. Give me a shout if you're still
having troubles.
http://www.malsup.com/jquery/cycle/download.html
Mike
I got it to work, thank you guys, as you can see here (wait a few
seconds for the fade to occur).
http://www.whatbird.com/wwwroot/Components/cycle%20demo.html
However I cant get the special effects to work. For example this link,
which uses
$('#birds').cycle( {fx: 'scrollDown'} );
should do a scroll down:
http://www.whatbird.com/wwwroot/Components/cycle%20demo2.html
Instead nothing happens.
[jQuery] Re: Cycle Plugin Killing me
On 8/21/07, Stephan Beal [EMAIL PROTECTED] wrote: Almost every modern text editor can do this for you. To name just a small number of them: xemacs emacs vi vim kate kwrite ... there are certainly some for Windows which can do this, too. (Xemacs runs on Windows but has a pretty high learning curve.) For Windows, ultraedit is a very good choice (and it's been my favorite for years). Just another fyi :) Cheers,
[jQuery] Re: Cycle Plugin Killing me
Mike is it possible that there is still a bug or am I just doing
something really dumb here:
http://www.whatbird.com/wwwroot/Components/cycle%20demo2.html
I see the first image but no cycling. Firebug
I would like to point out something that I think would make your cycle
plugin much easier to use which is this.
This page starts out great by showing you the exact code you need to
enter.
But its not complete. You dont show everything that you need. The
container in your excellent examples is #S1. That really confused me.
In other words assuming this is correct code I believe your plugin and
every other one would be so more accessible if you just added this to
the example page
link href=../css/cycle.css rel=stylesheet type=text/css /
script src=../js/jquery.js type=text/javascript/script
script src=../js/jquery.cycle.all.js type=text/javascript/
script
script type=text/javascript
$(document).ready(function(){
/* $('#birds').cycle('fade'); */
$('#birds').cycle(
{
fx: 'scrolldown', speed: 300, timeout: 2000
}
);
});
/script
/head
body
div id=birds class=pics
img src=../images/Acadian Flycatcher_X2.jpg /
img src=../images/Acorn Woodpecker_X2.jpg /
img src=../images/Alder Flycatcher_X2.jpg //div
/body
/html
Anway thats my nickle.
Mitch
On Aug 21, 7:42 am, Mike Alsup [EMAIL PROTECTED] wrote:
Mitch,
I've just fixed a bug in the scroll transitions. v1.8 is available
now and should fix the problem. Give me a shout if you're still
having troubles.
http://www.malsup.com/jquery/cycle/download.html
Mike
I got it to work, thank you guys, as you can see here (wait a few
seconds for the fade to occur).
http://www.whatbird.com/wwwroot/Components/cycle%20demo.html
However I cant get the special effects to work. For example this link,
which uses
$('#birds').cycle( {fx: 'scrollDown'} );
should do a scroll down:
http://www.whatbird.com/wwwroot/Components/cycle%20demo2.html
Instead nothing happens.- Hide quoted text -
- Show quoted text -
[jQuery] Re: Cycle Plugin Killing me
On Aug 21, 9:32 pm, Mitch [EMAIL PROTECTED] wrote:
...
I would like to point out something that I think would make your cycle
plugin much easier to use which is this.
...
div id=birds class=pics
img src=../images/Acadian Flycatcher_X2.jpg /
img src=../images/Acorn Woodpecker_X2.jpg /
img src=../images/Alder Flycatcher_X2.jpg //div
Speaking of improvement, here's my idea:
It would be nice to be able to pass additional images to the plugin
function call. The reason for this is to support Unobtrusive JS: in
the DIV you have a single IMG file which will show up whether or not
JS is available. When the plugin is called, if it is passed an array
of image names, those images are added before the plugin does the rest
of its processing. This allows the JS users to have a cycling show and
the non-JS users to see the first image without any effects. As proof
of concept, here's some code for a trivial image cycler which
demonstrates this feature... the part to look at is the addImages
stuff:
///
// Miniature jQuery plugin for rotating through a set of images.
jQuery.fn.goshenImageFader = function( options ) {
options = jQuery.extend({
fadeOutSpeed:750,
fadeInSpeed:500,
delay:4500,
addImages:[],
forceImgAttr:null
},options);
if( options.addImages.length ) {
for( var i = 0; i options.addImages.length ; ++i ) {
var img = jQuery(img/);
img.hide()
.attr('src',options.addImages[i])
.appendTo(this);
}
}
var imgs = jQuery('img',this);
imgs.gt(0).hide();
if( options.forceImgAttr ) {
for( var k in options.forceImgAttr ) {
imgs.attr(k,options.forceImgAttr[k]);
}
}
var pos = 0;
var current = 0;
function cycle() {
function doIn(to) {
imgs.eq(to).fadeIn( options.fadeInSpeed );
}
function doOut(from,to) {
imgs.eq(from).fadeOut( options.fadeOutSpeed,
function(){doIn(to)} );
}
pos = (pos = (imgs.length-1)) ? 0 : ++pos;
doOut( current, pos );
current = pos;
};
setInterval( cycle, options.delay );
return this;
};
It's then called like so:
$('#FrontPageImageFader').goshenImageFader({
addImages:[
'/pics/homes/timberframe/thumb-50/
Kitchen_view_frontpage_byGoshens.jpg',
'/pics/homes/timberframe/WalnutCreek_Porch-
front.jpg',
'/pics/homes/timberframe/LaurelGap-Loft2.jpg'
]
});
i think a similar feature would be trivial to add to Cycle and would
help Cycle gracefully degrade in browsers w/o JS.
[jQuery] Re: Cycle Plugin Killing me
@mitch: What exactly is missing from the examples? Is it just the container ID that confused you? On the beginner demo I tried to clearly show how the markup and CSS should look but I didn't want to show that over and over for each and every demo. @Stephan: Interesting idea. For now I'm going to try to keep the Cycle Plugin as lean as possible. It's already grown much larger than I had intended. As an FYI, Cycle is for more than just images. Thanks for the feedback! Mike But its not complete. You dont show everything that you need. The container in your excellent examples is #S1. That really confused me.
[jQuery] Re: Cycle Plugin Killing me
Specifically I was confused that the ID was missing from the pics container. Besides adding an ID to the container code I suggest that your js download contain a sample of ONE effect, the images and css. Lots of people do that and what is so nice is you can open there index.htm and immediately have it working, then start modifying or insidertinto your own code. Mitch On Aug 21, 2:16 pm, Mike Alsup [EMAIL PROTECTED] wrote: @mitch: What exactly is missing from the examples? Is it just the container ID that confused you? On the beginner demo I tried to clearly show how the markup and CSS should look but I didn't want to show that over and over for each and every demo. @Stephan: Interesting idea. For now I'm going to try to keep the Cycle Plugin as lean as possible. It's already grown much larger than I had intended. As an FYI, Cycle is for more than just images. Thanks for the feedback! Mike But its not complete. You dont show everything that you need. The container in your excellent examples is #S1. That really confused me.- Hide quoted text - - Show quoted text -
[jQuery] Re: Cycle Plugin Killing me
JS: in
the DIV you have a single IMG file which will show up whether or not
JS is available
I would like it so only ONE image showed when you were viewing in your
editor instead of all images being stacked on top of each other.
On Aug 21, 12:51 pm, Stephan Beal [EMAIL PROTECTED] wrote:
On Aug 21, 9:32 pm, Mitch [EMAIL PROTECTED] wrote:
...
I would like to point out something that I think would make your cycle
plugin much easier to use which is this.
...
div id=birds class=pics
img src=../images/Acadian Flycatcher_X2.jpg /
img src=../images/Acorn Woodpecker_X2.jpg /
img src=../images/Alder Flycatcher_X2.jpg //div
Speaking of improvement, here's my idea:
It would be nice to be able to pass additional images to the plugin
function call. The reason for this is to support Unobtrusive JS: in
the DIV you have a single IMG file which will show up whether or not
JS is available. When the plugin is called, if it is passed an array
of image names, those images are added before the plugin does the rest
of its processing. This allows the JS users to have a cycling show and
the non-JS users to see the first image without any effects. As proof
of concept, here's some code for a trivial image cycler which
demonstrates this feature... the part to look at is the addImages
stuff:
///
// Miniature jQuery plugin for rotating through a set of images.
jQuery.fn.goshenImageFader = function( options ) {
options = jQuery.extend({
fadeOutSpeed:750,
fadeInSpeed:500,
delay:4500,
addImages:[],
forceImgAttr:null
},options);
if( options.addImages.length ) {
for( var i = 0; i options.addImages.length ; ++i ) {
var img = jQuery(img/);
img.hide()
.attr('src',options.addImages[i])
.appendTo(this);
}
}
var imgs = jQuery('img',this);
imgs.gt(0).hide();
if( options.forceImgAttr ) {
for( var k in options.forceImgAttr ) {
imgs.attr(k,options.forceImgAttr[k]);
}
}
var pos = 0;
var current = 0;
function cycle() {
function doIn(to) {
imgs.eq(to).fadeIn( options.fadeInSpeed );
}
function doOut(from,to) {
imgs.eq(from).fadeOut( options.fadeOutSpeed,
function(){doIn(to)} );
}
pos = (pos = (imgs.length-1)) ? 0 : ++pos;
doOut( current, pos );
current = pos;
};
setInterval( cycle, options.delay );
return this;
};
It's then called like so:
$('#FrontPageImageFader').goshenImageFader({
addImages:[
'/pics/homes/timberframe/thumb-50/
Kitchen_view_frontpage_byGoshens.jpg',
'/pics/homes/timberframe/WalnutCreek_Porch-
front.jpg',
'/pics/homes/timberframe/LaurelGap-Loft2.jpg'
]
});
i think a similar feature would be trivial to add to Cycle and would
help Cycle gracefully degrade in browsers w/o JS.
[jQuery] Re: Cycle Plugin Killing me
Besides adding an ID to the container code I suggest that your js download contain a sample of ONE effect, the images and css. Lots of people do that and what is so nice is you can open there index.htm and immediately have it working, then start modifying or insidertinto your own code. That's a good idea. Mike
[jQuery] Re: Cycle Plugin Killing me
Firebug sez:
missing } after function body
http://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Line 16
I think that code should be:
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
});
Instead of
$(document).ready(function(){$('#birds').click(function() {
$('#birds').cycle('fade');
});
On 8/21/07, Mitch [EMAIL PROTECTED] wrote:
Im having a heck of a time getting the Cycle plugin to work.
Cycle is at http://www.malsup.com/jquery/cycle/ and appears to be the
best slide show out there.
Here is my incredibly simple jQuery program:
http://www.whatbird.com/wwwroot/Components/Cycle%20Demo.html
Can anyone see what I have missed?
Thanks
Mitch
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]
http://aheimlich.freepgs.com
