making a carousel optional?

[geoff]

Hello

I am trying to make the running of a carousel of images optional (for
those who are annoyed by moving images!).

If you look at

http://www.micro-active.com/styles/style1/index.htm

you will see that it runs automatically.

Looking at

http://www.micro-active.com/styles/style1/index-test.htm

there is the start carousel button.

I am using document.getElementById('carouse').innerHTML to load an
image into <div id='carousel'> when the page loads.

Then startCarousel() puts the markup for the carousel into the div and
then runs goCarousel() which starts the carousel running.

Problem is - the carousel runs the first image and then stops!

Any ideas please!

Cheers

Geoff

 

[Gregor Kofler]

Am 2011-04-29 09:15, (e-mail address removed) meinte:

Hello

I am trying to make the running of a carousel of images optional (for
those who are annoyed by moving images!).

If you look at

http://www.micro-active.com/styles/style1/index.htm

you will see that it runs automatically.

Looking at

http://www.micro-active.com/styles/style1/index-test.htm

there is the start carousel button.

I am using document.getElementById('carouse').innerHTML to load an
image into <div id='carousel'> when the page loads.

Then startCarousel() puts the markup for the carousel into the div and
then runs goCarousel() which starts the carousel running.

Problem is - the carousel runs the first image and then stops!

Any ideas please!

So your

$(document).ready(function() {
$("#carousel").featureCarousel({
largeFeatureWidth: 400,
largeFeatureHeight: 250,
smallFeatureWidth: 80,
smallFeatureHeight: 50,
trackerIndividual: false,
trackerSummation: false
});
});

doesn't work as intended? And you really think that someone here is
willing to dig through some minified jQuery plugin script?

I suppose some jQuery forum is a better place to ask (whether the
answers will be of any help is a different matter). Another option would
be the documentation of the plugin - I assume there is a proper API
documentation.

Gregor

 

[geoff]

Am 2011-04-29 09:15, (e-mail address removed) meinte:

So your

$(document).ready(function() {
$("#carousel").featureCarousel({
largeFeatureWidth: 400,
largeFeatureHeight: 250,
smallFeatureWidth: 80,
smallFeatureHeight: 50,
trackerIndividual: false,
trackerSummation: false
});
});

doesn't work as intended? And you really think that someone here is
willing to dig through some minified jQuery plugin script?

I suppose some jQuery forum is a better place to ask (whether the
answers will be of any help is a different matter). Another option would
be the documentation of the plugin - I assume there is a proper API
documentation.

Gregor

Gregor,

No!! I wouldn't dream of asking that!

Using

http://www.micro-active.com/styles/style1/index-test2.htm

without the initial image and having the carousel html markup in the
body and having a button to run goCarousel(), the carousel works as it
should.

I was therefore hoping that there was a simple error or two in my
javascript logic in

http://www.micro-active.com/styles/style1/index-test.htm

Cheers

Geoff

 

[S.T.]

Looking at

http://www.micro-active.com/styles/style1/index-test.htm

there is the start carousel button.

I am using document.getElementById('carouse').innerHTML to load an
image into<div id='carousel'> when the page loads.

Then startCarousel() puts the markup for the carousel into the div and
then runs goCarousel() which starts the carousel running.

Problem is - the carousel runs the first image and then stops!

Any ideas please!

Cheers

Geoff

It's a little confusing to look at right now. Maybe a test page that
strips out all the HTML, scripts, etc aside from what's needed for this
carousel feature.

Couple things to look at to start:

You're nesting DIVs with the same ID's inside each other with this line:

document.getElementById('carousel').innerHTML = "<div id=\"carousel\">..

You don't want to do that as you're effectively saying "inside the
#carousel DIV insert another #carousel DIV". Strip the outside <div
id=carousel></div> from that innerHTML string.

Also you're loading the jQuery script four times which, while probably
not hurting anything, isn't needed (and may well cause heart attacks te
a few of the anti-jQuery zealots in this newsgroup). Load it one time
before any of the jQuery specific plug-in scripts.

 

[geoff]

It's a little confusing to look at right now. Maybe a test page that
strips out all the HTML, scripts, etc aside from what's needed for this
carousel feature.

Couple things to look at to start:

You're nesting DIVs with the same ID's inside each other with this line:

document.getElementById('carousel').innerHTML = "<div id=\"carousel\">..

You don't want to do that as you're effectively saying "inside the
#carousel DIV insert another #carousel DIV". Strip the outside <div
id=carousel></div> from that innerHTML string.

Brilliant!! That was the key error - it'w working now.

Also you're loading the jQuery script four times which, while probably
not hurting anything, isn't needed (and may well cause heart attacks te
a few of the anti-jQuery zealots in this newsgroup). Load it one time
before any of the jQuery specific plug-in scripts.

OK!

Cheers

Geoff

 

[geoff]

You're nesting DIVs with the same ID's inside each other with this line:

document.getElementById('carousel').innerHTML = "<div id=\"carousel\">..

You don't want to do that as you're effectively saying "inside the
#carousel DIV insert another #carousel DIV". Strip the outside <div
id=carousel></div> from that innerHTML string.

I have this running now at

http://www.micro-active.com/styles/style8/index.htm

Thanks again!

Geoff

 

[Gregor Kofler]

Am 2011-04-29 19:22, (e-mail address removed) meinte:

I have this running now at

http://www.micro-active.com/styles/style8/index.htm

Doesn't work here. FF4 - once started the opacity of the caption div
changes frequently and style properties of the first image change, but
the other images never show up.

Since you made a "same-id-twice" error before: The (static) markup still
has plenty of errors: several divs that are not closed properly - all of
them in the carousel markup.

Gregor

 

[geoff]

Am 2011-04-29 19:22, (e-mail address removed) meinte:


Doesn't work here. FF4 - once started the opacity of the caption div
changes frequently and style properties of the first image change, but
the other images never show up.

Since you made a "same-id-twice" error before: The (static) markup still
has plenty of errors: several divs that are not closed properly - all of
them in the carousel markup.

Gregor

apologies Gregor - I got into a bit of a tangle but the

http://www.micro-active.com/styles/style8/index.htm

shows no errors in W3C Validator and the carousel runs/stops using the
buttons.

If you have the patience please take another look and let me know if
OK.

I have checked using Firefox 4.0.1 but the button does not start he
carousel with IE9 ??

Geoff

 

[Gregor Kofler]

Am 2011-04-29 21:34, (e-mail address removed) meinte:

I have checked using Firefox 4.0.1 but the button does not start he
carousel with IE9 ??

Perhaps a cross-browser issue of the cross-browser library? (Or the
plugin building on top of this library.)

Gregor

 

[SAM]

Le 29/04/11 14:18, (e-mail address removed) a écrit :

I was therefore hoping that there was a simple error or two in my
javascript logic in

http://www.micro-active.com/styles/style1/index-test.htm

I can't say if it is a JS or HTML error (I think that's html)
but on that page (in that file) are missing your images

<div id="carousel">
<div class="carousel-feature">
<a href="sound.htm">
<img class="carousel-image"
src="../../assets/images/c-sound3.jpg" alt="Image Caption">
</a>
<div class="carousel-caption">
<p style

and so on in the div "carousel-container"


anyway it's of no importance
.... the page :
<http://www.micro-active.com/styles/style1/sound.htm>
doesn't work for me.

 

[geoff]

Le 29/04/11 14:18, (e-mail address removed) a écrit :

I can't say if it is a JS or HTML error (I think that's html)
but on that page (in that file) are missing your images

<div id="carousel">
<div class="carousel-feature">
<a href="sound.htm">
<img class="carousel-image"
src="../../assets/images/c-sound3.jpg" alt="Image Caption">
</a>
<div class="carousel-caption">
<p style

and so on in the div "carousel-container"

I think this was when I was changing things - please see

http://www.micro-active.com/styles/style1/index.htm

this should be OK.

anyway it's of no importance
... the page :
<http://www.micro-active.com/styles/style1/sound.htm>
doesn't work for me.

http://www.micro-active.com/styles/style1/sound.htm

should work now.

Do let me know if it doesn't work for you!

Cheers

Geoff

 

[geoff]

Am 2011-04-29 21:34, (e-mail address removed) meinte:


Perhaps a cross-browser issue of the cross-browser library? (Or the
plugin building on top of this library.)

Gregor

Gregor,

The error has disappeared now that I have used a div within a div

<div id="carousel"><div id="carousel-pic"></div></div>

instead of using the same div for both the image and the carousel.

the inner div is used for the image displayed before the carousel is
started.

see

http://www.micro-active.com/styles/style8/index.htm

which works in the latest IE, FF, Chrome, Opera and Safari browsers.

Cheers

Geoff